@code-collective/booking-widget 1.0.12 → 1.0.13

package/src/lib/CartExpiryGuard.svelte

@@ -1,416 +1,416 @@
-<script lang="ts">
-  // The one place the cart's expiry is watched and acted on - mounted exactly once per page load (see
-  // register.ts), independently of which <bw-*> elements the merchant actually embeds. A merchant might place
-  // only <bw-configurator> and <bw-cart> with no <bw-checkout> anywhere on the page at all, so the warning and
-  // the close-on-timeout it can lead to cannot live inside the checkout modal - by the time that would matter,
-  // the modal may never have existed. CheckoutModal.svelte only ever *displays* the same idleExpiresAt this
-  // reads; it owns no prompt/extend/close logic of its own any more.
-  import type { BookingApi } from './api';
-  import { isInvalidCart, isCartLocked, isCartExpired, isPaymentSettled, isPaymentPending } from './api';
-  import type { CartManager } from './cart-manager';
-  import type { CheckoutCartDetailDto } from './client-types';
-  import { onWidgetMessage, postMessage } from './messages';
-  import { onDestroy } from 'svelte';
-  import { cartDeadline, isAtExpiryCeiling, EXTENSION_ENABLED } from './cart-expiry';
-  import { recallPaymentAttempt, forgetPaymentAttempt } from './payment-attempt';
-  import CartExpiryWatcher from './CartExpiryWatcher.svelte';
-  import StillTherePrompt from './StillTherePrompt.svelte';
-  import CartExpiredView from './CartExpiredView.svelte';
-  import { getBookingHostContext, requireBookingService } from './booking-context';
-
-  interface Props {
-    api?: BookingApi;
-    cartManager?: CartManager;
-    // Whether the "are you still there?" prompt is offered - see EXTENSION_ENABLED. Off, the guard only ever
-    // shows the expired view at 0:00; the clock itself is unchanged either way.
-    extensionEnabled?: boolean;
-  }
-  let { api: apiProp, cartManager: cartManagerProp, extensionEnabled = EXTENSION_ENABLED }: Props = $props();
-
-  const bookingHost = getBookingHostContext();
-  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'CartExpiryGuard', 'api'));
-  let cartManager = $derived(
-    requireBookingService(cartManagerProp ?? bookingHost?.cartManager, 'CartExpiryGuard', 'cartManager'),
-  );
-
-  let cart = $state<CheckoutCartDetailDto | null>(null);
-  let remaining = $state('');
-  let warning = $state(false);
-  let extending = $state(false);
-  let closed = $state(false);
-  // Set while a Peach checkout is open for this cart. The server exempts such a cart from expiry
-  // (CheckoutCartService.IsPastThePointOfNoReturn) - the money may be moving - so the deadline *passing* under
-  // the card form is not acted on here until CheckoutModal reports the attempt abandoned or the order
-  // completes. The clock itself keeps running, though, and the still-there prompt is still shown and still
-  // extends (ExtendAsync accepts a cart awaiting payment): a shopper who lets it run out on the card form and
-  // then cancels finds the cart expired, exactly as they would anywhere else. Learned from CheckoutModal's
-  // payment:started/ended messages while the page lives, and from the attempt CheckoutModal persisted
-  // (payment-attempt.ts) when this guard first sees a cart - so a reload mid-payment resumes the same way.
-  let paymentInFlight = $state(false);
-  // The deadline (ms) the prompt was last put away for - by OK on the at-the-ceiling warning, or by an extend
-  // that came back without moving the clock (see extend()) - so it doesn't just reappear next tick, but a
-  // *later* deadline (after an extend moves it) shows its own prompt.
-  let dismissedFor = $state<number | null>(null);
-
-  async function loadInitialCart() {
-    if (!cartManager.hasCart) return;
-    try {
-      cart = await api.getCart();
-    } catch (e) {
-      if (isInvalidCart(e)) {
-        cartManager.reset();
-      }
-    }
-  }
-  loadInitialCart();
-
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:updated') {
-      cart = ('cart' in d ? d.cart : null) as CheckoutCartDetailDto | null;
-    }
-    // The cart is paid and confirmed - Checkout.svelte's onOrderConfirmed already cleared the token and
-    // posted order:complete, but nothing told this guard the cart is done. Without this, the watcher keeps
-    // ticking on the stale deadline and eventually fires the "are you still there?" prompt (and then the
-    // "expired" overlay) over the confirmation screen.
-    if (d.type === 'order:complete') {
-      cart = null;
-      paymentInFlight = false;
-    }
-    if (d.type === 'payment:started') {
-      paymentInFlight = true;
-    }
-    if (d.type === 'payment:ended') {
-      paymentInFlight = false;
-      // Whoever ended the payment has done what the fallback below exists to do if nobody answers.
-      clearTimedOutFallback();
-      // CartExpiryWatcher fires once per deadline and already did so during the pause (ignored below). If the
-      // cart came back from the abandon on a fresh deadline, cart:updated has already replaced this one.
-      if (cart && expiryDeadline && expiryDeadline.getTime() <= Date.now()) void confirmExpiry();
-    }
-  }));
-
-  let lastToken = $state('');
-  $effect(() => {
-    const token = cart?.cartToken ?? '';
-    if (token !== lastToken) {
-      lastToken = token;
-      dismissedFor = null;
-      clearTimers();
-      paymentInFlight = recallPaymentAttempt(token) !== null;
-      if (token) closed = false;
-    }
-  });
-
-  let expiryDeadline = $derived(cart ? cartDeadline(cart) : null);
-  // Not gated on paymentInFlight: this overlay sits above PaymentPage (see z-index below) precisely so the
-  // prompt can reach a shopper mid card entry - when the prompt is enabled at all.
-  let showPrompt = $derived(extensionEnabled && !!cart && !closed && warning && dismissedFor !== expiryDeadline?.getTime());
-  // Read off the cart's own instants, not set by a failed request: at the ceiling there is no more time to be
-  // had, so the prompt only warns.
-  let canExtend = $derived(!!cart && !isAtExpiryCeiling(cart));
-
-  async function extend() {
-    extending = true;
-    const deadlineBefore = expiryDeadline?.getTime() ?? null;
-    try {
-      cart = await api.extendCart();
-      // A slide always moves idleExpiresAt to a full IdleDuration from now (short of the ceiling, which
-      // isAtExpiryCeiling already covers), so the same deadline coming back means no slide happened: a hold
-      // behind the cart could not be re-extended and the server left the clock where it was
-      // (ExtendCheckoutCartCommandHandler - it reports no refusal, the unmoved deadline is the answer). The
-      // prompt simply goes away for this deadline. The countdown carries on from where it was, and if it runs
-      // out the cart expires and every hold is released as usual - no second message, no button whose every
-      // click would fire another round of supplier calls that fail the same way.
-      if (cartDeadline(cart).getTime() === deadlineBefore) dismissedFor = deadlineBefore;
-      // Every other reader of the deadline (CartBarView, CartOverviewButton, an open CheckoutModal, the host's
-      // own bw:cart-updated) only learns about it through this message - without it they keep counting down to
-      // the pre-extension deadline even though the guard itself now knows better.
-      postMessage({ type: 'cart:updated', cart });
-    } catch (e) {
-      if (isInvalidCart(e)) {
-        expire();
-      } else if (isCartExpired(e)) {
-        // The server's own word that the clock has run out - only ever said with a payment in flight, since an
-        // expired cart anywhere else is a 401 above. Nothing left to ask, so straight to the hand-over the
-        // watcher reaching 0:00 during payment arrives at after asking: CheckoutModal tears the attempt down
-        // and payment:ended brings the guard back to confirm the expiry.
-        handOverTimedOutPayment();
-      } else if (isCartLocked(e)) {
-        // The cart's money has moved (Paid or beyond - a payment awaiting confirmation is still extendable)
-        // without this guard hearing order:complete yet, most likely from another tab. Nothing left to extend
-        // or expire; stop prompting for this deadline rather than leave a button up that can never succeed.
-        dismissedFor = deadlineBefore;
-      }
-      // Anything else (a blip): the prompt stays up and the shopper can simply click again.
-    } finally {
-      extending = false;
-    }
-  }
-
-  function dismissWarning() {
-    if (expiryDeadline) dismissedFor = expiryDeadline.getTime();
-  }
-
-  // How long to wait before asking the server again once it has reported the cart still live at our local T-0.
-  const ExpiryRecheckMs = 30_000;
-  // How long the guard gives CheckoutModal to act on payment:timed-out before doing it itself.
-  const TimedOutFallbackMs = 5_000;
-  // Plain lets, not $state - nothing rendered depends on any of these, they only sequence the confirms below.
-  let recheckTimer: ReturnType<typeof setTimeout> | null = null;
-  let timedOutFallbackTimer: ReturnType<typeof setTimeout> | null = null;
-  let confirming = false;
-
-  function clearRecheck() {
-    if (recheckTimer !== null) {
-      clearTimeout(recheckTimer);
-      recheckTimer = null;
-    }
-  }
-
-  function clearTimedOutFallback() {
-    if (timedOutFallbackTimer !== null) {
-      clearTimeout(timedOutFallbackTimer);
-      timedOutFallbackTimer = null;
-    }
-  }
-
-  // Both pending timers are about the cart this guard currently has: neither may fire for a page that has gone
-  // or a cart that has been replaced (the fallback in particular would abandon a payment attempt).
-  function clearTimers() {
-    clearRecheck();
-    clearTimedOutFallback();
-  }
-  onDestroy(clearTimers);
-
-  // CartExpiryWatcher's callback: the deadline passed with no extension - by the browser's clock. That is a
-  // claim, not a verdict. Expiry is the server's own doing (an idle cart simply stops validating, and
-  // CheckoutCartExpirySweepBackgroundService releases the holds behind it on its next pass), and a clock
-  // running fast would otherwise throw away a cart the server still considers live, holds and all. So the
-  // clock only decides when to *ask* - with or without a payment in flight, though what is asked differs.
-  function onDeadlinePassed() {
-    if (closed) return;
-    if (paymentInFlight) {
-      void confirmPaymentTimedOut();
-      return;
-    }
-    void confirmExpiry();
-  }
-
-  // A cart whose payment is in flight is exempt from expiry server-side, so there is no 401 to ask for. What
-  // one read does settle is whether this guard's deadline is still the cart's: another tab may have answered
-  // the still-there prompt, or the server may have pushed the clock out to the payment floor when the attempt
-  // began (CheckoutCartService.PaymentWindowFloor) and this guard never heard. Only a deadline the server hands
-  // back already past is acted on - a later one re-arms the watcher by itself and is announced to every other
-  // reader. What the read cannot settle is a browser clock running ahead of the server's with an unmoved
-  // deadline: the cart detail carries no server time to compare against, so that case still tears the attempt
-  // down early. The abandon behind it is Peach-verified either way, so money in motion is never touched, and
-  // a cart the server still considers live simply reopens on its remaining time. A read that fails says nothing
-  // about the cart and is no grounds to tear a live Peach session down - it is asked again.
-  async function confirmPaymentTimedOut() {
-    if (!cart || closed || !paymentInFlight || confirming) return;
-    // Already handed over and not yet answered: the fresh cart a hand-over reads back may carry a deadline
-    // that differs from the one the watcher fired for while still being past, and the watcher fires again for
-    // any deadline it has not fired for. One hand-over per unanswered timeout, not one per re-fire.
-    if (timedOutFallbackTimer !== null) return;
-    confirming = true;
-    clearRecheck();
-    let answer: 'past' | 'live' | 'gone' | 'unknown';
-    try {
-      cart = await api.getCart();
-      postMessage({ type: 'cart:updated', cart });
-      answer = cartDeadline(cart).getTime() <= Date.now() ? 'past' : 'live';
-    } catch (e) {
-      answer = isInvalidCart(e) ? 'gone' : 'unknown';
-    } finally {
-      confirming = false;
-    }
-    if (closed) return;
-
-    if (answer === 'gone') {
-      // The server has let this cart go despite our record of a payment in flight - the attempt must have been
-      // ended elsewhere (another tab) and the cart expired behind it. Same answer as anywhere else.
-      forgetPaymentAttempt();
-      paymentInFlight = false;
-      expire();
-      return;
-    }
-    if (answer === 'live') return;
-    // The payment may have ended while the read was in flight - CheckoutModal tears a resumed attempt down
-    // itself when it finds the deadline already past - and its payment:ended found this guard busy. Then there
-    // is nothing to hand over any more; this is the ordinary expiry question, asked afresh.
-    if (!paymentInFlight) {
-      void confirmExpiry();
-      return;
-    }
-    if (answer === 'past') handOverTimedOutPayment();
-    else scheduleRecheck();
-  }
-
-  // The clock ran out on the card form, on the server's own word or as near as this guard can get to it (see
-  // confirmPaymentTimedOut). CheckoutModal is told, and it tears the attempt down through the same
-  // Peach-verified abandon a cancel uses (so a charge that is actually landing is never torn down). Its
-  // payment:ended then brings the guard back here to ask, and the answer is the expired view.
-  function handOverTimedOutPayment() {
-    postMessage({ type: 'payment:timed-out' });
-    scheduleUnansweredTimeoutFallback();
-  }
-
-  // payment:timed-out only does anything if a CheckoutModal is mounted with the attempt open. After a reload
-  // the guard learns of the attempt from sessionStorage alone - the modal may never have been reopened - and
-  // then nobody would tear it down: paymentInFlight stays true, the watcher has already fired for this
-  // deadline, and the cart sits in limbo with no expiry ever shown. So if nothing has ended the payment shortly
-  // after the message, the guard abandons the attempt itself, through the same Peach-verified call the modal
-  // uses. A refusal because Peach has the charge as settled or still in flight is never torn down - that is
-  // money in motion - but it cannot be left to sit either: nothing else on the page would ever confirm it. So
-  // checkout is opened, the same way the cart bar's own button opens it; CheckoutModal resumes the attempt,
-  // runs into the same refusal, and drops into its confirm loop, which is where a settled charge belongs.
-  function scheduleUnansweredTimeoutFallback() {
-    clearTimedOutFallback();
-    timedOutFallbackTimer = setTimeout(() => {
-      timedOutFallbackTimer = null;
-      void abandonUnansweredTimedOutAttempt();
-    }, TimedOutFallbackMs);
-  }
-
-  async function abandonUnansweredTimedOutAttempt() {
-    if (!cart || closed || !paymentInFlight) return;
-    const attempt = recallPaymentAttempt(cart.cartToken ?? '');
-    if (!attempt) return;
-    try {
-      await api.abandonPayment(attempt.checkoutId);
-    } catch (e) {
-      if (isPaymentSettled(e) || isPaymentPending(e)) {
-        postMessage({ type: 'modal:open' });
-        return;
-      }
-      // Anything else (a blip): nothing changed server-side; reopening checkout lands back on the attempt.
-      return;
-    }
-    forgetPaymentAttempt();
-    paymentInFlight = false;
-    void confirmExpiry();
-  }
-
-  // One read settles it. A 401 means the server has let the cart go, so clearing it locally is safe. A live
-  // cart back means our clock is ahead of the server's: it is kept, on whatever deadline the server now
-  // reports (a moved one re-arms the watcher by itself, an unmoved one is asked about again shortly, since
-  // the watcher fires only once per deadline), and every other reader is told so their countdowns catch up.
-  // A read that fails for any other reason says nothing about the cart and is likewise no grounds to destroy
-  // it - it is simply asked again.
-  async function confirmExpiry() {
-    if (!cart || closed || paymentInFlight || confirming) return;
-    confirming = true;
-    clearRecheck();
-    try {
-      cart = await api.getCart();
-      postMessage({ type: 'cart:updated', cart });
-      if (cartDeadline(cart).getTime() <= Date.now()) scheduleRecheck();
-    } catch (e) {
-      if (isInvalidCart(e)) {
-        expire();
-      } else {
-        scheduleRecheck();
-      }
-    } finally {
-      confirming = false;
-    }
-  }
-
-  // Whichever question fits the cart's state by the time it fires - a payment may have started or ended since.
-  function scheduleRecheck() {
-    recheckTimer = setTimeout(() => {
-      recheckTimer = null;
-      if (paymentInFlight) void confirmPaymentTimedOut();
-      else void confirmExpiry();
-    }, ExpiryRecheckMs);
-  }
-
-  function expire() {
-    clearTimers();
-    closed = true;
-    cartManager.reset();
-    // Tells bw-cart/CartOverviewButton/CheckoutModal (if it happens to be mounted) the cart is gone, the same
-    // signal a manual remove-to-empty already sends - see CheckoutPanel's own onCartExpired for the other
-    // caller of this exact message. cart:expired follows it because a null cart alone does not say why: a
-    // confirmed order clears the cart the same way, and a host announcing "your cart expired" needs the two
-    // apart.
-    postMessage({ type: 'cart:updated', cart: null });
-    postMessage({ type: 'cart:expired' });
-  }
-
-  function startAgain() {
-    closed = false;
-    cart = null;
-    // If checkout happened to be open when this fired, there is nothing left in it to show.
-    postMessage({ type: 'modal:close' });
-  }
-
-  // This overlay covers the merchant's whole page and claims aria-modal, so it has to behave like a modal:
-  // Tab must not walk out of it into the page behind, and Escape must do something. Escape dismisses the
-  // warning for this deadline (exactly what the OK button does) - never closes the cart, which is not the
-  // shopper's to trigger and would be a destructive thing to hang off a stray keypress.
-  function onOverlayKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && showPrompt) {
-      event.preventDefault();
-      dismissWarning();
-      return;
-    }
-
-    if (event.key !== 'Tab') return;
-
-    const focusable = overlay?.querySelectorAll<HTMLElement>('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])');
-    if (!focusable?.length) return;
-
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    const wrappingBackwards = event.shiftKey && document.activeElement === first;
-    const wrappingForwards = !event.shiftKey && document.activeElement === last;
-    if (wrappingBackwards || wrappingForwards) {
-      event.preventDefault();
-      (event.shiftKey ? last : first).focus();
-    }
-  }
-
-  let overlay = $state<HTMLDivElement | null>(null);
-</script>
-
-<svelte:window onkeydown={showPrompt || closed ? onOverlayKeydown : undefined} />
-
-{#if cart && expiryDeadline}
-  <CartExpiryWatcher expiresAt={expiryDeadline} onExpired={onDeadlinePassed} bind:remaining bind:warning />
-{/if}
-
-{#if showPrompt}
-  <div class="guard-overlay bw-widget" bind:this={overlay}>
-    <StillTherePrompt {remaining} {canExtend} {extending} onExtend={extend} onDismiss={dismissWarning} />
-  </div>
-{:else if closed}
-  <div class="guard-overlay bw-widget" bind:this={overlay}>
-    <div class="guard-card">
-      <CartExpiredView onStartAgain={startAgain} />
-    </div>
-  </div>
-{/if}
-
-<style>
-  .guard-overlay {
-    position: fixed;
-    inset: 0;
-    /* Above every other layer this widget draws, including bw-checkout's own .bw-modal-overlay (10000) and
-       PaymentPage's .payment-overlay (10001) - this has to be able to interrupt someone mid-payment too. */
-    z-index: 20000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 16px;
-    background: rgba(0, 0, 0, 0.45);
-  }
-  .guard-card {
-    width: 100%;
-    max-width: 360px;
-    background: var(--bw-color-bg);
-    border-radius: var(--bw-radius-lg);
-    box-shadow: var(--bw-shadow-3);
-    overflow: hidden;
-  }
-</style>
+<script lang="ts">
+  // The one place the cart's expiry is watched and acted on - mounted exactly once per page load (see
+  // register.ts), independently of which <bw-*> elements the merchant actually embeds. A merchant might place
+  // only <bw-configurator> and <bw-cart> with no <bw-checkout> anywhere on the page at all, so the warning and
+  // the close-on-timeout it can lead to cannot live inside the checkout modal - by the time that would matter,
+  // the modal may never have existed. CheckoutModal.svelte only ever *displays* the same idleExpiresAt this
+  // reads; it owns no prompt/extend/close logic of its own any more.
+  import type { BookingApi } from './api';
+  import { isInvalidCart, isCartLocked, isCartExpired, isPaymentSettled, isPaymentPending } from './api';
+  import type { CartManager } from './cart-manager';
+  import type { CheckoutCartDetailDto } from './client-types';
+  import { onWidgetMessage, postMessage } from './messages';
+  import { onDestroy } from 'svelte';
+  import { cartDeadline, isAtExpiryCeiling, EXTENSION_ENABLED } from './cart-expiry';
+  import { recallPaymentAttempt, forgetPaymentAttempt } from './payment-attempt';
+  import CartExpiryWatcher from './CartExpiryWatcher.svelte';
+  import StillTherePrompt from './StillTherePrompt.svelte';
+  import CartExpiredView from './CartExpiredView.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+
+  interface Props {
+    api?: BookingApi;
+    cartManager?: CartManager;
+    // Whether the "are you still there?" prompt is offered - see EXTENSION_ENABLED. Off, the guard only ever
+    // shows the expired view at 0:00; the clock itself is unchanged either way.
+    extensionEnabled?: boolean;
+  }
+  let { api: apiProp, cartManager: cartManagerProp, extensionEnabled = EXTENSION_ENABLED }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'CartExpiryGuard', 'api'));
+  let cartManager = $derived(
+    requireBookingService(cartManagerProp ?? bookingHost?.cartManager, 'CartExpiryGuard', 'cartManager'),
+  );
+
+  let cart = $state<CheckoutCartDetailDto | null>(null);
+  let remaining = $state('');
+  let warning = $state(false);
+  let extending = $state(false);
+  let closed = $state(false);
+  // Set while a Peach checkout is open for this cart. The server exempts such a cart from expiry
+  // (CheckoutCartService.IsPastThePointOfNoReturn) - the money may be moving - so the deadline *passing* under
+  // the card form is not acted on here until CheckoutModal reports the attempt abandoned or the order
+  // completes. The clock itself keeps running, though, and the still-there prompt is still shown and still
+  // extends (ExtendAsync accepts a cart awaiting payment): a shopper who lets it run out on the card form and
+  // then cancels finds the cart expired, exactly as they would anywhere else. Learned from CheckoutModal's
+  // payment:started/ended messages while the page lives, and from the attempt CheckoutModal persisted
+  // (payment-attempt.ts) when this guard first sees a cart - so a reload mid-payment resumes the same way.
+  let paymentInFlight = $state(false);
+  // The deadline (ms) the prompt was last put away for - by OK on the at-the-ceiling warning, or by an extend
+  // that came back without moving the clock (see extend()) - so it doesn't just reappear next tick, but a
+  // *later* deadline (after an extend moves it) shows its own prompt.
+  let dismissedFor = $state<number | null>(null);
+
+  async function loadInitialCart() {
+    if (!cartManager.hasCart) return;
+    try {
+      cart = await api.getCart();
+    } catch (e) {
+      if (isInvalidCart(e)) {
+        cartManager.reset();
+      }
+    }
+  }
+  loadInitialCart();
+
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:updated') {
+      cart = ('cart' in d ? d.cart : null) as CheckoutCartDetailDto | null;
+    }
+    // The cart is paid and confirmed - Checkout.svelte's onOrderConfirmed already cleared the token and
+    // posted order:complete, but nothing told this guard the cart is done. Without this, the watcher keeps
+    // ticking on the stale deadline and eventually fires the "are you still there?" prompt (and then the
+    // "expired" overlay) over the confirmation screen.
+    if (d.type === 'order:complete') {
+      cart = null;
+      paymentInFlight = false;
+    }
+    if (d.type === 'payment:started') {
+      paymentInFlight = true;
+    }
+    if (d.type === 'payment:ended') {
+      paymentInFlight = false;
+      // Whoever ended the payment has done what the fallback below exists to do if nobody answers.
+      clearTimedOutFallback();
+      // CartExpiryWatcher fires once per deadline and already did so during the pause (ignored below). If the
+      // cart came back from the abandon on a fresh deadline, cart:updated has already replaced this one.
+      if (cart && expiryDeadline && expiryDeadline.getTime() <= Date.now()) void confirmExpiry();
+    }
+  }));
+
+  let lastToken = $state('');
+  $effect(() => {
+    const token = cart?.cartToken ?? '';
+    if (token !== lastToken) {
+      lastToken = token;
+      dismissedFor = null;
+      clearTimers();
+      paymentInFlight = recallPaymentAttempt(token) !== null;
+      if (token) closed = false;
+    }
+  });
+
+  let expiryDeadline = $derived(cart ? cartDeadline(cart) : null);
+  // Not gated on paymentInFlight: this overlay sits above PaymentPage (see z-index below) precisely so the
+  // prompt can reach a shopper mid card entry - when the prompt is enabled at all.
+  let showPrompt = $derived(extensionEnabled && !!cart && !closed && warning && dismissedFor !== expiryDeadline?.getTime());
+  // Read off the cart's own instants, not set by a failed request: at the ceiling there is no more time to be
+  // had, so the prompt only warns.
+  let canExtend = $derived(!!cart && !isAtExpiryCeiling(cart));
+
+  async function extend() {
+    extending = true;
+    const deadlineBefore = expiryDeadline?.getTime() ?? null;
+    try {
+      cart = await api.extendCart();
+      // A slide always moves idleExpiresAt to a full IdleDuration from now (short of the ceiling, which
+      // isAtExpiryCeiling already covers), so the same deadline coming back means no slide happened: a hold
+      // behind the cart could not be re-extended and the server left the clock where it was
+      // (ExtendCheckoutCartCommandHandler - it reports no refusal, the unmoved deadline is the answer). The
+      // prompt simply goes away for this deadline. The countdown carries on from where it was, and if it runs
+      // out the cart expires and every hold is released as usual - no second message, no button whose every
+      // click would fire another round of supplier calls that fail the same way.
+      if (cartDeadline(cart).getTime() === deadlineBefore) dismissedFor = deadlineBefore;
+      // Every other reader of the deadline (CartBarView, CartOverviewButton, an open CheckoutModal, the host's
+      // own bw:cart-updated) only learns about it through this message - without it they keep counting down to
+      // the pre-extension deadline even though the guard itself now knows better.
+      postMessage({ type: 'cart:updated', cart });
+    } catch (e) {
+      if (isInvalidCart(e)) {
+        expire();
+      } else if (isCartExpired(e)) {
+        // The server's own word that the clock has run out - only ever said with a payment in flight, since an
+        // expired cart anywhere else is a 401 above. Nothing left to ask, so straight to the hand-over the
+        // watcher reaching 0:00 during payment arrives at after asking: CheckoutModal tears the attempt down
+        // and payment:ended brings the guard back to confirm the expiry.
+        handOverTimedOutPayment();
+      } else if (isCartLocked(e)) {
+        // The cart's money has moved (Paid or beyond - a payment awaiting confirmation is still extendable)
+        // without this guard hearing order:complete yet, most likely from another tab. Nothing left to extend
+        // or expire; stop prompting for this deadline rather than leave a button up that can never succeed.
+        dismissedFor = deadlineBefore;
+      }
+      // Anything else (a blip): the prompt stays up and the shopper can simply click again.
+    } finally {
+      extending = false;
+    }
+  }
+
+  function dismissWarning() {
+    if (expiryDeadline) dismissedFor = expiryDeadline.getTime();
+  }
+
+  // How long to wait before asking the server again once it has reported the cart still live at our local T-0.
+  const ExpiryRecheckMs = 30_000;
+  // How long the guard gives CheckoutModal to act on payment:timed-out before doing it itself.
+  const TimedOutFallbackMs = 5_000;
+  // Plain lets, not $state - nothing rendered depends on any of these, they only sequence the confirms below.
+  let recheckTimer: ReturnType<typeof setTimeout> | null = null;
+  let timedOutFallbackTimer: ReturnType<typeof setTimeout> | null = null;
+  let confirming = false;
+
+  function clearRecheck() {
+    if (recheckTimer !== null) {
+      clearTimeout(recheckTimer);
+      recheckTimer = null;
+    }
+  }
+
+  function clearTimedOutFallback() {
+    if (timedOutFallbackTimer !== null) {
+      clearTimeout(timedOutFallbackTimer);
+      timedOutFallbackTimer = null;
+    }
+  }
+
+  // Both pending timers are about the cart this guard currently has: neither may fire for a page that has gone
+  // or a cart that has been replaced (the fallback in particular would abandon a payment attempt).
+  function clearTimers() {
+    clearRecheck();
+    clearTimedOutFallback();
+  }
+  onDestroy(clearTimers);
+
+  // CartExpiryWatcher's callback: the deadline passed with no extension - by the browser's clock. That is a
+  // claim, not a verdict. Expiry is the server's own doing (an idle cart simply stops validating, and
+  // CheckoutCartExpirySweepBackgroundService releases the holds behind it on its next pass), and a clock
+  // running fast would otherwise throw away a cart the server still considers live, holds and all. So the
+  // clock only decides when to *ask* - with or without a payment in flight, though what is asked differs.
+  function onDeadlinePassed() {
+    if (closed) return;
+    if (paymentInFlight) {
+      void confirmPaymentTimedOut();
+      return;
+    }
+    void confirmExpiry();
+  }
+
+  // A cart whose payment is in flight is exempt from expiry server-side, so there is no 401 to ask for. What
+  // one read does settle is whether this guard's deadline is still the cart's: another tab may have answered
+  // the still-there prompt, or the server may have pushed the clock out to the payment floor when the attempt
+  // began (CheckoutCartService.PaymentWindowFloor) and this guard never heard. Only a deadline the server hands
+  // back already past is acted on - a later one re-arms the watcher by itself and is announced to every other
+  // reader. What the read cannot settle is a browser clock running ahead of the server's with an unmoved
+  // deadline: the cart detail carries no server time to compare against, so that case still tears the attempt
+  // down early. The abandon behind it is Peach-verified either way, so money in motion is never touched, and
+  // a cart the server still considers live simply reopens on its remaining time. A read that fails says nothing
+  // about the cart and is no grounds to tear a live Peach session down - it is asked again.
+  async function confirmPaymentTimedOut() {
+    if (!cart || closed || !paymentInFlight || confirming) return;
+    // Already handed over and not yet answered: the fresh cart a hand-over reads back may carry a deadline
+    // that differs from the one the watcher fired for while still being past, and the watcher fires again for
+    // any deadline it has not fired for. One hand-over per unanswered timeout, not one per re-fire.
+    if (timedOutFallbackTimer !== null) return;
+    confirming = true;
+    clearRecheck();
+    let answer: 'past' | 'live' | 'gone' | 'unknown';
+    try {
+      cart = await api.getCart();
+      postMessage({ type: 'cart:updated', cart });
+      answer = cartDeadline(cart).getTime() <= Date.now() ? 'past' : 'live';
+    } catch (e) {
+      answer = isInvalidCart(e) ? 'gone' : 'unknown';
+    } finally {
+      confirming = false;
+    }
+    if (closed) return;
+
+    if (answer === 'gone') {
+      // The server has let this cart go despite our record of a payment in flight - the attempt must have been
+      // ended elsewhere (another tab) and the cart expired behind it. Same answer as anywhere else.
+      forgetPaymentAttempt();
+      paymentInFlight = false;
+      expire();
+      return;
+    }
+    if (answer === 'live') return;
+    // The payment may have ended while the read was in flight - CheckoutModal tears a resumed attempt down
+    // itself when it finds the deadline already past - and its payment:ended found this guard busy. Then there
+    // is nothing to hand over any more; this is the ordinary expiry question, asked afresh.
+    if (!paymentInFlight) {
+      void confirmExpiry();
+      return;
+    }
+    if (answer === 'past') handOverTimedOutPayment();
+    else scheduleRecheck();
+  }
+
+  // The clock ran out on the card form, on the server's own word or as near as this guard can get to it (see
+  // confirmPaymentTimedOut). CheckoutModal is told, and it tears the attempt down through the same
+  // Peach-verified abandon a cancel uses (so a charge that is actually landing is never torn down). Its
+  // payment:ended then brings the guard back here to ask, and the answer is the expired view.
+  function handOverTimedOutPayment() {
+    postMessage({ type: 'payment:timed-out' });
+    scheduleUnansweredTimeoutFallback();
+  }
+
+  // payment:timed-out only does anything if a CheckoutModal is mounted with the attempt open. After a reload
+  // the guard learns of the attempt from sessionStorage alone - the modal may never have been reopened - and
+  // then nobody would tear it down: paymentInFlight stays true, the watcher has already fired for this
+  // deadline, and the cart sits in limbo with no expiry ever shown. So if nothing has ended the payment shortly
+  // after the message, the guard abandons the attempt itself, through the same Peach-verified call the modal
+  // uses. A refusal because Peach has the charge as settled or still in flight is never torn down - that is
+  // money in motion - but it cannot be left to sit either: nothing else on the page would ever confirm it. So
+  // checkout is opened, the same way the cart bar's own button opens it; CheckoutModal resumes the attempt,
+  // runs into the same refusal, and drops into its confirm loop, which is where a settled charge belongs.
+  function scheduleUnansweredTimeoutFallback() {
+    clearTimedOutFallback();
+    timedOutFallbackTimer = setTimeout(() => {
+      timedOutFallbackTimer = null;
+      void abandonUnansweredTimedOutAttempt();
+    }, TimedOutFallbackMs);
+  }
+
+  async function abandonUnansweredTimedOutAttempt() {
+    if (!cart || closed || !paymentInFlight) return;
+    const attempt = recallPaymentAttempt(cart.cartToken ?? '');
+    if (!attempt) return;
+    try {
+      await api.abandonPayment(attempt.checkoutId);
+    } catch (e) {
+      if (isPaymentSettled(e) || isPaymentPending(e)) {
+        postMessage({ type: 'modal:open' });
+        return;
+      }
+      // Anything else (a blip): nothing changed server-side; reopening checkout lands back on the attempt.
+      return;
+    }
+    forgetPaymentAttempt();
+    paymentInFlight = false;
+    void confirmExpiry();
+  }
+
+  // One read settles it. A 401 means the server has let the cart go, so clearing it locally is safe. A live
+  // cart back means our clock is ahead of the server's: it is kept, on whatever deadline the server now
+  // reports (a moved one re-arms the watcher by itself, an unmoved one is asked about again shortly, since
+  // the watcher fires only once per deadline), and every other reader is told so their countdowns catch up.
+  // A read that fails for any other reason says nothing about the cart and is likewise no grounds to destroy
+  // it - it is simply asked again.
+  async function confirmExpiry() {
+    if (!cart || closed || paymentInFlight || confirming) return;
+    confirming = true;
+    clearRecheck();
+    try {
+      cart = await api.getCart();
+      postMessage({ type: 'cart:updated', cart });
+      if (cartDeadline(cart).getTime() <= Date.now()) scheduleRecheck();
+    } catch (e) {
+      if (isInvalidCart(e)) {
+        expire();
+      } else {
+        scheduleRecheck();
+      }
+    } finally {
+      confirming = false;
+    }
+  }
+
+  // Whichever question fits the cart's state by the time it fires - a payment may have started or ended since.
+  function scheduleRecheck() {
+    recheckTimer = setTimeout(() => {
+      recheckTimer = null;
+      if (paymentInFlight) void confirmPaymentTimedOut();
+      else void confirmExpiry();
+    }, ExpiryRecheckMs);
+  }
+
+  function expire() {
+    clearTimers();
+    closed = true;
+    cartManager.reset();
+    // Tells bw-cart/CartOverviewButton/CheckoutModal (if it happens to be mounted) the cart is gone, the same
+    // signal a manual remove-to-empty already sends - see CheckoutPanel's own onCartExpired for the other
+    // caller of this exact message. cart:expired follows it because a null cart alone does not say why: a
+    // confirmed order clears the cart the same way, and a host announcing "your cart expired" needs the two
+    // apart.
+    postMessage({ type: 'cart:updated', cart: null });
+    postMessage({ type: 'cart:expired' });
+  }
+
+  function startAgain() {
+    closed = false;
+    cart = null;
+    // If checkout happened to be open when this fired, there is nothing left in it to show.
+    postMessage({ type: 'modal:close' });
+  }
+
+  // This overlay covers the merchant's whole page and claims aria-modal, so it has to behave like a modal:
+  // Tab must not walk out of it into the page behind, and Escape must do something. Escape dismisses the
+  // warning for this deadline (exactly what the OK button does) - never closes the cart, which is not the
+  // shopper's to trigger and would be a destructive thing to hang off a stray keypress.
+  function onOverlayKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && showPrompt) {
+      event.preventDefault();
+      dismissWarning();
+      return;
+    }
+
+    if (event.key !== 'Tab') return;
+
+    const focusable = overlay?.querySelectorAll<HTMLElement>('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])');
+    if (!focusable?.length) return;
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const wrappingBackwards = event.shiftKey && document.activeElement === first;
+    const wrappingForwards = !event.shiftKey && document.activeElement === last;
+    if (wrappingBackwards || wrappingForwards) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus();
+    }
+  }
+
+  let overlay = $state<HTMLDivElement | null>(null);
+</script>
+
+<svelte:window onkeydown={showPrompt || closed ? onOverlayKeydown : undefined} />
+
+{#if cart && expiryDeadline}
+  <CartExpiryWatcher expiresAt={expiryDeadline} onExpired={onDeadlinePassed} bind:remaining bind:warning />
+{/if}
+
+{#if showPrompt}
+  <div class="guard-overlay bw-widget" bind:this={overlay}>
+    <StillTherePrompt {remaining} {canExtend} {extending} onExtend={extend} onDismiss={dismissWarning} />
+  </div>
+{:else if closed}
+  <div class="guard-overlay bw-widget" bind:this={overlay}>
+    <div class="guard-card">
+      <CartExpiredView onStartAgain={startAgain} />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .guard-overlay {
+    position: fixed;
+    inset: 0;
+    /* Above every other layer this widget draws, including bw-checkout's own .bw-modal-overlay (10000) and
+       PaymentPage's .payment-overlay (10001) - this has to be able to interrupt someone mid-payment too. */
+    z-index: 20000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    background: rgba(0, 0, 0, 0.45);
+  }
+  .guard-card {
+    width: 100%;
+    max-width: 360px;
+    background: var(--bw-color-bg);
+    border-radius: var(--bw-radius-lg);
+    box-shadow: var(--bw-shadow-3);
+    overflow: hidden;
+  }
+</style>