import { Form, Head, Link, usePage } from '@inertiajs/react'; import { Building2, Car, Check, CheckCircle2, LogIn, MapPin, Search, Star, X } from 'lucide-react'; import { useState } from 'react'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { cn } from '@/lib/utils'; import type { User as AuthUser } from '@/types/auth'; type FixedLocation = { id: number; name: string; address: string | null; city: string | null; state: string | null; zip: string | null; }; function fmtLocationAddress(loc: FixedLocation): string | null { const parts = [loc.address, loc.city, loc.state, loc.zip].filter(Boolean); return parts.length > 0 ? parts.join(', ') : null; } type ServiceType = { slug: string; label: string; description: string | null; }; type Props = { locations: FixedLocation[]; activeServiceTypes: ServiceType[]; defaultLocationId?: number | null; draft?: { service_type?: 'mobile' | 'fixed'; service_zip?: string | null; location_id?: number | null; }; }; export default function Step1Location({ locations, activeServiceTypes, defaultLocationId = null, draft, }: Props) { const { auth } = usePage().props as { auth?: { user?: AuthUser } }; const user = auth?.user ?? null; const loginUrl = `/login?redirect_to=${encodeURIComponent('/book/location')}`; const mobileType = activeServiceTypes.find((t) => t.slug === 'mobile_zone'); const fixedType = activeServiceTypes.find((t) => t.slug === 'fixed'); const mobileAvailable = mobileType !== undefined; const fixedAvailable = fixedType !== undefined; const preferredLocationId = draft?.location_id ?? (defaultLocationId && locations.some((loc) => loc.id === defaultLocationId) ? defaultLocationId : null); const resolveDefaultType = (): 'mobile' | 'fixed' => { const draftType = draft?.service_type; if (draftType === 'mobile' && mobileAvailable) { return 'mobile'; } if (draftType === 'fixed' && fixedAvailable) { return 'fixed'; } if (preferredLocationId !== null && fixedAvailable) { return 'fixed'; } if (mobileAvailable) { return 'mobile'; } return 'fixed'; }; const [serviceType, setServiceType] = useState<'mobile' | 'fixed'>(resolveDefaultType); const [selectedLocation, setSelectedLocation] = useState(preferredLocationId); const [search, setSearch] = useState(''); const query = search.trim().toLowerCase(); const filteredLocations = query ? locations.filter((loc) => [loc.name, loc.address, loc.city, loc.state, loc.zip] .filter(Boolean) .join(' ') .toLowerCase() .includes(query), ) : locations; const defaultLocation = defaultLocationId != null ? locations.find((loc) => loc.id === defaultLocationId) ?? null : null; const showDefaultLocationCard = user !== null && defaultLocation !== null && serviceType === 'fixed' && selectedLocation === defaultLocation.id; return ( <>
{({ errors, processing }) => (
{/* Heading */}

How would you like your car washed?

We come to you, or you drop off at one of our wash bays — your choice.

{/* Returning customer + service type cards */}
{user ? (

Welcome back, {user.name}

You're signed in — your saved details will carry through the booking.

) : (

Returning customer

Please sign in here

)} {showDefaultLocationCard && defaultLocation && (

Your default wash bay

{defaultLocation.name}

{fmtLocationAddress(defaultLocation) && (

{fmtLocationAddress(defaultLocation)}

)}
Default
)} {/* Mobile */} {mobileAvailable && ( )} {/* Site / fixed location */} {fixedAvailable && ( )}
)}
); }