import { Head, Link, router } from '@inertiajs/react'; import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; import type { FormEvent } from 'react'; import { useMemo, useState } from 'react'; import { syncBookingPayment } from '@/lib/sync-booking-payment'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { useBookingDateTimeFormatters } from '@/hooks/use-booking-timezone'; type BookingPayload = { uuid: string; reference: string; id: number; scheduled_at: string | null; total: number; amount_paid: number; balance_due_cents: number; payment_method: string | null; customer_name: string | null; package_name: string | null; }; type Props = { booking: BookingPayload; balanceDueCents: number; clientSecret: string | null; stripePublishableKey: string | null; alreadyPaid: boolean; }; function BalancePaymentForm({ bookingUuid, confirmUrl, }: { bookingUuid: string; confirmUrl: string; }) { const stripe = useStripe(); const elements = useElements(); const [error, setError] = useState(null); const [processing, setProcessing] = useState(false); const submit = async (event: FormEvent) => { event.preventDefault(); if (!stripe || !elements) { setError('Stripe is still loading.'); return; } setProcessing(true); setError(null); const returnUrl = `${window.location.origin}/pay/${bookingUuid}?paid=1`; const result = await stripe.confirmPayment({ elements, confirmParams: { return_url: returnUrl }, redirect: 'if_required', }); if (result.error) { setError(result.error.message ?? 'Payment failed.'); setProcessing(false); return; } try { await syncBookingPayment(confirmUrl); } catch (syncError) { setError( syncError instanceof Error ? syncError.message : 'Payment succeeded but the booking could not be updated.', ); setProcessing(false); return; } router.visit(returnUrl); }; return (

{error ? ( {error} ) : null} ); } export default function PayBalance({ booking, balanceDueCents, clientSecret, stripePublishableKey, alreadyPaid, }: Props) { const paidFromQuery = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('paid') === '1'; const stripePromise = useMemo( () => stripePublishableKey && clientSecret ? loadStripe(stripePublishableKey) : null, [stripePublishableKey, clientSecret], ); const { formatDateTime } = useBookingDateTimeFormatters(); const scheduledLabel = booking.scheduled_at ? formatDateTime(booking.scheduled_at) : 'TBD'; return ( <>

Booking balance {booking.customer_name ? `Hi ${booking.customer_name}, ` : ''} booking #{booking.reference} {booking.package_name ? ` · ${booking.package_name}` : ''}

Scheduled:{' '} {scheduledLabel}

Total:{' '} ${(booking.total / 100).toFixed(2)}

Paid:{' '} ${(booking.amount_paid / 100).toFixed(2)}

{alreadyPaid || paidFromQuery || balanceDueCents <= 0 ? ( {paidFromQuery ? 'Thank you. Your payment was received.' : 'This booking has no balance due.'} ) : ( <>

Balance due: $ {(balanceDueCents / 100).toFixed(2)}

{stripePromise && clientSecret ? ( ) : (

Online card payment is not available right now. Pay this balance in person at your appointment.

)}

You can also pay in person when you arrive {booking.payment_method === 'pay_at_service' ? ' (pay at service)' : ''} .

)}

); }