export function accountReviewSurvey(form: FormTs) {
// Account Health Check (QBR) - Comprehensive B2B quarterly review
// Demonstrates: Multi-page wizard, MatrixQuestion, NPS, Slider, Dynamic Sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Quarterly Account Health Check',
computedValue: () => 'Your feedback helps us strengthen our partnership and deliver more value.',
customStyles: {
background: 'linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center',
fontSize: '15px'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('qbrPages', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: Account Context
// ============================================
const page1 = pages.addPage('context');
const contextSection = page1.addSubform('contextInfo', {
title: 'Account Information',
customStyles: { backgroundColor: '#f0f9ff', padding: '16px', borderRadius: '8px' }
});
contextSection.addRow(row => {
row.addDropdown('partnershipLength', {
label: 'How long have we been partners?',
options: [
{ id: 'less-6-months', name: 'Less than 6 months' },
{ id: '6-12-months', name: '6-12 months' },
{ id: '1-2-years', name: '1-2 years' },
{ id: '2-5-years', name: '2-5 years' },
{ id: 'over-5-years', name: 'Over 5 years' }
],
placeholder: 'Select duration',
isRequired: true
}, '1fr');
row.addDropdown('yourRole', {
label: 'Your role in the organization',
options: [
{ id: 'executive', name: 'Executive / C-Level' },
{ id: 'director', name: 'Director / VP' },
{ id: 'manager', name: 'Manager' },
{ id: 'user', name: 'End User' },
{ id: 'procurement', name: 'Procurement / Finance' },
{ id: 'technical', name: 'Technical / IT' }
],
placeholder: 'Select role'
}, '1fr');
});
contextSection.addRow(row => {
row.addCheckboxList('servicesUsed', {
label: 'Which of our services/products do you use? (Select all)',
options: [
{ id: 'core-platform', name: 'Core Platform' },
{ id: 'analytics', name: 'Analytics & Reporting' },
{ id: 'integrations', name: 'Integrations' },
{ id: 'support', name: 'Premium Support' },
{ id: 'training', name: 'Training Services' },
{ id: 'consulting', name: 'Consulting' }
],
orientation: 'vertical'
});
});
const overallHealth = page1.addSubform('overallHealth', {
title: 'Overall Relationship Health',
isVisible: () => contextSection.dropdown('partnershipLength')?.value() !== null
});
overallHealth.addRow(row => {
row.addRatingScale('npsScore', {
label: 'How likely are you to recommend us to a colleague?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
alignment: 'center',
isRequired: true
});
});
overallHealth.addRow(row => {
row.addStarRating('overallSatisfaction', {
label: 'Overall satisfaction with our partnership',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// Navigation to page 2
page1.addRow(row => {
row.addButton('toPage2', {
label: 'Next: Service Quality →',
isVisible: () => overallHealth.ratingScale('npsScore')?.value() !== null,
onClick: () => pages.goToPage('service')
});
});
// ============================================
// PAGE 2: Service Quality
// ============================================
const page2 = pages.addPage('service');
const serviceSection = page2.addSubform('serviceQuality', {
title: 'Product & Service Quality',
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '8px' }
});
serviceSection.addRow(row => {
row.addMatrixQuestion('serviceRatings', {
label: 'Rate the following aspects of our service:',
rows: [
{ id: 'reliability', label: 'Product/Service Reliability', isRequired: true },
{ id: 'performance', label: 'Performance & Speed', isRequired: true },
{ id: 'features', label: 'Feature Set & Capabilities', isRequired: true },
{ id: 'usability', label: 'Ease of Use', isRequired: true },
{ id: 'innovation', label: 'Innovation & Roadmap', isRequired: false },
{ id: 'documentation', label: 'Documentation & Resources', isRequired: false }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
fullWidth: true,
striped: true
});
});
const supportSection = page2.addSubform('supportQuality', {
title: 'Support & Service',
isVisible: () => serviceSection.matrixQuestion('serviceRatings')?.areAllRequiredRowsAnswered() === true
});
supportSection.addRow(row => {
row.addStarRating('supportResponsiveness', {
label: 'Support responsiveness',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('supportQuality', {
label: 'Support quality',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('issueResolution', {
label: 'Issue resolution',
maxStars: 5,
size: 'md'
}, '1fr');
});
supportSection.addRow(row => {
row.addThumbRating('supportMeetsNeeds', {
label: 'Does our support meet your business needs?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, meets or exceeds',
downLabel: 'No, needs improvement',
alignment: 'center'
});
});
// Navigation
page2.addRow(row => {
row.addButton('backToPage1', {
label: '← Back',
onClick: () => pages.goToPage('context')
}, '100px');
row.addEmpty('1fr');
row.addButton('toPage3', {
label: 'Next: Account Team →',
isVisible: () => supportSection.starRating('supportResponsiveness')?.value() !== null,
onClick: () => pages.goToPage('team')
}, 'auto');
});
// ============================================
// PAGE 3: Account Team
// ============================================
const page3 = pages.addPage('team');
const teamSection = page3.addSubform('accountTeam', {
title: 'Account Management',
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
teamSection.addRow(row => {
row.addMatrixQuestion('teamRatings', {
label: 'Rate your account team on the following:',
rows: [
{ id: 'responsiveness', label: 'Responsiveness to requests', isRequired: true },
{ id: 'proactiveness', label: 'Proactive communication', isRequired: true },
{ id: 'understanding', label: 'Understanding of your business', isRequired: true },
{ id: 'strategic', label: 'Strategic guidance & advice', isRequired: false },
{ id: 'accessibility', label: 'Accessibility when needed', isRequired: true }
],
columns: [
{ id: 'needs-improvement', label: 'Needs Work' },
{ id: 'satisfactory', label: 'Satisfactory' },
{ id: 'good', label: 'Good' },
{ id: 'exceptional', label: 'Exceptional' }
],
fullWidth: true,
striped: true
});
});
const communicationSection = page3.addSubform('communication', {
title: 'Communication',
isVisible: () => teamSection.matrixQuestion('teamRatings')?.areAllRequiredRowsAnswered() === true
});
communicationSection.addRow(row => {
row.addDropdown('contactFrequency', {
label: 'How often do you interact with your account team?',
options: [
{ id: 'weekly', name: 'Weekly or more' },
{ id: 'biweekly', name: 'Every 2 weeks' },
{ id: 'monthly', name: 'Monthly' },
{ id: 'quarterly', name: 'Quarterly' },
{ id: 'rarely', name: 'Rarely / Only when needed' }
],
placeholder: 'Select frequency'
}, '1fr');
row.addDropdown('preferredContact', {
label: 'Preferred communication channel',
options: [
{ id: 'email', name: 'Email' },
{ id: 'phone', name: 'Phone calls' },
{ id: 'video', name: 'Video meetings' },
{ id: 'chat', name: 'Chat / Slack' },
{ id: 'in-person', name: 'In-person meetings' }
],
placeholder: 'Select channel'
}, '1fr');
});
communicationSection.addRow(row => {
row.addRatingScale('communicationSatisfaction', {
label: 'How satisfied are you with communication frequency?',
preset: 'satisfaction',
alignment: 'center'
});
});
// Navigation
page3.addRow(row => {
row.addButton('backToPage2', {
label: '← Back',
onClick: () => pages.goToPage('service')
}, '100px');
row.addEmpty('1fr');
row.addButton('toPage4', {
label: 'Next: Business Value →',
isVisible: () => communicationSection.dropdown('contactFrequency')?.value() !== null,
onClick: () => pages.goToPage('value')
}, 'auto');
});
// ============================================
// PAGE 4: Business Value & ROI
// ============================================
const page4 = pages.addPage('value');
const valueSection = page4.addSubform('businessValue', {
title: 'Business Value & ROI',
customStyles: { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' }
});
valueSection.addRow(row => {
row.addSlider('roiPerception', {
label: 'How would you rate the ROI from our partnership?',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
});
});
valueSection.addRow(row => {
row.addStarRating('valueForInvestment', {
label: 'Value for your investment',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
valueSection.addRow(row => {
row.addRadioButton('businessImpact', {
label: 'How has our solution impacted your business?',
options: [
{ id: 'significant-positive', name: 'Significant positive impact' },
{ id: 'moderate-positive', name: 'Moderate positive impact' },
{ id: 'slight-positive', name: 'Slight positive impact' },
{ id: 'neutral', name: 'Neutral / No noticeable impact' },
{ id: 'negative', name: 'Negative impact' }
],
orientation: 'vertical'
});
});
const goalsSection = page4.addSubform('goals', {
title: 'Goals & Objectives',
isVisible: () => valueSection.radioButton('businessImpact')?.value() !== null
});
goalsSection.addRow(row => {
row.addRatingScale('goalAchievement', {
label: 'How well are we helping you achieve your business goals?',
preset: 'likert-5',
lowLabel: 'Not at all',
highLabel: 'Completely',
alignment: 'center'
});
});
goalsSection.addRow(row => {
row.addSuggestionChips('valueAreas', {
label: 'Where do you see the most value? (Select up to 3)',
suggestions: [
{ id: 'efficiency', name: 'Operational efficiency' },
{ id: 'cost-savings', name: 'Cost savings' },
{ id: 'revenue', name: 'Revenue growth' },
{ id: 'quality', name: 'Quality improvement' },
{ id: 'speed', name: 'Speed to market' },
{ id: 'insights', name: 'Better insights' },
{ id: 'compliance', name: 'Compliance / Risk' },
{ id: 'scalability', name: 'Scalability' }
],
max: 3,
alignment: 'center'
});
});
// Navigation
page4.addRow(row => {
row.addButton('backToPage3', {
label: '← Back',
onClick: () => pages.goToPage('team')
}, '100px');
row.addEmpty('1fr');
row.addButton('toPage5', {
label: 'Next: Future & Summary →',
isVisible: () => goalsSection.ratingScale('goalAchievement')?.value() !== null,
onClick: () => pages.goToPage('future')
}, 'auto');
});
// ============================================
// PAGE 5: Future & Summary
// ============================================
const page5 = pages.addPage('future');
const futureSection = page5.addSubform('future', {
title: 'Looking Ahead',
customStyles: { backgroundColor: '#eff6ff', padding: '16px', borderRadius: '8px' }
});
futureSection.addRow(row => {
row.addRadioButton('renewalIntent', {
label: 'What are your plans regarding contract renewal?',
options: [
{ id: 'expand', name: 'Plan to expand our engagement' },
{ id: 'renew-same', name: 'Plan to renew at similar level' },
{ id: 'reduce', name: 'May reduce scope' },
{ id: 'unsure', name: 'Not sure yet' },
{ id: 'unlikely', name: 'Unlikely to renew' }
],
orientation: 'vertical',
isRequired: true
});
});
futureSection.addRow(row => {
row.addCheckboxList('expansionInterest', {
label: 'Which additional services interest you?',
options: [
{ id: 'advanced-features', name: 'Advanced features / Premium tier' },
{ id: 'additional-users', name: 'Additional users / Licenses' },
{ id: 'new-products', name: 'New product lines' },
{ id: 'professional-services', name: 'Professional services' },
{ id: 'training', name: 'Training programs' },
{ id: 'integration', name: 'Additional integrations' }
],
orientation: 'vertical',
isVisible: () => {
const intent = futureSection.radioButton('renewalIntent')?.value();
return intent === 'expand' || intent === 'renew-same';
}
});
});
const competitiveSection = page5.addSubform('competitive', {
title: 'Competitive Landscape',
isVisible: () => futureSection.radioButton('renewalIntent')?.value() !== null
});
competitiveSection.addRow(row => {
row.addRadioButton('evaluatingOthers', {
label: 'Are you currently evaluating alternative solutions?',
options: [
{ id: 'no', name: 'No, we are satisfied' },
{ id: 'passive', name: 'Passively aware of alternatives' },
{ id: 'active', name: 'Actively evaluating alternatives' }
],
orientation: 'vertical'
});
});
competitiveSection.addRow(row => {
row.addTextarea('competitiveReason', {
label: 'What is driving your evaluation?',
placeholder: 'Share what factors are prompting you to look at alternatives...',
rows: 2,
isVisible: () => competitiveSection.radioButton('evaluatingOthers')?.value() === 'active'
});
});
// Final feedback
const finalSection = page5.addSubform('final', {
title: 'Additional Feedback',
isVisible: () => competitiveSection.radioButton('evaluatingOthers')?.value() !== null
});
finalSection.addSpacer({ height: '8px' });
finalSection.addRow(row => {
row.addTextarea('topPriority', {
label: 'What is the #1 thing we could do to strengthen our partnership?',
placeholder: 'Share your top priority for improvement...',
rows: 3,
autoExpand: true
});
});
finalSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback for this quarter?',
placeholder: 'Additional thoughts, concerns, or praise...',
rows: 3,
autoExpand: true
});
});
// Summary
const summarySection = page5.addSubform('summary', {
title: 'Account Health Summary',
isVisible: () => finalSection.textarea('topPriority')?.value() !== undefined
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const nps = overallHealth.ratingScale('npsScore')?.value();
const overall = overallHealth.starRating('overallSatisfaction')?.value();
const roi = valueSection.slider('roiPerception')?.value();
const valueForMoney = valueSection.starRating('valueForInvestment')?.value();
const renewal = futureSection.radioButton('renewalIntent')?.value();
const competitive = competitiveSection.radioButton('evaluatingOthers')?.value();
if (!nps) return '';
const npsCategory = nps >= 9 ? 'Promoter' : nps >= 7 ? 'Passive' : 'Detractor';
const npsEmoji = nps >= 9 ? '🟢' : nps >= 7 ? '🟡' : '🔴';
const renewalLabels: Record<string, string> = {
'expand': 'Planning to expand',
'renew-same': 'Planning to renew',
'reduce': 'May reduce scope',
'unsure': 'Uncertain',
'unlikely': 'Unlikely to renew'
};
const riskLevel = (nps < 7 || renewal === 'unlikely' || renewal === 'reduce' || competitive === 'active')
? '⚠️ At Risk'
: (nps >= 9 && (renewal === 'expand' || renewal === 'renew-same'))
? '✅ Healthy'
: '📊 Monitor';
let summary = 'Account Health Summary\n';
summary += '═'.repeat(25) + '\n\n';
summary += `Account Status: ${riskLevel}\n\n`;
summary += `${npsEmoji} NPS Score: ${nps}/10 (${npsCategory})\n`;
if (overall) {
summary += `Overall Satisfaction: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)}\n`;
}
if (roi) {
summary += `ROI Perception: ${roi}/10\n`;
}
if (valueForMoney) {
summary += `Value Rating: ${'★'.repeat(valueForMoney)}${'☆'.repeat(5 - valueForMoney)}\n`;
}
summary += `\nRenewal Intent: ${renewalLabels[renewal || ''] || 'Not specified'}\n`;
if (competitive === 'active') {
summary += '⚠️ Actively evaluating alternatives';
}
return summary;
},
customStyles: () => {
const nps = overallHealth.ratingScale('npsScore')?.value();
const renewal = futureSection.radioButton('renewalIntent')?.value();
const competitive = competitiveSection.radioButton('evaluatingOthers')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
const isAtRisk = (nps !== null && nps !== undefined && nps < 7) ||
renewal === 'unlikely' || renewal === 'reduce' ||
competitive === 'active';
const isHealthy = nps !== null && nps !== undefined && nps >= 9 &&
(renewal === 'expand' || renewal === 'renew-same');
if (isAtRisk) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
if (isHealthy) {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
}
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
});
});
// Navigation
page5.addRow(row => {
row.addButton('backToPage4', {
label: '← Back',
onClick: () => pages.goToPage('value')
}, '100px');
row.addEmpty('1fr');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Account Review',
isVisible: () => competitiveSection.radioButton('evaluatingOthers')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your input is invaluable in helping us strengthen our partnership. Your account team will review this feedback and follow up on any areas requiring attention.'
});
}