export function travelAgentFeedbackSurvey(form: FormTs) {
// Travel Agent Review Form
// Comprehensive evaluation of travel agent/consultant performance
// Demonstrates: StarRating, RatingScale (NPS), EmojiRating, ThumbRating, MatrixQuestion, RadioButton, Datepicker, SuggestionChips, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Rate Your Travel Agent',
computedValue: () => 'Your feedback helps us deliver better travel experiences.',
customStyles: {
backgroundColor: '#0369a1',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Trip Details
// ============================================
const tripSection = form.addSubform('tripSection', {
title: 'Your Trip Details'
});
tripSection.addRow(row => {
row.addTextbox('destination', {
label: 'Destination(s)',
placeholder: 'e.g., Paris, France',
isRequired: true
}, '1fr');
row.addDatepicker('travelDate', {
label: 'Travel Date',
maxDate: new Date().toISOString()
}, '1fr');
});
tripSection.addRow(row => {
row.addRadioButton('tripType', {
label: 'Type of trip',
options: [
{ id: 'leisure', name: 'Leisure / Vacation' },
{ id: 'business', name: 'Business Travel' },
{ id: 'honeymoon', name: 'Honeymoon / Romance' },
{ id: 'adventure', name: 'Adventure / Active' },
{ id: 'family', name: 'Family Trip' },
{ id: 'cruise', name: 'Cruise' },
{ id: 'group', name: 'Group Tour' }
],
orientation: 'vertical'
});
});
tripSection.addRow(row => {
row.addTextbox('agentName', {
label: 'Your Travel Agent\'s Name (optional)',
placeholder: 'Agent name'
});
});
// ============================================
// SECTION 2: Overall Satisfaction
// ============================================
const satisfactionSection = form.addSubform('satisfactionSection', {
title: 'Overall Satisfaction',
customStyles: () => {
const rating = satisfactionSection.starRating('overallRating')?.value();
if (rating !== null && rating !== undefined) {
if (rating >= 4) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (rating >= 3) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
satisfactionSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'How would you rate your overall experience with your travel agent?',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
satisfactionSection.addRow(row => {
row.addEmojiRating('tripMood', {
label: 'How do you feel about your trip planning experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Agent Performance Matrix
// ============================================
const performanceSection = form.addSubform('performanceSection', {
title: 'Agent Performance',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null
});
performanceSection.addRow(row => {
row.addMatrixQuestion('agentMatrix', {
label: 'Rate your agent on the following:',
rows: [
{ id: 'destination-knowledge', label: 'Destination knowledge', isRequired: true },
{ id: 'listening', label: 'Understood my preferences', isRequired: true },
{ id: 'responsiveness', label: 'Response time & availability' },
{ id: 'creativity', label: 'Creative suggestions & ideas' },
{ id: 'attention-detail', label: 'Attention to detail' },
{ id: 'problem-solving', label: 'Problem-solving ability' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Planning Quality
// ============================================
const planningSection = form.addSubform('planningSection', {
title: 'Trip Planning Quality',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null
});
planningSection.addRow(row => {
row.addStarRating('itineraryRating', {
label: 'Quality of itinerary/recommendations',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('valueRating', {
label: 'Value for money',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
planningSection.addRow(row => {
row.addThumbRating('expectationsMet', {
label: 'Did the trip meet your expectations?',
showLabels: true,
upLabel: 'Yes, met or exceeded',
downLabel: 'No, fell short',
size: 'lg',
alignment: 'center'
});
});
planningSection.addRow(row => {
row.addTextarea('expectationsDetails', {
label: () => {
const met = planningSection.thumbRating('expectationsMet')?.value();
if (met === 'up') return 'What exceeded your expectations?';
if (met === 'down') return 'What fell short of expectations?';
return 'Share more details';
},
placeholder: 'Tell us more...',
rows: 2,
isVisible: () => planningSection.thumbRating('expectationsMet')?.value() !== null
});
});
// ============================================
// SECTION 5: Communication Rating
// ============================================
const communicationSection = form.addSubform('communicationSection', {
title: 'Communication',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null
});
communicationSection.addRow(row => {
row.addStarRating('communicationRating', {
label: 'How well did your agent communicate with you?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
communicationSection.addRow(row => {
row.addRadioButton('responseTime', {
label: 'How quickly did your agent respond to inquiries?',
options: [
{ id: 'same-day', name: 'Same day' },
{ id: 'next-day', name: 'Within 24 hours' },
{ id: 'few-days', name: '2-3 days' },
{ id: 'slow', name: 'More than 3 days' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 6: What You Loved (for positive ratings)
// ============================================
const positiveSection = form.addSubform('positiveSection', {
title: 'What You Loved',
isVisible: () => {
const rating = satisfactionSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
positiveSection.addRow(row => {
row.addSuggestionChips('highlights', {
label: 'What did your agent do exceptionally well?',
suggestions: [
{ id: 'local-tips', name: 'Great local tips' },
{ id: 'hidden-gems', name: 'Found hidden gems' },
{ id: 'personal-touch', name: 'Personal touch' },
{ id: 'saved-money', name: 'Saved me money' },
{ id: 'smooth-booking', name: 'Smooth booking process' },
{ id: 'perfect-timing', name: 'Perfect timing/scheduling' },
{ id: 'special-requests', name: 'Handled special requests' },
{ id: 'emergency-help', name: 'Helped with issues' }
],
alignment: 'left'
});
});
// ============================================
// SECTION 7: Improvement Areas (for lower ratings)
// ============================================
const improvementSection = form.addSubform('improvementSection', {
title: 'Areas for Improvement',
isVisible: () => {
const rating = satisfactionSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating <= 3;
},
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
improvementSection.addRow(row => {
row.addSuggestionChips('issues', {
label: 'What could have been better?',
suggestions: [
{ id: 'slow-response', name: 'Slow response' },
{ id: 'wrong-info', name: 'Incorrect information' },
{ id: 'limited-options', name: 'Limited options' },
{ id: 'poor-listening', name: 'Didn\'t understand needs' },
{ id: 'overpriced', name: 'Overpriced recommendations' },
{ id: 'missing-details', name: 'Missing details' },
{ id: 'no-alternatives', name: 'No backup plans' },
{ id: 'pushy', name: 'Too pushy/salesy' }
],
alignment: 'left'
});
});
improvementSection.addSpacer();
improvementSection.addRow(row => {
row.addTextarea('improvementDetails', {
label: 'Please share specific feedback to help us improve',
placeholder: 'Your detailed feedback helps us train our agents...',
rows: 3
});
});
// ============================================
// SECTION 8: Recommendation
// ============================================
const npsSection = form.addSubform('npsSection', {
title: 'Would You Recommend?',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null,
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
npsSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend this travel agent to friends and family?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
npsSection.addRow(row => {
row.addThumbRating('useAgain', {
label: 'Would you use this agent for your next trip?',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'No, probably not',
alignment: 'center',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
});
// ============================================
// SECTION 9: Final Comments
// ============================================
const finalSection = form.addSubform('finalSection', {
title: 'Final Thoughts',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null
});
finalSection.addSpacer();
finalSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback about your experience?',
placeholder: 'Share anything else you\'d like us to know...',
rows: 3
});
});
// ============================================
// SECTION 10: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overall = satisfactionSection.starRating('overallRating')?.value();
const destination = tripSection.textbox('destination')?.value();
const tripType = tripSection.radioButton('tripType')?.value();
const nps = npsSection.ratingScale('npsScore')?.value();
const npsCategory = npsSection.ratingScale('npsScore')?.npsCategory();
const itinerary = planningSection.starRating('itineraryRating')?.value();
const value = planningSection.starRating('valueRating')?.value();
if (!overall) return '';
let emoji = overall >= 4 ? '✈️' : overall >= 3 ? '📊' : '⚠️';
const tripLabels: Record<string, string> = {
'leisure': 'Leisure',
'business': 'Business',
'honeymoon': 'Honeymoon',
'adventure': 'Adventure',
'family': 'Family',
'cruise': 'Cruise',
'group': 'Group Tour'
};
let summary = `${emoji} Travel Agent Review\n`;
summary += `${'═'.repeat(30)}\n\n`;
if (destination) {
summary += `📍 Destination: ${destination}\n`;
}
if (tripType) {
summary += `🧳 Trip Type: ${tripLabels[tripType] || tripType}\n`;
}
summary += `\n⭐ Overall Rating: ${overall}/5 stars\n`;
if (itinerary) {
summary += `📋 Itinerary: ${itinerary}/5 stars\n`;
}
if (value) {
summary += `💰 Value: ${value}/5 stars\n`;
}
if (nps !== null && nps !== undefined) {
summary += `\n📊 NPS: ${nps}/10 (${npsCategory?.charAt(0).toUpperCase()}${npsCategory?.slice(1)})`;
}
return summary;
},
customStyles: () => {
const rating = satisfactionSection.starRating('overallRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating !== null && rating !== undefined) {
if (rating >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (rating >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
return { ...baseStyles, backgroundColor: '#f1f5f9' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Review',
isVisible: () => satisfactionSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your review helps us improve our travel services and recognize outstanding agents. We hope your trip was memorable and look forward to planning your next adventure!'
});
}