import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowRight, CalendarDays, Check, CircleCheck, Clock3, Copy, Mail, MapPin, Navigation, Phone, Plane, ShieldCheck, UserRound, } from 'lucide-react'; import { useState } from 'react'; import SiteFooter from '@/components/home/site-footer'; import SiteHeader from '@/components/home/site-header'; import { dashboard, home } from '@/routes'; import type { BookingSummary } from '@/types/booking'; function formatMoney(value: string): string { return value; } export default function BookingConfirmation({ booking }: { booking: BookingSummary }) { const { auth } = usePage().props; const [copied, setCopied] = useState(false); const pickupTime = new Date(booking.pickup_at_iso); const journeyDuration = booking.duration_minutes ?? (booking.hours ? booking.hours * 60 : 180); const isActive = booking.status === 'confirmed' && pickupTime <= new Date() && new Date() <= new Date(pickupTime.getTime() + journeyDuration * 60_000); const dateLabel = new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric', timeZone: booking.timezone, }).format(pickupTime); const timeLabel = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', timeZone: booking.timezone, }).format(pickupTime); const copyReference = async () => { await navigator.clipboard.writeText(booking.reference); setCopied(true); window.setTimeout(() => setCopied(false), 1800); }; const specialRequests = booking.special_requests; const selectedRequests = specialRequests ? [ specialRequests.quiet_ride && 'Quiet ride', specialRequests.temperature && `${specialRequests.temperature} cabin temperature`, specialRequests.wheelchair_storage && 'Wheelchair storage', specialRequests.assisted_boarding && 'Assisted boarding', specialRequests.chilled_water && 'Chilled water', specialRequests.fast_charging && 'Fast charging', specialRequests.meet_greet_name && `Meet & greet: ${specialRequests.meet_greet_name}`, specialRequests.directives, ].filter(Boolean) as string[] : []; return ( <>
← Go back

Home / Booking / Confirmation

Booking Confirmation

Booking Confirmed

{booking.status_label}

Confirmation sent to {booking.contact_email}

Reservation code

{booking.reference}

Chauffeur & Vehicle

Chauffeur assignment

Your chauffeur details will appear closer to pickup.

{booking.vehicle}

{booking.vehicle}

Selected vehicle · chauffeur service

Journey Itinerary

{dateLabel}

Pickup · {timeLabel}

{booking.flight_details && Flight {booking.flight_details}}

{booking.pickup}

{booking.passengers} passengers · {booking.bags} checked bags

{booking.destination &&

Drop-off

{booking.destination}

{booking.duration &&

Estimated journey: {booking.duration} · {booking.distance}

}
}

{booking.pickup_at_label} ({booking.timezone})

{booking.service}{booking.hours ? ` · ${booking.hours} hours` : ''}

Passenger & Request Details

Lead passenger

{booking.contact_name}

{booking.contact_phone ? ( {booking.contact_phone} ) : (

No phone provided

)}

Luggage

{booking.bags} checked · {booking.carry_on_bags} carry-on{booking.oversized_luggage ? ' · oversized item' : ''}

Child seats

{booking.child_seats || 'None requested'}

Flight

{booking.flight_details ?? 'Not provided'}{booking.flight_origin ? ` · from ${booking.flight_origin}` : ''}

Special requests

{selectedRequests.length ? selectedRequests.join(' · ') : 'No special requests'}

{isActive ? 'Journey in progress' : 'Journey tracking'}

{isActive ? 'Your scheduled journey is underway' : 'Track your active journey'}

{isActive ? 'Your trip timeline and booking details are available here. Live vehicle location will appear when chauffeur GPS tracking is connected.' : 'Your booking and pickup schedule are confirmed. Chauffeur and live location details will be added here when tracking is connected.'}

{booking.status === 'confirmed' ? Open live tracking : auth.user ? View in dashboard : Book another ride}
Book another ride{auth.user && Go to dashboard}
View trip & destination guide
); }