export function blackFridayFeedbackSurvey(form: FormTs) {
// Black Friday Sale Experience Survey
// Demonstrates: EmojiRating, StarRating, RatingScale, MatrixQuestion, Slider, dynamic labels, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: '🛍️ Black Friday Feedback',
computedValue: () => "Thank you for shopping with us! Share your Black Friday experience to help us improve future sales.",
customStyles: {
background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Purchase Status
// ============================================
const purchaseSection = form.addSubform('purchaseSection', {
title: 'Your Shopping Activity'
});
purchaseSection.addRow(row => {
row.addRadioButton('purchaseStatus', {
label: 'Did you make a purchase during the Black Friday sale?',
options: [
{ id: 'purchased', name: 'Yes, I bought something' },
{ id: 'browsed', name: 'I browsed but didn\'t buy' },
{ id: 'returned', name: 'I returned to buy something I saw earlier' }
],
isRequired: true,
orientation: 'vertical'
});
});
// Follow-up for browsers
purchaseSection.addSpacer();
purchaseSection.addRow(row => {
row.addCheckboxList('whyNotBuy', {
label: 'What prevented you from purchasing?',
options: [
{ id: 'prices', name: 'Prices weren\'t low enough' },
{ id: 'out-of-stock', name: 'Items I wanted were out of stock' },
{ id: 'website-issues', name: 'Website problems/slow loading' },
{ id: 'found-elsewhere', name: 'Found better deals elsewhere' },
{ id: 'not-ready', name: 'Not ready to buy yet' },
{ id: 'budget', name: 'Budget constraints' }
],
orientation: 'vertical',
isVisible: () => purchaseSection.radioButton('purchaseStatus')?.value() === 'browsed'
});
});
// Spend amount for buyers
purchaseSection.addRow(row => {
row.addRadioButton('spendAmount', {
label: 'Approximately how much did you spend?',
options: [
{ id: 'under-50', name: 'Under $50' },
{ id: '50-100', name: '$50 - $100' },
{ id: '100-250', name: '$100 - $250' },
{ id: '250-500', name: '$250 - $500' },
{ id: 'over-500', name: 'Over $500' }
],
orientation: 'horizontal',
isVisible: () => {
const status = purchaseSection.radioButton('purchaseStatus')?.value();
return status === 'purchased' || status === 'returned';
}
});
});
// ============================================
// SECTION 2: Deal Quality Rating
// ============================================
const dealsSection = form.addSubform('dealsSection', {
title: 'Deals & Discounts',
isVisible: () => purchaseSection.radioButton('purchaseStatus')?.value() !== null,
customStyles: () => {
const rating = dealsSection.starRating('dealsRating')?.value();
if (rating && rating >= 4) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (rating && rating <= 2) return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
}
});
dealsSection.addRow(row => {
row.addStarRating('dealsRating', {
label: 'How would you rate the quality of our Black Friday deals?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
dealsSection.addSpacer({ height: '16px' });
dealsSection.addRow(row => {
row.addMatrixQuestion('dealsMatrix', {
label: 'Rate these aspects of our deals:',
rows: [
{ id: 'discount-depth', label: 'Discount amounts', isRequired: true },
{ id: 'variety', label: 'Variety of products on sale', isRequired: true },
{ id: 'availability', label: 'Stock availability', isRequired: true },
{ id: 'clarity', label: 'Clear pricing/discount info', isRequired: false }
],
columns: [
{ id: 'excellent', label: 'Excellent' },
{ id: 'good', label: 'Good' },
{ id: 'average', label: 'Average' },
{ id: 'poor', label: 'Poor' }
],
striped: true,
fullWidth: true
});
});
dealsSection.addSpacer();
dealsSection.addRow(row => {
row.addSlider('valuePerception', {
label: 'How much value did you feel you got compared to regular prices?',
min: 0,
max: 100,
step: 10,
showValue: true,
unit: '%',
defaultValue: 50
});
});
// ============================================
// SECTION 3: Website Experience
// ============================================
const websiteSection = form.addSubform('websiteSection', {
title: 'Website Experience',
isVisible: () => purchaseSection.radioButton('purchaseStatus')?.value() !== null
});
websiteSection.addRow(row => {
row.addEmojiRating('siteExperience', {
label: 'How was the website experience during the sale?',
preset: 'custom',
emojis: [
{ id: 'terrible', emoji: '💥', label: 'Crashed/broken' },
{ id: 'slow', emoji: '🐌', label: 'Very slow' },
{ id: 'okay', emoji: '😐', label: 'Okay' },
{ id: 'good', emoji: '👍', label: 'Good' },
{ id: 'smooth', emoji: '⚡', label: 'Lightning fast' }
],
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
websiteSection.addSpacer({ height: '16px' });
websiteSection.addRow(row => {
row.addCheckboxList('technicalIssues', {
label: 'Did you experience any technical issues?',
options: [
{ id: 'none', name: 'No issues' },
{ id: 'slow-loading', name: 'Slow page loading' },
{ id: 'crashes', name: 'Site crashes/errors' },
{ id: 'cart-issues', name: 'Shopping cart problems' },
{ id: 'checkout-errors', name: 'Checkout errors' },
{ id: 'payment-failed', name: 'Payment failures' },
{ id: 'mobile-issues', name: 'Mobile site issues' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 4: Checkout Experience (Buyers only)
// ============================================
const checkoutSection = form.addSubform('checkoutSection', {
title: 'Checkout Experience',
isVisible: () => {
const status = purchaseSection.radioButton('purchaseStatus')?.value();
return status === 'purchased' || status === 'returned';
}
});
checkoutSection.addRow(row => {
row.addRatingScale('checkoutEffort', {
preset: 'ces',
label: 'How easy was the checkout process?',
lowLabel: 'Very difficult',
highLabel: 'Very easy',
size: 'md',
alignment: 'center'
});
});
checkoutSection.addSpacer({ height: '16px' });
checkoutSection.addRow(row => {
row.addThumbRating('deliveryOptions', {
label: 'Were you satisfied with delivery options?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
size: 'lg',
alignment: 'center'
}, '1fr');
row.addThumbRating('paymentOptions', {
label: 'Were your preferred payment methods available?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
size: 'lg',
alignment: 'center'
}, '1fr');
});
// ============================================
// SECTION 5: Comparison & Overall
// ============================================
const comparisonSection = form.addSubform('comparisonSection', {
title: 'Comparison & Overall',
isVisible: () => dealsSection.starRating('dealsRating')?.value() !== null
});
comparisonSection.addRow(row => {
row.addRadioButton('vsCompetitors', {
label: 'How did our Black Friday sale compare to other retailers?',
options: [
{ id: 'much-better', name: 'Much better' },
{ id: 'somewhat-better', name: 'Somewhat better' },
{ id: 'about-same', name: 'About the same' },
{ id: 'somewhat-worse', name: 'Somewhat worse' },
{ id: 'much-worse', name: 'Much worse' },
{ id: 'didnt-compare', name: "Didn't compare" }
],
orientation: 'vertical'
});
});
comparisonSection.addSpacer({ height: '20px' });
comparisonSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to shop with us again during our next sale event?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
isRequired: true
});
});
// ============================================
// SECTION 6: Suggestions
// ============================================
const suggestionsSection = form.addSubform('suggestionsSection', {
title: 'Your Suggestions',
isVisible: () => comparisonSection.ratingScale('npsScore')?.value() !== null
});
suggestionsSection.addRow(row => {
row.addSuggestionChips('wantedCategories', {
label: 'Which product categories would you like to see more deals on?',
suggestions: [
{ id: 'electronics', name: 'Electronics' },
{ id: 'fashion', name: 'Fashion' },
{ id: 'home', name: 'Home & Garden' },
{ id: 'beauty', name: 'Beauty' },
{ id: 'sports', name: 'Sports' },
{ id: 'toys', name: 'Toys' },
{ id: 'appliances', name: 'Appliances' },
{ id: 'food', name: 'Food & Grocery' }
],
max: 3,
alignment: 'center'
});
});
suggestionsSection.addSpacer();
suggestionsSection.addRow(row => {
row.addTextarea('improvementIdeas', {
label: () => {
const nps = comparisonSection.ratingScale('npsScore')?.npsCategory();
if (nps === 'promoter') return "What did you love most about this sale?";
if (nps === 'detractor') return "What would make our next sale better?";
return "Any suggestions for our next Black Friday sale?";
},
placeholder: 'Share your ideas...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Feedback Summary',
isVisible: () => {
const dealsRating = dealsSection.starRating('dealsRating')?.value();
const nps = comparisonSection.ratingScale('npsScore')?.value();
return dealsRating !== null && nps !== null;
}
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const purchaseStatus = purchaseSection.radioButton('purchaseStatus')?.value();
const spendAmount = purchaseSection.radioButton('spendAmount')?.value();
const dealsRating = dealsSection.starRating('dealsRating')?.value();
const valuePercent = dealsSection.slider('valuePerception')?.value();
const siteExp = websiteSection.emojiRating('siteExperience')?.value();
const nps = comparisonSection.ratingScale('npsScore')?.value();
const category = comparisonSection.ratingScale('npsScore')?.npsCategory();
const wantedCategories = suggestionsSection.suggestionChips('wantedCategories')?.value() || [];
if (!dealsRating || nps === null || nps === undefined) return '';
const statusLabels: Record<string, string> = {
'purchased': 'Made a purchase',
'browsed': 'Browsed only',
'returned': 'Returned to buy'
};
const spendLabels: Record<string, string> = {
'under-50': 'Under $50',
'50-100': '$50-$100',
'100-250': '$100-$250',
'250-500': '$250-$500',
'over-500': 'Over $500'
};
const siteLabels: Record<string, string> = {
'terrible': 'Crashed/broken',
'slow': 'Very slow',
'okay': 'Okay',
'good': 'Good',
'smooth': 'Lightning fast'
};
let emoji = '🛍️';
if (category === 'promoter') emoji = '🎉';
else if (category === 'detractor') emoji = '😔';
let summary = `${emoji} Black Friday Feedback\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `Status: ${statusLabels[purchaseStatus || ''] || 'Unknown'}\n`;
if (spendAmount) summary += `Spent: ${spendLabels[spendAmount]}\n`;
summary += `\n`;
summary += `Deals Rating: ${'★'.repeat(dealsRating)}${'☆'.repeat(5 - dealsRating)}\n`;
if (valuePercent) summary += `Value Perception: ${valuePercent}%\n`;
if (siteExp) summary += `Site Experience: ${siteLabels[siteExp]}\n`;
summary += `\n`;
summary += `Return Likelihood: ${nps}/10 (${category?.charAt(0).toUpperCase()}${category?.slice(1)})\n`;
if (wantedCategories.length > 0) {
summary += `\nWanted Categories: ${wantedCategories.join(', ')}`;
}
return summary;
},
customStyles: () => {
const category = comparisonSection.ratingScale('npsScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => comparisonSection.ratingScale('npsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: "Your insights help us make our next sale even better. We appreciate you taking the time to share your Black Friday experience!"
});
}