import { Head, Link, router } from '@inertiajs/react'; import { ArrowRight } from 'lucide-react'; import { useState } from 'react'; import PageIntro from '@/components/booking/page-intro'; import TripSummaryBar from '@/components/booking/trip-summary-bar'; import VehicleCard from '@/components/booking/vehicle-card'; import type { Vehicle, VehicleSort } from '@/components/booking/vehicles'; import { sortOptions, sortVehicles } from '@/components/booking/vehicles'; import SiteFooter from '@/components/home/site-footer'; import SiteHeader from '@/components/home/site-header'; import InputError from '@/components/input-error'; import { cn } from '@/lib/utils'; import { details } from '@/routes/booking'; import { select } from '@/routes/booking/vehicle'; import type { TripSummary } from '@/types/booking'; type Props = { trip: TripSummary; vehicles: Vehicle[]; selectedVehicle: string | null; }; export default function BookingVehicles({ trip, vehicles, selectedVehicle, }: Props) { const [sort, setSort] = useState('recommended'); const [processingId, setProcessingId] = useState(null); const [error, setError] = useState(); const visibleVehicles = sortVehicles(vehicles, sort); const selected = vehicles.find( (vehicle) => vehicle.id === selectedVehicle && vehicle.fits, ); const title = trip.destination ? `${trip.pickup} to ${trip.destination}` : trip.pickup; const choose = (vehicle: Vehicle) => { router.put( select.url(), { vehicle: vehicle.id }, { preserveScroll: true, onStart: () => { setProcessingId(vehicle.id); setError(undefined); }, onFinish: () => setProcessingId(null), onError: (errors) => setError(errors.vehicle), }, ); }; return ( <>
{sortOptions.map((option) => ( ))}
{vehicles.some((vehicle) => vehicle.is_estimate) && (

Starting fares shown. Pick your addresses from the suggestions to get an exact fixed fare.

)}
{visibleVehicles.map((vehicle) => ( choose(vehicle)} /> ))} {visibleVehicles.length === 0 && (

No vehicles match this filter.

)}
{selected && (

{selected.name}

{selected.is_estimate && 'From '} {selected.price}

Continue
)}
); }