import { Form, Head } from '@inertiajs/react'; import { useState } from 'react'; import { CreditCard, HandCoins } from 'lucide-react'; import { PromoCodeField } from '@/components/booking/promo-code-field'; import InputError from '@/components/input-error'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { cn } from '@/lib/utils'; type Props = { subtotal: number; addonsTotal: number; discountTotal: number; discountLabel: string | null; total: number; stripeEnabled: boolean; }; type PaymentMethod = 'card' | 'pay_at_service'; export default function Step7Payment({ subtotal, addonsTotal, discountTotal, discountLabel, total, stripeEnabled, }: Props) { const defaultMethod: PaymentMethod = stripeEnabled ? 'card' : 'pay_at_service'; const [paymentMethod, setPaymentMethod] = useState(defaultMethod); const [liveDiscountTotal, setLiveDiscountTotal] = useState(discountTotal); const [liveDiscountLabel, setLiveDiscountLabel] = useState(discountLabel); const liveTotal = Math.max(0, total - discountTotal + liveDiscountTotal); return ( <>

Payment

Choose how you'd like to pay for your service.

{!stripeEnabled && ( Online card payments are not configured. You can book now and pay in person when your service is complete. )} { setLiveDiscountTotal(result.discountTotal); setLiveDiscountLabel(result.discountLabel); }} />
Subtotal ${(subtotal / 100).toFixed(2)}
{addonsTotal > 0 && (
Add-ons +${(addonsTotal / 100).toFixed(2)}
)} {liveDiscountTotal > 0 && (
{liveDiscountLabel ?? 'Discount'} -${(liveDiscountTotal / 100).toFixed(2)}
)}
Total ${(liveTotal / 100).toFixed(2)}
{({ errors, processing }) => (
{/* Payment method selection */}

Payment method

{stripeEnabled && ( )}

By confirming, you agree to our service terms.

)}
); }