export function giftPurchaseSurvey(form: FormTs) {
// Gift Purchase Experience Survey - Feedback on gift buying journey
// Demonstrates: Datepicker, RadioButton, CheckboxList, StarRating, EmojiRating, ThumbRating, MatrixQuestion
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Gift Purchase Feedback',
computedValue: () => 'Help us make gift-giving even more special!',
customStyles: {
background: 'linear-gradient(135deg, #ff6b6b 0%, #feca57 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Gift Occasion Details
// ============================================
const occasionSection = form.addSubform('occasion', {
title: 'About Your Gift'
});
occasionSection.addRow(row => {
row.addRadioButton('occasionType', {
label: 'What was the occasion for this gift?',
options: [
{ id: 'birthday', name: 'Birthday' },
{ id: 'christmas', name: 'Christmas/Holiday' },
{ id: 'anniversary', name: 'Anniversary' },
{ id: 'wedding', name: 'Wedding/Engagement' },
{ id: 'baby', name: 'Baby Shower/Birth' },
{ id: 'graduation', name: 'Graduation' },
{ id: 'thankyou', name: 'Thank You/Appreciation' },
{ id: 'other', name: 'Other occasion' }
],
orientation: 'vertical',
isRequired: true
});
});
occasionSection.addRow(row => {
row.addDropdown('recipientRelation', {
label: 'Who was the gift for?',
options: [
{ id: 'partner', name: 'Partner/Spouse' },
{ id: 'parent', name: 'Parent' },
{ id: 'child', name: 'Child' },
{ id: 'sibling', name: 'Sibling' },
{ id: 'friend', name: 'Friend' },
{ id: 'colleague', name: 'Colleague' },
{ id: 'relative', name: 'Other relative' },
{ id: 'other', name: 'Someone else' }
],
placeholder: 'Select relationship...'
}, '1fr');
row.addDatepicker('occasionDate', {
label: 'When was/is the occasion?',
tooltip: 'Helps us understand delivery timing'
}, '1fr');
});
// ============================================
// SECTION 2: Gift Selection Experience
// ============================================
const selectionSection = form.addSubform('selection', {
title: 'Finding the Perfect Gift'
});
selectionSection.addRow(row => {
row.addRatingScale('findingEase', {
label: 'How easy was it to find the right gift?',
preset: 'ces',
size: 'md',
alignment: 'center'
});
});
selectionSection.addRow(row => {
row.addSuggestionChips('helpfulFeatures', {
label: 'What helped you find the gift? (Select all that apply)',
suggestions: [
{ id: 'search', name: 'Search function' },
{ id: 'categories', name: 'Gift categories' },
{ id: 'filters', name: 'Price filters' },
{ id: 'bestsellers', name: 'Bestseller lists' },
{ id: 'reviews', name: 'Customer reviews' },
{ id: 'giftguide', name: 'Gift guides' },
{ id: 'recommendations', name: 'Recommendations' },
{ id: 'wishlist', name: 'Recipient wishlist' }
],
alignment: 'center'
});
});
// ============================================
// SECTION 3: Gift Services Used
// ============================================
const servicesSection = form.addSubform('services', {
title: 'Gift Services'
});
servicesSection.addRow(row => {
row.addCheckboxList('servicesUsed', {
label: 'Which gift services did you use?',
options: [
{ id: 'wrapping', name: 'Gift wrapping' },
{ id: 'box', name: 'Gift box' },
{ id: 'message', name: 'Personal message/card' },
{ id: 'receipt', name: 'Gift receipt (no price shown)' },
{ id: 'direct', name: 'Ship directly to recipient' },
{ id: 'none', name: 'No gift services used' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 4: Gift Wrapping Feedback
// ============================================
const wrappingSection = form.addSubform('wrapping', {
title: 'Gift Wrapping Quality',
isVisible: () => {
const services = servicesSection.checkboxList('servicesUsed')?.value() || [];
return services.includes('wrapping') || services.includes('box');
},
customStyles: {
backgroundColor: '#fef3c7',
padding: '16px',
borderRadius: '8px'
}
});
wrappingSection.addRow(row => {
row.addStarRating('wrappingQuality', {
label: 'Rate the quality of the gift wrapping/presentation',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
wrappingSection.addRow(row => {
row.addThumbRating('wrappingWorth', {
label: 'Was the gift wrapping worth the cost?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, great value',
downLabel: 'No, not worth it',
alignment: 'center'
});
});
wrappingSection.addRow(row => {
row.addCheckboxList('wrappingIssues', {
label: 'Did you experience any issues? (Select all that apply)',
options: [
{ id: 'none', name: 'No issues - looked great!' },
{ id: 'damaged', name: 'Wrapping was damaged' },
{ id: 'cheap', name: 'Materials looked cheap' },
{ id: 'messy', name: 'Wrapping was messy' },
{ id: 'wrong', name: 'Wrong wrapping style applied' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 5: Personal Message Feedback
// ============================================
const messageSection = form.addSubform('message', {
title: 'Personal Message Experience',
isVisible: () => {
const services = servicesSection.checkboxList('servicesUsed')?.value() || [];
return services.includes('message');
},
customStyles: {
backgroundColor: '#dbeafe',
padding: '16px',
borderRadius: '8px'
}
});
messageSection.addRow(row => {
row.addMatrixQuestion('messageRating', {
label: 'Rate the message/card experience:',
rows: [
{ id: 'options', label: 'Card design options' },
{ id: 'customization', label: 'Message customization' },
{ id: 'presentation', label: 'Final presentation' },
{ id: 'accuracy', label: 'Message accuracy' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 6: Delivery Experience
// ============================================
const deliverySection = form.addSubform('delivery', {
title: 'Gift Delivery'
});
deliverySection.addRow(row => {
row.addRadioButton('deliveryTiming', {
label: 'Did the gift arrive on time for the occasion?',
options: [
{ id: 'early', name: 'Yes, arrived early' },
{ id: 'ontime', name: 'Yes, arrived on time' },
{ id: 'late', name: 'No, arrived late' },
{ id: 'ongoing', name: 'Occasion is still upcoming' }
],
orientation: 'horizontal'
});
});
deliverySection.addRow(row => {
row.addTextarea('deliveryIssues', {
label: 'Any delivery issues or concerns?',
placeholder: 'Share any problems with shipping or packaging...',
rows: 2,
isVisible: () => deliverySection.radioButton('deliveryTiming')?.value() === 'late'
});
});
// ============================================
// SECTION 7: Recipient Reaction
// ============================================
const reactionSection = form.addSubform('reaction', {
title: "Recipient's Reaction"
});
reactionSection.addRow(row => {
row.addTextPanel('reactionNote', {
computedValue: () => 'The ultimate measure of a great gift is how the recipient responds!',
customStyles: {
backgroundColor: '#f0fdf4',
padding: '12px',
borderRadius: '8px',
textAlign: 'center',
fontStyle: 'italic'
}
});
});
reactionSection.addRow(row => {
row.addEmojiRating('recipientReaction', {
label: "How did the recipient react to the gift?",
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
reactionSection.addRow(row => {
row.addRadioButton('giftOutcome', {
label: 'What happened with the gift?',
options: [
{ id: 'loved', name: 'They loved it and kept it' },
{ id: 'liked', name: 'They liked it and kept it' },
{ id: 'exchanged', name: 'They exchanged it for something else' },
{ id: 'returned', name: 'They returned it' },
{ id: 'unknown', name: "I don't know yet" }
],
orientation: 'vertical'
});
});
// Exchange/Return follow-up
reactionSection.addRow(row => {
row.addTextarea('exchangeReason', {
label: 'Why was the gift exchanged/returned?',
placeholder: 'Wrong size, different preference, etc...',
rows: 2,
isVisible: () => {
const outcome = reactionSection.radioButton('giftOutcome')?.value();
return outcome === 'exchanged' || outcome === 'returned';
}
});
});
// ============================================
// SECTION 8: Overall Satisfaction
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Gift Buying Experience'
});
overallSection.addRow(row => {
row.addStarRating('overallSatisfaction', {
label: 'Rate your overall gift buying experience',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addThumbRating('wouldUseAgain', {
label: 'Would you buy gifts from us again?',
size: 'lg',
showLabels: true,
upLabel: 'Definitely',
downLabel: 'Probably not',
alignment: 'center'
});
});
overallSection.addSpacer({ height: '16px' });
overallSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'How can we improve our gift services?',
placeholder: 'Share ideas for better gift wrapping, new services, etc...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SUMMARY SECTION
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Gift Feedback Summary',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const occasion = occasionSection.radioButton('occasionType')?.value();
const services = servicesSection.checkboxList('servicesUsed')?.value() || [];
const reaction = reactionSection.emojiRating('recipientReaction')?.value();
const overall = overallSection.starRating('overallSatisfaction')?.value();
const delivery = deliverySection.radioButton('deliveryTiming')?.value();
const occasionLabels: Record<string, string> = {
'birthday': 'Birthday',
'christmas': 'Holiday',
'anniversary': 'Anniversary',
'wedding': 'Wedding',
'baby': 'Baby',
'graduation': 'Graduation',
'thankyou': 'Thank You',
'other': 'Special Occasion'
};
const reactionLabels: Record<string, string> = {
'sad': 'Disappointed',
'down': 'Not impressed',
'neutral': 'Neutral',
'happy': 'Happy',
'excited': 'Thrilled!'
};
let summary = `Gift Feedback Summary\n${'═'.repeat(25)}\n\n`;
summary += `Occasion: ${occasionLabels[occasion || ''] || 'Not specified'}\n`;
summary += `Services Used: ${services.length > 0 ? services.length : 'None'}\n`;
if (delivery) {
const deliveryLabels: Record<string, string> = {
'early': 'Arrived early',
'ontime': 'On time',
'late': 'Arrived late',
'ongoing': 'Upcoming'
};
summary += `Delivery: ${deliveryLabels[delivery]}\n`;
}
if (reaction) {
summary += `\nRecipient Reaction: ${reactionLabels[reaction] || reaction}`;
}
if (overall) {
summary += `\n\nOverall: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)}`;
}
return summary;
},
customStyles: () => {
const overall = overallSection.starRating('overallSatisfaction')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (overall && overall >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (overall && overall <= 2) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Gift Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You!',
message: 'Your feedback helps us make gift-giving experiences even more magical. We appreciate you taking the time to share your thoughts!'
});
}