@ticketboothapp/booking 0.1.4 → 0.1.8

package/package.json

@@ -1,17 +1,37 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "private": false,
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
   "exports": {
     ".": "./src/index.ts"
   },
+  "dependencies": {
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@react-google-maps/api": "^2.20.7",
+    "@stripe/react-stripe-js": "^3.9.0",
+    "@stripe/stripe-js": "^7.9.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "lucide-react": "^0.577.0",
+    "tailwind-merge": "^3.5.0"
+  },
   "peerDependencies": {
     "next": "^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/google.maps": "^3.58.1"
   }
 }

package/src/components/BookingDetails.tsx

@@ -0,0 +1,546 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import { formatCurrencyAmount } from '@/lib/currency';
+import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import { type Currency } from './CurrencySwitcher';
+import { useTranslations } from '@/lib/i18n';
+import { getStepLabel } from '@/lib/itinerary-labels';
+import { createBalancePaymentIntent, createManagePaymentIntent, type ItineraryDisplayStep } from '@/lib/api';
+import { ENV } from '@/lib/env';
+
+const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY) : null;
+
+function isPickupOrDropOffStep(step: { stepType?: string }): boolean {
+  return step.stepType === 'pickup' || step.stepType === 'drop_off';
+}
+
+function BalancePaymentForm({
+  successUrl,
+  onClose,
+  t,
+  balanceAmount,
+  currency,
+}: {
+  successUrl: string;
+  onClose: () => void;
+  t: (key: string) => string;
+  balanceAmount: number;
+  currency: Currency;
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setLoading(true);
+    setError(null);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      setError(submitError.message ?? 'Validation failed');
+      setLoading(false);
+      return;
+    }
+    const { error: confirmError } = await stripe.confirmPayment({
+      elements,
+      confirmParams: { return_url: successUrl },
+    });
+    if (confirmError) {
+      setError(confirmError.message ?? 'Payment failed');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <PaymentElement />
+      {error && (
+        <p className="text-sm text-red-600" role="alert">{error}</p>
+      )}
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex-1 py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50"
+        >
+          {t('common.cancel') || 'Cancel'}
+        </button>
+        <button
+          type="submit"
+          disabled={!stripe || loading}
+          className="flex-1 py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Paying...' : `Pay remaining balance (${formatCurrencyAmount(balanceAmount, currency)})`}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export interface ReceiptLineItem {
+  type: string;
+  label: string;
+  amount: number;
+  quantity?: number | null;
+  reference?: string | null;
+}
+
+export interface Receipt {
+  currency: string;
+  lineItems: ReceiptLineItem[];
+  subtotalBeforeTax: number;
+  taxAmount: number;
+  taxRate?: number | null;
+  taxIncluded: boolean;
+  totalAmount: number;
+  promoCode?: string | null;
+  promoName?: string | null;
+}
+
+export interface PaymentMethodUsage {
+  type: string;
+  amount: number;
+  currency: string;
+  displayLabel?: string | null;
+  reference?: string | null;
+  paidAt?: string | null;
+  paymentType?: string | null; // DEPOSIT | BALANCE | FULL
+}
+
+export interface PaymentPlan {
+  type: string;
+  depositAmount: number;
+  balanceAmount: number;
+  chargeDate?: string | null;
+  chargeStrategy: string;
+}
+
+export interface PaymentDisplay {
+  status: string;
+  plan?: PaymentPlan | null;
+  methodUsages: PaymentMethodUsage[];
+  balanceChargeScheduledAt?: string | null;
+  balanceChargeAttempts: number;
+  lastBalanceChargeAttempt?: string | null;
+}
+
+export interface CancellationPolicySnapshot {
+  label: string;
+  tiers?: Array<{
+    hoursBeforeBooking: number;
+    refundPercentage: number;
+  }>;
+}
+
+export interface Customer {
+  firstName?: string | null;
+  lastName?: string | null;
+  email?: string | null;
+  phoneNumber?: string | null;
+}
+
+export interface BookingData {
+  bookingReference: string;
+  productId: string;
+  status: string;
+  productType?: string | null; // "STANDARD" | "PRIVATE_SHUTTLE" - for deposit receipt UI
+  customer?: Customer | null;
+  receipt: Receipt;
+  payment: PaymentDisplay;
+  pickupLocationId?: string | null;
+  travelerHotel?: string | null;
+  cancellationPolicyId?: string | null;
+  cancellationPolicySnapshot?: CancellationPolicySnapshot | null;
+  communicationPreference?: string[] | null;
+  itineraryDisplay?: ItineraryDisplayStep[] | null;
+  createdAt: string;
+}
+
+export interface BookingDetailsProps {
+  booking: BookingData;
+  currency: Currency;
+  /** When provided, show a refresh button in the balance-due section (e.g. after returning from Stripe) */
+  onRefetch?: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- currency kept for API; display uses booking.receipt.currency
+export function BookingDetails({ booking, currency, onRefetch }: BookingDetailsProps) {
+  const { t } = useTranslations();
+  const { receipt, payment, itineraryDisplay, cancellationPolicySnapshot, communicationPreference } = booking;
+  const [showBalanceModal, setShowBalanceModal] = useState(false);
+  const [balanceClientSecret, setBalanceClientSecret] = useState<string | null>(null);
+  const [balanceLoading, setBalanceLoading] = useState(false);
+  const [balanceError, setBalanceError] = useState<string | null>(null);
+  const [paymentModalLabel, setPaymentModalLabel] = useState<string>('Pay remaining balance');
+
+  const isDepositPaid = payment.status === 'DEPOSIT_PAID';
+  const isAwaitingPayment = payment.status === 'AWAITING_PAYMENT';
+  const balanceAmount = payment.plan?.balanceAmount ?? 0;
+  const depositAmount = payment.plan?.depositAmount ?? 0;
+  const hasBalanceDue = isDepositPaid && balanceAmount > 0;
+  const hasPaymentDue = isAwaitingPayment && (depositAmount > 0 || balanceAmount > 0);
+
+  const handlePayBalance = async () => {
+    const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
+    const ln = booking.customer?.lastName?.trim();
+    if (!ln) {
+      setBalanceError('Last name is required to pay balance');
+      return;
+    }
+    setBalanceLoading(true);
+    setBalanceError(null);
+    try {
+      const res = await createBalancePaymentIntent(ref, ln);
+      setBalanceClientSecret(res.clientSecret);
+      setPaymentModalLabel('Pay remaining balance');
+      setShowBalanceModal(true);
+    } catch (err) {
+      setBalanceError(err instanceof Error ? err.message : 'Failed to start payment');
+    } finally {
+      setBalanceLoading(false);
+    }
+  };
+
+  const handlePayDeposit = async () => {
+    const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
+    const ln = booking.customer?.lastName?.trim();
+    if (!ln) {
+      setBalanceError('Last name is required');
+      return;
+    }
+    setBalanceLoading(true);
+    setBalanceError(null);
+    try {
+      const res = await createManagePaymentIntent(ref, ln, 'deposit');
+      setBalanceClientSecret(res.clientSecret);
+      setPaymentModalLabel('Pay deposit');
+      setShowBalanceModal(true);
+    } catch (err) {
+      setBalanceError(err instanceof Error ? err.message : 'Failed to start payment');
+    } finally {
+      setBalanceLoading(false);
+    }
+  };
+
+  const handlePayFull = async () => {
+    const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
+    const ln = booking.customer?.lastName?.trim();
+    if (!ln) {
+      setBalanceError('Last name is required');
+      return;
+    }
+    setBalanceLoading(true);
+    setBalanceError(null);
+    try {
+      const res = await createManagePaymentIntent(ref, ln, 'full');
+      setBalanceClientSecret(res.clientSecret);
+      setPaymentModalLabel('Pay full balance');
+      setShowBalanceModal(true);
+    } catch (err) {
+      setBalanceError(err instanceof Error ? err.message : 'Failed to start payment');
+    } finally {
+      setBalanceLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center">
+            <svg className="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <div>
+            <h1 className="text-2xl sm:text-3xl font-bold text-stone-900">Booking Confirmed</h1>
+            <p className="text-stone-600">Reference: {formatBookingRefForDisplay(booking.bookingReference)}</p>
+          </div>
+        </div>
+        {booking.customer && (
+          <p className="text-stone-700">
+            Thank you{booking.customer.firstName ? `, ${booking.customer.firstName}` : ''}! 
+            A confirmation has been sent to {booking.customer.email || 'your email'}.
+          </p>
+        )}
+      </div>
+
+      {/* Your Itinerary */}
+      {itineraryDisplay && itineraryDisplay.length > 0 && (
+        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
+          <h2 className="text-xl font-bold text-stone-900 mb-4 flex items-center gap-2">
+            <svg className="w-5 h-5 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Your Itinerary
+          </h2>
+          <div className="space-y-3">
+            {itineraryDisplay.map((step, index) => {
+              const isUncertainStep = !booking.pickupLocationId && isPickupOrDropOffStep(step);
+              const label = getStepLabel(step, t);
+              return (
+                <div key={index} className="flex justify-between items-start gap-4 border-l-2 border-stone-200 pl-4">
+                  <span className="text-stone-700 font-medium">
+                    {label}
+                  </span>
+                  <span className="shrink-0 flex items-center gap-1.5">
+                    {isUncertainStep && !step.time ? (
+                      <>
+                        <span
+                          className="text-stone-400 cursor-help"
+                          title="Time not set — add your pickup location in Manage Booking for an estimate."
+                        >
+                          <svg className="w-4 h-4 inline align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                        </span>
+                        <span className="text-stone-400 font-medium">TBD</span>
+                      </>
+                    ) : (
+                      step.time && <span className="text-stone-600">{step.time}</span>
+                    )}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          {!booking.pickupLocationId && itineraryDisplay.some(isPickupOrDropOffStep) && (
+            <p className="mt-4 text-sm text-stone-500">
+              <Link
+                href={`/manage?ref=${encodeURIComponent(booking.bookingReference)}${booking.customer?.lastName ? `&lastName=${encodeURIComponent(booking.customer.lastName)}` : ''}`}
+                className="text-stone-600 underline hover:text-stone-800"
+              >
+                Set or update your pickup location
+              </Link>
+              {' — we’ll show estimated pickup and drop-off times.'}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Payment Summary — shared PriceSummary component */}
+      <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
+        <h2 className="text-xl font-bold text-stone-900 mb-4 flex items-center gap-2">
+          <svg className="w-5 h-5 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          Payment Summary
+        </h2>
+        <PriceSummary
+          lines={receipt.lineItems.map((item): PriceSummaryLine => ({
+            kind: 'line',
+            label: item.label,
+            amount: item.amount,
+            type: item.type,
+            quantity: item.quantity,
+          }))}
+          total={receipt.totalAmount}
+          currency={receipt.currency as Currency}
+          locale="en"
+          subtotal={receipt.taxAmount > 0 ? receipt.subtotalBeforeTax : undefined}
+          size="base"
+          subtotalSpacing="relaxed"
+          t={t}
+        />
+
+        {/* Payments — Deposit/Balance for private shuttle; Card/Gift card/No payment for pay-in-full */}
+        {payment.methodUsages && payment.methodUsages.length > 0 && (
+          <div className="mt-6 pt-4 border-t border-stone-200">
+            <h3 className="text-sm font-semibold text-stone-700 mb-2">
+              {payment.plan?.type === 'DEPOSIT' ? 'Payments' : 'Payment'}
+            </h3>
+            {payment.methodUsages.map((usage, index) => {
+              const isDepositPlan = payment.plan?.type === 'DEPOSIT';
+              const label = isDepositPlan
+                ? (usage.paymentType === 'BALANCE' ? 'Balance' : 'Deposit')
+                : (usage.type === 'CARD' ? (usage.displayLabel || 'Card') : usage.type === 'GIFT_CARD' ? (usage.displayLabel || 'Gift Card') : usage.displayLabel || 'No payment');
+              return (
+                <div key={index} className="flex justify-between text-stone-600 text-sm">
+                  <span>{label}{isDepositPlan && usage.displayLabel ? ` (${usage.displayLabel})` : ''}</span>
+                  <span>{formatCurrencyAmount(usage.amount, usage.currency as Currency)}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Payment status */}
+        <div className="mt-4 pt-4 border-t border-stone-200">
+          <div className="flex justify-between text-sm">
+            <span className="text-stone-600">Status</span>
+            <span className={`font-semibold ${
+              payment.status === 'FULLY_PAID' ? 'text-emerald-600' :
+              payment.status === 'DEPOSIT_PAID' ? 'text-amber-600' :
+              'text-stone-600'
+            }`}>
+              {payment.status === 'FULLY_PAID' && 'Fully Paid'}
+              {payment.status === 'DEPOSIT_PAID' && 'Deposit Paid'}
+              {payment.status === 'AWAITING_PAYMENT' && 'Payment Due'}
+              {payment.status === 'PAYMENT_FAILED' && 'Payment Failed'}
+            </span>
+          </div>
+          {hasPaymentDue && (
+            <div className="mt-2 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-lg p-4">
+              <p className="font-semibold">Payment due</p>
+              <p className="text-xs mt-1 text-amber-600">
+                Deposit: {formatCurrencyAmount(depositAmount, receipt.currency as Currency)} • Balance: {formatCurrencyAmount(balanceAmount, receipt.currency as Currency)}
+              </p>
+              <p className="text-xs mt-2 text-amber-600">Pay now or the balance will be charged automatically before your booking.</p>
+              {onRefetch && (
+                <p className="text-xs mt-2">
+                  <button type="button" onClick={onRefetch} className="underline hover:no-underline text-amber-700">
+                    Just paid? Refresh to update
+                  </button>
+                </p>
+              )}
+              {balanceError && (
+                <p className="text-red-600 text-xs mt-2" role="alert">{balanceError}</p>
+              )}
+              <div className="mt-3 flex flex-col gap-2">
+                <button
+                  type="button"
+                  onClick={handlePayDeposit}
+                  disabled={balanceLoading || !ENV.STRIPE_PUBLISHABLE_KEY}
+                  className="w-full py-2.5 px-4 bg-amber-600 hover:bg-amber-700 disabled:bg-stone-300 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
+                >
+                  {balanceLoading ? 'Loading...' : `Pay deposit (${formatCurrencyAmount(depositAmount, receipt.currency as Currency)})`}
+                </button>
+                <button
+                  type="button"
+                  onClick={handlePayFull}
+                  disabled={balanceLoading || !ENV.STRIPE_PUBLISHABLE_KEY}
+                  className="w-full py-2.5 px-4 border border-amber-600 text-amber-700 hover:bg-amber-50 disabled:opacity-50 disabled:cursor-not-allowed font-semibold rounded-lg transition-colors"
+                >
+                  Pay full balance ({formatCurrencyAmount(receipt.totalAmount, receipt.currency as Currency)})
+                </button>
+              </div>
+            </div>
+          )}
+          {hasBalanceDue && !hasPaymentDue && (
+            <div className="mt-2 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-lg p-4">
+              <p className="font-semibold">Balance Due: {formatCurrencyAmount(balanceAmount, receipt.currency as Currency)}</p>
+              {payment.balanceChargeScheduledAt && (
+                <p className="text-xs mt-1 text-amber-600">Scheduled to be charged on: {new Date(payment.balanceChargeScheduledAt).toLocaleDateString()}</p>
+              )}
+              <p className="text-xs mt-2 text-amber-600">Pay now to complete your booking.</p>
+              {onRefetch && (
+                <p className="text-xs mt-2">
+                  <button type="button" onClick={onRefetch} className="underline hover:no-underline text-amber-700">
+                    Just paid? Refresh to update
+                  </button>
+                </p>
+              )}
+              {balanceError && (
+                <p className="text-red-600 text-xs mt-2" role="alert">{balanceError}</p>
+              )}
+              <button
+                type="button"
+                onClick={handlePayBalance}
+                disabled={balanceLoading || !ENV.STRIPE_PUBLISHABLE_KEY}
+                className="mt-3 w-full py-2.5 px-4 bg-amber-600 hover:bg-amber-700 disabled:bg-stone-300 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
+              >
+                {balanceLoading ? 'Loading...' : `Pay remaining balance (${formatCurrencyAmount(balanceAmount, receipt.currency as Currency)})`}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Cancellation Policy */}
+      {cancellationPolicySnapshot && (
+        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
+          <h2 className="text-xl font-bold text-stone-900 mb-4">Cancellation Policy</h2>
+          <p className="text-stone-700 font-medium mb-2">{cancellationPolicySnapshot.label}</p>
+          {cancellationPolicySnapshot.tiers && cancellationPolicySnapshot.tiers.length > 0 && (
+            <div className="space-y-2 text-sm text-stone-600">
+              {cancellationPolicySnapshot.tiers.map((tier, index) => (
+                <p key={index}>
+                  • {tier.hoursBeforeBooking}+ hours before: {tier.refundPercentage}% refund
+                </p>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Contact & Communication */}
+      <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
+        <h2 className="text-xl font-bold text-stone-900 mb-4">Contact Information</h2>
+        {booking.customer && (
+          <div className="space-y-2 text-stone-700">
+            {booking.customer.email && <p><span className="font-medium">Email:</span> {booking.customer.email}</p>}
+            {booking.customer.phoneNumber && <p><span className="font-medium">Phone:</span> {booking.customer.phoneNumber}</p>}
+          </div>
+        )}
+        {communicationPreference && communicationPreference.length > 0 && (
+          <div className="mt-4 pt-4 border-t border-stone-200">
+            <p className="text-sm text-stone-600">
+              <span className="font-medium">Preferred communication:</span> {communicationPreference.join(', ')}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Pickup Location */}
+      {(booking.pickupLocationId || booking.travelerHotel) && (
+        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
+          <h2 className="text-xl font-bold text-stone-900 mb-4">Pickup Details</h2>
+          <p className="text-stone-700">
+            {booking.travelerHotel || `Location ID: ${booking.pickupLocationId}`}
+          </p>
+        </div>
+      )}
+
+      {/* Balance payment modal */}
+      {showBalanceModal && balanceClientSecret && stripePromise && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+          <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
+            <div className="p-6 border-b border-stone-200 flex-shrink-0">
+              <div className="flex justify-between items-start">
+                <h3 className="text-lg font-semibold text-stone-900">{paymentModalLabel}</h3>
+                <button
+                  type="button"
+                  onClick={() => { setShowBalanceModal(false); setBalanceClientSecret(null); setBalanceError(null); setPaymentModalLabel('Pay remaining balance'); }}
+                  className="text-stone-400 hover:text-stone-600 p-1"
+                  aria-label="Close"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <p className="text-sm text-stone-600 mt-1">
+                {formatCurrencyAmount(hasPaymentDue ? (paymentModalLabel === 'Pay deposit' ? depositAmount : receipt.totalAmount) : balanceAmount, receipt.currency as Currency)} due
+              </p>
+            </div>
+            <div className="p-6 overflow-auto flex-1">
+              <Elements
+                stripe={stripePromise}
+                options={{
+                  clientSecret: balanceClientSecret,
+                  appearance: { theme: 'stripe' as const, variables: { colorPrimary: '#059669', borderRadius: '8px' } },
+                }}
+              >
+                <BalancePaymentForm
+                  successUrl={`${typeof window !== 'undefined' ? window.location.origin : ''}/manage?ref=${encodeURIComponent(formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference)}&lastName=${encodeURIComponent(booking.customer?.lastName || '')}&payment=balance_success`}
+                  onClose={() => { setShowBalanceModal(false); setBalanceClientSecret(null); setBalanceError(null); setPaymentModalLabel('Pay remaining balance'); }}
+                  t={t}
+                  balanceAmount={hasPaymentDue ? (paymentModalLabel === 'Pay deposit' ? depositAmount : receipt.totalAmount) : balanceAmount}
+                  currency={receipt.currency as Currency}
+                />
+              </Elements>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}