export function npsRelationshipSurvey(form: FormTs) {
// Relationship NPS Survey for B2B Partnerships
// Demonstrates: RatingScale (NPS), StarRating x5, MatrixQuestion, EmojiRating, SuggestionChips
// Advanced: Conditional visibility, Dynamic labels/styling, npsCategory(), Multi-dimensional assessment
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Relationship Health Check',
computedValue: () => 'Help us strengthen our partnership by sharing your perspective.',
customStyles: {
backgroundColor: '#1e40af',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Core NPS Question
// ============================================
const npsSection = form.addSubform('npsSection', {
title: 'Overall Recommendation',
customStyles: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#ecfdf5', padding: '20px', borderRadius: '10px', borderLeft: '4px solid #10b981' };
if (category === 'passive') return { backgroundColor: '#fffbeb', padding: '20px', borderRadius: '10px', borderLeft: '4px solid #f59e0b' };
if (category === 'detractor') return { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '10px', borderLeft: '4px solid #ef4444' };
return { padding: '20px', borderRadius: '10px', border: '1px dashed #94a3b8' };
}
});
npsSection.addRow(row => {
row.addRatingScale('relationshipNps', {
preset: 'nps',
label: 'How likely are you to recommend our company to a business colleague or partner?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
isRequired: true
});
});
npsSection.addSpacer({ height: '16px' });
npsSection.addRow(row => {
row.addTextarea('npsReason', {
label: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
switch (category) {
case 'promoter': return "Wonderful! What makes our partnership stand out?";
case 'passive': return "Thanks for your honesty. What would elevate our partnership to exceptional?";
case 'detractor': return "We appreciate your candor. What has fallen short of expectations?";
default: return 'Please share the reasoning behind your rating';
}
},
placeholder: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
if (category === 'promoter') return 'Share what makes working with us valuable...';
if (category === 'passive') return 'Your insights will help us improve...';
if (category === 'detractor') return 'We take this seriously and want to understand...';
return 'Your feedback helps us serve you better...';
},
rows: 3,
autoExpand: true,
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null
});
});
// ============================================
// SECTION 2: Relationship Dimensions (Star Ratings)
// ============================================
const dimensionsSection = form.addSubform('dimensionsSection', {
title: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
if (category === 'promoter') return 'What We Do Well';
if (category === 'detractor') return 'Where We Can Improve';
return 'Partnership Dimensions';
},
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null,
customStyles: { backgroundColor: '#f8fafc', padding: '20px', borderRadius: '10px' }
});
dimensionsSection.addRow(row => {
row.addTextPanel('dimensionsIntro', {
computedValue: () => 'Rate each aspect of our working relationship:',
customStyles: { fontSize: '14px', color: '#475569', marginBottom: '12px' }
});
});
dimensionsSection.addRow(row => {
row.addStarRating('responsiveness', {
label: 'Responsiveness & Availability',
tooltip: 'How quickly and effectively do we respond to your needs?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'left'
}, '1fr');
row.addStarRating('expertise', {
label: 'Expertise & Quality',
tooltip: 'How would you rate the quality and depth of our work?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'left'
}, '1fr');
});
dimensionsSection.addRow(row => {
row.addStarRating('communication', {
label: 'Communication & Transparency',
tooltip: 'How clear and proactive is our communication?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'left'
}, '1fr');
row.addStarRating('trust', {
label: 'Trust & Reliability',
tooltip: 'How much do you trust us to deliver on commitments?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'left'
}, '1fr');
});
dimensionsSection.addRow(row => {
row.addStarRating('value', {
label: 'Value for Investment',
tooltip: 'How well does the value we provide match your investment?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'left'
}, '1fr');
row.addEmpty('1fr');
});
// ============================================
// SECTION 3: Detailed Matrix Assessment
// ============================================
const matrixSection = form.addSubform('matrixSection', {
title: 'Detailed Partnership Assessment',
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null,
customStyles: { padding: '20px', borderRadius: '10px' }
});
matrixSection.addRow(row => {
row.addMatrixQuestion('partnershipMatrix', {
label: 'How well do we perform in these specific areas?',
rows: [
{ id: 'strategic', label: 'Strategic Alignment', description: 'Understanding your business goals' },
{ id: 'innovation', label: 'Innovation & Ideas', description: 'Bringing fresh perspectives' },
{ id: 'problemSolving', label: 'Problem Resolution', description: 'Handling issues effectively' },
{ id: 'flexibility', label: 'Flexibility & Adaptability', description: 'Adjusting to changing needs' },
{ id: 'proactive', label: 'Proactive Engagement', description: 'Anticipating your needs' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'outstanding', label: 'Outstanding' }
],
selectionMode: 'single',
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Relationship Strengths (Promoters/Passives)
// ============================================
const strengthsSection = form.addSubform('strengthsSection', {
title: 'Partnership Strengths',
isVisible: () => {
const score = npsSection.ratingScale('relationshipNps')?.value();
return score != null && score >= 5;
},
customStyles: { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '10px' }
});
strengthsSection.addRow(row => {
row.addSuggestionChips('strengths', {
label: 'What do we do best? (Select up to 4)',
suggestions: [
{ id: 'delivery', name: 'On-time delivery' },
{ id: 'quality', name: 'Quality of work' },
{ id: 'support', name: 'Account support' },
{ id: 'understanding', name: 'Understanding our needs' },
{ id: 'pricing', name: 'Fair pricing' },
{ id: 'innovation', name: 'Innovative solutions' },
{ id: 'expertise', name: 'Technical expertise' },
{ id: 'partnership', name: 'True partnership approach' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Improvement Areas (Passives/Detractors)
// ============================================
const improvementSection = form.addSubform('improvementSection', {
title: 'Priority Improvement Areas',
isVisible: () => {
const score = npsSection.ratingScale('relationshipNps')?.value();
return score != null && score <= 7;
},
customStyles: { backgroundColor: '#fef3c7', padding: '20px', borderRadius: '10px' }
});
improvementSection.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'Where should we focus improvement efforts?',
suggestions: [
{ id: 'speed', name: 'Response speed' },
{ id: 'quality', name: 'Work quality' },
{ id: 'communication', name: 'Communication' },
{ id: 'pricing', name: 'Pricing/Value' },
{ id: 'proactive', name: 'Proactivity' },
{ id: 'innovation', name: 'Innovation' },
{ id: 'flexibility', name: 'Flexibility' },
{ id: 'escalations', name: 'Issue handling' }
],
alignment: 'center'
});
});
improvementSection.addSpacer({ height: '16px' });
improvementSection.addRow(row => {
row.addTextarea('improvementDetails', {
label: 'Please describe specific improvements that would make a difference:',
placeholder: 'What specific changes would improve our partnership?',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Overall Relationship Mood
// ============================================
const moodSection = form.addSubform('moodSection', {
title: 'How Do You Feel About Our Partnership?',
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null,
customStyles: { backgroundColor: '#f8fafc', padding: '20px', borderRadius: '10px' }
});
moodSection.addRow(row => {
row.addEmojiRating('partnershipMood', {
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 7: Future Outlook
// ============================================
const outlookSection = form.addSubform('outlookSection', {
title: 'Future Partnership',
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null
});
outlookSection.addRow(row => {
row.addRatingScale('renewalLikelihood', {
preset: 'likert-5',
label: 'How likely are you to continue or expand our partnership?',
lowLabel: 'Very unlikely',
highLabel: 'Very likely',
size: 'md',
alignment: 'center'
});
});
outlookSection.addSpacer({ height: '16px' });
outlookSection.addRow(row => {
row.addTextarea('futureExpectations', {
label: 'What are your expectations for our partnership over the next 12 months?',
placeholder: 'Share your thoughts on future collaboration...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Contact Information
// ============================================
const contactSection = form.addSubform('contactSection', {
title: 'Follow-Up',
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null
});
contactSection.addRow(row => {
row.addCheckbox('wantsDiscussion', {
label: 'I would like to discuss this feedback with my account representative'
});
});
contactSection.addRow(row => {
row.addTextbox('contactName', {
label: 'Your name',
placeholder: 'Jane Smith',
isVisible: () => contactSection.checkbox('wantsDiscussion')?.value() === true
}, '1fr');
row.addEmail('contactEmail', {
label: 'Your email',
placeholder: 'jane.smith@company.com',
isRequired: () => contactSection.checkbox('wantsDiscussion')?.value() === true,
isVisible: () => contactSection.checkbox('wantsDiscussion')?.value() === true
}, '1fr');
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const nps = npsSection.ratingScale('relationshipNps')?.value();
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
const responsiveness = dimensionsSection.starRating('responsiveness')?.value();
const expertise = dimensionsSection.starRating('expertise')?.value();
const communication = dimensionsSection.starRating('communication')?.value();
const trust = dimensionsSection.starRating('trust')?.value();
const value = dimensionsSection.starRating('value')?.value();
const mood = moodSection.emojiRating('partnershipMood')?.value();
const renewal = outlookSection.ratingScale('renewalLikelihood')?.value();
if (nps == null) return '';
let emoji = '';
if (category === 'promoter') emoji = '🤝';
else if (category === 'passive') emoji = '📊';
else emoji = '⚠️';
let summary = `${emoji} Relationship Health Summary\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `📈 NPS Score: ${nps}/10 (${category?.charAt(0).toUpperCase()}${category?.slice(1)})\n`;
// Calculate average dimension score
const dimensions = [responsiveness, expertise, communication, trust, value].filter(d => d != null);
if (dimensions.length > 0) {
const avg = (dimensions.reduce((a, b) => a + (b ?? 0), 0) / dimensions.length).toFixed(1);
summary += `\n⭐ Avg. Dimension Score: ${avg}/5`;
summary += `\n • Responsiveness: ${responsiveness ?? '-'}/5`;
summary += `\n • Expertise: ${expertise ?? '-'}/5`;
summary += `\n • Communication: ${communication ?? '-'}/5`;
summary += `\n • Trust: ${trust ?? '-'}/5`;
summary += `\n • Value: ${value ?? '-'}/5`;
}
if (mood) {
const moodLabels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
summary += `\n\n💭 Mood: ${moodLabels[mood] || mood}`;
}
if (renewal != null) {
const renewalLabels = ['Very unlikely', 'Unlikely', 'Neutral', 'Likely', 'Very likely'];
summary += `\n🔄 Renewal: ${renewalLabels[renewal - 1] || renewal}`;
}
return summary;
},
customStyles: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
const baseStyles = {
padding: '20px',
borderRadius: '10px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px',
lineHeight: '1.6'
};
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('relationshipNps')?.npsCategory();
if (category === 'promoter') return 'Submit Positive Feedback';
if (category === 'detractor') return 'Submit & Request Follow-up';
return 'Submit Feedback';
},
isVisible: () => npsSection.ratingScale('relationshipNps')?.value() != null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
if (category === 'promoter') return 'Thank You for Your Partnership!';
if (category === 'detractor') return 'Thank You for Your Honesty';
return 'Thank You for Your Feedback!';
},
message: () => {
const category = npsSection.ratingScale('relationshipNps')?.npsCategory();
if (category === 'promoter') {
return 'We deeply value our partnership with you. Your positive feedback motivates our team to continue delivering excellence.';
}
if (category === 'detractor') {
return 'We take your feedback seriously. Your account representative will reach out within 48 hours to discuss how we can improve.';
}
return 'Your insights help us strengthen our partnership and better serve your needs. We appreciate you taking the time to share your perspective.';
}
});
}