@code-collective/booking-widget 1.0.12 → 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,96 +54,59 @@
 
   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());
 
   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);
+    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;
     }
-    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();
+  void loadProducts();
+  void flow.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' });
@@ -211,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();
@@ -236,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
@@ -265,250 +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. The server
-    // still holds that attempt (a second payCart would be refused with a 409), so the only useful move is to
-    // resume it. Every other way out of PaymentPage - cancel, expiry, error - abandons the attempt and clears
-    // paymentResult, and the next Pay Now creates a NEW Peach checkout. That is deliberate, not waste: Peach's
-    // SDK forbids re-rendering a checkoutId once it has been 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.
-    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,
-    // 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;
-  }
-
-  // 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 - the webhook landed with a decline, 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.
-    if (await reloadCart()) notifyCartUpdated(cart);
-    // 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' });
-  }
-
-  // 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';
-        await releaseDeclinedAttempt();
-        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">
@@ -517,27 +192,37 @@
       <div class="spinner"></div>
     </div>
 
-  {:else if currentView === 'payment' && paymentResult}
-    <PaymentPage
-      checkoutId={paymentResult.checkoutId}
-      entityId={paymentResult.entityId}
-      expiresAt={expiryDeadline}
-      {onPaymentComplete}
-    />
+  {:else if currentView === 'payment'}
+    <!-- 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 flow.paymentResult}
+      <PaymentPage
+        checkoutId={flow.paymentResult.checkoutId}
+        entityId={flow.paymentResult.entityId}
+        expiresAt={expiryDeadline}
+        onPaymentComplete={flow.onPaymentComplete}
+      />
+    {:else}
+      <div class="loading-center" style="height:100%">
+        <div class="spinner"></div>
+      </div>
+    {/if}
 
   {: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)}
@@ -565,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>
@@ -593,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>
 
@@ -611,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>
@@ -655,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>