export function carRentalFeedbackSurvey(form: FormTs) {
// Car Rental Feedback Survey - Complete rental experience
// Demonstrates: StarRating, Slider, ThumbRating, Dropdown, EmojiRating, MatrixQuestion, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Car Rental Feedback',
computedValue: () => 'Tell us about your rental experience',
customStyles: {
background: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Rental Details
// ============================================
const detailsSection = form.addSubform('detailsSection', {
title: 'Rental Details',
customStyles: { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '8px' }
});
detailsSection.addRow(row => {
row.addDropdown('vehicleType', {
label: 'Vehicle category',
options: [
{ id: 'economy', name: 'Economy' },
{ id: 'compact', name: 'Compact' },
{ id: 'midsize', name: 'Midsize' },
{ id: 'fullsize', name: 'Full Size' },
{ id: 'suv', name: 'SUV' },
{ id: 'luxury', name: 'Luxury' },
{ id: 'van', name: 'Van/Minivan' },
{ id: 'truck', name: 'Truck' }
],
placeholder: 'Select vehicle type',
isRequired: true
}, '1fr');
row.addDropdown('rentalDuration', {
label: 'Rental duration',
options: [
{ id: '1-day', name: '1 day' },
{ id: '2-3-days', name: '2-3 days' },
{ id: '4-7-days', name: '4-7 days (1 week)' },
{ id: '1-2-weeks', name: '1-2 weeks' },
{ id: '2-4-weeks', name: '2-4 weeks' },
{ id: 'month+', name: 'Month or longer' }
],
placeholder: 'Select duration'
}, '1fr');
});
detailsSection.addRow(row => {
row.addDropdown('pickupLocation', {
label: 'Pickup location type',
options: [
{ id: 'airport', name: 'Airport' },
{ id: 'downtown', name: 'Downtown/City Center' },
{ id: 'suburb', name: 'Suburban Location' },
{ id: 'hotel', name: 'Hotel Delivery' },
{ id: 'other', name: 'Other Location' }
],
placeholder: 'Select location type'
}, '1fr');
row.addRadioButton('wasUpgrade', {
label: 'Was this an upgrade from your booking?',
options: [
{ id: 'yes', name: 'Yes' },
{ id: 'no', name: 'No' }
],
orientation: 'horizontal'
}, '1fr');
});
// ============================================
// SECTION 2: Vehicle Experience
// ============================================
const vehicleSection = form.addSubform('vehicleSection', {
title: 'Vehicle Experience',
isVisible: () => detailsSection.dropdown('vehicleType')?.value() !== null,
customStyles: { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '8px' }
});
vehicleSection.addRow(row => {
row.addEmojiRating('vehicleImpression', {
label: 'First impression of the vehicle',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
vehicleSection.addRow(row => {
row.addStarRating('vehicleCondition', {
label: 'Overall vehicle condition',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('vehicleCleanliness', {
label: 'Vehicle cleanliness',
maxStars: 5,
size: 'md'
}, '1fr');
});
vehicleSection.addRow(row => {
row.addSlider('cleanlinessDetail', {
label: 'Rate interior cleanliness in detail',
min: 0,
max: 100,
step: 10,
defaultValue: 70,
unit: '%',
showValue: true
});
});
vehicleSection.addRow(row => {
row.addTextPanel('cleanlinessLabel', {
computedValue: () => {
const clean = vehicleSection.slider('cleanlinessDetail')?.value() ?? 70;
if (clean >= 90) return 'Spotless! Like a brand new car.';
if (clean >= 70) return 'Clean and well-maintained.';
if (clean >= 50) return 'Acceptable, but could be cleaner.';
return 'Below standards - needs attention.';
},
customStyles: () => {
const clean = vehicleSection.slider('cleanlinessDetail')?.value() ?? 70;
const baseStyles = { fontSize: '13px', padding: '8px', borderRadius: '4px', textAlign: 'center' };
if (clean >= 70) return { ...baseStyles, backgroundColor: '#dcfce7', color: '#166534' };
if (clean >= 50) return { ...baseStyles, backgroundColor: '#fef9c3', color: '#854d0e' };
return { ...baseStyles, backgroundColor: '#fee2e2', color: '#991b1b' };
}
});
});
vehicleSection.addRow(row => {
row.addStarRating('drivingExperience', {
label: 'Driving experience',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('fuelEfficiency', {
label: 'Fuel efficiency',
maxStars: 5,
size: 'md'
}, '1fr');
});
// Vehicle issues
vehicleSection.addRow(row => {
row.addThumbRating('hadIssues', {
label: 'Did you experience any issues with the vehicle?',
showLabels: true,
upLabel: 'No issues',
downLabel: 'Yes, had issues',
size: 'md',
alignment: 'left'
});
});
vehicleSection.addRow(row => {
row.addCheckboxList('vehicleIssues', {
label: 'What issues did you experience?',
options: [
{ id: 'mechanical', name: 'Mechanical problems' },
{ id: 'warning-lights', name: 'Warning lights on dashboard' },
{ id: 'ac-heat', name: 'A/C or heating issues' },
{ id: 'audio', name: 'Audio/infotainment problems' },
{ id: 'navigation', name: 'GPS/navigation issues' },
{ id: 'tire', name: 'Tire issues' },
{ id: 'cleanliness', name: 'Cleanliness concerns' },
{ id: 'odor', name: 'Unpleasant odor' },
{ id: 'damage', name: 'Pre-existing damage not noted' }
],
orientation: 'vertical',
isVisible: () => vehicleSection.thumbRating('hadIssues')?.value() === 'down'
});
});
// ============================================
// SECTION 3: Pickup & Return Process
// ============================================
const processSection = form.addSubform('processSection', {
title: 'Pickup & Return Process',
isVisible: () => vehicleSection.emojiRating('vehicleImpression')?.value() !== null,
customStyles: { backgroundColor: '#faf5ff', padding: '20px', borderRadius: '8px' }
});
processSection.addRow(row => {
row.addMatrixQuestion('processRatings', {
label: 'Rate each step of the rental process:',
rows: [
{ id: 'booking', label: 'Booking/Reservation', description: 'Online or phone booking experience', isRequired: true },
{ id: 'check-in', label: 'Check-in/Pickup', description: 'Counter service and paperwork', isRequired: true },
{ id: 'vehicle-walkthrough', label: 'Vehicle Walkthrough', description: 'Inspection before driving', isRequired: false },
{ id: 'return', label: 'Return Process', description: 'Drop-off and checkout', isRequired: true },
{ id: 'billing', label: 'Billing/Charges', description: 'Transparency and accuracy', isRequired: true }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'very-good', label: 'Very Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
processSection.addRow(row => {
row.addDropdown('pickupWaitTime', {
label: 'Approximate wait time at pickup',
options: [
{ id: 'none', name: 'No wait (immediate)' },
{ id: '5min', name: 'Under 5 minutes' },
{ id: '10min', name: '5-10 minutes' },
{ id: '20min', name: '10-20 minutes' },
{ id: '30min', name: '20-30 minutes' },
{ id: 'over30', name: 'Over 30 minutes' }
],
placeholder: 'Select wait time'
}, '1fr');
row.addDropdown('returnWaitTime', {
label: 'Approximate wait time at return',
options: [
{ id: 'none', name: 'No wait (immediate)' },
{ id: '5min', name: 'Under 5 minutes' },
{ id: '10min', name: '5-10 minutes' },
{ id: '20min', name: '10-20 minutes' },
{ id: '30min', name: '20-30 minutes' },
{ id: 'over30', name: 'Over 30 minutes' }
],
placeholder: 'Select wait time'
}, '1fr');
});
// ============================================
// SECTION 4: Staff Service
// ============================================
const staffSection = form.addSubform('staffSection', {
title: 'Staff & Service',
isVisible: () => processSection.matrixQuestion('processRatings')?.value() !== null,
customStyles: { backgroundColor: '#fff7ed', padding: '20px', borderRadius: '8px' }
});
staffSection.addRow(row => {
row.addStarRating('staffFriendliness', {
label: 'Staff friendliness',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('staffKnowledge', {
label: 'Staff knowledge',
maxStars: 5,
size: 'md'
}, '1fr');
});
staffSection.addRow(row => {
row.addStarRating('staffEfficiency', {
label: 'Service efficiency',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('problemResolution', {
label: 'Problem resolution (if applicable)',
maxStars: 5,
size: 'md',
tooltip: 'Rate N/A if you had no issues to resolve'
}, '1fr');
});
staffSection.addRow(row => {
row.addTextbox('staffMention', {
label: 'Any staff member who provided exceptional service?',
placeholder: 'Name (optional) - helps us recognize great service'
});
});
// ============================================
// SECTION 5: Value & Pricing
// ============================================
const valueSection = form.addSubform('valueSection', {
title: 'Value & Pricing',
isVisible: () => staffSection.starRating('staffFriendliness')?.value() !== null,
customStyles: { backgroundColor: '#eff6ff', padding: '20px', borderRadius: '8px' }
});
valueSection.addRow(row => {
row.addSlider('valueForMoney', {
label: 'Overall value for money',
min: 0,
max: 100,
step: 5,
defaultValue: 50,
unit: '%',
showValue: true
});
});
valueSection.addRow(row => {
row.addThumbRating('transparentPricing', {
label: 'Was the pricing transparent with no hidden fees?',
showLabels: true,
upLabel: 'Yes, clear pricing',
downLabel: 'No, unexpected charges',
size: 'md',
alignment: 'center'
});
});
valueSection.addRow(row => {
row.addTextarea('pricingConcerns', {
label: 'What unexpected charges did you encounter?',
placeholder: 'Please describe any surprise fees or charges...',
rows: 2,
isVisible: () => valueSection.thumbRating('transparentPricing')?.value() === 'down'
});
});
// ============================================
// SECTION 6: Overall & Recommendation
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Experience',
isVisible: () => valueSection.slider('valueForMoney')?.value() !== null,
customStyles: { backgroundColor: '#fef9c3', padding: '20px', borderRadius: '8px' }
});
overallSection.addRow(row => {
row.addStarRating('overallExperience', {
label: 'Overall rental experience',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend us to friends or colleagues?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
overallSection.addRow(row => {
row.addThumbRating('wouldRentAgain', {
label: 'Would you rent from us again?',
showLabels: true,
upLabel: 'Definitely!',
downLabel: 'Probably not',
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 7: Additional Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Additional Feedback',
isVisible: () => overallSection.starRating('overallExperience')?.value() !== null
});
feedbackSection.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'What would improve your next rental experience?',
suggestions: [
{ id: 'faster-pickup', name: 'Faster pickup' },
{ id: 'better-vehicles', name: 'Better vehicles' },
{ id: 'cleaner-cars', name: 'Cleaner cars' },
{ id: 'lower-prices', name: 'Lower prices' },
{ id: 'better-fuel-policy', name: 'Better fuel policy' },
{ id: 'more-locations', name: 'More locations' },
{ id: 'loyalty-rewards', name: 'Loyalty rewards' },
{ id: 'app-experience', name: 'Better app' }
],
max: 3,
alignment: 'center'
});
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other comments or suggestions?',
placeholder: 'Share your thoughts on how we can improve...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => overallSection.starRating('overallExperience')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const vehicleType = detailsSection.dropdown('vehicleType')?.value();
const duration = detailsSection.dropdown('rentalDuration')?.value();
const vehicleCondition = vehicleSection.starRating('vehicleCondition')?.value();
const cleanliness = vehicleSection.slider('cleanlinessDetail')?.value() ?? 70;
const overall = overallSection.starRating('overallExperience')?.value();
const nps = overallSection.ratingScale('npsScore')?.value();
const wouldRent = overallSection.thumbRating('wouldRentAgain')?.value();
const hadIssues = vehicleSection.thumbRating('hadIssues')?.value();
const value = valueSection.slider('valueForMoney')?.value() ?? 50;
const vehicleLabels: Record<string, string> = {
'economy': 'Economy',
'compact': 'Compact',
'midsize': 'Midsize',
'fullsize': 'Full Size',
'suv': 'SUV',
'luxury': 'Luxury',
'van': 'Van/Minivan',
'truck': 'Truck'
};
const durationLabels: Record<string, string> = {
'1-day': '1 day',
'2-3-days': '2-3 days',
'4-7-days': '1 week',
'1-2-weeks': '1-2 weeks',
'2-4-weeks': '2-4 weeks',
'month+': 'Month+'
};
let summary = '๐ Car Rental Feedback Summary\n';
summary += `${'โ'.repeat(35)}\n\n`;
summary += `๐ Vehicle: ${vehicleLabels[vehicleType || ''] || 'Not specified'}\n`;
summary += `๐
Duration: ${durationLabels[duration || ''] || 'Not specified'}\n`;
if (vehicleCondition) {
summary += `\nโญ Vehicle Condition: ${vehicleCondition}/5 stars`;
}
summary += `\n๐งน Cleanliness: ${cleanliness}%`;
summary += `\n๐ฐ Value: ${value}%`;
summary += `\nโ ๏ธ Issues: ${hadIssues === 'down' ? 'Yes' : 'None'}`;
if (overall) {
summary += `\n\nโญ Overall: ${overall}/5 stars`;
}
if (nps !== null && nps !== undefined) {
const category = nps >= 9 ? 'Promoter' : nps >= 7 ? 'Passive' : 'Detractor';
summary += `\n๐ข NPS: ${nps}/10 (${category})`;
}
if (wouldRent) {
summary += `\n๐ Would Rent Again: ${wouldRent === 'up' ? 'Yes!' : 'Unlikely'}`;
}
return summary;
},
customStyles: () => {
const overall = overallSection.starRating('overallExperience')?.value();
const hadIssues = vehicleSection.thumbRating('hadIssues')?.value();
const baseStyles = {
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (hadIssues === 'down') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (overall && overall >= 4) {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (overall && overall >= 3) {
return { ...baseStyles, backgroundColor: '#fef9c3', borderLeft: '4px solid #eab308' };
} else if (overall && overall < 3) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #dc2626' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Rental Feedback',
isVisible: () => detailsSection.dropdown('vehicleType')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const hadIssues = vehicleSection.thumbRating('hadIssues')?.value();
const overall = overallSection.starRating('overallExperience')?.value();
if (hadIssues === 'down') return 'Thank You - We Will Address Your Concerns';
if (overall && overall >= 4) return 'Thank You for Choosing Us!';
return 'Thank You for Your Feedback!';
},
message: () => {
const hadIssues = vehicleSection.thumbRating('hadIssues')?.value();
const wouldRent = overallSection.thumbRating('wouldRentAgain')?.value();
if (hadIssues === 'down') {
return 'We apologize for any issues you experienced. Your feedback has been flagged for immediate review by our fleet and customer service teams.';
}
if (wouldRent === 'up') {
return 'We are thrilled you had a great experience! Your feedback helps us maintain our high standards. We look forward to serving you again on your next trip.';
}
return 'Your feedback is valuable to us. We continuously work to improve our vehicles and service based on customer input. Thank you for taking the time to share your experience.';
}
});
}