export function wishlistFeedbackSurvey(form: FormTs) {
// Wishlist Feature Feedback - Understand wishlist usage and improvements needed
// Demonstrates: EmojiRating, Slider, StarRating, MatrixQuestion, CheckboxList, ThumbRating, conditional flow
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Help Us Improve Your Wishlist',
computedValue: () => 'Share your experience with our wishlist feature to help us make it even better.',
customStyles: {
background: 'linear-gradient(135deg, #ec4899 0%, #f43f5e 100%)',
color: 'white',
padding: '28px',
borderRadius: '16px',
textAlign: 'center',
fontSize: '15px'
}
});
});
// ============================================
// SECTION 1: Overall Satisfaction
// ============================================
const satisfactionSection = form.addSubform('satisfactionSection', {
title: 'Overall Experience',
customStyles: { backgroundColor: '#fdf2f8', padding: '20px', borderRadius: '12px' }
});
satisfactionSection.addRow(row => {
row.addEmojiRating('overallSatisfaction', {
label: 'How satisfied are you with our wishlist feature?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
satisfactionSection.addRow(row => {
row.addSlider('usageFrequency', {
label: 'How often do you use the wishlist?',
min: 1,
max: 5,
step: 1,
showValue: true,
defaultValue: 3,
unit: '',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null
});
});
satisfactionSection.addRow(row => {
row.addTextPanel('frequencyLabel', {
computedValue: () => {
const freq = satisfactionSection.slider('usageFrequency')?.value();
const labels: Record<number, string> = {
1: 'Rarely (once a month or less)',
2: 'Occasionally (a few times a month)',
3: 'Regularly (weekly)',
4: 'Frequently (several times a week)',
5: 'Daily'
};
return freq ? labels[freq] || '' : '';
},
customStyles: {
textAlign: 'center',
color: '#6b7280',
fontSize: '14px',
marginTop: '-8px'
},
isVisible: () => satisfactionSection.slider('usageFrequency')?.value() !== null
});
});
// ============================================
// SECTION 2: Feature Usage
// ============================================
const usageSection = form.addSubform('usageSection', {
title: 'How You Use Wishlists',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null
});
usageSection.addRow(row => {
row.addCheckboxList('usagePurpose', {
label: 'What do you primarily use the wishlist for? (Select all that apply)',
options: [
{ id: 'save-later', name: 'Saving items to buy later' },
{ id: 'price-watch', name: 'Tracking prices for sales' },
{ id: 'compare', name: 'Comparing similar products' },
{ id: 'gift-ideas', name: 'Creating gift ideas lists' },
{ id: 'share', name: 'Sharing with friends/family' },
{ id: 'organize', name: 'Organizing product research' },
{ id: 'stock', name: 'Waiting for items to be in stock' }
],
orientation: 'vertical'
});
});
usageSection.addRow(row => {
row.addInteger('wishlistItems', {
label: 'Approximately how many items are in your wishlist right now?',
min: 0,
max: 500,
placeholder: 'Enter number of items'
});
});
// ============================================
// SECTION 3: Feature Ratings
// ============================================
const ratingsSection = form.addSubform('ratingsSection', {
title: 'Feature Ratings',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '20px', borderRadius: '12px' }
});
ratingsSection.addRow(row => {
row.addMatrixQuestion('featureImportance', {
label: 'How important are these wishlist features to you?',
rows: [
{ id: 'price-alerts', label: 'Price drop notifications', isRequired: true },
{ id: 'back-in-stock', label: 'Back in stock alerts', isRequired: true },
{ id: 'multiple-lists', label: 'Multiple/organized lists', isRequired: false },
{ id: 'sharing', label: 'Sharing with others', isRequired: false },
{ id: 'mobile-sync', label: 'Syncing across devices', isRequired: true },
{ id: 'quick-add', label: 'One-click add to wishlist', isRequired: false }
],
columns: [
{ id: 'not', label: 'Not Important' },
{ id: 'nice', label: 'Nice to Have' },
{ id: 'important', label: 'Important' },
{ id: 'essential', label: 'Essential' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Current Experience Ratings
// ============================================
const experienceSection = form.addSubform('experienceSection', {
title: 'Your Experience',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null
});
experienceSection.addRow(row => {
row.addStarRating('easeOfUse', {
label: 'How easy is it to add items to your wishlist?',
maxStars: 5,
size: 'md',
showCounter: true,
alignment: 'left'
}, '1fr');
row.addStarRating('findability', {
label: 'How easy is it to find your wishlist?',
maxStars: 5,
size: 'md',
showCounter: true,
alignment: 'left'
}, '1fr');
});
experienceSection.addRow(row => {
row.addStarRating('organization', {
label: 'How well can you organize your saved items?',
maxStars: 5,
size: 'md',
showCounter: true,
alignment: 'left'
}, '1fr');
row.addStarRating('notifications', {
label: 'How useful are wishlist notifications?',
maxStars: 5,
size: 'md',
showCounter: true,
alignment: 'left'
}, '1fr');
});
// ============================================
// SECTION 5: Conversion Questions
// ============================================
const conversionSection = form.addSubform('conversionSection', {
title: 'From Wishlist to Purchase',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null
});
conversionSection.addRow(row => {
row.addThumbRating('hasPurchased', {
label: 'Have you ever purchased an item from your wishlist?',
size: 'lg',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center'
});
});
conversionSection.addRow(row => {
row.addRadioButton('purchaseTrigger', {
label: 'What usually triggers you to buy a wishlisted item?',
options: [
{ id: 'sale', name: 'Price drops or sales' },
{ id: 'need', name: 'I finally need it' },
{ id: 'stock', name: 'It came back in stock' },
{ id: 'reminder', name: 'Email/notification reminder' },
{ id: 'impulse', name: 'Just felt like treating myself' },
{ id: 'gift', name: 'Someone bought it for me' }
],
orientation: 'vertical',
isVisible: () => conversionSection.thumbRating('hasPurchased')?.value() === 'up'
});
});
conversionSection.addRow(row => {
row.addCheckboxList('notPurchaseReasons', {
label: 'Why haven\'t you purchased from your wishlist?',
options: [
{ id: 'price', name: 'Waiting for a better price' },
{ id: 'priority', name: 'Other purchases take priority' },
{ id: 'forgot', name: 'I forget to check it' },
{ id: 'changed-mind', name: 'Changed my mind about items' },
{ id: 'elsewhere', name: 'Found items cheaper elsewhere' },
{ id: 'stock', name: 'Items are out of stock' }
],
orientation: 'vertical',
isVisible: () => conversionSection.thumbRating('hasPurchased')?.value() === 'down'
});
});
// ============================================
// SECTION 6: Notification Preferences
// ============================================
const notificationSection = form.addSubform('notificationSection', {
title: 'Notification Preferences',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null,
customStyles: { backgroundColor: '#fef3c7', padding: '20px', borderRadius: '12px' }
});
notificationSection.addRow(row => {
row.addRadioButton('notificationPref', {
label: 'How would you like to be notified about wishlist updates?',
options: [
{ id: 'email', name: 'Email notifications' },
{ id: 'push', name: 'Push notifications (app/browser)' },
{ id: 'both', name: 'Both email and push' },
{ id: 'none', name: 'No notifications needed' }
],
orientation: 'vertical'
});
});
notificationSection.addRow(row => {
row.addRadioButton('notificationFreq', {
label: 'How often should we send wishlist updates?',
options: [
{ id: 'immediate', name: 'Immediately when something changes' },
{ id: 'daily', name: 'Daily digest' },
{ id: 'weekly', name: 'Weekly summary' },
{ id: 'only-sales', name: 'Only for sales/price drops' }
],
orientation: 'vertical',
isVisible: () => {
const pref = notificationSection.radioButton('notificationPref')?.value();
return !!pref && pref !== 'none';
}
});
});
// ============================================
// SECTION 7: Improvement Suggestions
// ============================================
const improvementSection = form.addSubform('improvementSection', {
title: 'Wishlist Improvements',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null
});
improvementSection.addRow(row => {
row.addSuggestionChips('wantedFeatures', {
label: 'Which new features would you love to see? (Select up to 3)',
suggestions: [
{ id: 'price-history', name: 'Price history charts' },
{ id: 'categories', name: 'Custom categories' },
{ id: 'notes', name: 'Add notes to items' },
{ id: 'priority', name: 'Priority ranking' },
{ id: 'compare', name: 'Side-by-side compare' },
{ id: 'budget', name: 'Budget tracking' },
{ id: 'collab', name: 'Collaborative lists' },
{ id: 'similar', name: 'Similar item suggestions' }
],
max: 3,
alignment: 'center'
});
});
improvementSection.addSpacer({ height: '16px' });
improvementSection.addRow(row => {
row.addTextarea('openSuggestions', {
label: 'Any other suggestions to improve our wishlist?',
placeholder: 'Tell us what would make the wishlist perfect for you...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => {
const sat = satisfactionSection.emojiRating('overallSatisfaction')?.value();
return sat !== null && sat !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const satisfaction = satisfactionSection.emojiRating('overallSatisfaction')?.value();
const frequency = satisfactionSection.slider('usageFrequency')?.value();
const purposes = usageSection.checkboxList('usagePurpose')?.value() || [];
const wantedFeatures = improvementSection.suggestionChips('wantedFeatures')?.value() || [];
const hasPurchased = conversionSection.thumbRating('hasPurchased')?.value();
if (!satisfaction) return '';
const satLabels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
const freqLabels: Record<number, string> = {
1: 'Rarely',
2: 'Occasionally',
3: 'Weekly',
4: 'Frequently',
5: 'Daily'
};
let summary = '📋 Wishlist Feedback Summary\n';
summary += `${'═'.repeat(30)}\n\n`;
summary += `💖 Satisfaction: ${satLabels[satisfaction] || satisfaction}\n`;
if (frequency) {
summary += `📅 Usage: ${freqLabels[frequency] || frequency}\n`;
}
if (purposes.length > 0) {
summary += `\n🎯 Uses wishlist for: ${purposes.length} purposes`;
}
if (hasPurchased) {
summary += `\n🛒 Has purchased from wishlist: ${hasPurchased === 'up' ? 'Yes' : 'No'}`;
}
if (wantedFeatures.length > 0) {
summary += `\n\n✨ Requested features: ${wantedFeatures.length}`;
}
return summary;
},
customStyles: () => {
const satisfaction = satisfactionSection.emojiRating('overallSatisfaction')?.value();
const baseStyles = {
padding: '20px',
borderRadius: '12px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (satisfaction === 'excellent' || satisfaction === 'good') {
return { ...baseStyles, backgroundColor: '#fdf2f8', borderLeft: '4px solid #ec4899' };
} else if (satisfaction === 'neutral') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Wishlist Feedback',
isVisible: () => satisfactionSection.emojiRating('overallSatisfaction')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights will help us build a better wishlist experience. Keep saving items you love - improvements are on the way!'
});
}