import { Form, Head } from '@inertiajs/react'; import { Clock, Sparkles } from 'lucide-react'; import { useState } from 'react'; import InputError from '@/components/input-error'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { useBookingLive } from '@/contexts/booking-live'; import { cn } from '@/lib/utils'; type PackageOption = { id: number; name: string; description: string | null; duration_minutes: number; is_featured: boolean; prices_by_slug: Record; icon_svg: string | null; }; type Props = { packages: PackageOption[]; vehicleSize: string | null; selectedPackageId?: number | null; }; const priceByVehicleSize = ( pkg: PackageOption, vehicleSize: Props['vehicleSize'], ): number => { if (!vehicleSize) { return Object.values(pkg.prices_by_slug)[0] ?? 0; } return pkg.prices_by_slug[vehicleSize] ?? 0; }; export default function Step3Package({ packages, vehicleSize, selectedPackageId, }: Props) { const { setPatch } = useBookingLive(); const [selectedId, setSelectedId] = useState( selectedPackageId ?? (packages.length === 1 ? packages[0].id : null), ); const sortedPackages = packages; return ( <>
{({ processing, errors }) => (

Choose your wash package

All packages include our quality guarantee.

{sortedPackages.map((pkg) => { const price = priceByVehicleSize( pkg, vehicleSize, ); const isSelected = selectedId === pkg.id; const isPopular = pkg.is_featured; return (