export function visionCareFeedbackSurvey(form: FormTs) {
// Vision Care Feedback - Eye doctor/optometrist patient satisfaction survey
// Demonstrates: MatrixQuestion, StarRating, RatingScale, Dropdown, Datepicker, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Vision Care Feedback',
computedValue: () => 'Help us improve your eye care experience. Your feedback is confidential.',
customStyles: {
backgroundColor: '#0284c7',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Visit Details
// ============================================
const visitSection = form.addSubform('visitSection', {
title: 'Your Visit'
});
visitSection.addRow(row => {
row.addDatepicker('visitDate', {
label: 'Date of your visit',
maxDate: () => new Date().toISOString().split('T')[0]
}, '1fr');
row.addDropdown('visitType', {
label: 'Type of visit',
options: [
{ id: 'comprehensive', name: 'Comprehensive Eye Exam' },
{ id: 'contact', name: 'Contact Lens Fitting' },
{ id: 'glasses', name: 'Glasses Selection/Fitting' },
{ id: 'followup', name: 'Follow-up Appointment' },
{ id: 'emergency', name: 'Urgent/Emergency Visit' },
{ id: 'other', name: 'Other' }
]
}, '1fr');
});
visitSection.addRow(row => {
row.addCheckboxList('visitPurpose', {
label: 'Reason for visit (select all that apply)',
options: [
{ id: 'routine', name: 'Routine checkup' },
{ id: 'prescription', name: 'Update prescription' },
{ id: 'newGlasses', name: 'New glasses/frames' },
{ id: 'contacts', name: 'Contact lenses' },
{ id: 'dryEyes', name: 'Dry eyes/discomfort' },
{ id: 'vision', name: 'Vision problems' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 2: Overall Satisfaction
// ============================================
const satisfactionSection = form.addSubform('satisfactionSection', {
title: 'Overall Satisfaction',
customStyles: () => {
const rating = satisfactionSection.starRating('overall')?.value();
if (rating === null || rating === undefined) return { padding: '16px' };
if (rating >= 4) return { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' };
if (rating >= 3) return { backgroundColor: '#fef9c3', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
});
satisfactionSection.addRow(row => {
row.addStarRating('overall', {
label: 'How would you rate your overall experience?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true,
showConfettiOnMax: true
});
});
satisfactionSection.addRow(row => {
row.addRatingScale('recommend', {
label: 'How likely are you to recommend us to friends and family?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
isVisible: () => satisfactionSection.starRating('overall')?.value() !== null
});
});
// ============================================
// SECTION 3: Service Quality Matrix
// ============================================
const qualitySection = form.addSubform('qualitySection', {
title: 'Service Quality',
isVisible: () => satisfactionSection.starRating('overall')?.value() !== null
});
qualitySection.addRow(row => {
row.addMatrixQuestion('serviceMatrix', {
label: 'Please rate each aspect of your visit',
rows: [
{ id: 'scheduling', label: 'Ease of scheduling appointment', isRequired: true },
{ id: 'waitTime', label: 'Wait time in office', isRequired: true },
{ id: 'staffFriendly', label: 'Staff friendliness', isRequired: true },
{ id: 'examThorough', label: 'Thoroughness of eye exam' },
{ id: 'doctorComm', label: 'Doctor communication & explanation' },
{ id: 'eyewearSelect', label: 'Eyewear selection & assistance' },
{ id: 'pricing', label: 'Pricing transparency' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'na', label: 'N/A' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Doctor Rating
// ============================================
const doctorSection = form.addSubform('doctorSection', {
title: 'Your Eye Care Provider',
isVisible: () => satisfactionSection.starRating('overall')?.value() !== null
});
doctorSection.addRow(row => {
row.addStarRating('doctorRating', {
label: 'Rate your eye doctor/optometrist',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('staffRating', {
label: 'Rate the office staff',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
doctorSection.addRow(row => {
row.addEmojiRating('careFeeling', {
label: 'How did your provider make you feel?',
preset: 'satisfaction',
size: 'md',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Issues & Improvements (for lower ratings)
// ============================================
const issuesSection = form.addSubform('issuesSection', {
title: 'Help Us Improve',
isVisible: () => {
const rating = satisfactionSection.starRating('overall')?.value();
return rating !== null && rating !== undefined && rating <= 3;
},
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
issuesSection.addRow(row => {
row.addSuggestionChips('issues', {
label: 'What areas need improvement?',
suggestions: [
{ id: 'waitTime', name: 'Long wait times' },
{ id: 'scheduling', name: 'Hard to schedule' },
{ id: 'communication', name: 'Poor communication' },
{ id: 'rushed', name: 'Felt rushed' },
{ id: 'prices', name: 'High prices' },
{ id: 'selection', name: 'Limited eyewear selection' },
{ id: 'billing', name: 'Billing issues' },
{ id: 'parking', name: 'Parking/location' }
],
alignment: 'center'
});
});
issuesSection.addSpacer();
issuesSection.addRow(row => {
row.addTextarea('issueDetails', {
label: 'Please tell us more about your concerns',
placeholder: 'We take your feedback seriously and want to make things right...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Positive Feedback (for higher ratings)
// ============================================
const praiseSection = form.addSubform('praiseSection', {
title: 'What We Did Right',
isVisible: () => {
const rating = satisfactionSection.starRating('overall')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
praiseSection.addRow(row => {
row.addSuggestionChips('highlights', {
label: 'What made your visit great?',
suggestions: [
{ id: 'professional', name: 'Professional care' },
{ id: 'friendly', name: 'Friendly staff' },
{ id: 'thorough', name: 'Thorough exam' },
{ id: 'explained', name: 'Clear explanations' },
{ id: 'quick', name: 'Quick service' },
{ id: 'selection', name: 'Great eyewear selection' },
{ id: 'value', name: 'Good value' },
{ id: 'clean', name: 'Clean facility' }
],
alignment: 'center'
});
});
// ============================================
// SECTION 7: Follow-up
// ============================================
const followupSection = form.addSubform('followupSection', {
title: 'Follow-up',
isVisible: () => satisfactionSection.starRating('overall')?.value() !== null
});
followupSection.addRow(row => {
row.addCheckbox('contactMe', {
label: 'I would like someone to contact me about my experience'
});
});
followupSection.addRow(row => {
row.addTextbox('phone', {
label: 'Phone number',
placeholder: '(555) 123-4567',
isVisible: () => followupSection.checkbox('contactMe')?.value() === true
}, '1fr');
row.addDropdown('bestTime', {
label: 'Best time to call',
options: [
{ id: 'morning', name: 'Morning (9am-12pm)' },
{ id: 'afternoon', name: 'Afternoon (12pm-5pm)' },
{ id: 'evening', name: 'Evening (5pm-8pm)' }
],
isVisible: () => followupSection.checkbox('contactMe')?.value() === true
}, '1fr');
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => satisfactionSection.starRating('overall')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const overall = satisfactionSection.starRating('overall')?.value();
const nps = satisfactionSection.ratingScale('recommend')?.value();
const category = satisfactionSection.ratingScale('recommend')?.npsCategory();
const doctor = doctorSection.starRating('doctorRating')?.value();
const staff = doctorSection.starRating('staffRating')?.value();
const visitType = visitSection.dropdown('visitType')?.value();
const highlights = praiseSection.suggestionChips('highlights')?.value() || [];
const issues = issuesSection.suggestionChips('issues')?.value() || [];
if (overall === null || overall === undefined) return '';
let emoji = overall >= 4 ? '👁️✨' : overall >= 3 ? '👁️' : '👁️💧';
let status = overall >= 4 ? 'Satisfied' : overall >= 3 ? 'Neutral' : 'Needs Attention';
let summary = `${emoji} Vision Care Feedback\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `⭐ Overall: ${overall}/5 stars (${status})\n`;
if (visitType) {
const visitLabels: Record<string, string> = {
'comprehensive': 'Comprehensive Eye Exam',
'contact': 'Contact Lens Fitting',
'glasses': 'Glasses Selection',
'followup': 'Follow-up',
'emergency': 'Emergency',
'other': 'Other'
};
summary += `📋 Visit: ${visitLabels[visitType] || visitType}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `📊 NPS: ${nps}/10 (${category})\n`;
}
if (doctor !== null && doctor !== undefined) {
summary += `👨⚕️ Doctor: ${doctor}/5 stars\n`;
}
if (staff !== null && staff !== undefined) {
summary += `👥 Staff: ${staff}/5 stars\n`;
}
if (highlights.length > 0) {
summary += `\n✨ Highlights: ${highlights.length} selected`;
}
if (issues.length > 0) {
summary += `\n⚠️ Concerns: ${issues.length} noted`;
}
return summary;
},
customStyles: () => {
const rating = satisfactionSection.starRating('overall')?.value();
const base = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (rating !== null && rating !== undefined && rating >= 4) {
return { ...base, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (rating !== null && rating !== undefined && rating <= 2) {
return { ...base, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...base, backgroundColor: '#fef9c3', borderLeft: '4px solid #eab308' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => satisfactionSection.starRating('overall')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your input helps us provide better vision care for all our patients. We truly appreciate you taking the time to share your experience.'
});
}