export function farmersMarketVendorForm(form: FormTs) {
// Farmers Market Vendor Survey - Post-Market Day Feedback
// Demonstrates: Money, Datepicker, Slider, MatrixQuestion, StarRating, EmojiRating, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Market Day Vendor Survey',
computedValue: () => 'Help us improve your market experience by sharing your feedback.',
customStyles: {
backgroundColor: '#15803d',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Market Day Details
// ============================================
const detailsSection = form.addSubform('details', {
title: 'Market Day Details'
});
detailsSection.addRow(row => {
row.addDatepicker('marketDate', {
label: 'Market Date',
isRequired: true,
maxDate: () => new Date().toISOString().split('T')[0]
}, '1fr');
row.addDropdown('weatherConditions', {
label: 'Weather Conditions',
options: [
{ id: 'sunny', name: 'Sunny & Clear' },
{ id: 'partly-cloudy', name: 'Partly Cloudy' },
{ id: 'overcast', name: 'Overcast' },
{ id: 'rainy', name: 'Rainy' },
{ id: 'hot', name: 'Very Hot' },
{ id: 'cold', name: 'Cold' },
{ id: 'windy', name: 'Windy' }
],
isRequired: true
}, '1fr');
});
detailsSection.addRow(row => {
row.addDropdown('vendorCategory', {
label: 'Your Primary Product Category',
options: [
{ id: 'produce', name: 'Fresh Produce' },
{ id: 'baked', name: 'Baked Goods' },
{ id: 'dairy', name: 'Dairy & Eggs' },
{ id: 'meat', name: 'Meat & Poultry' },
{ id: 'prepared', name: 'Prepared Foods' },
{ id: 'plants', name: 'Plants & Flowers' },
{ id: 'crafts', name: 'Artisan Crafts' },
{ id: 'beverages', name: 'Beverages' },
{ id: 'other', name: 'Other' }
],
isRequired: true
});
});
// ============================================
// SECTION 2: Sales Performance
// ============================================
const salesSection = form.addSubform('sales', {
title: 'Sales Performance',
customStyles: () => {
const sales = salesSection.dropdown('salesRange')?.value();
if (sales === 'excellent') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (sales === 'poor' || sales === 'very-poor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px solid #e5e7eb' };
}
});
salesSection.addRow(row => {
row.addDropdown('salesRange', {
label: 'How would you rate your sales today?',
options: [
{ id: 'excellent', name: 'Excellent (Best day ever!)' },
{ id: 'above-avg', name: 'Above Average' },
{ id: 'average', name: 'Average' },
{ id: 'below-avg', name: 'Below Average' },
{ id: 'poor', name: 'Poor' },
{ id: 'very-poor', name: 'Very Poor (Worst day)' }
],
isRequired: true
}, '1fr');
row.addMoney('totalSales', {
label: 'Approximate Total Sales',
currency: '$',
min: 0,
placeholder: 'Enter sales amount'
}, '1fr');
});
salesSection.addRow(row => {
row.addSlider('customerCount', {
label: 'Estimated number of customers you served',
min: 0,
max: 200,
step: 5,
showValue: true,
unit: 'customers',
defaultValue: 25
});
});
// Conditional question for poor sales
salesSection.addSpacer({ height: '16px' });
salesSection.addRow(row => {
row.addCheckboxList('poorSalesReasons', {
label: 'What factors contributed to lower sales?',
options: [
{ id: 'weather', name: 'Bad weather' },
{ id: 'traffic', name: 'Low foot traffic' },
{ id: 'competition', name: 'Too much competition' },
{ id: 'pricing', name: 'Pricing issues' },
{ id: 'product', name: 'Product availability' },
{ id: 'location', name: 'Poor booth location' },
{ id: 'timing', name: 'Market timing' },
{ id: 'other', name: 'Other factors' }
],
orientation: 'vertical',
isVisible: () => {
const sales = salesSection.dropdown('salesRange')?.value();
return sales === 'poor' || sales === 'very-poor' || sales === 'below-avg';
}
});
});
// ============================================
// SECTION 3: Market Organization
// ============================================
const organizationSection = form.addSubform('organization', {
title: 'Market Organization'
});
organizationSection.addRow(row => {
row.addMatrixQuestion('organizationMatrix', {
label: 'Please rate the following aspects of market organization:',
rows: [
{ id: 'setup', label: 'Setup & Check-in Process', isRequired: true },
{ id: 'location', label: 'Your Booth Location', isRequired: true },
{ id: 'signage', label: 'Market Signage & Visibility', isRequired: true },
{ id: 'parking', label: 'Vendor Parking', isRequired: true },
{ id: 'facilities', label: 'Restrooms & Facilities', isRequired: true },
{ id: 'management', label: 'Market Management Support', isRequired: true }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Excellent' }
],
fullWidth: true,
striped: true
});
});
// ============================================
// SECTION 4: Overall Experience
// ============================================
const experienceSection = form.addSubform('experience', {
title: 'Overall Experience'
});
experienceSection.addRow(row => {
row.addStarRating('overallSatisfaction', {
label: 'Overall satisfaction with today\'s market',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'center',
showConfettiOnMax: true
});
});
experienceSection.addRow(row => {
row.addEmojiRating('marketAtmosphere', {
label: 'How was the market atmosphere today?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
experienceSection.addRow(row => {
row.addThumbRating('wouldReturn', {
label: 'Would you participate in this market again?',
showLabels: true,
upLabel: 'Yes, definitely!',
downLabel: 'Not sure',
alignment: 'center',
size: 'lg'
});
});
// ============================================
// SECTION 5: Improvement Suggestions
// ============================================
const suggestionsSection = form.addSubform('suggestions', {
title: 'Suggestions for Improvement',
isVisible: () => experienceSection.starRating('overallSatisfaction')?.value() !== null
});
suggestionsSection.addRow(row => {
row.addCheckboxList('improvementAreas', {
label: 'What areas need the most improvement?',
options: [
{ id: 'marketing', name: 'Market promotion & advertising' },
{ id: 'hours', name: 'Market hours' },
{ id: 'layout', name: 'Booth layout & spacing' },
{ id: 'amenities', name: 'Vendor amenities (power, shade)' },
{ id: 'customers', name: 'Customer experience' },
{ id: 'fees', name: 'Vendor fees' },
{ id: 'communication', name: 'Communication from organizers' },
{ id: 'none', name: 'No improvements needed' }
],
orientation: 'vertical'
});
});
suggestionsSection.addSpacer({ height: '16px' });
suggestionsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: () => {
const satisfaction = experienceSection.starRating('overallSatisfaction')?.value();
if (satisfaction && satisfaction >= 4) return 'What made today great? Any additional comments?';
if (satisfaction && satisfaction <= 2) return 'What went wrong? How can we make it right?';
return 'Any additional comments or suggestions?';
},
placeholder: 'Share your thoughts, ideas, or concerns...',
rows: 4
});
});
// ============================================
// SECTION 6: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Market Day Summary',
isVisible: () => experienceSection.starRating('overallSatisfaction')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const date = detailsSection.datepicker('marketDate')?.value();
const weather = detailsSection.dropdown('weatherConditions')?.value();
const category = detailsSection.dropdown('vendorCategory')?.value();
const salesRange = salesSection.dropdown('salesRange')?.value();
const totalSales = salesSection.money('totalSales')?.value();
const customers = salesSection.slider('customerCount')?.value();
const satisfaction = experienceSection.starRating('overallSatisfaction')?.value();
let summary = '🌻 Market Day Summary\n';
summary += '═'.repeat(28) + '\n\n';
if (date) {
const formattedDate = new Date(date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
summary += `📅 Date: ${formattedDate}\n`;
}
const weatherEmojis: Record<string, string> = {
'sunny': '☀️', 'partly-cloudy': '⛅', 'overcast': '☁️',
'rainy': '🌧️', 'hot': '🔥', 'cold': '❄️', 'windy': '💨'
};
if (weather) summary += `${weatherEmojis[weather] || '🌤️'} Weather: ${weather.replace('-', ' ')}\n`;
if (salesRange) {
const salesEmojis: Record<string, string> = {
'excellent': '🎉', 'above-avg': '📈', 'average': '📊',
'below-avg': '📉', 'poor': '😟', 'very-poor': '😢'
};
summary += `\n${salesEmojis[salesRange] || '💰'} Sales: ${salesRange.replace('-', ' ')}\n`;
}
if (totalSales) summary += `💵 Revenue: $${totalSales.toFixed(2)}\n`;
if (customers !== null && customers !== undefined) summary += `👥 Customers: ~${customers}\n`;
if (satisfaction) {
const stars = '⭐'.repeat(satisfaction);
summary += `\n${stars} Overall: ${satisfaction}/5`;
}
return summary;
},
customStyles: () => {
const salesRange = salesSection.dropdown('salesRange')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (salesRange === 'excellent' || salesRange === 'above-avg') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #15803d' };
}
if (salesRange === 'poor' || salesRange === 'very-poor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #dc2626' };
}
return { ...baseStyles, backgroundColor: '#fef9c3', borderLeft: '4px solid #ca8a04' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Market Feedback',
isVisible: () => experienceSection.starRating('overallSatisfaction')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your input helps us create a better market experience for all vendors. We review all feedback and will share improvements at our next vendor meeting.'
});
}