export function employeeNpsSurvey(form: FormTs) {
// Employee NPS Survey - eNPS with driver analysis
// Demonstrates: RatingScale (NPS), MatrixQuestion, EmojiRating, SuggestionChips, dynamic styling, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Employee Voice Survey',
computedValue: () => 'Your honest feedback shapes our workplace culture',
customStyles: {
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
form.addRow(row => {
row.addTextPanel('anonymity', {
computedValue: () => '🔒 This survey is completely anonymous. Your responses cannot be traced back to you.',
customStyles: {
backgroundColor: '#f1f5f9',
padding: '12px',
borderRadius: '8px',
fontSize: '14px',
textAlign: 'center',
fontStyle: 'italic'
}
});
});
// ============================================
// SECTION 1: Employee NPS Score
// ============================================
const enpsSection = form.addSubform('enpsSection', {
title: 'Employee Net Promoter Score',
customStyles: () => {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
enpsSection.addRow(row => {
row.addRatingScale('enpsScore', {
preset: 'nps',
label: 'How likely are you to recommend our company as a place to work?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
isRequired: true
});
});
// Dynamic follow-up based on eNPS category
enpsSection.addRow(row => {
row.addTextarea('enpsReason', {
label: () => {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
switch (category) {
case 'promoter': return "Fantastic! What makes you proud to work here?";
case 'passive': return "Thanks! What would make this a 9 or 10 for you?";
case 'detractor': return "We appreciate your honesty. What needs to change?";
default: return 'Tell us more about your rating';
}
},
placeholder: () => {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
if (category === 'promoter') return 'Share what you love about working here...';
if (category === 'passive') return 'Help us understand how we can do better...';
if (category === 'detractor') return 'Your feedback is crucial for improvement...';
return 'Your thoughts...';
},
rows: 3,
autoExpand: true,
isVisible: () => enpsSection.ratingScale('enpsScore')?.value() !== null
});
});
// ============================================
// SECTION 2: Current Mood
// ============================================
const moodSection = form.addSubform('moodSection', {
title: 'How Are You Feeling?',
isVisible: () => enpsSection.ratingScale('enpsScore')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
moodSection.addRow(row => {
row.addEmojiRating('currentMood', {
label: 'How would you describe your current work satisfaction?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Engagement Drivers (MatrixQuestion)
// ============================================
const driversSection = form.addSubform('driversSection', {
title: 'What Drives Your Engagement?',
isVisible: () => enpsSection.ratingScale('enpsScore')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
driversSection.addRow(row => {
row.addMatrixQuestion('engagementDrivers', {
label: 'Please rate your satisfaction with the following aspects:',
rows: [
{ id: 'management', label: 'Quality of management/leadership', isRequired: true },
{ id: 'growth', label: 'Career growth opportunities', isRequired: true },
{ id: 'compensation', label: 'Compensation and benefits', isRequired: false },
{ id: 'worklife', label: 'Work-life balance', isRequired: false },
{ id: 'culture', label: 'Company culture and values', isRequired: false },
{ id: 'team', label: 'Team collaboration', isRequired: false },
{ id: 'recognition', label: 'Recognition and appreciation', isRequired: false },
{ id: 'purpose', label: 'Meaningful work', isRequired: false }
],
columns: [
{ id: '1', label: 'Very Dissatisfied' },
{ id: '2', label: 'Dissatisfied' },
{ id: '3', label: 'Neutral' },
{ id: '4', label: 'Satisfied' },
{ id: '5', label: 'Very Satisfied' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Positive Highlights (for Promoters/Passives)
// ============================================
const highlightsSection = form.addSubform('highlights', {
title: 'What Do You Value Most?',
isVisible: () => {
const score = enpsSection.ratingScale('enpsScore')?.value();
return score !== null && score !== undefined && score >= 6;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
highlightsSection.addRow(row => {
row.addSuggestionChips('bestAspects', {
label: 'Select what you value most about working here (up to 4)',
suggestions: [
{ id: 'people', name: 'Great colleagues' },
{ id: 'flexibility', name: 'Work flexibility' },
{ id: 'leadership', name: 'Good leadership' },
{ id: 'learning', name: 'Learning opportunities' },
{ id: 'impact', name: 'Meaningful impact' },
{ id: 'benefits', name: 'Benefits package' },
{ id: 'culture', name: 'Inclusive culture' },
{ id: 'innovation', name: 'Innovation focus' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Areas for Improvement (for Passives/Detractors)
// ============================================
const improvementsSection = form.addSubform('improvements', {
title: 'What Should We Improve?',
isVisible: () => {
const score = enpsSection.ratingScale('enpsScore')?.value();
return score !== null && score !== undefined && score <= 7;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
improvementsSection.addRow(row => {
row.addSuggestionChips('improvementAreas', {
label: 'Select priority improvement areas',
suggestions: [
{ id: 'communication', name: 'Communication' },
{ id: 'management', name: 'Management' },
{ id: 'growth', name: 'Career paths' },
{ id: 'compensation', name: 'Pay/Benefits' },
{ id: 'workload', name: 'Workload' },
{ id: 'recognition', name: 'Recognition' },
{ id: 'tools', name: 'Tools/Resources' },
{ id: 'processes', name: 'Processes' }
],
alignment: 'center'
});
});
improvementsSection.addSpacer();
improvementsSection.addRow(row => {
row.addTextarea('improvementDetails', {
label: 'Please elaborate on what needs to improve',
placeholder: 'Be specific - your feedback helps us prioritize changes...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Additional Context
// ============================================
const contextSection = form.addSubform('contextSection', {
title: 'A Bit More Context',
isVisible: () => enpsSection.ratingScale('enpsScore')?.value() !== null
});
contextSection.addRow(row => {
row.addDropdown('tenure', {
label: 'How long have you been with the company?',
options: [
{ id: 'less-6', name: 'Less than 6 months' },
{ id: '6-12', name: '6-12 months' },
{ id: '1-2', name: '1-2 years' },
{ id: '2-5', name: '2-5 years' },
{ id: '5+', name: 'More than 5 years' }
],
placeholder: 'Select tenure'
}, '1fr');
row.addDropdown('department', {
label: 'Department (optional)',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'product', name: 'Product' },
{ id: 'design', name: 'Design' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'sales', name: 'Sales' },
{ id: 'hr', name: 'Human Resources' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'support', name: 'Customer Support' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select department'
}, '1fr');
});
contextSection.addRow(row => {
row.addThumbRating('stayIntent', {
label: 'Do you see yourself working here in 12 months?',
showLabels: true,
upLabel: 'Yes, likely',
downLabel: 'Uncertain/No',
alignment: 'center',
size: 'lg'
});
});
// Follow-up for uncertain stay intent
contextSection.addRow(row => {
row.addTextarea('leaveReason', {
label: 'What would make you consider leaving?',
placeholder: 'Help us understand retention risks...',
rows: 2,
autoExpand: true,
isVisible: () => contextSection.thumbRating('stayIntent')?.value() === 'down'
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => enpsSection.ratingScale('enpsScore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const score = enpsSection.ratingScale('enpsScore')?.value();
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
const mood = moodSection.emojiRating('currentMood')?.value();
const bestAspects = highlightsSection.suggestionChips('bestAspects')?.value() || [];
const improvements = improvementsSection.suggestionChips('improvementAreas')?.value() || [];
const stayIntent = contextSection.thumbRating('stayIntent')?.value();
if (score === null || score === undefined) return '';
let emoji = '';
if (category === 'promoter') emoji = '🌟';
else if (category === 'passive') emoji = '💭';
else emoji = '⚠️';
let summary = `${emoji} eNPS Feedback Summary\n`;
summary += `${'═'.repeat(25)}\n\n`;
summary += `📊 eNPS Score: ${score}/10\n`;
summary += `📈 Category: ${category?.charAt(0).toUpperCase()}${category?.slice(1)}\n`;
if (mood) {
const moodLabels: Record<string, string> = {
'very-bad': '😢 Very Dissatisfied',
'bad': '😕 Dissatisfied',
'neutral': '😐 Neutral',
'good': '😊 Satisfied',
'excellent': '😃 Very Satisfied'
};
summary += `\n${moodLabels[mood] || mood}\n`;
}
if (bestAspects.length > 0) {
summary += `\n✨ Values: ${bestAspects.length} aspects highlighted`;
}
if (improvements.length > 0) {
summary += `\n📋 Improvements: ${improvements.length} areas flagged`;
}
if (stayIntent) {
summary += `\n\n🎯 12-month outlook: ${stayIntent === 'up' ? 'Likely to stay' : 'Retention risk'}`;
}
return summary;
},
customStyles: () => {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (category === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return baseStyles;
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Anonymous Feedback',
isVisible: () => enpsSection.ratingScale('enpsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Voice!',
message: 'Your anonymous feedback has been recorded. We review all responses to make our workplace better for everyone.'
});
}