export function carWashCalculator(form: FormTs) {
// Vehicle size base prices
const vehiclePrices: Record<string, number> = {
'sedan': 25,
'coupe': 22,
'suv': 35,
'truck': 40,
'van': 45,
'motorcycle': 15
};
// Wash package prices (added to base)
const packagePrices: Record<string, number> = {
'basic': 0,
'standard': 15,
'premium': 30,
'ultimate': 50
};
// Membership discounts
const membershipDiscounts: Record<string, number> = {
'none': 0,
'basic': 10,
'premium': 20,
'unlimited': 0 // Different pricing model
};
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'Car Wash Price Calculator',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Vehicle Section
const vehicleSection = form.addSubform('vehicle', { title: '๐ Your Vehicle' });
vehicleSection.addRow(row => {
row.addDropdown('vehicleType', {
label: 'Vehicle Type',
options: [
{ id: 'coupe', name: 'Coupe / Sports Car' },
{ id: 'sedan', name: 'Sedan / Hatchback' },
{ id: 'suv', name: 'SUV / Crossover' },
{ id: 'truck', name: 'Pickup Truck' },
{ id: 'van', name: 'Van / Minivan' },
{ id: 'motorcycle', name: 'Motorcycle' }
],
defaultValue: 'sedan',
isRequired: true
}, '1fr');
row.addDropdown('vehicleCondition', {
label: 'Current Condition',
options: [
{ id: 'light', name: 'Light Dirt (regular maintenance)' },
{ id: 'moderate', name: 'Moderate (1-2 weeks since wash)' },
{ id: 'heavy', name: 'Heavy (mud, road salt, bugs)' },
{ id: 'extreme', name: 'Extreme (off-road, months unwashed)' }
],
defaultValue: 'moderate'
}, '1fr');
});
// Wash Package Section
const packageSection = form.addSubform('package', { title: '๐งฝ Wash Package' });
packageSection.addRow(row => {
row.addRadioButton('washPackage', {
label: 'Select Your Package',
options: [
{ id: 'basic', name: 'Basic Wash - Exterior rinse & dry' },
{ id: 'standard', name: 'Standard Wash - Exterior + wheels + windows (+$15)' },
{ id: 'premium', name: 'Premium Wash - Standard + interior vacuum + wipe (+$30)' },
{ id: 'ultimate', name: 'Ultimate Detail - Full interior/exterior detail (+$50)' }
],
defaultValue: 'standard',
orientation: 'vertical',
isRequired: true
});
});
// Exterior Add-ons Section
const exteriorSection = form.addSubform('exterior', { title: 'โจ Exterior Add-ons' });
exteriorSection.addRow(row => {
row.addCheckbox('waxCoating', {
label: 'Spray Wax Coating (+$10)',
defaultValue: false
}, '1fr');
row.addCheckbox('ceramicCoating', {
label: 'Ceramic Spray Sealant (+$25)',
defaultValue: false
}, '1fr');
});
exteriorSection.addRow(row => {
row.addCheckbox('tireShine', {
label: 'Tire Shine & Dressing (+$8)',
defaultValue: true
}, '1fr');
row.addCheckbox('rimCleaning', {
label: 'Deep Rim Cleaning (+$12)',
defaultValue: false
}, '1fr');
});
exteriorSection.addRow(row => {
row.addCheckbox('bugRemoval', {
label: 'Bug & Tar Removal (+$15)',
defaultValue: false
}, '1fr');
row.addCheckbox('clayBar', {
label: 'Clay Bar Treatment (+$40)',
defaultValue: false
}, '1fr');
});
exteriorSection.addRow(row => {
row.addCheckbox('headlightRestore', {
label: 'Headlight Restoration (+$35)',
defaultValue: false
}, '1fr');
row.addCheckbox('engineBay', {
label: 'Engine Bay Cleaning (+$30)',
defaultValue: false
}, '1fr');
});
// Interior Add-ons Section
const interiorSection = form.addSubform('interior', { title: '๐ช Interior Add-ons' });
interiorSection.addRow(row => {
row.addCheckbox('deepVacuum', {
label: 'Deep Vacuum (+$15)',
defaultValue: false
}, '1fr');
row.addCheckbox('leatherCondition', {
label: 'Leather Conditioning (+$20)',
defaultValue: false
}, '1fr');
});
interiorSection.addRow(row => {
row.addCheckbox('fabricProtection', {
label: 'Fabric Protection (+$25)',
defaultValue: false
}, '1fr');
row.addCheckbox('odorElimination', {
label: 'Odor Elimination (+$20)',
defaultValue: false
}, '1fr');
});
interiorSection.addRow(row => {
row.addCheckbox('carpetShampoo', {
label: 'Carpet & Mat Shampoo (+$30)',
defaultValue: false
}, '1fr');
row.addCheckbox('petHairRemoval', {
label: 'Pet Hair Removal (+$25)',
defaultValue: false
}, '1fr');
});
// Membership Section
const memberSection = form.addSubform('membership', { title: '๐ซ Membership' });
memberSection.addRow(row => {
row.addRadioButton('membershipType', {
label: 'Membership Status',
options: [
{ id: 'none', name: 'No Membership (pay per wash)' },
{ id: 'basic', name: 'Basic Member (-10% all services)' },
{ id: 'premium', name: 'Premium Member (-20% all services)' },
{ id: 'unlimited', name: 'Unlimited Plan (see monthly pricing)' }
],
defaultValue: 'none',
orientation: 'vertical'
});
});
memberSection.addRow(row => {
row.addTextPanel('unlimitedInfo', {
computedValue: () => {
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const basePrice = vehiclePrices[vehicleType] || 25;
const monthlyPrice = Math.round(basePrice * 3.5);
return `Unlimited Plan: $${monthlyPrice}/month for unlimited Basic washes. Upgrades available at member prices.`;
},
customStyles: { 'font-size': '0.9rem', 'color': '#3b82f6', 'background': '#eff6ff', 'padding': '10px', 'border-radius': '6px' },
isVisible: () => memberSection.radioButton('membershipType')?.value() === 'unlimited'
});
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Price Summary Section
const summarySection = form.addSubform('summary', { title: '๐ฐ Your Quote', isCollapsible: false });
summarySection.addRow(row => {
row.addPriceDisplay('basePrice', {
label: 'Base Vehicle Price',
computedValue: () => {
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
return vehiclePrices[vehicleType] || 25;
},
variant: 'default'
}, '1fr');
row.addPriceDisplay('packagePrice', {
label: 'Package Upgrade',
computedValue: () => {
const washPackage = packageSection.radioButton('washPackage')?.value() || 'standard';
return packagePrices[washPackage] || 0;
},
variant: 'default',
prefix: '+'
}, '1fr');
});
summarySection.addRow(row => {
row.addPriceDisplay('exteriorAddons', {
label: 'Exterior Add-ons',
computedValue: () => {
let total = 0;
if (exteriorSection.checkbox('waxCoating')?.value()) total += 10;
if (exteriorSection.checkbox('ceramicCoating')?.value()) total += 25;
if (exteriorSection.checkbox('tireShine')?.value()) total += 8;
if (exteriorSection.checkbox('rimCleaning')?.value()) total += 12;
if (exteriorSection.checkbox('bugRemoval')?.value()) total += 15;
if (exteriorSection.checkbox('clayBar')?.value()) total += 40;
if (exteriorSection.checkbox('headlightRestore')?.value()) total += 35;
if (exteriorSection.checkbox('engineBay')?.value()) total += 30;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
row.addPriceDisplay('interiorAddons', {
label: 'Interior Add-ons',
computedValue: () => {
let total = 0;
if (interiorSection.checkbox('deepVacuum')?.value()) total += 15;
if (interiorSection.checkbox('leatherCondition')?.value()) total += 20;
if (interiorSection.checkbox('fabricProtection')?.value()) total += 25;
if (interiorSection.checkbox('odorElimination')?.value()) total += 20;
if (interiorSection.checkbox('carpetShampoo')?.value()) total += 30;
if (interiorSection.checkbox('petHairRemoval')?.value()) total += 25;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
});
summarySection.addRow(row => {
row.addPriceDisplay('conditionSurcharge', {
label: 'Condition Surcharge',
computedValue: () => {
const condition = vehicleSection.dropdown('vehicleCondition')?.value() || 'moderate';
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const basePrice = vehiclePrices[vehicleType] || 25;
if (condition === 'heavy') return Math.round(basePrice * 0.25);
if (condition === 'extreme') return Math.round(basePrice * 0.5);
return 0;
},
variant: 'default',
prefix: '+',
isVisible: () => {
const condition = vehicleSection.dropdown('vehicleCondition')?.value();
return condition === 'heavy' || condition === 'extreme';
}
}, '1fr');
row.addPriceDisplay('memberDiscount', {
label: 'Member Discount',
computedValue: () => {
const membership = memberSection.radioButton('membershipType')?.value() || 'none';
if (membership === 'none' || membership === 'unlimited') return 0;
const discountPct = membershipDiscounts[membership] || 0;
// Calculate subtotal
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const condition = vehicleSection.dropdown('vehicleCondition')?.value() || 'moderate';
const washPackage = packageSection.radioButton('washPackage')?.value() || 'standard';
let subtotal = vehiclePrices[vehicleType] || 25;
subtotal += packagePrices[washPackage] || 0;
// Exterior add-ons
if (exteriorSection.checkbox('waxCoating')?.value()) subtotal += 10;
if (exteriorSection.checkbox('ceramicCoating')?.value()) subtotal += 25;
if (exteriorSection.checkbox('tireShine')?.value()) subtotal += 8;
if (exteriorSection.checkbox('rimCleaning')?.value()) subtotal += 12;
if (exteriorSection.checkbox('bugRemoval')?.value()) subtotal += 15;
if (exteriorSection.checkbox('clayBar')?.value()) subtotal += 40;
if (exteriorSection.checkbox('headlightRestore')?.value()) subtotal += 35;
if (exteriorSection.checkbox('engineBay')?.value()) subtotal += 30;
// Interior add-ons
if (interiorSection.checkbox('deepVacuum')?.value()) subtotal += 15;
if (interiorSection.checkbox('leatherCondition')?.value()) subtotal += 20;
if (interiorSection.checkbox('fabricProtection')?.value()) subtotal += 25;
if (interiorSection.checkbox('odorElimination')?.value()) subtotal += 20;
if (interiorSection.checkbox('carpetShampoo')?.value()) subtotal += 30;
if (interiorSection.checkbox('petHairRemoval')?.value()) subtotal += 25;
// Condition surcharge
const basePrice = vehiclePrices[vehicleType] || 25;
if (condition === 'heavy') subtotal += basePrice * 0.25;
if (condition === 'extreme') subtotal += basePrice * 0.5;
return -Math.round(subtotal * discountPct / 100);
},
variant: 'success',
prefix: '',
isVisible: () => {
const membership = memberSection.radioButton('membershipType')?.value();
return membership === 'basic' || membership === 'premium';
}
}, '1fr');
});
summarySection.addRow(row => {
row.addTextPanel('savingsNote', {
computedValue: () => {
const membership = memberSection.radioButton('membershipType')?.value() || 'none';
if (membership === 'unlimited') {
return 'Unlimited plan includes unlimited Basic washes. Premium upgrades at 20% off.';
}
if (membership === 'none') {
return 'Join our membership program to save 10-20% on every wash!';
}
return '';
},
customStyles: { 'font-size': '0.9rem', 'color': '#059669', 'text-align': 'center' },
isVisible: () => memberSection.radioButton('membershipType')?.value() !== 'basic' && memberSection.radioButton('membershipType')?.value() !== 'premium'
});
});
summarySection.addRow(row => {
row.addTextPanel('estimatedTime', {
computedValue: () => {
const washPackage = packageSection.radioButton('washPackage')?.value() || 'standard';
let time = '15-20';
if (washPackage === 'standard') time = '25-35';
if (washPackage === 'premium') time = '45-60';
if (washPackage === 'ultimate') time = '2-3 hours';
// Add time for heavy add-ons
let addons = 0;
if (exteriorSection.checkbox('clayBar')?.value()) addons += 30;
if (exteriorSection.checkbox('headlightRestore')?.value()) addons += 20;
if (interiorSection.checkbox('carpetShampoo')?.value()) addons += 30;
if (interiorSection.checkbox('petHairRemoval')?.value()) addons += 20;
if (addons > 0 && washPackage !== 'ultimate') {
return `Estimated time: ${time} minutes + ${addons} min for add-ons`;
}
return `Estimated time: ${time} minutes`;
},
customStyles: { 'font-size': '0.85rem', 'color': '#64748b', 'text-align': 'center' }
});
});
const finalSection = form.addSubform('final', {
title: '๐งพ Summary',
isCollapsible: false,
sticky: 'bottom'
});
finalSection.addRow(row => {
row.addPriceDisplay('totalPrice', {
label: 'Total Price',
computedValue: () => {
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const condition = vehicleSection.dropdown('vehicleCondition')?.value() || 'moderate';
const washPackage = packageSection.radioButton('washPackage')?.value() || 'standard';
const membership = memberSection.radioButton('membershipType')?.value() || 'none';
// Base + package
let total = vehiclePrices[vehicleType] || 25;
total += packagePrices[washPackage] || 0;
// Exterior add-ons
if (exteriorSection.checkbox('waxCoating')?.value()) total += 10;
if (exteriorSection.checkbox('ceramicCoating')?.value()) total += 25;
if (exteriorSection.checkbox('tireShine')?.value()) total += 8;
if (exteriorSection.checkbox('rimCleaning')?.value()) total += 12;
if (exteriorSection.checkbox('bugRemoval')?.value()) total += 15;
if (exteriorSection.checkbox('clayBar')?.value()) total += 40;
if (exteriorSection.checkbox('headlightRestore')?.value()) total += 35;
if (exteriorSection.checkbox('engineBay')?.value()) total += 30;
// Interior add-ons
if (interiorSection.checkbox('deepVacuum')?.value()) total += 15;
if (interiorSection.checkbox('leatherCondition')?.value()) total += 20;
if (interiorSection.checkbox('fabricProtection')?.value()) total += 25;
if (interiorSection.checkbox('odorElimination')?.value()) total += 20;
if (interiorSection.checkbox('carpetShampoo')?.value()) total += 30;
if (interiorSection.checkbox('petHairRemoval')?.value()) total += 25;
// Condition surcharge
const basePrice = vehiclePrices[vehicleType] || 25;
if (condition === 'heavy') total += basePrice * 0.25;
if (condition === 'extreme') total += basePrice * 0.5;
// Member discount
if (membership === 'basic') total *= 0.9;
if (membership === 'premium') total *= 0.8;
return Math.round(total);
},
variant: 'large',
isVisible: () => memberSection.radioButton('membershipType')?.value() !== 'unlimited'
});
});
finalSection.addRow(row => {
row.addPriceDisplay('unlimitedPrice', {
label: 'Unlimited Monthly Plan',
computedValue: () => {
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const basePrice = vehiclePrices[vehicleType] || 25;
return Math.round(basePrice * 3.5);
},
variant: 'large',
suffix: '/month',
isVisible: () => memberSection.radioButton('membershipType')?.value() === 'unlimited'
});
});
finalSection.addRow(row => {
row.addTextPanel('disclaimer', {
computedValue: () => 'Prices may vary based on vehicle condition. Satisfaction guaranteed.',
customStyles: { 'font-size': '0.85rem', 'color': '#64748b', 'font-style': 'italic' }
});
});
form.configureSubmitButton({
label: 'Book Your Wash'
});
}