export function recommendationDriverSurvey(form: FormTs) {
// Recommendation Driver Survey - Understand WHY customers recommend (or don't)
// Demonstrates: RatingScale (NPS), MatrixQuestion, StarRating, ThumbRating, SuggestionChips, conditional logic
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Help Us Understand Your Experience',
computedValue: () => 'Your insights help us deliver what matters most to you.',
customStyles: {
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
color: 'white',
padding: '28px',
borderRadius: '16px',
textAlign: 'center',
fontSize: '15px'
}
});
});
// ============================================
// SECTION 1: NPS Score
// ============================================
const npsSection = form.addSubform('npsSection', {
title: 'Likelihood to Recommend',
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#ecfdf5', padding: '20px', borderRadius: '12px' };
if (category === 'passive') return { backgroundColor: '#fffbeb', padding: '20px', borderRadius: '12px' };
if (category === 'detractor') return { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '12px' };
return { padding: '20px', borderRadius: '12px', border: '2px dashed #e2e8f0' };
}
});
npsSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend us to a friend or colleague?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
isRequired: true
});
});
// ============================================
// SECTION 2: Driver Analysis Matrix
// ============================================
const driversSection = form.addSubform('driversSection', {
title: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'What Makes Us Great?';
if (category === 'detractor') return 'Where Did We Fall Short?';
return 'Rate Your Experience';
},
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '20px', borderRadius: '12px' }
});
driversSection.addRow(row => {
row.addMatrixQuestion('driverRatings', {
label: 'How would you rate us on these factors?',
rows: [
{ id: 'quality', label: 'Product/Service Quality', isRequired: true },
{ id: 'value', label: 'Value for Money', isRequired: true },
{ id: 'support', label: 'Customer Support', isRequired: false },
{ id: 'ease', label: 'Ease of Use', isRequired: true },
{ id: 'reliability', label: 'Reliability', isRequired: true },
{ id: 'innovation', label: 'Innovation', isRequired: false }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Top Recommendation Drivers (Promoters)
// ============================================
const promoterSection = form.addSubform('promoterSection', {
title: 'Top Reasons to Recommend',
isVisible: () => npsSection.ratingScale('npsScore')?.npsCategory() === 'promoter',
customStyles: { backgroundColor: '#ecfdf5', padding: '20px', borderRadius: '12px' }
});
promoterSection.addRow(row => {
row.addSuggestionChips('topReasons', {
label: 'Select the top 3 reasons you would recommend us:',
suggestions: [
{ id: 'quality', name: 'Outstanding quality' },
{ id: 'service', name: 'Excellent service' },
{ id: 'value', name: 'Great value' },
{ id: 'reliable', name: 'Very reliable' },
{ id: 'easy', name: 'Easy to use' },
{ id: 'innovative', name: 'Innovative solutions' },
{ id: 'trust', name: 'Trustworthy brand' },
{ id: 'responsive', name: 'Fast & responsive' }
],
min: 1,
max: 3,
alignment: 'center'
});
});
promoterSection.addRow(row => {
row.addStarRating('wouldBuyAgain', {
label: 'How likely are you to purchase from us again?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 4: Improvement Areas (Passives/Detractors)
// ============================================
const improvementSection = form.addSubform('improvementSection', {
title: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
return category === 'detractor' ? 'What Went Wrong?' : 'What Could Be Better?';
},
isVisible: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
return category === 'passive' || category === 'detractor';
},
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'detractor') return { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '12px' };
return { backgroundColor: '#fffbeb', padding: '20px', borderRadius: '12px' };
}
});
improvementSection.addRow(row => {
row.addCheckboxList('issueAreas', {
label: 'Which areas need improvement? (Select all that apply)',
options: [
{ id: 'quality', name: 'Product/service quality issues' },
{ id: 'price', name: 'Pricing too high' },
{ id: 'support', name: 'Poor customer support' },
{ id: 'usability', name: 'Difficult to use' },
{ id: 'reliability', name: 'Reliability problems' },
{ id: 'communication', name: 'Poor communication' },
{ id: 'speed', name: 'Slow delivery/response' },
{ id: 'expectations', name: 'Didn\'t meet expectations' }
],
orientation: 'vertical'
});
});
improvementSection.addSpacer({ height: '16px' });
improvementSection.addRow(row => {
row.addThumbRating('wouldTryAgain', {
label: 'Would you give us another chance if we addressed your concerns?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, I would',
downLabel: 'Probably not',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Detailed Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Share Your Thoughts',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
feedbackSection.addSpacer({ height: '8px' });
feedbackSection.addRow(row => {
row.addTextarea('openFeedback', {
label: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'What specifically made your experience great?';
if (category === 'detractor') return 'Please tell us more about what disappointed you:';
return 'What would turn your experience from good to great?';
},
placeholder: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'Share the highlights of your experience...';
if (category === 'detractor') return 'Help us understand what went wrong...';
return 'Your suggestions for improvement...';
},
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 6: Competitor Comparison
// ============================================
const comparisonSection = form.addSubform('comparisonSection', {
title: 'Compared to Alternatives',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
comparisonSection.addRow(row => {
row.addRadioButton('vsCompetitors', {
label: 'How do we compare to alternatives you\'ve tried?',
options: [
{ id: 'much-better', name: 'Much better' },
{ id: 'somewhat-better', name: 'Somewhat better' },
{ id: 'about-same', name: 'About the same' },
{ id: 'somewhat-worse', name: 'Somewhat worse' },
{ id: 'much-worse', name: 'Much worse' },
{ id: 'only-one', name: 'Haven\'t tried others' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => {
const nps = npsSection.ratingScale('npsScore')?.value();
const matrix = driversSection.matrixQuestion('driverRatings')?.value();
return nps !== null && nps !== undefined && !!matrix && Object.keys(matrix).length > 0;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const nps = npsSection.ratingScale('npsScore')?.value();
const category = npsSection.ratingScale('npsScore')?.npsCategory();
const drivers = driversSection.matrixQuestion('driverRatings')?.value() || {};
const topReasons = promoterSection.suggestionChips('topReasons')?.value() || [];
const issues = improvementSection.checkboxList('issueAreas')?.value() || [];
const comparison = comparisonSection.radioButton('vsCompetitors')?.value();
if (nps === null || nps === undefined) return '';
let emoji = category === 'promoter' ? '🌟' : category === 'passive' ? '🤔' : '😔';
let summary = `${emoji} Recommendation Analysis\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `📊 NPS Score: ${nps}/10 (${category?.charAt(0).toUpperCase()}${category?.slice(1)})\n`;
// Calculate average driver score
const driverValues = Object.values(drivers) as string[];
if (driverValues.length > 0) {
const avg = driverValues.reduce((sum, v) => sum + parseInt(v as string), 0) / driverValues.length;
summary += `📈 Avg Driver Score: ${avg.toFixed(1)}/5\n`;
}
if (topReasons.length > 0) {
summary += `\n✨ Top drivers: ${topReasons.length} selected`;
}
if (issues.length > 0) {
summary += `\n⚠️ Issues flagged: ${issues.length} areas`;
}
if (comparison) {
const compLabels: Record<string, string> = {
'much-better': 'Much better than competitors',
'somewhat-better': 'Better than competitors',
'about-same': 'On par with competitors',
'somewhat-worse': 'Below competitors',
'much-worse': 'Far below competitors',
'only-one': 'No comparison made'
};
summary += `\n\n🏆 ${compLabels[comparison] || comparison}`;
}
return summary;
},
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
const baseStyles = {
padding: '20px',
borderRadius: '12px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#ecfdf5', borderLeft: '4px solid #10b981' };
} else if (category === 'passive') {
return { ...baseStyles, backgroundColor: '#fffbeb', borderLeft: '4px solid #f59e0b' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' };
}
return baseStyles;
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'Share Your Praise';
if (category === 'detractor') return 'Submit Feedback';
return 'Submit Survey';
},
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'Thank You for Your Support!';
if (category === 'detractor') return 'We Hear You';
return 'Thank You!';
},
message: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') {
return 'Your advocacy means the world to us. We\'re thrilled to have earned your recommendation!';
}
if (category === 'detractor') {
return 'We\'re sorry we fell short of your expectations. Your feedback is invaluable and we\'re committed to making things right.';
}
return 'Your insights help us improve. We appreciate you taking the time to share your experience with us.';
}
});
}