export function oilChangeCalculator(form: FormTs) {
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'Oil Change Cost Calculator',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Vehicle Info Section
const vehicleSection = form.addSubform('vehicle', { title: '🚗 Vehicle Information' });
vehicleSection.addRow(row => {
row.addDropdown('vehicleType', {
label: 'Vehicle Type',
options: [
{ id: 'sedan', name: 'Sedan/Compact Car' },
{ id: 'suv', name: 'SUV/Crossover' },
{ id: 'truck', name: 'Pickup Truck' },
{ id: 'sports', name: 'Sports Car' },
{ id: 'luxury', name: 'Luxury Vehicle' },
{ id: 'diesel', name: 'Diesel Vehicle' },
{ id: 'hybrid', name: 'Hybrid' },
{ id: 'motorcycle', name: 'Motorcycle' }
],
defaultValue: 'sedan',
isRequired: true
}, '1fr');
row.addDropdown('engineSize', {
label: 'Engine Size',
options: [
{ id: '4cyl', name: '4 Cylinder' },
{ id: '6cyl', name: '6 Cylinder' },
{ id: '8cyl', name: '8 Cylinder' },
{ id: '10cyl', name: '10+ Cylinder' }
],
defaultValue: '4cyl',
isVisible: () => {
const type = vehicleSection.dropdown('vehicleType')?.value();
return type !== 'motorcycle' && type !== 'hybrid';
}
}, '1fr');
});
vehicleSection.addRow(row => {
row.addTextbox('vehicleYear', {
label: 'Vehicle Year',
placeholder: 'e.g. 2020',
defaultValue: '2020'
}, '1fr');
row.addTextbox('vehicleMake', {
label: 'Make/Model (Optional)',
placeholder: 'e.g. Toyota Camry'
}, '1fr');
});
// Oil Type Section
const oilSection = form.addSubform('oil', { title: '🛢️ Oil Selection' });
oilSection.addRow(row => {
row.addRadioButton('oilType', {
label: 'Oil Type',
options: [
{ id: 'conventional', name: 'Conventional ($25-40) - Budget option, 3,000 mile intervals' },
{ id: 'synthetic-blend', name: 'Synthetic Blend ($35-55) - Better protection, 5,000 mile intervals' },
{ id: 'full-synthetic', name: 'Full Synthetic ($55-80) - Best protection, 7,500-10,000 mile intervals' },
{ id: 'high-mileage', name: 'High Mileage ($45-70) - For vehicles over 75,000 miles' },
{ id: 'european', name: 'European Formula ($70-120) - BMW, Mercedes, Audi, VW specs' }
],
defaultValue: 'synthetic-blend',
isRequired: true
});
});
oilSection.addRow(row => {
row.addTextPanel('oilRecommendation', {
computedValue: () => {
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const year = parseInt(vehicleSection.textbox('vehicleYear')?.value() || '2020');
if (vehicleType === 'luxury' || vehicleType === 'sports') {
return 'Recommended: Full Synthetic or European Formula for optimal performance';
}
if (vehicleType === 'diesel') {
return 'Recommended: Diesel-specific full synthetic oil required';
}
if (year >= 2015) {
return 'Recommended: Synthetic Blend or Full Synthetic for modern engines';
}
return 'Tip: Check your owner\'s manual for manufacturer recommendations';
},
customStyles: { 'font-size': '0.85rem', 'color': '#059669', 'font-style': 'italic' }
});
});
// Service Level Section
const serviceSection = form.addSubform('service', { title: '🔧 Service Level' });
serviceSection.addRow(row => {
row.addRadioButton('serviceLevel', {
label: 'Service Package',
options: [
{ id: 'basic', name: 'Basic - Oil & filter only' },
{ id: 'standard', name: 'Standard (+$15) - Basic + fluid top-off, tire check' },
{ id: 'premium', name: 'Premium (+$35) - Standard + full inspection, interior vacuum' },
{ id: 'complete', name: 'Complete (+$60) - Premium + tire rotation, car wash' }
],
defaultValue: 'standard',
isRequired: true
});
});
// Additional Services Section
const additionalSection = form.addSubform('additional', { title: '✨ Additional Services' });
additionalSection.addRow(row => {
row.addCheckbox('filterAir', {
label: 'Air Filter Replacement (+$20-35)',
defaultValue: false,
tooltip: 'Replace every 15,000-30,000 miles'
}, '1fr');
row.addCheckbox('filterCabin', {
label: 'Cabin Air Filter (+$25-45)',
defaultValue: false,
tooltip: 'Replace every 15,000-25,000 miles'
}, '1fr');
});
additionalSection.addRow(row => {
row.addCheckbox('wiperBlades', {
label: 'Wiper Blade Replacement (+$20-40)',
defaultValue: false
}, '1fr');
row.addCheckbox('tireRotation', {
label: 'Tire Rotation (+$20-35)',
defaultValue: false,
tooltip: 'Recommended every 5,000-7,500 miles',
isVisible: () => serviceSection.radioButton('serviceLevel')?.value() !== 'complete'
}, '1fr');
});
additionalSection.addRow(row => {
row.addCheckbox('brakeInspection', {
label: 'Brake Inspection (+$25)',
defaultValue: false
}, '1fr');
row.addCheckbox('batteryTest', {
label: 'Battery Test (+$15)',
defaultValue: false
}, '1fr');
});
additionalSection.addRow(row => {
row.addCheckbox('coolantFlush', {
label: 'Coolant Flush (+$80-120)',
defaultValue: false,
tooltip: 'Recommended every 30,000 miles'
}, '1fr');
row.addCheckbox('transmissionFluid', {
label: 'Transmission Fluid Service (+$100-180)',
defaultValue: false,
tooltip: 'Recommended every 60,000-100,000 miles'
}, '1fr');
});
// Service Location Section
const locationSection = form.addSubform('location', { title: '📍 Service Location' });
locationSection.addRow(row => {
row.addRadioButton('locationType', {
label: 'Where to Service',
options: [
{ id: 'quicklube', name: 'Quick Lube Shop (Jiffy Lube, Valvoline, etc.)' },
{ id: 'dealer', name: 'Dealership (+20-40%)' },
{ id: 'independent', name: 'Independent Mechanic (-10-20%)' },
{ id: 'mobile', name: 'Mobile Service (+$20-30 convenience fee)' }
],
defaultValue: 'quicklube',
isRequired: true
});
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Maintenance Schedule Section
const scheduleSection = form.addSubform('schedule', { title: '📅 Maintenance Schedule', isCollapsible: true });
scheduleSection.addRow(row => {
row.addTextPanel('scheduleInfo', {
computedValue: () => {
const oilType = oilSection.radioButton('oilType')?.value() || 'synthetic-blend';
const intervals: Record<string, string> = {
'conventional': '3,000-5,000 miles or 3 months',
'synthetic-blend': '5,000-7,500 miles or 6 months',
'full-synthetic': '7,500-10,000 miles or 12 months',
'high-mileage': '5,000-7,500 miles or 6 months',
'european': '10,000-15,000 miles or 12 months'
};
return `Recommended interval: ${intervals[oilType]}`;
},
customStyles: { 'font-size': '0.9rem', 'color': '#1e293b', 'font-weight': '500' }
});
});
scheduleSection.addRow(row => {
row.addTextPanel('annualCost', {
computedValue: () => {
const oilType = oilSection.radioButton('oilType')?.value() || 'synthetic-blend';
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const locationType = locationSection.radioButton('locationType')?.value() || 'quicklube';
const basePrices: Record<string, number> = {
'conventional': 35, 'synthetic-blend': 50, 'full-synthetic': 70,
'high-mileage': 60, 'european': 95
};
const vehicleMultiplier: Record<string, number> = {
sedan: 1, suv: 1.1, truck: 1.15, sports: 1.3, luxury: 1.5,
diesel: 1.4, hybrid: 1.2, motorcycle: 0.7
};
const locationMultiplier: Record<string, number> = {
quicklube: 1, dealer: 1.3, independent: 0.85, mobile: 1.15
};
const changesPerYear: Record<string, number> = {
'conventional': 4, 'synthetic-blend': 3, 'full-synthetic': 2,
'high-mileage': 3, 'european': 2
};
const perChange = basePrices[oilType] * vehicleMultiplier[vehicleType] * locationMultiplier[locationType];
const annual = perChange * changesPerYear[oilType];
return `Estimated annual cost: $${Math.round(annual)} (${changesPerYear[oilType]} oil changes per year)`;
},
customStyles: { 'font-size': '0.9rem', 'color': '#475569' }
});
});
// Summary Section
const summarySection = form.addSubform('summary', {
title: '💰 Service Total',
isCollapsible: false,
sticky: 'bottom'
});
summarySection.addRow(row => {
row.addPriceDisplay('totalCost', {
label: 'Estimated Cost',
computedValue: () => {
const oilType = oilSection.radioButton('oilType')?.value() || 'synthetic-blend';
const vehicleType = vehicleSection.dropdown('vehicleType')?.value() || 'sedan';
const serviceLevel = serviceSection.radioButton('serviceLevel')?.value() || 'standard';
const locationType = locationSection.radioButton('locationType')?.value() || 'quicklube';
const oilBasePrices: Record<string, number> = {
'conventional': 35, 'synthetic-blend': 50, 'full-synthetic': 70,
'high-mileage': 60, 'european': 95
};
const vehicleMultiplier: Record<string, number> = {
sedan: 1, suv: 1.1, truck: 1.15, sports: 1.3, luxury: 1.5,
diesel: 1.4, hybrid: 1.2, motorcycle: 0.7
};
const locationMultiplier: Record<string, number> = {
quicklube: 1, dealer: 1.3, independent: 0.85, mobile: 1.15
};
const serviceFees: Record<string, number> = {
basic: 0, standard: 15, premium: 35, complete: 60
};
let total = oilBasePrices[oilType] * vehicleMultiplier[vehicleType] * locationMultiplier[locationType];
total += serviceFees[serviceLevel];
if (additionalSection.checkbox('filterAir')?.value()) total += 28;
if (additionalSection.checkbox('filterCabin')?.value()) total += 35;
if (additionalSection.checkbox('wiperBlades')?.value()) total += 30;
if (additionalSection.checkbox('tireRotation')?.value() && serviceLevel !== 'complete') total += 28;
if (additionalSection.checkbox('brakeInspection')?.value()) total += 25;
if (additionalSection.checkbox('batteryTest')?.value()) total += 15;
if (additionalSection.checkbox('coolantFlush')?.value()) total += 100;
if (additionalSection.checkbox('transmissionFluid')?.value()) total += 140;
if (locationType === 'mobile') total += 25;
return Math.round(total);
},
variant: 'large'
}, '1fr');
row.addTextPanel('timeEstimate', {
label: 'Time Estimate',
computedValue: () => {
const serviceLevel = serviceSection.radioButton('serviceLevel')?.value() || 'standard';
const hasExtras = additionalSection.checkbox('coolantFlush')?.value() ||
additionalSection.checkbox('transmissionFluid')?.value();
if (hasExtras) return '45-90 min';
if (serviceLevel === 'complete') return '30-45 min';
if (serviceLevel === 'premium') return '25-35 min';
return '15-25 min';
},
customStyles: { 'font-size': '1.3rem', 'font-weight': '600', 'text-align': 'center', 'color': '#0369a1' }
}, '1fr');
});
summarySection.addRow(row => {
row.addTextPanel('serviceSummary', {
computedValue: () => {
const oilType = oilSection.radioButton('oilType')?.value() || 'synthetic-blend';
const serviceLevel = serviceSection.radioButton('serviceLevel')?.value() || 'standard';
const oilNames: Record<string, string> = {
'conventional': 'Conventional', 'synthetic-blend': 'Synthetic Blend',
'full-synthetic': 'Full Synthetic', 'high-mileage': 'High Mileage', 'european': 'European'
};
const serviceNames: Record<string, string> = {
basic: 'Basic', standard: 'Standard', premium: 'Premium', complete: 'Complete'
};
return `${oilNames[oilType]} Oil • ${serviceNames[serviceLevel]} Service`;
},
customStyles: { 'font-size': '0.95rem', 'text-align': 'center', 'color': '#475569' }
});
});
summarySection.addRow(row => {
row.addTextPanel('disclaimer', {
computedValue: () => 'Prices are estimates and may vary by location. Some vehicles may require additional labor or specialty filters.',
customStyles: { 'font-size': '0.8rem', 'color': '#94a3b8', 'text-align': 'center' }
});
});
form.configureSubmitButton({
label: 'Schedule Service'
});
}