import { Head, Link } from '@inertiajs/react'; import { QRCodeSVG } from 'qrcode.react'; import { CalendarCheck, CheckCircle2, ExternalLink, Home, LayoutDashboard, MapPin, Sparkles } from 'lucide-react'; import { VehicleSizeCategoryIcon } from '@/components/vehicle-size-category-icon'; import { StatusBadge } from '@/components/status-badge'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { home, dashboard } from '@/routes'; type Props = { bookingUuid: string | null; paymentStatus: string | null; serviceStatus: string | null; paymentMethod: string | null; total: number | null; scheduledAt?: string | null; createdAt?: string | null; packageName?: string | null; customerName?: string | null; vehicleSize?: string | null; vehicleSizeName?: string | null; vehicleSizeImageUrl?: string | null; locationName?: string | null; }; function DetailCell({ label, children, }: { label: string; children: React.ReactNode; }) { return (
{label} {children}
); } export default function BookingComplete({ bookingUuid, paymentStatus, serviceStatus, paymentMethod, total, scheduledAt, packageName, customerName, vehicleSize, vehicleSizeName, vehicleSizeImageUrl, locationName, createdAt, }: Props) { const isPaid = paymentStatus === 'paid'; const isPayAtService = paymentMethod === 'pay_at_service'; const title = isPaid || isPayAtService ? 'Booking Confirmed!' : 'Payment Processing'; const description = isPaid ? 'Your booking is confirmed and payment has been received.' : isPayAtService ? `Your appointment is scheduled. Payment of $${((total ?? 0) / 100).toFixed(2)} will be collected in person.` : 'Your payment is being finalized. This page will update automatically.'; const trackingUrl = bookingUuid ? `${window.location.origin}/track/${bookingUuid}` : null; const dateStr = scheduledAt ? new Date(scheduledAt).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', }) : null; const timeStr = scheduledAt ? new Date(scheduledAt).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', }) : null; // QR section height: pt-6(24) + QR(168) + gap-3(12) + text(16) + pb-5(20) = 240px const DIVIDER_TOP = 240; return ( <>
{/* Success icon */}
{/* Title + description */}

{title}

{description}

{/* Status badges */}
{paymentStatus ? : null} {serviceStatus ? : null} {isPayAtService ? ( Pay at service ) : null}
{/* Portrait ticket */}
{/* Cutout circles at left/right of horizontal divider */}
{/* TOP — QR code */}
{trackingUrl ? ( ) : (
)} Scan to track your booking
{/* Horizontal dashed divider */}
{/* BOTTOM — booking details */}
{/* Package + location header */}
Car Wash

{packageName ?? 'Booking'}

{locationName && (
{locationName}
)}
{/* Detail grid */}
{dateStr && ( {dateStr} )} {timeStr && ( {timeStr} )} {customerName && ( {customerName} )} {vehicleSize && ( {vehicleSizeName ?? vehicleSize} )} {total !== null && ( ${(total / 100).toFixed(2)} )} {bookingUuid && ( {bookingUuid.slice(0, 8)} )} {createdAt && ( {new Date(createdAt).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', })} )}
{/* Tracking link */} {trackingUrl && ( Open tracking page )}
); }