import { Head, Link, router } from '@inertiajs/react'; import { ArrowLeft, LockKeyhole, ShieldCheck } from 'lucide-react'; import { useState } from 'react'; import PageIntro from '@/components/booking/page-intro'; import SiteFooter from '@/components/home/site-footer'; import SiteHeader from '@/components/home/site-header'; import { cardClass } from '@/components/booking/styles'; import type { PaymentOption, TripSummary } from '@/types/booking'; import { cn } from '@/lib/utils'; type Props = { trip: TripSummary; vehicleName: string; fare: string; paymentMethods: PaymentOption[] }; export default function Payment({ trip, vehicleName, fare, paymentMethods }: Props) { const [method,setMethod]=useState(paymentMethods[0]?.value??''); const [agree,setAgree]=useState(false); const [processing,setProcessing]=useState(false); const [error,setError]=useState(''); const title=trip.destination?`${trip.pickup} to ${trip.destination}`:trip.pickup; const submit=()=>{setError('');router.post('/booking/confirm',{payment_method:method,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone},{onStart:()=>setProcessing(true),onFinish:()=>setProcessing(false),onError:errors=>setError(errors.payment_method??errors.timezone??'Please review your payment selection.')});}; return <>

Payment Method

Secure checkout

{paymentMethods.map(option=>setMethod(option.value)} className="accent-blue-600"/>{option.label}Card or cash accepted by your chauffeur at pickup.)}

No card details are stored. Online card payment is coming soon.

setAgree(e.target.checked)} className="mt-0.5 accent-blue-600"/>I agree to the Terms of Service and the 2-hour free cancellation policy.{error&&

{error}

}

Back

; }