export function subscriptionBoxReview(form: FormTs) {
// Subscription Box Review - Multi-page product and curation feedback
// Demonstrates: Pages (multi-page wizard), StarRating per item, ThumbRating, Slider, EmojiRating, dynamic content
// State to track user's selections
const boxMonth = form.state<string>('December 2024');
const itemCount = form.state<number>(5);
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: () => `Your ${boxMonth()} Box Review`,
computedValue: () => 'Help us curate your perfect box! Rate your items and share your preferences.',
customStyles: {
background: 'linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('reviewWizard', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: Overall First Impression
// ============================================
const page1 = pages.addPage('overall');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Step 1 of 4: First Impressions',
customStyles: {
backgroundColor: '#fdf4ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold',
textAlign: 'center'
}
});
});
const overallSection = page1.addSubform('overallSection', {
title: 'Your Overall Reaction'
});
overallSection.addRow(row => {
row.addEmojiRating('firstReaction', {
label: 'How did you feel when you opened your box?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('overallSatisfaction', {
label: 'Overall satisfaction with this box',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addThumbRating('meetsExpectations', {
label: 'Did this box meet your expectations?',
showLabels: true,
upLabel: 'Yes, loved it!',
downLabel: 'Not quite',
alignment: 'center',
size: 'lg'
});
});
page1.addRow(row => {
row.addButton('nextToProducts', {
label: 'Next: Rate Your Products →',
onClick: () => pages.goToPage('products')
});
});
// ============================================
// PAGE 2: Product Ratings
// ============================================
const page2 = pages.addPage('products');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Step 2 of 4: Product Ratings',
customStyles: {
backgroundColor: '#fdf4ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold',
textAlign: 'center'
}
});
});
page2.addRow(row => {
row.addTextPanel('productInstructions', {
computedValue: () => 'Rate each product in your box. Your ratings help us select better products for future boxes!',
customStyles: {
backgroundColor: '#f0f9ff',
padding: '12px',
borderRadius: '8px',
fontSize: '14px',
textAlign: 'center'
}
});
});
// Product 1
const product1 = page2.addSubform('product1', {
title: 'Product #1'
});
product1.addRow(row => {
row.addTextbox('product1Name', {
label: 'Product name (optional)',
placeholder: 'e.g., Rose Face Serum'
}, '1fr');
row.addStarRating('product1Rating', {
label: 'Rating',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '200px');
});
product1.addRow(row => {
row.addThumbRating('product1Keep', {
label: 'Would you buy this product again?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'left'
});
});
// Product 2
const product2 = page2.addSubform('product2', {
title: 'Product #2'
});
product2.addRow(row => {
row.addTextbox('product2Name', {
label: 'Product name (optional)',
placeholder: 'e.g., Vitamin C Moisturizer'
}, '1fr');
row.addStarRating('product2Rating', {
label: 'Rating',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '200px');
});
product2.addRow(row => {
row.addThumbRating('product2Keep', {
label: 'Would you buy this product again?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'left'
});
});
// Product 3
const product3 = page2.addSubform('product3', {
title: 'Product #3'
});
product3.addRow(row => {
row.addTextbox('product3Name', {
label: 'Product name (optional)',
placeholder: 'e.g., Coconut Hair Mask'
}, '1fr');
row.addStarRating('product3Rating', {
label: 'Rating',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '200px');
});
product3.addRow(row => {
row.addThumbRating('product3Keep', {
label: 'Would you buy this product again?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'left'
});
});
// Navigation
page2.addSpacer({ height: '20px' });
page2.addRow(row => {
row.addButton('backToOverall', {
label: '← Back',
onClick: () => pages.goToPage('overall')
}, '100px');
row.addEmpty('1fr');
row.addButton('nextToCuration', {
label: 'Next: Curation Quality →',
onClick: () => pages.goToPage('curation')
}, 'auto');
});
// ============================================
// PAGE 3: Curation & Value
// ============================================
const page3 = pages.addPage('curation');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Step 3 of 4: Curation & Value',
customStyles: {
backgroundColor: '#fdf4ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold',
textAlign: 'center'
}
});
});
const curationSection = page3.addSubform('curationSection', {
title: 'Curation Quality'
});
curationSection.addRow(row => {
row.addRatingScale('personalization', {
label: 'How well did this box match your preferences?',
preset: 'likert-5',
lowLabel: 'Poor match',
highLabel: 'Perfect match',
size: 'md',
alignment: 'center'
});
});
curationSection.addRow(row => {
row.addRatingScale('variety', {
label: 'How do you rate the variety of products?',
preset: 'likert-5',
lowLabel: 'Too similar',
highLabel: 'Great variety',
size: 'md',
alignment: 'center'
});
});
curationSection.addRow(row => {
row.addRatingScale('discovery', {
label: 'Did you discover new products you loved?',
preset: 'likert-5',
lowLabel: 'Nothing new',
highLabel: 'Amazing finds!',
size: 'md',
alignment: 'center'
});
});
const valueSection = page3.addSubform('valueSection', {
title: 'Value Assessment'
});
valueSection.addRow(row => {
row.addSlider('valueForMoney', {
label: 'Value for money',
min: 1,
max: 10,
defaultValue: 5,
showValue: true,
unit: '/10'
});
});
valueSection.addRow(row => {
row.addRadioButton('comparedToPrice', {
label: 'Compared to the subscription price, the products felt:',
options: [
{ id: 'much-more', name: 'Worth much more than I paid' },
{ id: 'more', name: 'Worth a bit more than I paid' },
{ id: 'fair', name: 'Fair value for the price' },
{ id: 'less', name: 'Worth less than I paid' }
],
orientation: 'vertical'
});
});
// Navigation
page3.addSpacer({ height: '20px' });
page3.addRow(row => {
row.addButton('backToProducts', {
label: '← Back',
onClick: () => pages.goToPage('products')
}, '100px');
row.addEmpty('1fr');
row.addButton('nextToPreferences', {
label: 'Next: Future Preferences →',
onClick: () => pages.goToPage('preferences')
}, 'auto');
});
// ============================================
// PAGE 4: Future Preferences
// ============================================
const page4 = pages.addPage('preferences');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Step 4 of 4: Your Preferences',
customStyles: {
backgroundColor: '#fdf4ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold',
textAlign: 'center'
}
});
});
const preferencesSection = page4.addSubform('preferencesSection', {
title: 'Help Us Improve'
});
preferencesSection.addRow(row => {
row.addCheckboxList('moreOf', {
label: 'What would you like MORE of in future boxes?',
options: [
{ id: 'skincare', name: 'Skincare products' },
{ id: 'makeup', name: 'Makeup items' },
{ id: 'haircare', name: 'Haircare products' },
{ id: 'fragrance', name: 'Fragrances & perfumes' },
{ id: 'wellness', name: 'Wellness & supplements' },
{ id: 'tools', name: 'Beauty tools & accessories' },
{ id: 'fullsize', name: 'Full-size products' },
{ id: 'luxury', name: 'Luxury/premium brands' }
],
orientation: 'vertical',
max: 4
}, '1fr');
row.addCheckboxList('lessOf', {
label: 'What would you like LESS of?',
options: [
{ id: 'samples', name: 'Sample sizes' },
{ id: 'repeats', name: 'Repeat products' },
{ id: 'niche', name: 'Niche/unknown brands' },
{ id: 'strong-scents', name: 'Strong fragrances' },
{ id: 'food', name: 'Food/edible items' },
{ id: 'lifestyle', name: 'Lifestyle items' }
],
orientation: 'vertical',
max: 3
}, '1fr');
});
const loyaltySection = page4.addSubform('loyaltySection', {
title: 'Subscription Loyalty'
});
loyaltySection.addRow(row => {
row.addRatingScale('npsScore', {
label: 'How likely are you to recommend our subscription to a friend?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true
});
});
loyaltySection.addRow(row => {
row.addRadioButton('continueSubscription', {
label: 'How likely are you to continue your subscription?',
options: [
{ id: 'definitely', name: 'Definitely will continue' },
{ id: 'probably', name: 'Probably will continue' },
{ id: 'unsure', name: 'Not sure yet' },
{ id: 'unlikely', name: 'Probably will cancel' },
{ id: 'canceling', name: 'Planning to cancel' }
],
orientation: 'vertical'
});
});
// Conditional section for those considering cancellation
const cancellationSection = page4.addSubform('cancellationConcerns', {
title: 'Help Us Keep You',
isVisible: () => {
const value = loyaltySection.radioButton('continueSubscription')?.value();
return value === 'unsure' || value === 'unlikely' || value === 'canceling';
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
cancellationSection.addRow(row => {
row.addCheckboxList('cancellationReasons', {
label: 'What concerns do you have? (Select all that apply)',
options: [
{ id: 'price', name: 'Price is too high' },
{ id: 'products', name: 'Products don\'t match my preferences' },
{ id: 'quality', name: 'Product quality issues' },
{ id: 'value', name: 'Not enough value' },
{ id: 'too-many', name: 'I have too many products already' },
{ id: 'other', name: 'Other reasons' }
],
orientation: 'vertical'
});
});
// Final comments
page4.addSpacer();
page4.addRow(row => {
row.addTextarea('finalComments', {
label: 'Any other feedback or suggestions?',
placeholder: 'Tell us what would make your subscription experience perfect...',
rows: 3,
autoExpand: true
});
});
// Navigation
page4.addSpacer({ height: '20px' });
page4.addRow(row => {
row.addButton('backToCuration', {
label: '← Back',
onClick: () => pages.goToPage('curation')
}, '100px');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Review & Earn Rewards! 🎁'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Review! 💜',
message: 'Your feedback helps us curate better boxes just for you. Check your email for a special thank-you discount on your next box!'
});
}