export function warrantyServiceFeedback(form: FormTs) {
// Warranty Service Feedback - Complete repair experience survey
// Demonstrates: StarRating x5, RatingScale (CES), Datepicker, ThumbRating, Dropdown, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Warranty Service Feedback',
computedValue: () => 'Tell us about your repair experience',
customStyles: {
background: 'linear-gradient(135deg, #059669 0%, #047857 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Service Details
// ============================================
const detailsSection = form.addSubform('detailsSection', {
title: 'Service Details',
customStyles: { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '8px' }
});
detailsSection.addRow(row => {
row.addDropdown('serviceType', {
label: 'Type of service',
options: [
{ id: 'repair', name: 'Product Repair' },
{ id: 'replacement', name: 'Product Replacement' },
{ id: 'inspection', name: 'Inspection Only' },
{ id: 'parts', name: 'Parts Replacement' },
{ id: 'software', name: 'Software/Firmware Update' },
{ id: 'other', name: 'Other Service' }
],
placeholder: 'Select service type',
isRequired: true
}, '1fr');
row.addDropdown('productCategory', {
label: 'Product category',
options: [
{ id: 'electronics', name: 'Electronics' },
{ id: 'appliances', name: 'Home Appliances' },
{ id: 'computers', name: 'Computers/Laptops' },
{ id: 'mobile', name: 'Mobile Devices' },
{ id: 'audio', name: 'Audio Equipment' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select category'
}, '1fr');
});
detailsSection.addRow(row => {
row.addDatepicker('serviceDate', {
label: 'Date service was completed',
maxDate: () => new Date().toISOString()
}, '1fr');
row.addTextbox('referenceNumber', {
label: 'Service reference number (optional)',
placeholder: 'e.g., WRN-12345'
}, '1fr');
});
// ============================================
// SECTION 2: Customer Effort Score
// ============================================
const effortSection = form.addSubform('effortSection', {
title: 'Ease of Process',
isVisible: () => detailsSection.dropdown('serviceType')?.value() !== null,
customStyles: { backgroundColor: '#faf5ff', padding: '20px', borderRadius: '8px' }
});
effortSection.addRow(row => {
row.addRatingScale('effortScore', {
preset: 'ces',
label: 'How easy was it to get your warranty service completed?',
size: 'lg',
isRequired: true
});
});
effortSection.addRow(row => {
row.addTextPanel('effortFeedback', {
computedValue: () => {
const effort = effortSection.ratingScale('effortScore')?.value();
if (effort === null || effort === undefined) return '';
if (effort >= 6) return 'Great! We aim to make warranty service effortless.';
if (effort >= 4) return 'Thank you. We are always working to simplify our process.';
return 'We apologize for the difficulty. Please share details below so we can improve.';
},
customStyles: () => {
const effort = effortSection.ratingScale('effortScore')?.value() ?? 4;
const baseStyles = { fontSize: '14px', padding: '12px', borderRadius: '6px', textAlign: 'center' };
if (effort >= 6) return { ...baseStyles, backgroundColor: '#dcfce7', color: '#166534' };
if (effort >= 4) return { ...baseStyles, backgroundColor: '#fef9c3', color: '#854d0e' };
return { ...baseStyles, backgroundColor: '#fee2e2', color: '#991b1b' };
},
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null
});
});
// Difficulty details for low effort scores
effortSection.addRow(row => {
row.addCheckboxList('difficulties', {
label: 'What made the process difficult?',
options: [
{ id: 'claim-process', name: 'Complicated claim submission' },
{ id: 'documentation', name: 'Too much documentation required' },
{ id: 'communication', name: 'Poor communication during repair' },
{ id: 'wait-time', name: 'Long wait times' },
{ id: 'multiple-contacts', name: 'Had to contact multiple times' },
{ id: 'shipping', name: 'Shipping/logistics issues' },
{ id: 'unclear-status', name: 'Unclear status updates' },
{ id: 'other', name: 'Other issues' }
],
orientation: 'vertical',
isVisible: () => {
const effort = effortSection.ratingScale('effortScore')?.value();
return effort !== null && effort !== undefined && effort <= 3;
}
});
});
// ============================================
// SECTION 3: Service Quality Ratings
// ============================================
const qualitySection = form.addSubform('qualitySection', {
title: 'Service Quality',
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null,
customStyles: { padding: '20px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
qualitySection.addRow(row => {
row.addStarRating('claimProcess', {
label: 'Claim submission process',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('communication', {
label: 'Communication during service',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
qualitySection.addRow(row => {
row.addStarRating('turnaroundTime', {
label: 'Turnaround time',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('repairQuality', {
label: 'Quality of repair/service',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
qualitySection.addRow(row => {
row.addStarRating('overallService', {
label: 'Overall service experience',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 4: Technician Feedback (if applicable)
// ============================================
const technicianSection = form.addSubform('technicianSection', {
title: 'Technician/Staff Feedback',
isVisible: () => qualitySection.starRating('overallService')?.value() !== null,
customStyles: { backgroundColor: '#fff7ed', padding: '20px', borderRadius: '8px' }
});
technicianSection.addRow(row => {
row.addRadioButton('hadTechContact', {
label: 'Did you interact with a technician or service representative?',
options: [
{ id: 'yes', name: 'Yes' },
{ id: 'no', name: 'No' }
],
orientation: 'horizontal'
});
});
technicianSection.addRow(row => {
row.addStarRating('techProfessionalism', {
label: 'Professionalism',
maxStars: 5,
size: 'md',
isVisible: () => technicianSection.radioButton('hadTechContact')?.value() === 'yes'
}, '1fr');
row.addStarRating('techKnowledge', {
label: 'Technical knowledge',
maxStars: 5,
size: 'md',
isVisible: () => technicianSection.radioButton('hadTechContact')?.value() === 'yes'
}, '1fr');
});
technicianSection.addRow(row => {
row.addTextbox('technicianName', {
label: 'Technician name (if you remember)',
placeholder: 'Optional - helps us recognize great service',
isVisible: () => technicianSection.radioButton('hadTechContact')?.value() === 'yes'
});
});
// ============================================
// SECTION 5: Resolution Status
// ============================================
const resolutionSection = form.addSubform('resolutionSection', {
title: 'Resolution Status',
isVisible: () => qualitySection.starRating('overallService')?.value() !== null,
customStyles: { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '8px' }
});
resolutionSection.addRow(row => {
row.addThumbRating('issueResolved', {
label: 'Was your issue fully resolved?',
showLabels: true,
upLabel: 'Yes, fully resolved',
downLabel: 'No, not resolved',
size: 'lg',
alignment: 'center'
});
});
resolutionSection.addRow(row => {
row.addTextPanel('resolutionStatus', {
computedValue: () => {
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
if (resolved === 'up') return 'We are glad your issue was resolved!';
if (resolved === 'down') return 'We apologize that your issue was not fully resolved. Please tell us more below.';
return '';
},
customStyles: () => {
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
if (resolved === 'up') return { backgroundColor: '#dcfce7', padding: '12px', borderRadius: '6px', textAlign: 'center', color: '#166534' };
if (resolved === 'down') return { backgroundColor: '#fee2e2', padding: '12px', borderRadius: '6px', textAlign: 'center', color: '#991b1b' };
return { display: 'none' };
},
isVisible: () => resolutionSection.thumbRating('issueResolved')?.value() !== null
});
});
resolutionSection.addSpacer();
resolutionSection.addRow(row => {
row.addTextarea('unresolvedDetails', {
label: 'Please describe what is still unresolved:',
placeholder: 'Help us understand the remaining issue...',
rows: 3,
autoExpand: true,
isRequired: () => resolutionSection.thumbRating('issueResolved')?.value() === 'down',
isVisible: () => resolutionSection.thumbRating('issueResolved')?.value() === 'down'
});
});
// ============================================
// SECTION 6: Timeline Assessment
// ============================================
const timelineSection = form.addSubform('timelineSection', {
title: 'Timeline Assessment',
isVisible: () => resolutionSection.thumbRating('issueResolved')?.value() !== null,
customStyles: { padding: '20px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
timelineSection.addRow(row => {
row.addRadioButton('timelineMet', {
label: 'Was the service completed within the estimated timeframe?',
options: [
{ id: 'faster', name: 'Faster than expected' },
{ id: 'on-time', name: 'On time' },
{ id: 'slightly-late', name: 'Slightly late' },
{ id: 'significantly-late', name: 'Significantly late' }
],
orientation: 'vertical'
});
});
timelineSection.addRow(row => {
row.addInteger('actualDays', {
label: 'How many days did the service take?',
min: 1,
max: 90,
placeholder: 'Enter number of days',
isVisible: () => {
const timeline = timelineSection.radioButton('timelineMet')?.value();
return timeline === 'slightly-late' || timeline === 'significantly-late';
}
});
});
// ============================================
// SECTION 7: Future & Recommendations
// ============================================
const futureSection = form.addSubform('futureSection', {
title: 'Looking Forward',
isVisible: () => resolutionSection.thumbRating('issueResolved')?.value() !== null,
customStyles: { backgroundColor: '#eff6ff', padding: '20px', borderRadius: '8px' }
});
futureSection.addRow(row => {
row.addRatingScale('recommendService', {
preset: 'nps',
label: 'How likely are you to recommend our warranty service?',
showCategoryLabel: true,
showSegmentColors: true
});
});
futureSection.addSpacer();
futureSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'How could we improve our warranty service?',
placeholder: 'Share any suggestions for improvement...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => qualitySection.starRating('overallService')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const serviceType = detailsSection.dropdown('serviceType')?.value();
const effort = effortSection.ratingScale('effortScore')?.value();
const overall = qualitySection.starRating('overallService')?.value();
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
const timeline = timelineSection.radioButton('timelineMet')?.value();
const recommend = futureSection.ratingScale('recommendService')?.value();
const serviceLabels: Record<string, string> = {
'repair': 'Product Repair',
'replacement': 'Product Replacement',
'inspection': 'Inspection',
'parts': 'Parts Replacement',
'software': 'Software Update',
'other': 'Other Service'
};
const timelineLabels: Record<string, string> = {
'faster': 'Faster than expected',
'on-time': 'On time',
'slightly-late': 'Slightly late',
'significantly-late': 'Significantly late'
};
let summary = '🔧 Warranty Service Feedback\n';
summary += `${'═'.repeat(35)}\n\n`;
summary += `📦 Service Type: ${serviceLabels[serviceType || ''] || 'Not specified'}\n`;
if (effort !== null && effort !== undefined) {
const effortLabel = effort >= 6 ? 'Easy' : effort >= 4 ? 'Moderate' : 'Difficult';
summary += `💪 Effort Score: ${effort}/7 (${effortLabel})\n`;
}
if (overall) {
summary += `⭐ Overall Rating: ${overall}/5 stars\n`;
}
if (resolved) {
summary += `✅ Issue Resolved: ${resolved === 'up' ? 'Yes' : 'No'}\n`;
}
if (timeline) {
summary += `⏱️ Timeline: ${timelineLabels[timeline]}\n`;
}
if (recommend !== null && recommend !== undefined) {
const category = recommend >= 9 ? 'Promoter' : recommend >= 7 ? 'Passive' : 'Detractor';
summary += `\n📢 NPS: ${recommend}/10 (${category})`;
}
return summary;
},
customStyles: () => {
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
const baseStyles = {
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (resolved === 'up') {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (resolved === 'down') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9', borderLeft: '4px solid #94a3b8' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Warranty Feedback',
isVisible: () => detailsSection.dropdown('serviceType')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
if (resolved === 'down') return 'Thank You - We Will Follow Up';
return 'Thank You for Your Feedback!';
},
message: () => {
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
if (resolved === 'down') {
return 'We apologize that your issue was not fully resolved. A member of our team will contact you within 24 hours to address your concerns.';
}
return 'Your feedback helps us improve our warranty service. We appreciate you taking the time to share your experience with us.';
}
});
}