export function massageWellnessForm(form: FormTs) {
form.setTitle(() => '💆 Massage & Spa Calculator');
form.configureCompletionScreen({
type: 'text',
title: () => '🧘 Booking Ready!',
message: () => 'Your treatment package is ready. Book your relaxation session today!'
});
const typeRates: Record<string, number> = {
'swedish': 80,
'deep-tissue': 95,
'hot-stone': 110,
'sports': 100,
'prenatal': 90,
'couples': 160
};
const typeSection = form.addSubform('type', {
title: () => '💆 Massage Type',
mobileBreakpoint: 0
});
typeSection.addRow(row => {
row.addRadioButton('massageType', {
label: 'Select Type',
options: [
{ id: 'swedish', name: '🌿 Swedish ($80/hr)' },
{ id: 'deep-tissue', name: '💪 Deep Tissue ($95/hr)' },
{ id: 'hot-stone', name: '🪨 Hot Stone ($110/hr)' },
{ id: 'sports', name: '🏃 Sports ($100/hr)' },
{ id: 'prenatal', name: '🤰 Prenatal ($90/hr)' },
{ id: 'couples', name: '💑 Couples ($160/hr)' }
],
defaultValue: 'swedish',
orientation: 'vertical',
isRequired: true
});
});
const sessionSection = form.addSubform('session', {
title: () => '⏱️ Session',
mobileBreakpoint: 0
});
sessionSection.addRow(row => {
row.addDropdown('duration', {
label: 'Duration',
options: [
{ id: '30', name: '30 min (60% rate)' },
{ id: '60', name: '60 min (full rate)' },
{ id: '90', name: '90 min (1.5x rate)' },
{ id: '120', name: '2 hours (2x rate)' }
],
defaultValue: '60'
}, '1fr');
});
sessionSection.addRow(row => {
row.addDropdown('therapist', {
label: 'Therapist Level',
options: [
{ id: 'standard', name: 'Licensed Therapist' },
{ id: 'senior', name: 'Senior (+20%)' },
{ id: 'master', name: 'Master (+40%)' }
],
defaultValue: 'standard'
}, '1fr');
row.addDropdown('location', {
label: 'Location',
options: [
{ id: 'spa', name: 'Spa/Clinic' },
{ id: 'mobile', name: 'Mobile (+30%)' }
],
defaultValue: 'spa'
}, '1fr');
});
const enhanceSection = form.addSubform('enhance', {
title: () => '✨ Enhancements',
mobileBreakpoint: 0
});
enhanceSection.addRow(row => {
row.addCheckboxList('enhancements', {
label: 'Select Enhancements',
options: [
{ id: 'aromatherapy', name: '🌸 Aromatherapy (+$15)' },
{ id: 'hotTowels', name: '🔥 Hot Towels (+$10)' },
{ id: 'scalp', name: '💆 Scalp Massage (+$15)' },
{ id: 'cupping', name: '🫙 Cupping (+$25)' }
],
orientation: 'vertical'
});
});
const packageSection = form.addSubform('package', {
title: () => '📦 Package',
mobileBreakpoint: 0
});
packageSection.addRow(row => {
row.addRadioButton('packageType', {
label: 'Sessions',
options: [
{ id: 'single', name: 'Single Visit' },
{ id: '3', name: '3 Sessions (-5%)' },
{ id: '6', name: '6 Sessions (-10%)' },
{ id: '12', name: '12 Sessions (-15%)' }
],
defaultValue: 'single',
orientation: 'horizontal'
});
});
const calculatePrice = () => {
const massageType = typeSection.radioButton('massageType')?.value() || 'swedish';
const duration = parseInt(sessionSection.dropdown('duration')?.value() || '60');
const therapist = sessionSection.dropdown('therapist')?.value() || 'standard';
const location = sessionSection.dropdown('location')?.value() || 'spa';
const packageType = packageSection.radioButton('packageType')?.value() || 'single';
let hourlyRate = typeRates[massageType] || 80;
const therapistMult: Record<string, number> = { standard: 1, senior: 1.2, master: 1.4 };
hourlyRate *= therapistMult[therapist] || 1;
if (location === 'mobile') hourlyRate *= 1.3;
let sessionPrice = hourlyRate * (duration / 60);
if (duration === 30) sessionPrice = hourlyRate * 0.6;
const selected = enhanceSection.checkboxList('enhancements')?.value() || [];
const enhancementPrices: Record<string, number> = {
aromatherapy: 15,
hotTowels: 10,
scalp: 15,
cupping: 25
};
const enhancements = selected.reduce((total, id) => total + (enhancementPrices[id] || 0), 0);
sessionPrice += enhancements;
const packageDiscount: Record<string, number> = { single: 0, '3': 5, '6': 10, '12': 15 };
sessionPrice *= (1 - (packageDiscount[packageType] || 0) / 100);
return Math.round(sessionPrice);
};
const getPackageSessions = () => {
const packageType = packageSection.radioButton('packageType')?.value() || 'single';
const sessions: Record<string, number> = { single: 1, '3': 3, '6': 6, '12': 12 };
return sessions[packageType] || 1;
};
const summary = form.addSubform('summary', {
title: () => '💰 Your Quote',
isCollapsible: false
});
summary.addRow(row => {
row.addPriceDisplay('sessionPrice', {
label: 'Per Session',
computedValue: () => calculatePrice(),
alignment: 'center',
variant: 'large'
});
});
summary.addRow(row => {
row.addTextPanel('package', {
computedValue: () => {
const sessions = getPackageSessions();
const price = calculatePrice();
if (sessions > 1) {
return `📦 ${sessions} sessions = $${sessions * price} total`;
}
const tip = Math.round(price * 0.2);
return `💡 Suggested gratuity (20%): $${tip}`;
},
customStyles: {
fontSize: '0.95rem',
color: '#059669',
textAlign: 'center',
fontWeight: '500'
}
});
});
form.configureSubmitButton({
label: () => 'Book Appointment'
});
}
