export function postPurchase(form: FormTs) {
// Post-Purchase Feedback Form - E-commerce customer experience
// Demonstrates: StarRating, ThumbRating, EmojiRating, SuggestionChips, conditional logic, Dropdown
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'How Was Your Purchase Experience?',
computedValue: () => 'Your feedback helps us serve you better',
customStyles: {
backgroundColor: '#f97316',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Order Information
// ============================================
const orderInfo = form.addSubform('orderInfo', {
title: 'Your Order',
customStyles: { backgroundColor: '#fff7ed', padding: '16px', borderRadius: '8px' }
});
orderInfo.addRow(row => {
row.addTextbox('orderNumber', {
label: 'Order Number (Optional)',
placeholder: 'e.g., ORD-12345'
}, '1fr');
row.addDropdown('productCategory', {
label: 'Product Category',
options: [
{ id: 'electronics', name: 'Electronics' },
{ id: 'clothing', name: 'Clothing & Fashion' },
{ id: 'home', name: 'Home & Garden' },
{ id: 'beauty', name: 'Beauty & Personal Care' },
{ id: 'sports', name: 'Sports & Outdoors' },
{ id: 'books', name: 'Books & Media' },
{ id: 'food', name: 'Food & Groceries' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select category'
}, '1fr');
});
// ============================================
// SECTION 2: Product Rating
// ============================================
const productSection = form.addSubform('productSection', {
title: 'Product Experience',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
productSection.addRow(row => {
row.addStarRating('productRating', {
label: 'How would you rate the product?',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true,
isRequired: true
});
});
productSection.addRow(row => {
row.addEmojiRating('productSatisfaction', {
label: 'How do you feel about your purchase?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// Product Fit (for applicable categories)
productSection.addRow(row => {
row.addDropdown('productFit', {
label: 'How well did the product match the description?',
options: [
{ id: 'perfect', name: 'Exactly as described' },
{ id: 'mostly', name: 'Mostly as described' },
{ id: 'somewhat', name: 'Somewhat different' },
{ id: 'very-different', name: 'Very different from description' }
],
placeholder: 'Select an option'
});
});
// Product quality aspects
productSection.addRow(row => {
row.addSuggestionChips('productPositives', {
label: 'What did you like about the product?',
suggestions: [
{ id: 'quality', name: 'Great Quality' },
{ id: 'value', name: 'Good Value' },
{ id: 'design', name: 'Nice Design' },
{ id: 'functionality', name: 'Works Great' },
{ id: 'durability', name: 'Durable' },
{ id: 'packaging', name: 'Nice Packaging' },
{ id: 'eco', name: 'Eco-Friendly' },
{ id: 'expectations', name: 'Exceeded Expectations' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Delivery Experience
// ============================================
const deliverySection = form.addSubform('deliverySection', {
title: 'Delivery Experience',
isVisible: () => productSection.starRating('productRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#f0fdf4' }
});
deliverySection.addRow(row => {
row.addThumbRating('deliveryOnTime', {
label: 'Was the delivery on time?',
showLabels: true,
upLabel: 'Yes, on time',
downLabel: 'No, delayed',
alignment: 'center',
size: 'lg'
});
});
deliverySection.addRow(row => {
row.addStarRating('deliveryRating', {
label: 'Rate the delivery experience',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
row.addStarRating('packagingRating', {
label: 'Rate the packaging',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
});
deliverySection.addRow(row => {
row.addDropdown('deliveryCondition', {
label: 'How was the product condition upon arrival?',
options: [
{ id: 'perfect', name: 'Perfect condition' },
{ id: 'minor', name: 'Minor packaging damage, product fine' },
{ id: 'damaged', name: 'Product was damaged' },
{ id: 'wrong', name: 'Wrong item delivered' }
],
placeholder: 'Select condition'
});
});
// ============================================
// SECTION 4: Shopping Experience
// ============================================
const shoppingSection = form.addSubform('shoppingSection', {
title: 'Shopping Experience',
isVisible: () => productSection.starRating('productRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
shoppingSection.addRow(row => {
row.addRatingScale('easeOfPurchase', {
preset: 'ces',
label: 'How easy was it to find and purchase this product?',
lowLabel: 'Very Difficult',
highLabel: 'Very Easy',
alignment: 'center',
size: 'md'
});
});
shoppingSection.addRow(row => {
row.addSuggestionChips('shoppingPositives', {
label: 'What did you enjoy about shopping with us?',
suggestions: [
{ id: 'website', name: 'Easy Website' },
{ id: 'selection', name: 'Great Selection' },
{ id: 'prices', name: 'Good Prices' },
{ id: 'checkout', name: 'Fast Checkout' },
{ id: 'payment', name: 'Payment Options' },
{ id: 'support', name: 'Helpful Support' },
{ id: 'tracking', name: 'Order Tracking' },
{ id: 'returns', name: 'Easy Returns Policy' }
],
alignment: 'left'
});
});
// ============================================
// SECTION 5: Issues Section (Conditional)
// ============================================
const issuesSection = form.addSubform('issuesSection', {
title: 'Tell Us What Went Wrong',
isVisible: () => {
const rating = productSection.starRating('productRating')?.value();
const deliveryCondition = deliverySection.dropdown('deliveryCondition')?.value();
return (rating !== null && rating !== undefined && rating <= 2) ||
deliveryCondition === 'damaged' || deliveryCondition === 'wrong';
},
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' }
});
issuesSection.addRow(row => {
row.addCheckboxList('issues', {
label: 'What issues did you experience?',
options: [
{ id: 'quality', name: 'Product quality not as expected' },
{ id: 'description', name: 'Did not match description/photos' },
{ id: 'damaged', name: 'Product arrived damaged' },
{ id: 'missing', name: 'Parts missing' },
{ id: 'size', name: 'Wrong size/dimensions' },
{ id: 'color', name: 'Color different from shown' },
{ id: 'delay', name: 'Significant delivery delay' },
{ id: 'wrong-item', name: 'Received wrong item' }
],
orientation: 'vertical'
});
});
issuesSection.addRow(row => {
row.addTextarea('issueDetails', {
label: 'Please describe the issue',
placeholder: 'Tell us more about what happened...',
rows: 3,
autoExpand: true,
isVisible: () => {
const issues = issuesSection.checkboxList('issues')?.value() || [];
return issues.length > 0;
}
});
});
issuesSection.addRow(row => {
row.addDropdown('issueResolution', {
label: 'What would you like us to do?',
options: [
{ id: 'refund', name: 'Full refund' },
{ id: 'exchange', name: 'Exchange for correct item' },
{ id: 'partial', name: 'Partial refund/discount' },
{ id: 'contact', name: 'Contact me to discuss' },
{ id: 'nothing', name: 'No action needed, just feedback' }
],
placeholder: 'Select preferred resolution',
isVisible: () => {
const issues = issuesSection.checkboxList('issues')?.value() || [];
return issues.length > 0;
}
});
});
// ============================================
// SECTION 6: Positive Highlights (Conditional)
// ============================================
const highlightsSection = form.addSubform('highlightsSection', {
title: 'What Made This Purchase Great?',
isVisible: () => {
const rating = productSection.starRating('productRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#ecfdf5', borderLeft: '4px solid #10b981' }
});
highlightsSection.addRow(row => {
row.addThumbRating('wouldBuyAgain', {
label: 'Would you buy from us again?',
showLabels: true,
upLabel: 'Definitely!',
downLabel: 'Probably not',
alignment: 'center',
size: 'lg'
});
});
highlightsSection.addRow(row => {
row.addTextarea('testimonial', {
label: 'Care to share a short testimonial? (May be used on our website)',
placeholder: 'I loved shopping here because...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 7: Recommendation
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Would You Recommend Us?',
isVisible: () => productSection.starRating('productRating')?.value() !== null,
customStyles: () => {
const nps = recommendSection.ratingScale('npsScore')?.npsCategory();
if (nps === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (nps === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (nps === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
recommendSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend our store to friends?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
// ============================================
// SECTION 8: Future Improvements
// ============================================
const futureSection = form.addSubform('futureSection', {
title: 'Help Us Improve',
isVisible: () => productSection.starRating('productRating')?.value() !== null
});
futureSection.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'What could we improve?',
suggestions: [
{ id: 'prices', name: 'Lower Prices' },
{ id: 'shipping', name: 'Faster Shipping' },
{ id: 'selection', name: 'More Products' },
{ id: 'website', name: 'Better Website' },
{ id: 'mobile', name: 'Mobile App' },
{ id: 'payment', name: 'More Payment Options' },
{ id: 'loyalty', name: 'Loyalty Program' },
{ id: 'support', name: 'Better Support' }
],
max: 3,
alignment: 'left'
});
});
futureSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: 'Any other feedback?',
placeholder: 'We love hearing from our customers...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 9: Contact for Follow-up
// ============================================
const contactSection = form.addSubform('contactSection', {
title: 'Stay Connected',
isVisible: () => productSection.starRating('productRating')?.value() !== null
});
contactSection.addRow(row => {
row.addCheckbox('contactForIssue', {
label: 'Contact me about my issue (if applicable)',
isVisible: () => {
const issues = issuesSection.checkboxList('issues')?.value() || [];
return issues.length > 0;
}
});
});
contactSection.addRow(row => {
row.addCheckbox('newsletter', {
label: 'Sign me up for exclusive deals and offers'
});
});
contactSection.addRow(row => {
row.addEmail('email', {
label: 'Email Address',
placeholder: 'your@email.com',
isVisible: () =>
contactSection.checkbox('contactForIssue')?.value() === true ||
contactSection.checkbox('newsletter')?.value() === true,
isRequired: () => contactSection.checkbox('contactForIssue')?.value() === true
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => productSection.starRating('productRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your opinion matters to us. We use customer feedback to continuously improve our products and service.'
});
}