export function hotelStayFeedback(form: FormTs) {
// Hotel Stay Feedback - Comprehensive hospitality review form
// Demonstrates: MatrixQuestion, multiple StarRatings, Slider, conditional sections, EmojiRating
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Share Your Stay Experience',
computedValue: () => 'Help us make your next visit even better',
customStyles: {
backgroundColor: '#0ea5e9',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Stay Details
// ============================================
const stayDetails = form.addSubform('stayDetails', {
title: 'Your Stay Details',
customStyles: { backgroundColor: '#f0f9ff', padding: '16px', borderRadius: '8px' }
});
stayDetails.addRow(row => {
row.addDropdown('roomType', {
label: 'Room Type',
options: [
{ id: 'standard', name: 'Standard Room' },
{ id: 'deluxe', name: 'Deluxe Room' },
{ id: 'suite', name: 'Suite' },
{ id: 'penthouse', name: 'Penthouse' },
{ id: 'family', name: 'Family Room' }
],
placeholder: 'Select your room type'
}, '1fr');
row.addDropdown('stayPurpose', {
label: 'Purpose of Stay',
options: [
{ id: 'business', name: 'Business Trip' },
{ id: 'leisure', name: 'Leisure/Vacation' },
{ id: 'conference', name: 'Conference/Event' },
{ id: 'family', name: 'Family Visit' },
{ id: 'romantic', name: 'Romantic Getaway' }
],
placeholder: 'Select purpose'
}, '1fr');
});
stayDetails.addRow(row => {
row.addInteger('nightsStayed', {
label: 'Number of Nights',
min: 1,
max: 30,
placeholder: 'e.g., 3'
}, '1fr');
row.addDatepicker('checkInDate', {
label: 'Check-in Date',
maxDate: new Date().toISOString()
}, '1fr');
});
// ============================================
// SECTION 2: Overall Rating
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Experience',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
overallSection.addRow(row => {
row.addEmojiRating('overallMood', {
label: 'How would you describe your overall stay?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall Hotel Rating',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 3: Detailed Ratings (MatrixQuestion)
// ============================================
const detailedRatings = form.addSubform('detailedRatings', {
title: 'Rate Different Aspects',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#fafafa' }
});
detailedRatings.addRow(row => {
row.addMatrixQuestion('aspectRatings', {
label: 'Please rate the following aspects of your stay:',
rows: [
{ id: 'room_cleanliness', label: 'Room Cleanliness', isRequired: true },
{ id: 'bed_comfort', label: 'Bed & Sleep Quality', isRequired: true },
{ id: 'bathroom', label: 'Bathroom Facilities', isRequired: false },
{ id: 'noise_level', label: 'Noise Level', isRequired: false },
{ id: 'wifi', label: 'WiFi Quality', isRequired: false },
{ id: 'air_conditioning', label: 'Air Conditioning/Heating', isRequired: false }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Staff & Service
// ============================================
const staffSection = form.addSubform('staffSection', {
title: 'Staff & Service',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
staffSection.addRow(row => {
row.addStarRating('frontDesk', {
label: 'Front Desk Service',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('housekeeping', {
label: 'Housekeeping',
maxStars: 5,
size: 'md'
}, '1fr');
});
staffSection.addRow(row => {
row.addStarRating('concierge', {
label: 'Concierge/Help Desk',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('restaurant', {
label: 'Restaurant Service',
maxStars: 5,
size: 'md',
tooltip: 'Rate if you used the hotel restaurant'
}, '1fr');
});
// ============================================
// SECTION 5: Value & Amenities
// ============================================
const valueSection = form.addSubform('valueSection', {
title: 'Value & Amenities',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#f0fdf4' }
});
valueSection.addRow(row => {
row.addSlider('valueForMoney', {
label: 'Value for Money',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
});
});
valueSection.addRow(row => {
row.addSuggestionChips('usedAmenities', {
label: 'Which amenities did you use?',
suggestions: [
{ id: 'pool', name: 'Swimming Pool' },
{ id: 'gym', name: 'Fitness Center' },
{ id: 'spa', name: 'Spa & Wellness' },
{ id: 'breakfast', name: 'Breakfast Buffet' },
{ id: 'bar', name: 'Bar/Lounge' },
{ id: 'parking', name: 'Parking' },
{ id: 'roomservice', name: 'Room Service' },
{ id: 'laundry', name: 'Laundry Service' }
],
alignment: 'left'
});
});
// ============================================
// SECTION 6: Issues & Problems (Conditional)
// ============================================
const issuesSection = form.addSubform('issuesSection', {
title: 'Did You Experience Any Issues?',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating <= 3;
},
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' }
});
issuesSection.addRow(row => {
row.addCheckboxList('issueTypes', {
label: 'What issues did you encounter?',
options: [
{ id: 'cleanliness', name: 'Cleanliness problems' },
{ id: 'noise', name: 'Noise disturbances' },
{ id: 'maintenance', name: 'Maintenance issues' },
{ id: 'staff', name: 'Staff behavior' },
{ id: 'billing', name: 'Billing errors' },
{ id: 'amenities', name: 'Amenities not working' },
{ id: 'booking', name: 'Reservation problems' }
],
orientation: 'vertical'
});
});
issuesSection.addRow(row => {
row.addTextarea('issueDetails', {
label: 'Please describe the issue(s)',
placeholder: 'Tell us what went wrong so we can improve...',
rows: 3,
autoExpand: true,
isVisible: () => {
const issues = issuesSection.checkboxList('issueTypes')?.value() || [];
return issues.length > 0;
}
});
});
issuesSection.addRow(row => {
row.addThumbRating('issueResolved', {
label: 'Was your issue resolved during your stay?',
showLabels: true,
upLabel: 'Yes, resolved',
downLabel: 'No, not resolved',
alignment: 'left',
isVisible: () => {
const issues = issuesSection.checkboxList('issueTypes')?.value() || [];
return issues.length > 0;
}
});
});
// ============================================
// SECTION 7: Positive Highlights (Conditional)
// ============================================
const highlightsSection = form.addSubform('highlightsSection', {
title: 'What Made Your Stay Special?',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#ecfdf5', borderLeft: '4px solid #10b981' }
});
highlightsSection.addRow(row => {
row.addSuggestionChips('highlights', {
label: 'Select what you loved most (up to 4)',
suggestions: [
{ id: 'location', name: 'Great Location' },
{ id: 'view', name: 'Amazing View' },
{ id: 'staff', name: 'Friendly Staff' },
{ id: 'food', name: 'Delicious Food' },
{ id: 'room', name: 'Beautiful Room' },
{ id: 'cleanliness', name: 'Spotless Clean' },
{ id: 'amenities', name: 'Great Amenities' },
{ id: 'value', name: 'Great Value' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 8: Recommendation
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Would You Recommend Us?',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: () => {
const nps = recommendSection.ratingScale('npsScore')?.npsCategory();
if (nps === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (nps === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (nps === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
recommendSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend our hotel to friends or colleagues?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
recommendSection.addRow(row => {
row.addCheckbox('returnIntent', {
label: 'I would stay at this hotel again'
});
});
// ============================================
// SECTION 9: Additional Comments
// ============================================
const commentsSection = form.addSubform('commentsSection', {
title: 'Additional Comments',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
commentsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback you would like to share?',
placeholder: 'We value all your thoughts and suggestions...',
rows: 4,
autoExpand: true
});
});
commentsSection.addRow(row => {
row.addCheckbox('allowContact', {
label: 'You may contact me regarding my feedback'
});
});
commentsSection.addRow(row => {
row.addEmail('contactEmail', {
label: 'Email Address',
placeholder: 'your@email.com',
isVisible: () => commentsSection.checkbox('allowContact')?.value() === true,
isRequired: () => commentsSection.checkbox('allowContact')?.value() === true
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Review',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Review!',
message: 'Your feedback is invaluable and helps us improve our service. We hope to welcome you back soon!'
});
}