export function unboxingExperienceSurvey(form: FormTs) {
// Unboxing Experience - Product packaging and reveal experience feedback
// Demonstrates: StarRating, EmojiRating, Slider, MatrixQuestion, RadioButton, SuggestionChips, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: '📦 Unboxing Experience',
computedValue: () => 'Tell us about your unboxing moment! Your feedback shapes our packaging.',
customStyles: {
backgroundColor: '#ea580c',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Order Details
// ============================================
const orderSection = form.addSubform('orderSection', {
title: 'Your Order'
});
orderSection.addRow(row => {
row.addTextbox('orderNumber', {
label: 'Order number (optional)',
placeholder: 'e.g., #12345'
}, '1fr');
row.addDropdown('productCategory', {
label: 'Product category',
options: [
{ id: 'electronics', name: 'Electronics & Tech' },
{ id: 'fashion', name: 'Fashion & Apparel' },
{ id: 'beauty', name: 'Beauty & Cosmetics' },
{ id: 'home', name: 'Home & Living' },
{ id: 'food', name: 'Food & Beverages' },
{ id: 'toys', name: 'Toys & Games' },
{ id: 'jewelry', name: 'Jewelry & Accessories' },
{ id: 'other', name: 'Other' }
]
}, '1fr');
});
// ============================================
// SECTION 2: First Emotions
// ============================================
const emotionsSection = form.addSubform('emotionsSection', {
title: 'The Unboxing Moment'
});
emotionsSection.addRow(row => {
row.addEmojiRating('excitement', {
label: 'How did you feel when you opened the package?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
emotionsSection.addRow(row => {
row.addSlider('wowFactor', {
label: '"Wow Factor" level',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
});
});
emotionsSection.addRow(row => {
row.addTextPanel('wowLabel', {
computedValue: () => {
const wow = emotionsSection.slider('wowFactor')?.value() || 5;
if (wow <= 2) return '😕 Underwhelming - just basic packaging';
if (wow <= 4) return '🙂 Decent - nothing special but okay';
if (wow <= 6) return '👍 Good - nicely presented';
if (wow <= 8) return '✨ Great - impressed with the presentation!';
return '🤩 WOW! - Amazing, share-worthy experience!';
},
customStyles: () => {
const wow = emotionsSection.slider('wowFactor')?.value() || 5;
const base = { padding: '10px', borderRadius: '8px', textAlign: 'center', fontSize: '14px' };
if (wow >= 9) return { ...base, backgroundColor: '#fef3c7', color: '#92400e' };
if (wow >= 7) return { ...base, backgroundColor: '#d1fae5', color: '#065f46' };
if (wow >= 5) return { ...base, backgroundColor: '#dbeafe', color: '#1e40af' };
return { ...base, backgroundColor: '#f3f4f6', color: '#374151' };
}
});
});
// ============================================
// SECTION 3: Packaging Quality
// ============================================
const qualitySection = form.addSubform('qualitySection', {
title: 'Packaging Quality',
customStyles: () => {
const rating = qualitySection.starRating('overallPackaging')?.value();
if (rating === null || rating === undefined) return { padding: '16px' };
if (rating >= 4) return { backgroundColor: '#fff7ed', padding: '16px', borderRadius: '8px' };
if (rating >= 3) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
});
qualitySection.addRow(row => {
row.addStarRating('overallPackaging', {
label: 'Rate the overall packaging quality',
maxStars: 5,
size: 'xl',
alignment: 'center',
showCounter: true,
showConfettiOnMax: true
});
});
qualitySection.addRow(row => {
row.addMatrixQuestion('packagingMatrix', {
label: 'Rate each packaging aspect',
rows: [
{ id: 'protection', label: 'Product protection', isRequired: true },
{ id: 'easyOpen', label: 'Easy to open' },
{ id: 'presentation', label: 'Visual presentation' },
{ id: 'materials', label: 'Material quality' },
{ id: 'branding', label: 'Brand consistency' },
{ id: 'sustainable', label: 'Eco-friendliness' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true,
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
});
// ============================================
// SECTION 4: First Impressions
// ============================================
const impressionsSection = form.addSubform('impressionsSection', {
title: 'First Impressions',
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
impressionsSection.addRow(row => {
row.addSuggestionChips('positives', {
label: 'What did you love about the packaging?',
suggestions: [
{ id: 'premium', name: 'Premium feel' },
{ id: 'beautiful', name: 'Beautiful design' },
{ id: 'secure', name: 'Secure packaging' },
{ id: 'ecoFriendly', name: 'Eco-friendly' },
{ id: 'surprise', name: 'Nice surprises inside' },
{ id: 'personal', name: 'Personal touches' },
{ id: 'branded', name: 'Great branding' },
{ id: 'reusable', name: 'Reusable box' }
],
alignment: 'center'
});
});
impressionsSection.addRow(row => {
row.addSuggestionChips('negatives', {
label: 'Any packaging concerns?',
suggestions: [
{ id: 'excessive', name: 'Too much packaging' },
{ id: 'flimsy', name: 'Felt flimsy' },
{ id: 'hardOpen', name: 'Hard to open' },
{ id: 'wasteful', name: 'Wasteful materials' },
{ id: 'damaged', name: 'Arrived damaged' },
{ id: 'boring', name: 'Plain/boring' },
{ id: 'misleading', name: 'Misleading size' },
{ id: 'none', name: 'No concerns' }
],
alignment: 'center',
isVisible: () => {
const rating = qualitySection.starRating('overallPackaging')?.value();
return rating !== null && rating !== undefined && rating <= 3;
}
});
});
// ============================================
// SECTION 5: Package Contents
// ============================================
const contentsSection = form.addSubform('contentsSection', {
title: 'What Was Inside?',
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
contentsSection.addRow(row => {
row.addCheckboxList('includedItems', {
label: 'What special touches were included? (Select all)',
options: [
{ id: 'thankyou', name: 'Thank you card/note' },
{ id: 'handwritten', name: 'Handwritten message' },
{ id: 'samples', name: 'Free samples' },
{ id: 'discount', name: 'Discount code for next order' },
{ id: 'stickers', name: 'Stickers or extras' },
{ id: 'tissue', name: 'Tissue paper/ribbon' },
{ id: 'instructions', name: 'Care instructions' },
{ id: 'nothing', name: 'Nothing special' }
],
orientation: 'vertical'
});
});
contentsSection.addRow(row => {
row.addThumbRating('worthUnboxing', {
label: 'Was the unboxing experience worth sharing?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, I\'d share this!',
downLabel: 'Not really',
alignment: 'center'
});
});
// ============================================
// SECTION 6: Product Condition
// ============================================
const conditionSection = form.addSubform('conditionSection', {
title: 'Product Condition',
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
conditionSection.addRow(row => {
row.addRadioButton('productCondition', {
label: 'How was the product condition when you opened it?',
options: [
{ id: 'perfect', name: '✨ Perfect - exactly as expected' },
{ id: 'good', name: '👍 Good - minor cosmetic issues' },
{ id: 'acceptable', name: '🤷 Acceptable - some concerns' },
{ id: 'damaged', name: '⚠️ Damaged - packaging didn\'t protect well' }
],
orientation: 'vertical'
});
});
conditionSection.addRow(row => {
row.addTextarea('damageDetails', {
label: 'Please describe the damage or issues',
placeholder: 'Tell us what went wrong so we can fix it...',
rows: 2,
autoExpand: true,
isVisible: () => {
const condition = conditionSection.radioButton('productCondition')?.value();
return condition === 'damaged' || condition === 'acceptable';
}
});
});
// ============================================
// SECTION 7: Social Sharing
// ============================================
const socialSection = form.addSubform('socialSection', {
title: 'Share the Love',
isVisible: () => {
const wow = emotionsSection.slider('wowFactor')?.value();
return wow !== null && wow !== undefined && wow >= 7;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
socialSection.addRow(row => {
row.addRadioButton('willShare', {
label: 'Would you share your unboxing on social media?',
options: [
{ id: 'already', name: 'Already did! 📸' },
{ id: 'planning', name: 'Planning to!' },
{ id: 'maybe', name: 'Maybe if incentivized' },
{ id: 'no', name: 'Probably not' }
],
orientation: 'vertical'
});
});
socialSection.addRow(row => {
row.addTextbox('socialHandle', {
label: 'Share your social handle (optional - we might feature you!)',
placeholder: '@yourhandle',
isVisible: () => {
const share = socialSection.radioButton('willShare')?.value();
return share === 'already' || share === 'planning';
}
});
});
// ============================================
// SECTION 8: Additional Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Final Thoughts',
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'Any suggestions for improving our packaging?',
placeholder: 'Your ideas help us create better unboxing experiences...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Unboxing Summary',
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const excitement = emotionsSection.emojiRating('excitement')?.value();
const wow = emotionsSection.slider('wowFactor')?.value() || 5;
const packaging = qualitySection.starRating('overallPackaging')?.value();
const condition = conditionSection.radioButton('productCondition')?.value();
const worthSharing = contentsSection.thumbRating('worthUnboxing')?.value();
const positives = impressionsSection.suggestionChips('positives')?.value() || [];
const includedItems = contentsSection.checkboxList('includedItems')?.value() || [];
if (packaging === null || packaging === undefined) return '';
let emoji = packaging >= 4 ? '📦✨' : packaging >= 3 ? '📦' : '📦😔';
let status = packaging >= 4 ? 'Loved It!' : packaging >= 3 ? 'Good Experience' : 'Needs Work';
let summary = `${emoji} Unboxing Summary\n`;
summary += `${'═'.repeat(25)}\n\n`;
summary += `⭐ Packaging: ${packaging}/5 (${status})\n`;
summary += `🎉 Wow Factor: ${wow}/10\n`;
if (excitement) {
const excitementLabels: Record<string, string> = {
'very-bad': '😢 Disappointed',
'bad': '😕 Underwhelmed',
'neutral': '😐 Neutral',
'good': '😊 Happy',
'excellent': '🤩 Excited!'
};
summary += `💖 Feeling: ${excitementLabels[excitement] || excitement}\n`;
}
if (condition) {
const conditionLabels: Record<string, string> = {
'perfect': '✨ Perfect condition',
'good': '👍 Good condition',
'acceptable': '🤷 Acceptable',
'damaged': '⚠️ Damaged'
};
summary += `📋 Product: ${conditionLabels[condition]}\n`;
}
if (positives.length > 0) {
summary += `\n💚 Loved: ${positives.length} aspects`;
}
if (includedItems.length > 0 && !includedItems.includes('nothing')) {
summary += `\n🎁 Extras: ${includedItems.length} special touches`;
}
if (worthSharing) {
summary += `\n\n${worthSharing === 'up' ? '📸 Share-worthy!' : '🤷 Standard unboxing'}`;
}
return summary;
},
customStyles: () => {
const rating = qualitySection.starRating('overallPackaging')?.value();
const base = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (rating !== null && rating !== undefined && rating >= 4) {
return { ...base, backgroundColor: '#fff7ed', borderLeft: '4px solid #ea580c' };
} else if (rating !== null && rating !== undefined && rating <= 2) {
return { ...base, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...base, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => qualitySection.starRating('overallPackaging')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for sharing your unboxing experience!',
message: 'Your feedback helps us create more magical moments. We appreciate you taking the time to share your thoughts!'
});
}