@code-collective/booking-widget 1.0.10 → 1.0.13

package/src/lib/CheckoutModal.svelte

@@ -1,805 +1,946 @@
-<script lang="ts">
-  import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutCartPaymentInitiationDto, CheckoutCartConfirmResultDto, CheckoutProductDto } from './client-types';
-  import type { BookingApi } from './api';
-  import { ApiError, isInvalidCart, isPaymentFailed, isPaymentPending, isPaymentSettled } from './api';
-  import type { WizardPages } from './config';
-  import { formatCurrency } from './currency';
-  import { postMessage, onWidgetMessage } from './messages';
-  import { cartDeadline } from './cart-expiry';
-  import { rememberPaymentAttempt, recallPaymentAttempt, forgetPaymentAttempt } from './payment-attempt';
-  import { onDestroy } from 'svelte';
-  import ContactForm from './ContactForm.svelte';
-  import ConsentSection from './ConsentSection.svelte';
-  import CountdownTimer from './CountdownTimer.svelte';
-  import PaymentPage from './PaymentPage.svelte';
-  import ResultView from './ResultView.svelte';
-  import EditBookingView from './EditBookingView.svelte';
-
-  interface Props {
-    cart: CheckoutCartDetailDto;
-    api: BookingApi;
-    wizardPages?: WizardPages;
-    editPages?: WizardPages;
-    autoSelectSingleTimeSlot?: boolean;
-    onClose: () => void;
-    onOrderConfirmed: () => void;
-  }
-  let { cart, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onClose, onOrderConfirmed }: Props = $props();
-
-  // CartExpiryGuard.svelte (mounted once, page-wide) owns the "still shopping?" prompt, extend and close - it
-  // works whether or not this modal even exists. If it closes the cart while this happens to be open, there is
-  // nothing left in it to show. A cart that merely *moved* needs nothing here: Checkout.svelte subscribes to
-  // this same message and feeds the fresh cart straight back down as the `cart` prop, so the header countdown
-  // re-derives from it. Assigning to `cart` here instead would write to a prop this component does not own.
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:updated' && 'cart' in d && d.cart === null) close();
-    if (d.type === 'payment:timed-out') void onPaymentTimedOut();
-  }));
-
-  // The cart's one clock ran out while Peach's card form was open (CartExpiryGuard cannot act on that itself -
-  // the server exempts a cart with a payment in flight from expiry so a landing charge can still be confirmed).
-  // The shopper should see the cart expire here like anywhere else, so the attempt is torn down through the
-  // same Peach-verified abandon a cancel uses: a charge Peach reports as landed or still in flight is never torn
-  // down (releaseAbandonedAttempt routes those to the confirm loop instead), and an attempt Peach confirms dead
-  // reopens the cart on its already-past deadline, so the reload that follows gets a 401 and the guard's
-  // payment:ended re-check shows "Your cart has expired". Nothing to do if no attempt is open in this modal.
-  async function onPaymentTimedOut(): Promise<void> {
-    if (currentView !== 'payment' || !paymentResult) return;
-    await releaseAbandonedAttempt();
-  }
-
-  // Peach's webhook is typically near-instant, but is a genuinely separate async delivery from the card
-  // charge itself - 10 attempts 1.5s apart (~15s) comfortably covers ordinary delivery latency without
-  // making a shopper whose payment already succeeded wait an unreasonable time to see it confirmed.
-  const ConfirmMaxAttempts = 10;
-  const ConfirmRetryDelayMs = 1500;
-
-  type View = 'cart' | 'contact' | 'edit' | 'payment' | 'result';
-  let currentView = $state<View>('cart');
-  let editingItem = $state<CheckoutCartItemDetailDto | null>(null);
-  let paymentResult = $state<CheckoutCartPaymentInitiationDto | null>(null);
-  let confirmResult = $state<CheckoutCartConfirmResultDto | null>(null);
-  // What the confirm attempt actually produced, once it's settled - not a plain success/failure boolean,
-  // because "payment succeeded but this gateway couldn't confirm it in time" and "payment itself never went
-  // through" need different copy and different actions (see the ResultView status computed below and
-  // runConfirmLoop's own remarks). null while still in flight.
-  let confirmOutcome = $state<'success' | 'pending' | 'partial' | 'notCharged' | null>(null);
-  let isLoading = $state(true);
-  let isConfirming = $state(false);
-  let privacyAccepted = $state(false);
-  let marketingOptIn = $state(false);
-  let hasAttemptedSubmit = $state(false);
-  let payError = $state<string | null>(null);
-  // Deliberately separate from isLoading above - that one gates the entire view switch below (spinner vs.
-  // cart/contact/payment/result), so reusing it here would unmount ContactForm for the duration of the
-  // payCart call and, on failure, remount it with its own $state reset to blank, forcing the shopper to
-  // retype everything before retrying. This only ever disables the Pay Now button itself.
-  let isPaying = $state(false);
-
-  // Owned here, not inside ContactForm, so the shopper's typed details survive navigating back to the cart
-  // and returning to checkout - see ContactForm's own doc comment on its bindable props for why.
-  let contactFirstName = $state('');
-  let contactLastName = $state('');
-  let contactEmail = $state('');
-  let contactPhone = $state('');
-
-  let contactForm = $state<ContactForm | null>(null);
-
-  // Load product data so we can display titles and unit info
-  let productsById = $state<Map<string, CheckoutProductDto>>(new Map());
-
-  async function loadProducts() {
-    const productIds = [...new Set(cart.items.map((i) => i.productId))];
-    const results = await Promise.all(productIds.map((id) => api.getProduct(id)));
-    const map = new Map<string, CheckoutProductDto>();
-    for (const p of results) {
-      map.set(p.id, p);
-    }
-    productsById = map;
-    isLoading = false;
-  }
-
-  loadProducts();
-
-  // A reload mid-payment: the server still holds this cart in AwaitingPaymentConfirmation for the Peach
-  // checkout recorded before the reload, and will refuse every edit and a second payCart until that attempt
-  // is settled or abandoned - so the only useful place to land is back on that same card form. Peach's own
-  // handlers then route exactly as they do without a reload: a completed charge confirms, a cancel/expiry/
-  // error abandons the attempt and reopens the cart. Same resume as onPayNow's own paymentResult short-cut.
-  function resumeInterruptedPayment() {
-    const interruptedAttempt = recallPaymentAttempt(api.cartToken);
-    if (!interruptedAttempt) return;
-    paymentResult = interruptedAttempt;
-    currentView = 'payment';
-    postMessage({ type: 'payment:started' });
-    // The guard's watcher fires once per deadline and may already have done so before this modal existed (a
-    // reload after the clock ran out, or checkout reopened late). Nothing else would tear the attempt down
-    // then; the shopper would land on a card form for a cart that is already gone.
-    if (cartDeadline(cart).getTime() <= Date.now()) void onPaymentTimedOut();
-  }
-
-  resumeInterruptedPayment();
-
-  let cartTotal = $derived(() => cart.items.reduce((s, i) => s + i.amount, 0));
-  let cartCurrency = $derived(() => cart.items[0]?.currencyCode ?? 'ZAR');
-
-  let formattedTotal = $derived(() =>
-    formatCurrency(cartTotal(), cartCurrency(), 2, 2));
-
-  // Pure display - CartExpiryGuard.svelte (mounted once, page-wide) is what actually watches this and acts on
-  // it, whether or not this modal exists at all.
-  let expiryDeadline = $derived(cartDeadline(cart));
-
-  function productTitle(item: CheckoutCartItemDetailDto): string {
-    return productsById.get(item.productId)?.title ?? item.productId;
-  }
-
-  function optionTitle(item: CheckoutCartItemDetailDto): string {
-    const product = productsById.get(item.productId);
-    return product?.options.find((o) => o.id === item.optionId)?.title ?? item.optionId;
-  }
-
-  interface GroupedUnit {
-    unitId: string;
-    title: string;
-    quantity: number;
-    linePrice: number;
-  }
-
-  function groupUnits(item: CheckoutCartItemDetailDto): GroupedUnit[] {
-    const product = productsById.get(item.productId);
-    const option = product?.options.find((o) => o.id === item.optionId);
-    const counts = new Map<string, number>();
-    for (const u of item.unitItems) {
-      counts.set(u.unitId, (counts.get(u.unitId) ?? 0) + 1);
-    }
-    return [...counts.entries()].map(([unitId, quantity]) => {
-      const unit = option?.units.find((u) => u.id === unitId);
-      const unitPrice = unit?.pricing?.[0]?.retail ?? 0;
-      return {
-        unitId,
-        title: unit?.title ?? unitId,
-        quantity,
-        linePrice: unitPrice * quantity,
-      };
-    });
-  }
-
-  function itemDateLabel(item: CheckoutCartItemDetailDto): string | null {
-    if (!item.availabilityId) return null;
-    const match = item.availabilityId.match(/(\d{4})-(\d{2})-(\d{2})/);
-    if (!match) return null;
-    const d = new Date(+match[1], +match[2] - 1, +match[3]);
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
-  }
-
-  onDestroy(() => postMessage({ type: 'modal:close' }));
-
-  function close() {
-    postMessage({ type: 'modal:close' });
-    onClose();
-  }
-
-  function continueShopping() {
-    close();
-  }
-
-  function editItem(item: CheckoutCartItemDetailDto) {
-    editingItem = item;
-    currentView = 'edit';
-  }
-
-  async function onItemUpdated() {
-    if (!(await reloadCart())) return;
-    currentView = 'cart';
-    notifyCartUpdated(cart);
-  }
-
-  async function removeItem(item: CheckoutCartItemDetailDto) {
-    try {
-      await api.removeCartItem(item.id);
-    } catch (e) {
-      if (!isInvalidCart(e)) throw e;
-      close();
-      return;
-    }
-    if (!(await reloadCart())) return;
-    notifyCartUpdated(cart);
-    if (cart.items.length === 0) close();
-  }
-
-  // Re-reads the cart from the server - the source of truth for its expiry, which every add, edit and pay
-  // moves. False when the server no longer has it: the cart is gone (most likely CartExpiryGuard closed it
-  // while this modal happened to be open), and there is nothing left here to show but to close.
-  async function reloadCart(): Promise<boolean> {
-    try {
-      cart = await api.getCart();
-      return true;
-    } catch (e) {
-      if (!isInvalidCart(e)) throw e;
-      close();
-      return false;
-    }
-  }
-
-  // Paying does not move the cart's clock, but a still-there answer given between this modal's last read and
-  // the pay click could have, so the deadline the payment page counts down from is re-read rather than
-  // assumed. Best effort: if the re-read fails, the payment page's countdown keeps the older deadline, which is
-  // the safe direction - and CartExpiryGuard's prompt still reaches the shopper over the card form either way.
-  async function refreshDeadlineAfterPay(): Promise<void> {
-    try {
-      cart = await api.getCart();
-      notifyCartUpdated(cart);
-    } catch {
-      // see above
-    }
-  }
-
-  // Tells the server this attempt is over so a fresh payCart will be accepted - without it the cart stays
-  // AwaitingPaymentConfirmation, no webhook ever comes for a checkout nobody submitted, and the only thing a
-  // retry could do is reopen a Peach session that is already dead. 'settled' means Peach has this attempt as
-  // paid, or still in flight (PAYMENT_PENDING) - either way the cart must not be reopened, and the confirm loop
-  // already handles "not paid yet" by landing on the pending screen, so both take the same path here; 'failed'
-  // means the server could not be reached or refused for another reason, in which case paymentResult is kept
-  // so onPayNow falls back to resuming the same still-open attempt.
-  async function abandonPaymentAttempt(checkoutId: string): Promise<'abandoned' | 'settled' | 'failed'> {
-    try {
-      await api.abandonPayment(checkoutId);
-      return 'abandoned';
-    } catch (e) {
-      return isPaymentSettled(e) || isPaymentPending(e) ? 'settled' : 'failed';
-    }
-  }
-
-  // Not the itemCount/cartItemId-shaped cart:change TicketConfigurator posts on add (which
-  // bw-configurator.svelte re-dispatches as the public bw:cart-change event and auto-opens checkout for).
-  // This carries the cart itself: CartBar/CartOverviewButton/Checkout use it to update their own state after
-  // an edit or remove without a second independent fetch, and it's forwarded to consumers as the public
-  // bw:cart-updated event/onCartUpdated callback, so a consumer can build their own cart summary UI from
-  // item count/remaining time/item details without calling the API directly.
-  function notifyCartUpdated(updatedCart: CheckoutCartDetailDto): void {
-    postMessage({ type: 'cart:updated', cart: updatedCart });
-  }
-
-  async function onPayNow() {
-    hasAttemptedSubmit = true;
-    if (!contactForm?.isValid() || !privacyAccepted) return;
-
-    // A cart only ever gets one Peach checkout - RecordPaymentInitiatedAsync's own concurrency lock rejects
-    // a second payCart call on the same cart with a 409 ("already has a payment initiated"), even though
-    // nothing has actually been charged yet. Cancelling out of PaymentPage (onPaymentComplete's 'cancelled'
-    // case below) never clears paymentResult, so re-entering here just resumes that same still-open attempt
-    // instead of re-initiating.
-    if (paymentResult) {
-      currentView = 'payment';
-      return;
-    }
-
-    const contact = contactForm.getContact();
-
-    isPaying = true;
-    payError = null;
-    try {
-      paymentResult = await api.payCart(contact);
-      rememberPaymentAttempt(api.cartToken, {
-        checkoutId: paymentResult.checkoutId ?? '',
-        entityId: paymentResult.entityId ?? '',
-      });
-      currentView = 'payment';
-      postMessage({ type: 'payment:started' });
-      void refreshDeadlineAfterPay();
-    } catch (e) {
-      if (isInvalidCart(e)) {
-        // The cart expired between CartExpiryGuard's last tick and this click - there is nothing left to pay for.
-        close();
-        return;
-      }
-
-      // PayCheckoutCartCommandHandler's own error-mapping switch: 502 means Peach itself (or the network
-      // path to it) failed before a checkout could even be created - no charge was attempted and the cart is
-      // still Open, so this is always safe to retry. Every other status (400/409) reflects a cart/contact state
-      // the shopper can't fix by only retrying the same request, but there is no more specific action to suggest
-      // here either - either way, without this catch the rejection was previously unhandled and the shopper
-      // saw no indication anything had gone wrong at all.
-      const status = e instanceof ApiError ? e.status : null;
-      payError = status === 502
-        ? 'Unable to start payment right now. Please try again.'
-        : 'Something went wrong starting your payment. Please try again.';
-    } finally {
-      isPaying = false;
-    }
-  }
-
-  async function onPaymentComplete(result: { status: string }) {
-    // Neither cancelled, expired nor error ever reached a real charge - Peach's own SDK is reporting that the
-    // checkout itself didn't go through (the shopper backed out, session timeout, a declined card, a 3DS
-    // failure, a client-side error), not that a successful charge's confirmation is in question. That
-    // distinction matters: the confirm path at the bottom is only reachable once onCompleted has fired,
-    // meaning the card WAS charged, so "try again" there would risk a second charge. Here nothing was charged,
-    // so the attempt is abandoned server-side (a retry then starts a genuinely new Peach checkout instead of
-    // reopening this dead one) and re-opening the card form is exactly correct.
-    if (result.status === 'cancelled' || result.status === 'expired' || result.status === 'error') {
-      if (!(await releaseAbandonedAttempt())) return;
-    }
-
-    if (result.status === 'cancelled') {
-      currentView = 'contact';
-      return;
-    }
-
-    if (result.status === 'expired' || result.status === 'error') {
-      confirmOutcome = 'notCharged';
-      isConfirming = false;
-      currentView = 'result';
-      return;
-    }
-
-    currentView = 'result';
-    await runConfirmLoop();
-  }
-
-  // False when this component has already taken over what happens next - the cart turned out to be paid and is
-  // being confirmed, or it has expired - so the caller must not route the shopper anywhere else.
-  async function releaseAbandonedAttempt(): Promise<boolean> {
-    // Already cleared by an earlier call for this same attempt (e.g. a second Peach callback after the first
-    // already abandoned it) - nothing left to tell the server about.
-    if (!paymentResult) return await reloadCart();
-
-    const abandoned = await abandonPaymentAttempt(paymentResult.checkoutId);
-    if (abandoned === 'settled') {
-      currentView = 'result';
-      await runConfirmLoop();
-      return false;
-    }
-
-    if (abandoned === 'abandoned') {
-      paymentResult = null;
-      forgetPaymentAttempt();
-    }
-
-    // The cart is Open again, or the abandon call itself failed and the shopper is being routed back to
-    // contact/result regardless. payment:ended tells CartExpiryGuard to stop treating a payment as in flight -
-    // without it the guard never prompts or expires again for the rest of the page's life - and goes out last so
-    // the guard re-checks the deadline it ends up with. But it is only true when the attempt is actually over:
-    // released here, or the cart gone regardless (a 401 on the reload - the payment window had already run out).
-    // After a failed abandon the server still holds the cart awaiting payment for this attempt, and the guard's
-    // own timeout fallback must stay armed to finish the job, so the guard is told nothing.
-    const reloaded = await reloadCart();
-    if (reloaded) notifyCartUpdated(cart);
-    if (abandoned === 'abandoned' || !reloaded) postMessage({ type: 'payment:ended' });
-    return reloaded;
-  }
-
-  // One confirm attempt, interpreted: records the result and reports whether it settled (success or a
-  // supplier-side partial failure - either way, nothing left to retry) versus still needs another attempt
-  // (the two webhook races below). Shared by the automatic loop and the manual on-demand recheck so there is
-  // exactly one place that decides what a given confirmCart() outcome means.
-  async function attemptConfirm(): Promise<'settled' | 'awaitingWebhook'> {
-    try {
-      confirmResult = await api.confirmCart();
-      const allOk = confirmResult.items.every((i) => i.statusCode >= 200 && i.statusCode < 300);
-      confirmOutcome = allOk ? 'success' : 'partial';
-      // Notifies the host (order value/currency for analytics, clearing the stored cart token) without
-      // closing the modal - the shopper still needs to see the success screen below, and only dismisses it
-      // themselves via ResultView's Done button, which is the one thing that posts modal:close.
-      if (allOk) {
-        onOrderConfirmed();
-      }
-      return 'settled';
-    } catch (e) {
-      // The one case that is a real, settled failure rather than a race still resolving: Peach's webhook has
-      // already landed and it was a decline (or another non-success outcome), so there is no charge behind
-      // this attempt and never will be - retrying confirmCart again cannot change that. Checked before the
-      // generic 402/409 below, which would otherwise read this the same as "webhook not here yet" and retry
-      // it right into the same generic "still confirming" pending screen a decline should never land on.
-      if (isPaymentFailed(e)) {
-        confirmOutcome = 'notCharged';
-        return 'settled';
-      }
-
-      // Two different races with the same webhook, neither a real failure:
-      //   402 - the charge succeeded (that's why PaymentPage's onCompleted fired) but the webhook hasn't
-      //         reached PeachWebhookEndpoints yet to move the cart to Paid.
-      //   409 - the webhook got there first and is confirming the cart right now, so there is no outcome to
-      //         read yet. Only one caller is allowed to run confirmation, and the loser is told to retry
-      //         rather than being handed a second, independently-produced answer.
-      // Both resolve on their own within a second or two, so both are worth retrying. Any other error settles
-      // as 'pending' rather than a failure state - the charge already succeeded by the time this can run at
-      // all, so there is no "payment failed" to report, only "not confirmed yet".
-      if (e instanceof ApiError && (e.status === 402 || e.status === 409)) {
-        return 'awaitingWebhook';
-      }
-      confirmOutcome = 'pending';
-      return 'settled';
-    }
-  }
-
-  async function runConfirmLoop() {
-    isConfirming = true;
-    confirmOutcome = null;
-
-    for (let attempt = 1; attempt <= ConfirmMaxAttempts; attempt++) {
-      if (await attemptConfirm() === 'settled') {
-        isConfirming = false;
-        return;
-      }
-
-      if (attempt === ConfirmMaxAttempts) {
-        confirmOutcome = 'pending';
-        isConfirming = false;
-        return;
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, ConfirmRetryDelayMs));
-    }
-  }
-
-  // A single on-demand recheck for the 'pending' screen's "Check Again" button - deliberately not another
-  // full runConfirmLoop, which would re-impose its own ~15s auto-retry wait on someone who is already
-  // actively engaged and can just click again. Confirming is idempotent (CheckoutCartConfirmer), so this
-  // costs nothing to repeat; still 'pending' either way if the webhook still hasn't landed.
-  async function checkConfirmationAgain() {
-    isConfirming = true;
-    if (await attemptConfirm() === 'awaitingWebhook') {
-      confirmOutcome = 'pending';
-    }
-    isConfirming = false;
-  }
-
-  // The one ResultView prop that isn't a straight readout of confirmOutcome: 'partial' means the payment
-  // succeeded but this gateway could not confirm every item, which is a real problem worth surfacing
-  // distinctly from 'pending' (which resolves on its own) - but from ResultView's own outcome union, that is
-  // still a kind of 'failed', just one retryPayment must gate off since the charge already happened.
-  let resultStatus = $derived(
-    isConfirming
-      ? null
-      : confirmOutcome === 'success'
-        ? { outcome: 'successful' as const }
-        : confirmOutcome === 'pending'
-          ? { outcome: 'pending' as const }
-          : confirmOutcome === 'partial'
-            ? {
-                outcome: 'failed' as const,
-                resultDescription:
-                  "Your payment succeeded, but we couldn't confirm every item in your booking. Please contact us with your order details.",
-                retryPayment: false,
-              }
-            : confirmOutcome === 'notCharged'
-              ? {
-                  outcome: 'failed' as const,
-                  resultDescription: 'Your payment could not be completed. Please try again.',
-                  retryPayment: true,
-                }
-              : null,
-  );
-</script>
-
-<div class="modal">
-  {#if isLoading}
-    <div class="loading-center" style="height:100%">
-      <div class="spinner"></div>
-    </div>
-
-  {:else if currentView === 'payment' && paymentResult}
-    <PaymentPage
-      checkoutId={paymentResult.checkoutId}
-      entityId={paymentResult.entityId}
-      expiresAt={expiryDeadline}
-      {onPaymentComplete}
-    />
-
-  {:else if currentView === 'result'}
-    <ResultView
-      status={resultStatus}
-      verifying={isConfirming}
-      onDone={() => {
-        // onOrderConfirmed only for the outcome that actually earns it - a 'pending'/'partial' Close is
-        // just dismissing the dialog on an order this gateway cannot yet (or fully) vouch for, not
-        // reporting it complete. The 'success' case already fired onOrderConfirmed the moment it was
-        // known, inside runConfirmLoop/checkConfirmationAgain - this simply closes what's still open.
-        postMessage({ type: 'modal:close' });
-      }}
-      onRetry={() => { currentView = 'payment'; }}
-      onCheckAgain={confirmOutcome === 'pending' ? checkConfirmationAgain : undefined}
-    />
-
-  {:else if currentView === 'edit' && editingItem && productsById.get(editingItem.productId)}
-    <EditBookingView
-      cartItem={editingItem}
-      product={productsById.get(editingItem.productId)!}
-      {api}
-      {wizardPages}
-      {editPages}
-      {autoSelectSingleTimeSlot}
-      onBack={() => { currentView = 'cart'; }}
-      onClose={close}
-      onUpdated={onItemUpdated}
-      onPriceChanged={loadProducts}
-    />
-
-  {:else if currentView === 'contact'}
-    <!-- Contact Details view -->
-    <div class="page-header">
-      <button class="icon-btn" onclick={() => { currentView = 'cart'; }} aria-label="Back">&larr;</button>
-      <h2>Checkout</h2>
-      <span class="spacer"></span>
-      <CountdownTimer expiresAt={expiryDeadline} />
-      <button class="icon-btn" onclick={close} aria-label="Close">&times;</button>
-    </div>
-
-    <div class="body">
-      {#if payError}
-        <p class="pay-error">{payError}</p>
-      {/if}
-      <div class="contact-header">
-        <span class="contact-title">Contact Details</span>
-        <span class="required-hint">* Required Fields</span>
-      </div>
-      <ContactForm
-        bind:this={contactForm}
-        {hasAttemptedSubmit}
-        bind:firstName={contactFirstName}
-        bind:lastName={contactLastName}
-        bind:emailAddress={contactEmail}
-        bind:phoneNumber={contactPhone}
-      />
-      <div style="margin-top:24px">
-        <ConsentSection
-          {privacyAccepted}
-          {marketingOptIn}
-          {hasAttemptedSubmit}
-          onPrivacyChanged={(v) => { privacyAccepted = v; }}
-          onMarketingChanged={(v) => { marketingOptIn = v; }}
-        />
-      </div>
-    </div>
-
-    <div class="pay-bar">
-      <span class="pay-bar-total">{formattedTotal()}</span>
-      <button class="pay-bar-btn" onclick={onPayNow} disabled={isPaying}>
-        {isPaying ? 'Paying…' : 'Pay Now'} <span class="arrow">&rarr;</span>
-      </button>
-    </div>
-
-  {:else}
-    <!-- Cart view -->
-    <div class="page-header">
-      <h2>Your cart</h2>
-      <span class="spacer"></span>
-      <CountdownTimer expiresAt={expiryDeadline} />
-      <button class="keep-shopping-btn" onclick={continueShopping}>+ Keep shopping</button>
-    </div>
-
-    <div class="body">
-      {#each cart.items as item}
-        <div class="cart-card">
-          <div class="cart-card-top">
-            <h3 class="cart-product">{productTitle(item)}</h3>
-            <span class="cart-item-total">{formatCurrency(item.amount, item.currencyCode, 2, 0)}</span>
-          </div>
-          <div class="cart-detail-lines">
-            {#if itemDateLabel(item)}
-              <p class="cart-detail">{itemDateLabel(item)}</p>
-            {/if}
-            <p class="cart-detail">{optionTitle(item)}</p>
-          </div>
-
-          <div class="cart-divider"></div>
-
-          <div class="cart-units">
-            {#each groupUnits(item) as gu}
-              <div class="cart-unit-line">
-                <span class="cart-unit-label">{gu.title} &times; {gu.quantity}</span>
-                <span class="cart-unit-price">{formatCurrency(gu.linePrice, item.currencyCode, 2, 0)}</span>
-              </div>
-            {/each}
-          </div>
-
-          <div class="cart-actions">
-            <button class="action-edit" onclick={() => editItem(item)}>Edit</button>
-            <button class="action-remove" onclick={() => removeItem(item)}>Remove</button>
-          </div>
-        </div>
-      {/each}
-
-      <div class="cart-total-divider"></div>
-
-      <div class="cart-total-row">
-        <span>Total payable today</span>
-        <span class="cart-total-amount">{formattedTotal()}</span>
-      </div>
-    </div>
-
-    <div class="action-bar">
-      <button class="btn btn-primary" onclick={() => { currentView = 'contact'; }}>
-        Checkout <span class="arrow">&rarr;</span>
-      </button>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .modal {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    max-height: 100%;
-    overflow: hidden;
-    background: var(--bw-color-surface);
-  }
-  .body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-  }
-
-  /* -- Cart view -- */
-  .keep-shopping-btn {
-    padding: 8px 16px;
-    background: none;
-    border: 2px solid #222;
-    border-radius: var(--bw-radius-md);
-    font-size: 13px;
-    font-weight: 600;
-    color: #222;
-    cursor: pointer;
-  }
-  .keep-shopping-btn:hover {
-    background: #f5f5f5;
-  }
-
-  .cart-card {
-    border: 1px solid var(--bw-color-border);
-    border-radius: var(--bw-radius-lg);
-    padding: 20px;
-    margin-bottom: 16px;
-  }
-  .cart-card-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 16px;
-  }
-  .cart-product {
-    font-size: 16px;
-    font-weight: 700;
-    flex: 1;
-  }
-  .cart-item-total {
-    font-size: 16px;
-    font-weight: 800;
-    white-space: nowrap;
-  }
-  .cart-detail-lines {
-    margin-top: 4px;
-  }
-  .cart-detail {
-    font-size: 13px;
-    color: var(--bw-color-text-secondary);
-    line-height: 1.5;
-  }
-  .cart-divider {
-    border-top: 1px dashed var(--bw-color-border);
-    margin: 14px 0;
-  }
-  .cart-units {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    margin-bottom: 14px;
-  }
-  .cart-unit-line {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-  }
-  .cart-unit-label {
-    color: #333;
-  }
-  .cart-unit-price {
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-  }
-  .cart-actions {
-    display: flex;
-    gap: 16px;
-  }
-  .action-edit {
-    background: none;
-    border: none;
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--bw-color-primary);
-    padding: 0;
-    cursor: pointer;
-  }
-  .action-edit:hover { text-decoration: underline; }
-  .action-remove {
-    background: none;
-    border: none;
-    font-size: 13px;
-    font-weight: 600;
-    color: #555;
-    padding: 0;
-    cursor: pointer;
-  }
-  .action-remove:hover { text-decoration: underline; }
-
-  .cart-total-divider {
-    border-top: 3px solid #111;
-    margin: 8px 0 20px;
-  }
-  .cart-total-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 700;
-    margin-bottom: 20px;
-  }
-  .cart-total-amount {
-    font-size: 20px;
-    font-weight: 800;
-  }
-  /* -- Contact view -- */
-  .pay-error {
-    margin: 0 0 16px;
-    padding: 12px 16px;
-    background: #fdecea;
-    color: #b3261e;
-    font-size: 14px;
-    border-radius: var(--bw-radius-md);
-  }
-  .contact-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  .contact-title {
-    font-size: 16px;
-    font-weight: 700;
-  }
-  .required-hint {
-    font-size: 12px;
-    color: var(--bw-color-primary);
-  }
-
-  .pay-bar {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    background: var(--bw-color-primary);
-    color: white;
-    position: sticky;
-    bottom: 0;
-  }
-  .pay-bar-total {
-    padding: 0 20px;
-    font-size: 16px;
-    font-weight: 700;
-  }
-  .pay-bar-btn {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-    height: 52px;
-    padding: 0 20px;
-    background: none;
-    border: none;
-    color: white;
-    font-size: 16px;
-    font-weight: 700;
-  }
-  .pay-bar-btn:disabled {
-    opacity: 0.7;
-    cursor: default;
-  }
-  .pay-bar-btn .arrow {
-    font-size: 20px;
-  }
-</style>
+<script lang="ts">
+  import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutCartPaymentInitiationDto, CheckoutCartConfirmResultDto, CheckoutProductDto } from './client-types';
+  import type { BookingApi } from './api';
+  import { ApiError, isInvalidCart, isPaymentFailed, isPaymentPending, isPaymentSettled } from './api';
+  import type { WizardPages } from './config';
+  import { formatCurrency } from './currency';
+  import { postMessage, onWidgetMessage } from './messages';
+  import { cartDeadline } from './cart-expiry';
+  import { rememberPaymentAttempt, recallPaymentAttempt, forgetPaymentAttempt } from './payment-attempt';
+  import { onDestroy } from 'svelte';
+  import ContactForm from './ContactForm.svelte';
+  import ConsentSection from './ConsentSection.svelte';
+  import CountdownTimer from './CountdownTimer.svelte';
+  import PaymentPage from './PaymentPage.svelte';
+  import ResultView from './ResultView.svelte';
+  import EditBookingView from './EditBookingView.svelte';
+
+  interface Props {
+    cart: CheckoutCartDetailDto;
+    api: BookingApi;
+    wizardPages?: WizardPages;
+    editPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
+    onClose: () => void;
+    onOrderConfirmed: () => void;
+  }
+  let { cart, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onClose, onOrderConfirmed }: Props = $props();
+
+  // CartExpiryGuard.svelte (mounted once, page-wide) owns the "still shopping?" prompt, extend and close - it
+  // works whether or not this modal even exists. If it closes the cart while this happens to be open, there is
+  // nothing left in it to show. A cart that merely *moved* needs nothing here: Checkout.svelte subscribes to
+  // this same message and feeds the fresh cart straight back down as the `cart` prop, so the header countdown
+  // re-derives from it. Assigning to `cart` here instead would write to a prop this component does not own.
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:updated' && 'cart' in d && d.cart === null) close();
+    if (d.type === 'payment:timed-out') void onPaymentTimedOut();
+  }));
+
+  // The cart's one clock ran out while Peach's card form was open (CartExpiryGuard cannot act on that itself -
+  // the server exempts a cart with a payment in flight from expiry so a landing charge can still be confirmed).
+  // The shopper should see the cart expire here like anywhere else, so the attempt is torn down through the
+  // same Peach-verified abandon a cancel uses: a charge Peach reports as landed or still in flight is never torn
+  // down (releaseAbandonedAttempt routes those to the confirm loop instead), and an attempt Peach confirms dead
+  // reopens the cart on its already-past deadline, so the reload that follows gets a 401 and the guard's
+  // payment:ended re-check shows "Your cart has expired". Nothing to do if no attempt is open in this modal.
+  async function onPaymentTimedOut(): Promise<void> {
+    if (currentView !== 'payment' || !paymentResult) return;
+    await releaseAbandonedAttempt();
+  }
+
+  // Peach's webhook is typically near-instant, but is a genuinely separate async delivery from the card
+  // charge itself - 10 attempts 1.5s apart (~15s) comfortably covers ordinary delivery latency without
+  // making a shopper whose payment already succeeded wait an unreasonable time to see it confirmed.
+  const ConfirmMaxAttempts = 10;
+  const ConfirmRetryDelayMs = 1500;
+
+  type View = 'cart' | 'contact' | 'edit' | 'payment' | 'result';
+  let currentView = $state<View>('cart');
+  let editingItem = $state<CheckoutCartItemDetailDto | null>(null);
+  let paymentResult = $state<CheckoutCartPaymentInitiationDto | null>(null);
+  let confirmResult = $state<CheckoutCartConfirmResultDto | null>(null);
+  // What the confirm attempt actually produced, once it's settled - not a plain success/failure boolean,
+  // because "payment succeeded but this gateway couldn't confirm it in time" and "payment itself never went
+  // through" need different copy and different actions (see the ResultView status computed below and
+  // runConfirmLoop's own remarks). null while still in flight.
+  let confirmOutcome = $state<'success' | 'pending' | 'partial' | 'notCharged' | null>(null);
+  let isLoading = $state(true);
+  let isConfirming = $state(false);
+  let privacyAccepted = $state(false);
+  let marketingOptIn = $state(false);
+  let hasAttemptedSubmit = $state(false);
+  let payError = $state<string | null>(null);
+  // Deliberately separate from isLoading above - that one gates the entire view switch below (spinner vs.
+  // cart/contact/payment/result), so reusing it here would unmount ContactForm for the duration of the
+  // payCart call and, on failure, remount it with its own $state reset to blank, forcing the shopper to
+  // retype everything before retrying. This only ever disables the Pay Now button itself.
+  let isPaying = $state(false);
+
+  // Owned here, not inside ContactForm, so the shopper's typed details survive navigating back to the cart
+  // and returning to checkout - see ContactForm's own doc comment on its bindable props for why.
+  let contactFirstName = $state('');
+  let contactLastName = $state('');
+  let contactEmail = $state('');
+  let contactPhone = $state('');
+
+  let contactForm = $state<ContactForm | null>(null);
+
+  // Load product data so we can display titles and unit info
+  let productsById = $state<Map<string, CheckoutProductDto>>(new Map());
+
+  async function loadProducts() {
+    try {
+      const productIds = [...new Set(cart.items.map((i) => i.productId))];
+      const results = await Promise.all(productIds.map((id) => api.getProduct(id)));
+      const map = new Map<string, CheckoutProductDto>();
+      for (const p of results) {
+        map.set(p.id, p);
+      }
+      productsById = map;
+    } catch {
+      // These supply titles and unit labels; the cart itself renders from the cart's own rows, and productTitle
+      // falls back to the product id, so losing them is a plainer checkout rather than none. Letting isLoading
+      // stand would be neither: the spinner is the first branch in the markup, so one rejected getProduct hung
+      // the whole modal on it for good - over an already settled payment included (PR 8447 review).
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  void loadProducts();
+
+  // A reload mid-payment: the server still holds this cart in AwaitingPaymentConfirmation for the Peach
+  // checkout recorded before the reload, and will refuse every edit and a second payCart until that attempt
+  // is settled or abandoned. Where to land depends on how far the shopper got before the reload, and only the
+  // server knows: Peach's form may have completed a moment earlier - a charge, or a decline the server reads
+  // straight back from Peach's status endpoint, since Peach sends no webhook for one - so it is asked once
+  // first, and a recorded outcome is shown exactly as it would have been without the reload. Only "not paid"
+  // puts the shopper back on that same card form, whose Peach handlers then route as they do without a
+  // reload: a completed charge confirms, a cancel/expiry/error abandons the attempt and reopens the cart.
+  // Same resume as onPayNow's own paymentResult short-cut.
+  async function resumeInterruptedPayment() {
+    const interruptedAttempt = recallPaymentAttempt(api.cartToken);
+    if (!interruptedAttempt) return;
+    paymentResult = interruptedAttempt;
+    // Posted before the answer is known, as Pay Now does: CartExpiryGuard must treat the attempt as in flight
+    // whichever screen it ends up on, and a decline's own payment:ended (releaseDeclinedAttempt) then reads the
+    // same as it does without a reload.
+    postMessage({ type: 'payment:started' });
+    if (await resumeOntoRecordedOutcome()) return;
+    currentView = 'payment';
+    // The guard's watcher fires once per deadline and may already have done so before this modal existed (a
+    // reload after the clock ran out, or checkout reopened late). Nothing else would tear the attempt down
+    // then; the shopper would land on a card form for a cart that is already gone.
+    if (cartDeadline(cart).getTime() <= Date.now()) void onPaymentTimedOut();
+  }
+
+  // Whether the server already holds an outcome for the interrupted attempt - shown on the result view if so.
+  // A settled answer (a charge, a supplier-side partial failure, or a decline) is final; a confirmation the
+  // webhook is running right now joins the ordinary confirm loop to read its result; a cart the server no
+  // longer has closes the modal, as a 401 does everywhere else here. A 402 says neither the webhook nor Peach's
+  // status endpoint has anything final for this attempt - a shopper who never submitted the card, or one who
+  // reloaded mid-3-D Secure, and the two cannot be told apart from here (PR 8447 review). The card form is
+  // where both of them were, and it is Peach's own form for this same checkoutId - the state of that checkout,
+  // not a fresh charge - so that is where they go back to. Anything else - the server unreachable, an
+  // unexpected refusal - is treated the same way rather than parking them on a screen that tells them not to
+  // pay again for a card they may never have submitted.
+  async function resumeOntoRecordedOutcome(): Promise<boolean> {
+    isConfirming = true;
+    currentView = 'result';
+    let answer: ConfirmAnswer;
+    try {
+      answer = await interpretConfirm();
+    } catch {
+      // Nothing in interpretConfirm is meant to throw past its own catch, but this resume is fire-and-forget:
+      // anything that did would strand the modal on "Verifying payment..." with no button at all. A decline
+      // already recorded before the throw is shown; anything else falls back to the card form.
+      isConfirming = false;
+      return confirmOutcome !== null;
+    }
+    isConfirming = false;
+    if (answer === 'settled') return true;
+    if (answer === 'cartGone') {
+      close();
+      return true;
+    }
+    if (answer === 'confirming') {
+      await runConfirmLoop();
+      return true;
+    }
+    return false;
+  }
+
+  void resumeInterruptedPayment();
+
+  let cartTotal = $derived(() => cart.items.reduce((s, i) => s + i.amount, 0));
+  let cartCurrency = $derived(() => cart.items[0]?.currencyCode ?? 'ZAR');
+
+  let formattedTotal = $derived(() =>
+    formatCurrency(cartTotal(), cartCurrency(), 2, 2));
+
+  // Pure display - CartExpiryGuard.svelte (mounted once, page-wide) is what actually watches this and acts on
+  // it, whether or not this modal exists at all.
+  let expiryDeadline = $derived(cartDeadline(cart));
+
+  function productTitle(item: CheckoutCartItemDetailDto): string {
+    return productsById.get(item.productId)?.title ?? item.productId;
+  }
+
+  function optionTitle(item: CheckoutCartItemDetailDto): string {
+    const product = productsById.get(item.productId);
+    return product?.options.find((o) => o.id === item.optionId)?.title ?? item.optionId;
+  }
+
+  interface GroupedUnit {
+    unitId: string;
+    title: string;
+    quantity: number;
+    linePrice: number;
+  }
+
+  function groupUnits(item: CheckoutCartItemDetailDto): GroupedUnit[] {
+    const product = productsById.get(item.productId);
+    const option = product?.options.find((o) => o.id === item.optionId);
+    const counts = new Map<string, number>();
+    for (const u of item.unitItems) {
+      counts.set(u.unitId, (counts.get(u.unitId) ?? 0) + 1);
+    }
+    return [...counts.entries()].map(([unitId, quantity]) => {
+      const unit = option?.units.find((u) => u.id === unitId);
+      const unitPrice = unit?.pricing?.[0]?.retail ?? 0;
+      return {
+        unitId,
+        title: unit?.title ?? unitId,
+        quantity,
+        linePrice: unitPrice * quantity,
+      };
+    });
+  }
+
+  function itemDateLabel(item: CheckoutCartItemDetailDto): string | null {
+    if (!item.availabilityId) return null;
+    const match = item.availabilityId.match(/(\d{4})-(\d{2})-(\d{2})/);
+    if (!match) return null;
+    const d = new Date(+match[1], +match[2] - 1, +match[3]);
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
+  }
+
+  onDestroy(() => postMessage({ type: 'modal:close' }));
+
+  function close() {
+    postMessage({ type: 'modal:close' });
+    onClose();
+  }
+
+  function continueShopping() {
+    close();
+  }
+
+  function editItem(item: CheckoutCartItemDetailDto) {
+    editingItem = item;
+    currentView = 'edit';
+  }
+
+  async function onItemUpdated() {
+    if (!(await reloadCart())) return;
+    currentView = 'cart';
+    notifyCartUpdated(cart);
+  }
+
+  async function removeItem(item: CheckoutCartItemDetailDto) {
+    try {
+      await api.removeCartItem(item.id);
+    } catch (e) {
+      if (!isInvalidCart(e)) throw e;
+      close();
+      return;
+    }
+    if (!(await reloadCart())) return;
+    notifyCartUpdated(cart);
+    if (cart.items.length === 0) close();
+  }
+
+  // Re-reads the cart from the server - the source of truth for its expiry, which every add, edit and pay
+  // moves. False when the server no longer has it: the cart is gone (most likely CartExpiryGuard closed it
+  // while this modal happened to be open), and there is nothing left here to show but to close.
+  async function reloadCart(): Promise<boolean> {
+    try {
+      cart = await api.getCart();
+      return true;
+    } catch (e) {
+      if (!isInvalidCart(e)) throw e;
+      close();
+      return false;
+    }
+  }
+
+  // Paying does not move the cart's clock, but a still-there answer given between this modal's last read and
+  // the pay click could have, so the deadline the payment page counts down from is re-read rather than
+  // assumed. Best effort: if the re-read fails, the payment page's countdown keeps the older deadline, which is
+  // the safe direction - and CartExpiryGuard's prompt still reaches the shopper over the card form either way.
+  async function refreshDeadlineAfterPay(): Promise<void> {
+    try {
+      cart = await api.getCart();
+      notifyCartUpdated(cart);
+    } catch {
+      // see above
+    }
+  }
+
+  // Tells the server this attempt is over so a fresh payCart will be accepted - without it the cart stays
+  // AwaitingPaymentConfirmation, no webhook ever comes for a checkout nobody submitted, and the only thing a
+  // retry could do is reopen a Peach session that is already dead. 'settled' means Peach has this attempt as
+  // paid, or still in flight (PAYMENT_PENDING) - either way the cart must not be reopened, and the confirm loop
+  // already handles "not paid yet" by landing on the pending screen, so both take the same path here; 'failed'
+  // means the server could not be reached or refused for another reason, in which case paymentResult is kept
+  // so onPayNow falls back to resuming the same still-open attempt.
+  async function abandonPaymentAttempt(checkoutId: string): Promise<'abandoned' | 'settled' | 'failed'> {
+    try {
+      await api.abandonPayment(checkoutId);
+      return 'abandoned';
+    } catch (e) {
+      return isPaymentSettled(e) || isPaymentPending(e) ? 'settled' : 'failed';
+    }
+  }
+
+  // Not the itemCount/cartItemId-shaped cart:change TicketConfigurator posts on add (which
+  // bw-configurator.svelte re-dispatches as the public bw:cart-change event and auto-opens checkout for).
+  // This carries the cart itself: CartBar/CartOverviewButton/Checkout use it to update their own state after
+  // an edit or remove without a second independent fetch, and it's forwarded to consumers as the public
+  // bw:cart-updated event/onCartUpdated callback, so a consumer can build their own cart summary UI from
+  // item count/remaining time/item details without calling the API directly.
+  function notifyCartUpdated(updatedCart: CheckoutCartDetailDto): void {
+    postMessage({ type: 'cart:updated', cart: updatedCart });
+  }
+
+  async function onPayNow() {
+    hasAttemptedSubmit = true;
+    if (!contactForm?.isValid() || !privacyAccepted) return;
+
+    // paymentResult is only ever still set here when the previous attempt could not be torn down: the abandon
+    // call failed (Peach unreachable), or Peach reported the charge as settled or still in flight. Every other
+    // way out of PaymentPage - cancel, expiry, error - releases the attempt and clears paymentResult, and the
+    // next Pay Now creates a NEW Peach checkout. That is deliberate, not waste: Peach's SDK will not re-render
+    // a checkoutId it has already unmounted, a cancelled checkout is finished on Peach's side, and the total is
+    // frozen at creation so an edited cart needs a new one regardless.
+    //
+    // Which is exactly why this asks the server to release the attempt once more before anything else, rather
+    // than resuming it on the spot as it used to: that put the shopper back on a card form for a checkoutId
+    // Peach was done with, and Peach's own unrecoverable-error card in front of them instead of ours (PR 8447
+    // review). A release that succeeds leaves the cart Open and falls through to a genuinely new checkout. One
+    // that reports it has taken over - the charge turned out to have settled after all, or the cart is gone -
+    // owns what happens next, and paying again is the one thing that must not happen. Only a release that fails
+    // again leaves the server still holding the attempt (a second payCart would be refused with a 409), and
+    // then resuming that same card form really is the only move left.
+    if (paymentResult) {
+      isPaying = true;
+      try {
+        if (!(await releaseAbandonedAttempt())) return;
+      } catch {
+        // reloadCart rethrows anything that is not the cart being gone, and releaseAbandonedAttempt re-reads
+        // the cart on its way out. The attempt's own outcome is already decided by then, so the two lines
+        // below still route correctly on it; all a failed re-read costs is a countdown read a moment ago.
+      } finally {
+        isPaying = false;
+      }
+
+      if (paymentResult) {
+        currentView = 'payment';
+        return;
+      }
+    }
+
+    const contact = contactForm.getContact();
+
+    isPaying = true;
+    payError = null;
+    try {
+      paymentResult = await api.payCart(contact);
+      rememberPaymentAttempt(api.cartToken, {
+        checkoutId: paymentResult.checkoutId ?? '',
+        entityId: paymentResult.entityId ?? '',
+      });
+      currentView = 'payment';
+      postMessage({ type: 'payment:started' });
+      void refreshDeadlineAfterPay();
+    } catch (e) {
+      if (isInvalidCart(e)) {
+        // The cart expired between CartExpiryGuard's last tick and this click - there is nothing left to pay for.
+        close();
+        return;
+      }
+
+      // PayCheckoutCartCommandHandler's own error-mapping switch: 502 means Peach itself (or the network
+      // path to it) failed before a checkout could even be created - no charge was attempted and the cart is
+      // still Open, so this is always safe to retry. Every other status (400/409) reflects a cart/contact state
+      // the shopper can't fix by only retrying the same request, but there is no more specific action to suggest
+      // here either - either way, without this catch the rejection was previously unhandled and the shopper
+      // saw no indication anything had gone wrong at all.
+      const status = e instanceof ApiError ? e.status : null;
+      payError = status === 502
+        ? 'Unable to start payment right now. Please try again.'
+        : 'Something went wrong starting your payment. Please try again.';
+    } finally {
+      isPaying = false;
+    }
+  }
+
+  async function onPaymentComplete(result: { status: string }) {
+    // Neither cancelled, expired nor error ever reached a real charge - Peach's own SDK is reporting that the
+    // checkout itself didn't go through (the shopper backed out, session timeout, a declined card, a 3DS
+    // failure, a client-side error), not that a successful charge's confirmation is in question. That
+    // distinction matters: the confirm path at the bottom is only reachable once onCompleted has fired, which
+    // Peach does for a settled outcome of either kind - a charge, or a decline (the server reads that back from
+    // Peach's status endpoint, since Peach sends no webhook for one, and answers PAYMENT_FAILED). So "try again"
+    // there is only ever offered once the server itself has said nothing was charged. Here nothing was charged,
+    // so the attempt is abandoned server-side (a retry then starts a genuinely new Peach checkout instead of
+    // reopening this dead one) and re-opening the card form is exactly correct.
+    if (result.status === 'cancelled' || result.status === 'expired' || result.status === 'error') {
+      if (!(await releaseAbandonedAttempt())) return;
+    }
+
+    if (result.status === 'cancelled') {
+      currentView = 'contact';
+      return;
+    }
+
+    if (result.status === 'expired' || result.status === 'error') {
+      confirmOutcome = 'notCharged';
+      isConfirming = false;
+      currentView = 'result';
+      return;
+    }
+
+    currentView = 'result';
+    await runConfirmLoop();
+  }
+
+  // False when this component has already taken over what happens next - the cart turned out to be paid and is
+  // being confirmed, or it has expired - so the caller must not route the shopper anywhere else.
+  async function releaseAbandonedAttempt(): Promise<boolean> {
+    // Already cleared by an earlier call for this same attempt (e.g. a second Peach callback after the first
+    // already abandoned it) - nothing left to tell the server about.
+    if (!paymentResult) return await reloadCart();
+
+    const abandoned = await abandonPaymentAttempt(paymentResult.checkoutId);
+    if (abandoned === 'settled') {
+      currentView = 'result';
+      await runConfirmLoop();
+      return false;
+    }
+
+    if (abandoned === 'abandoned') {
+      paymentResult = null;
+      forgetPaymentAttempt();
+    }
+
+    // The cart is Open again, or the abandon call itself failed and the shopper is being routed back to
+    // contact/result regardless. payment:ended tells CartExpiryGuard to stop treating a payment as in flight -
+    // without it the guard never prompts or expires again for the rest of the page's life - and goes out last so
+    // the guard re-checks the deadline it ends up with. But it is only true when the attempt is actually over:
+    // released here, or the cart gone regardless (a 401 on the reload - the payment window had already run out).
+    // After a failed abandon the server still holds the cart awaiting payment for this attempt, and the guard's
+    // own timeout fallback must stay armed to finish the job, so the guard is told nothing.
+    const reloaded = await reloadCart();
+    if (reloaded) notifyCartUpdated(cart);
+    if (abandoned === 'abandoned' || !reloaded) postMessage({ type: 'payment:ended' });
+    return reloaded;
+  }
+
+  // Back to the contact form rather than straight to 'payment'. Every outcome that offers Try Again is one
+  // where nothing was charged, and in all but one of them the attempt has already been released (a decline
+  // here, a Peach-reported expiry or error in onPaymentComplete) - so there is no card form left to return to:
+  // Peach's SDK will not re-render a checkoutId it has unmounted, and a checkout that reached a decline is
+  // finished on Peach's side regardless. Contact is where onPayNow creates a genuinely new one, with the
+  // shopper's details still filled in (they live in this component, not in ContactForm) so paying again - on
+  // another card, if that is what the decline was about - is one click away. The exception needs no handling
+  // of its own: after an abandon the server refused, the attempt is still open and onPayNow's own paymentResult
+  // short-cut resumes that same one from here, which is exactly what it is there for.
+  function onRetry(): void {
+    currentView = 'contact';
+  }
+
+  // The declined counterpart to releaseAbandonedAttempt, and deliberately without its abandon call: the server
+  // has already resolved this attempt itself - a decline reached it (Peach's webhook, or its own read of Peach's
+  // status endpoint on confirm, since Peach sends no webhook for a declined card), which is what moved the cart
+  // to Failed and produced the PAYMENT_FAILED this follows - so there is nothing left to report. AbandonPaymentAsync
+  // answers a Failed cart with AlreadyOpen, an explicit no-op, and skipping it also keeps this off the branch
+  // that routes a 'settled' abandon back into runConfirmLoop, which would recurse from inside that very loop.
+  // Clearing the attempt is what makes Try Again start a NEW Peach checkout instead of reopening the dead one:
+  // onPayNow resumes paymentResult when it is still set, and resumeInterruptedPayment would land a reload
+  // straight back on that same spent card form.
+  async function releaseDeclinedAttempt(): Promise<void> {
+    paymentResult = null;
+    forgetPaymentAttempt();
+    // Failed is live and still payable again - the decline leaves the cart's one clock exactly where it was -
+    // so this re-reads whatever time Try Again actually has left rather than the deadline from before the card
+    // form. A cart whose clock ran out meanwhile 401s here and closes the modal, same as anywhere else. Any
+    // other failure of the re-read must not escape: this runs inside interpretConfirm's own catch, from where
+    // a throw would strand the shopper on "Verifying payment..." with no button at all, and the decline itself
+    // is already recorded - Try Again simply counts down from the older deadline (PR 8447 review).
+    try {
+      if (await reloadCart()) notifyCartUpdated(cart);
+    } catch {
+      // see above
+    }
+    // Without this CartExpiryGuard keeps treating a payment as in flight for the rest of the page's life, so it
+    // never prompts or expires this cart again.
+    postMessage({ type: 'payment:ended' });
+  }
+
+  type ConfirmAnswer = 'settled' | 'notPaid' | 'confirming' | 'cartGone' | 'unknown';
+
+  // One confirmCart() call, interpreted - the single place that decides what each answer means, shared by the
+  // automatic loop, the manual on-demand recheck and a resume after a reload. 'settled' has recorded the result
+  // (success, a supplier-side partial failure, or a decline - nothing left to retry); the other three record
+  // nothing and leave the caller to decide what "no outcome yet" means where it stands.
+  async function interpretConfirm(): Promise<ConfirmAnswer> {
+    try {
+      recordConfirmation(await api.confirmCart());
+      return 'settled';
+    } catch (e) {
+      // The one case that is a real, settled failure rather than a race still resolving: the server knows the
+      // attempt was declined (or another non-success outcome) - from Peach's webhook, or from asking Peach's
+      // status endpoint itself when no webhook had landed, which is how every ordinary card decline arrives
+      // since Peach sends no webhook for one - so there is no charge behind this attempt and never will be;
+      // retrying confirmCart again cannot change that. Checked before the
+      // generic 402/409 below, which would otherwise read this the same as "webhook not here yet" and retry
+      // it right into the same generic "still confirming" pending screen a decline should never land on.
+      if (isPaymentFailed(e)) {
+        confirmOutcome = 'notCharged';
+        await releaseDeclinedAttempt();
+        return 'settled';
+      }
+
+      // Two different races with the same webhook, neither a real failure:
+      //   402 - Peach has no final answer for this attempt yet (a 3-D Secure check still in flight, or its own
+      //         bookkeeping not caught up with the form that just completed) and the webhook hasn't reached
+      //         PeachWebhookEndpoints yet either, so the cart is not yet Paid.
+      //   409 - the webhook got there first and is confirming the cart right now, so there is no outcome to
+      //         read yet. Only one caller is allowed to run confirmation, and the loser is told to retry
+      //         rather than being handed a second, independently-produced answer.
+      // Both resolve on their own within a second or two. What "no outcome yet" or an unexpected error means
+      // depends on who is asking - see attemptConfirm and resumeOntoRecordedOutcome.
+      if (e instanceof ApiError && e.status === 402) return 'notPaid';
+      if (e instanceof ApiError && e.status === 409) return 'confirming';
+      if (isInvalidCart(e)) return 'cartGone';
+      return 'unknown';
+    }
+  }
+
+  function recordConfirmation(result: CheckoutCartConfirmResultDto): void {
+    confirmResult = result;
+    const allOk = result.items.every((i) => i.statusCode >= 200 && i.statusCode < 300);
+    confirmOutcome = allOk ? 'success' : 'partial';
+    // Notifies the host (order value/currency for analytics, clearing the stored cart token) without closing
+    // the modal - the shopper still needs to see the success screen, and only dismisses it themselves via
+    // ResultView's Done button, which is the one thing that posts modal:close.
+    if (allOk) {
+      onOrderConfirmed();
+    }
+  }
+
+  // The loop and the on-demand recheck only run once the attempt is known to have completed on Peach's side -
+  // onCompleted fired, or a resume after a reload found the webhook already confirming it - so "not paid" and
+  // "being confirmed" are both webhook races worth another attempt, and any other error (a cart the server no
+  // longer has included - by now that is a paid cart it cannot show, not one to pay again) settles as 'pending'
+  // rather than a failure state: there is no "payment failed" to report, only "not confirmed yet".
+  async function attemptConfirm(): Promise<'settled' | 'awaitingWebhook'> {
+    const answer = await interpretConfirm();
+    if (answer === 'notPaid' || answer === 'confirming') return 'awaitingWebhook';
+    if (answer === 'unknown' || answer === 'cartGone') confirmOutcome = 'pending';
+    return 'settled';
+  }
+
+  async function runConfirmLoop() {
+    isConfirming = true;
+    confirmOutcome = null;
+
+    for (let attempt = 1; attempt <= ConfirmMaxAttempts; attempt++) {
+      if (await attemptConfirm() === 'settled') {
+        isConfirming = false;
+        return;
+      }
+
+      if (attempt === ConfirmMaxAttempts) {
+        confirmOutcome = 'pending';
+        isConfirming = false;
+        return;
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, ConfirmRetryDelayMs));
+    }
+  }
+
+  // A single on-demand recheck for the 'pending' screen's "Check Again" button - deliberately not another
+  // full runConfirmLoop, which would re-impose its own ~15s auto-retry wait on someone who is already
+  // actively engaged and can just click again. Confirming is idempotent (CheckoutCartConfirmer), so this
+  // costs nothing to repeat; still 'pending' either way if the webhook still hasn't landed.
+  async function checkConfirmationAgain() {
+    isConfirming = true;
+    if (await attemptConfirm() === 'awaitingWebhook') {
+      confirmOutcome = 'pending';
+    }
+    isConfirming = false;
+  }
+
+  // A straight readout of confirmOutcome onto ResultView's own outcome union, which now carries one of each.
+  // 'partial' - the payment succeeded but this gateway could not confirm every item - keeps an outcome of its
+  // own the whole way through: it is a real problem worth surfacing distinctly from 'pending' (which resolves
+  // on its own), and it must never reach the shopper as "Payment Failed", because their card was charged.
+  // ResultView owns the wording for it, as it already did for 'successful' and 'pending'.
+  let resultStatus = $derived(
+    isConfirming
+      ? null
+      : confirmOutcome === 'success'
+        ? { outcome: 'successful' as const }
+        : confirmOutcome === 'pending'
+          ? { outcome: 'pending' as const }
+          : confirmOutcome === 'partial'
+            ? { outcome: 'partial' as const }
+            : confirmOutcome === 'notCharged'
+              ? {
+                  outcome: 'failed' as const,
+                  resultDescription: 'Your payment could not be completed. Please try again.',
+                  retryPayment: true,
+                }
+              : null,
+  );
+</script>
+
+<div class="modal">
+  {#if isLoading}
+    <div class="loading-center" style="height:100%">
+      <div class="spinner"></div>
+    </div>
+
+  {:else if currentView === 'payment'}
+    <!-- Still on the payment view but with no attempt left to render: releaseAbandonedAttempt clears
+         paymentResult and then re-reads the cart before its caller routes anywhere, and without this the modal
+         fell straight through to the cart view below for the length of that round trip - so the shopper watched
+         their cart reappear before landing on the failure screen they were being sent to (PR 8447 review). -->
+    {#if paymentResult}
+      <PaymentPage
+        checkoutId={paymentResult.checkoutId}
+        entityId={paymentResult.entityId}
+        expiresAt={expiryDeadline}
+        {onPaymentComplete}
+      />
+    {:else}
+      <div class="loading-center" style="height:100%">
+        <div class="spinner"></div>
+      </div>
+    {/if}
+
+  {:else if currentView === 'result'}
+    <ResultView
+      status={resultStatus}
+      verifying={isConfirming}
+      onDone={() => {
+        // onOrderConfirmed only for the outcome that actually earns it - a 'pending'/'partial' Close is
+        // just dismissing the dialog on an order this gateway cannot yet (or fully) vouch for, not
+        // reporting it complete. The 'success' case already fired onOrderConfirmed the moment it was
+        // known, inside runConfirmLoop/checkConfirmationAgain - this simply closes what's still open.
+        postMessage({ type: 'modal:close' });
+      }}
+      {onRetry}
+      onCheckAgain={confirmOutcome === 'pending' ? checkConfirmationAgain : undefined}
+    />
+
+  {:else if currentView === 'edit' && editingItem && productsById.get(editingItem.productId)}
+    <EditBookingView
+      cartItem={editingItem}
+      product={productsById.get(editingItem.productId)!}
+      {api}
+      {wizardPages}
+      {editPages}
+      {autoSelectSingleTimeSlot}
+      onBack={() => { currentView = 'cart'; }}
+      onClose={close}
+      onUpdated={onItemUpdated}
+      onPriceChanged={loadProducts}
+    />
+
+  {:else if currentView === 'contact'}
+    <!-- Contact Details view -->
+    <div class="page-header">
+      <button class="icon-btn" onclick={() => { currentView = 'cart'; }} aria-label="Back">&larr;</button>
+      <h2>Checkout</h2>
+      <span class="spacer"></span>
+      <CountdownTimer expiresAt={expiryDeadline} />
+      <button class="icon-btn" onclick={close} aria-label="Close">&times;</button>
+    </div>
+
+    <div class="body">
+      {#if payError}
+        <p class="pay-error">{payError}</p>
+      {/if}
+      <div class="contact-header">
+        <span class="contact-title">Contact Details</span>
+        <span class="required-hint">* Required Fields</span>
+      </div>
+      <ContactForm
+        bind:this={contactForm}
+        {hasAttemptedSubmit}
+        bind:firstName={contactFirstName}
+        bind:lastName={contactLastName}
+        bind:emailAddress={contactEmail}
+        bind:phoneNumber={contactPhone}
+      />
+      <div style="margin-top:24px">
+        <ConsentSection
+          {privacyAccepted}
+          {marketingOptIn}
+          {hasAttemptedSubmit}
+          onPrivacyChanged={(v) => { privacyAccepted = v; }}
+          onMarketingChanged={(v) => { marketingOptIn = v; }}
+        />
+      </div>
+    </div>
+
+    <div class="pay-bar">
+      <span class="pay-bar-total">{formattedTotal()}</span>
+      <button class="pay-bar-btn" onclick={onPayNow} disabled={isPaying}>
+        {isPaying ? 'Paying…' : 'Pay Now'}
+      </button>
+    </div>
+
+  {:else}
+    <!-- Cart view -->
+    <div class="page-header">
+      <h2>Your cart</h2>
+      <span class="spacer"></span>
+      <CountdownTimer expiresAt={expiryDeadline} />
+      <button class="keep-shopping-btn" onclick={continueShopping}>+ Keep shopping</button>
+    </div>
+
+    <div class="body">
+      {#each cart.items as item}
+        <div class="cart-card">
+          <div class="cart-card-top">
+            <h3 class="cart-product">{productTitle(item)}</h3>
+            <span class="cart-item-total">{formatCurrency(item.amount, item.currencyCode, 2, 0)}</span>
+          </div>
+          <div class="cart-detail-lines">
+            {#if itemDateLabel(item)}
+              <p class="cart-detail">{itemDateLabel(item)}</p>
+            {/if}
+            <p class="cart-detail">{optionTitle(item)}</p>
+          </div>
+
+          <div class="cart-divider"></div>
+
+          <div class="cart-units">
+            {#each groupUnits(item) as gu}
+              <div class="cart-unit-line">
+                <span class="cart-unit-label">{gu.title} &times; {gu.quantity}</span>
+                <span class="cart-unit-price">{formatCurrency(gu.linePrice, item.currencyCode, 2, 0)}</span>
+              </div>
+            {/each}
+          </div>
+
+          <div class="cart-actions">
+            <button class="action-edit" onclick={() => editItem(item)}>Edit</button>
+            <button class="action-remove" onclick={() => removeItem(item)}>Remove</button>
+          </div>
+        </div>
+      {/each}
+
+      <div class="cart-total-divider"></div>
+
+      <div class="cart-total-row">
+        <span>Total payable today</span>
+        <span class="cart-total-amount">{formattedTotal()}</span>
+      </div>
+    </div>
+
+    <div class="action-bar">
+      <button class="btn btn-primary" onclick={() => { currentView = 'contact'; }}>
+        Checkout
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .modal {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    background: var(--bw-color-surface);
+  }
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  /* -- Cart view -- */
+  .keep-shopping-btn {
+    padding: 8px 16px;
+    background: none;
+    border: 2px solid #222;
+    border-radius: var(--bw-radius-md);
+    font-size: 13px;
+    font-weight: 600;
+    color: #222;
+    cursor: pointer;
+  }
+  .keep-shopping-btn:hover {
+    background: #f5f5f5;
+  }
+
+  .cart-card {
+    border: 1px solid var(--bw-color-border);
+    border-radius: var(--bw-radius-lg);
+    padding: 20px;
+    margin-bottom: 16px;
+  }
+  .cart-card-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  .cart-product {
+    font-size: 16px;
+    font-weight: 700;
+    flex: 1;
+  }
+  .cart-item-total {
+    font-size: 16px;
+    font-weight: 800;
+    white-space: nowrap;
+  }
+  .cart-detail-lines {
+    margin-top: 4px;
+  }
+  .cart-detail {
+    font-size: 13px;
+    color: var(--bw-color-text-secondary);
+    line-height: 1.5;
+  }
+  .cart-divider {
+    border-top: 1px dashed var(--bw-color-border);
+    margin: 14px 0;
+  }
+  .cart-units {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 14px;
+  }
+  .cart-unit-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+  }
+  .cart-unit-label {
+    color: #333;
+  }
+  .cart-unit-price {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .cart-actions {
+    display: flex;
+    gap: 16px;
+  }
+  .action-edit {
+    background: none;
+    border: none;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--bw-color-primary);
+    padding: 0;
+    cursor: pointer;
+  }
+  .action-edit:hover { text-decoration: underline; }
+  .action-remove {
+    background: none;
+    border: none;
+    font-size: 13px;
+    font-weight: 600;
+    color: #555;
+    padding: 0;
+    cursor: pointer;
+  }
+  .action-remove:hover { text-decoration: underline; }
+
+  .cart-total-divider {
+    border-top: 3px solid #111;
+    margin: 8px 0 20px;
+  }
+  .cart-total-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  .cart-total-amount {
+    font-size: 20px;
+    font-weight: 800;
+  }
+  /* -- Contact view -- */
+  .pay-error {
+    margin: 0 0 16px;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+    border-radius: var(--bw-radius-md);
+  }
+  .contact-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .contact-title {
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .required-hint {
+    font-size: 12px;
+    color: var(--bw-color-primary);
+  }
+
+  .pay-bar {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    background: var(--bw-color-primary);
+    color: white;
+    position: sticky;
+    bottom: 0;
+  }
+  .pay-bar-total {
+    padding: 0 20px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .pay-bar-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    height: 52px;
+    padding: 0 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .pay-bar-btn:disabled {
+    opacity: 0.7;
+    cursor: default;
+  }
+</style>