import { Form, Head } from '@inertiajs/react'; import { Plus, Sparkles } from 'lucide-react'; import { useState } from 'react'; import { PromoCodeField } from '@/components/booking/promo-code-field'; import { Button } from '@/components/ui/button'; import { useBookingLive } from '@/contexts/booking-live'; import { cn } from '@/lib/utils'; type AddonOption = { id: number; name: string; description: string | null; duration_minutes: number; price_sedan: number; price_suv: number; price_truck: number; price_van: number; price_oversized: number; }; type Props = { addons: AddonOption[]; vehicleSize: 'sedan' | 'suv' | 'truck' | 'van' | 'oversized' | null; selectedAddonIds?: number[]; }; const priceByVehicleSize = (addon: AddonOption, vehicleSize: Props['vehicleSize']): number => { if (vehicleSize === 'suv') return addon.price_suv; if (vehicleSize === 'truck') return addon.price_truck; if (vehicleSize === 'van') return addon.price_van; if (vehicleSize === 'oversized') return addon.price_oversized; return addon.price_sedan; }; export default function Step4Addons({ addons, vehicleSize, selectedAddonIds }: Props) { const { setPatch } = useBookingLive(); const [selected, setSelected] = useState>( new Set((selectedAddonIds ?? []).map(Number)), ); const toggle = (id: number) => { const next = new Set(selected); if (next.has(id)) next.delete(id); else next.add(id); setSelected(next); const selectedAddons = addons.filter((a) => next.has(a.id)); const addonsTotal = selectedAddons.reduce((sum, a) => sum + priceByVehicleSize(a, vehicleSize), 0); setPatch({ addonNames: selectedAddons.map((a) => a.name), addonsTotal }); }; const selectedAddons = addons.filter((a) => selected.has(a.id)); const addonsTotal = selectedAddons.reduce( (sum, a) => sum + priceByVehicleSize(a, vehicleSize), 0, ); return ( <>
{({ processing }) => (

Enhance your wash

Optional add-ons to make your car shine even more.

{addons.length === 0 ? (

No add-ons are currently available.

) : (
{addons.map((addon) => { const price = priceByVehicleSize(addon, vehicleSize); const isSelected = selected.has(addon.id); return (
toggle(addon.id)} > {/* Hidden checkboxes for form submission */} toggle(addon.id)} className="sr-only" />

{addon.name}

{addon.description && (

{addon.description}

)}

+{addon.duration_minutes} min

+${(price / 100).toFixed(2)}
); })}
)} {/* */} {/* Selection summary */} {selected.size > 0 && (
{selected.size} add-on{selected.size !== 1 ? 's' : ''} selected +${(addonsTotal / 100).toFixed(2)}
)}
{selected.size === 0 && (

No add-ons selected — you can skip this step

)}
)}
); }