@code-collective/booking-widget 1.0.13 → 1.0.14

package/src/lib/CheckoutModal.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutCartPaymentInitiationDto, CheckoutCartConfirmResultDto, CheckoutProductDto } from './client-types';
+  import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutProductDto } from './client-types';
   import type { BookingApi } from './api';
-  import { ApiError, isInvalidCart, isPaymentFailed, isPaymentPending, isPaymentSettled } from './api';
+  import { isInvalidCart } 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 { createCheckoutPaymentFlow } from './checkout-payment-flow.svelte';
+  import { cartTotal, cartCurrency, productTitle, optionTitle, groupUnits, itemDateLabel } from './checkout-item-view';
   import ContactForm from './ContactForm.svelte';
   import ConsentSection from './ConsentSection.svelte';
   import CountdownTimer from './CountdownTimer.svelte';
@@ -33,48 +34,16 @@
   // 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();
+    if (d.type === 'payment:timed-out') void flow.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.
@@ -85,6 +54,22 @@
 
   let contactForm = $state<ContactForm | null>(null);
 
+  // The current Peach payment attempt, from minting it through to a settled outcome - see
+  // checkout-payment-flow.svelte.ts for why this is its own module rather than living in this component.
+  const flow = createCheckoutPaymentFlow({
+    getApi: () => api,
+    getCart: () => cart,
+    reloadCart,
+    notifyCartUpdated,
+    refreshDeadlineAfterPay: () => void refreshDeadlineAfterPay(),
+    setView: (v) => { currentView = v; },
+    close,
+    // Wrapped, not passed directly: onOrderConfirmed is a destructured prop, and passing it by value here
+    // would capture whatever it happened to be when the flow was created rather than following it if the
+    // host ever supplies a different callback later.
+    onOrderConfirmed: () => onOrderConfirmed(),
+  });
+
   // Load product data so we can display titles and unit info
   let productsById = $state<Map<string, CheckoutProductDto>>(new Map());
 
@@ -108,125 +93,20 @@
   }
 
   void loadProducts();
+  void flow.resumeInterruptedPayment();
 
-  // 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));
+  let formattedTotal = $derived(() => formatCurrency(cartTotal(cart), cartCurrency(cart), 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' }));
+  onDestroy(() => {
+    // An in-flight poll outlives the payment flow otherwise - it would keep hitting the gateway, and keep
+    // writing to $state on a component nobody is looking at any more.
+    flow.dispose();
+    postMessage({ type: 'modal:close' });
+  });
 
   function close() {
     postMessage({ type: 'modal:close' });
@@ -263,7 +143,8 @@
 
   // 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.
+  // while this modal happened to be open), and there is nothing left here to show but to close. Shared with
+  // the payment flow, which needs the exact same behaviour when releasing or reloading after an attempt ends.
   async function reloadCart(): Promise<boolean> {
     try {
       cart = await api.getCart();
@@ -288,22 +169,6 @@
     }
   }
 
-  // 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
@@ -317,296 +182,8 @@
   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;
-    }
+    await flow.payNow(contactForm.getContact());
   }
-
-  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">
@@ -616,16 +193,16 @@
     </div>
 
   {:else if currentView === 'payment'}
-    <!-- Still on the payment view but with no attempt left to render: releaseAbandonedAttempt clears
+    <!-- Still on the payment view but with no attempt left to render: releasing the previous attempt 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}
+    {#if flow.paymentResult}
       <PaymentPage
-        checkoutId={paymentResult.checkoutId}
-        entityId={paymentResult.entityId}
+        checkoutId={flow.paymentResult.checkoutId}
+        entityId={flow.paymentResult.entityId}
         expiresAt={expiryDeadline}
-        {onPaymentComplete}
+        onPaymentComplete={flow.onPaymentComplete}
       />
     {:else}
       <div class="loading-center" style="height:100%">
@@ -635,17 +212,17 @@
 
   {:else if currentView === 'result'}
     <ResultView
-      status={resultStatus}
-      verifying={isConfirming}
+      status={flow.resultStatus}
+      verifying={flow.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.
+        // known, inside the payment flow's own recordConfirmation - this simply closes what's still open.
         postMessage({ type: 'modal:close' });
       }}
-      {onRetry}
-      onCheckAgain={confirmOutcome === 'pending' ? checkConfirmationAgain : undefined}
+      onRetry={flow.retry}
+      onCheckAgain={flow.resultStatus?.outcome === 'pending' ? flow.checkStatusAgain : undefined}
     />
 
   {:else if currentView === 'edit' && editingItem && productsById.get(editingItem.productId)}
@@ -673,8 +250,8 @@
     </div>
 
     <div class="body">
-      {#if payError}
-        <p class="pay-error">{payError}</p>
+      {#if flow.payError}
+        <p class="pay-error">{flow.payError}</p>
       {/if}
       <div class="contact-header">
         <span class="contact-title">Contact Details</span>
@@ -701,8 +278,8 @@
 
     <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 class="pay-bar-btn" onclick={onPayNow} disabled={flow.isPaying}>
+        {flow.isPaying ? 'Paying…' : 'Pay Now'}
       </button>
     </div>
 
@@ -719,20 +296,20 @@
       {#each cart.items as item}
         <div class="cart-card">
           <div class="cart-card-top">
-            <h3 class="cart-product">{productTitle(item)}</h3>
+            <h3 class="cart-product">{productTitle(item, productsById)}</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>
+            <p class="cart-detail">{optionTitle(item, productsById)}</p>
           </div>
 
           <div class="cart-divider"></div>
 
           <div class="cart-units">
-            {#each groupUnits(item) as gu}
+            {#each groupUnits(item, productsById) 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>
@@ -763,184 +340,4 @@
   {/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>
+<style src="./CheckoutModal.css"></style>