@code-collective/booking-widget 1.0.8 → 1.0.10

package/src/lib/CartExpiredView.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  // The one view with no way back into the cart: by the time this shows, the cart's holds have been released
+  // (or the payment attempt abandoned), the stored token dropped and the host told the cart is empty - see
+  // Checkout.svelte's onCartExpired. The only move is forward, to a fresh cart.
+  interface Props {
+    onStartAgain: () => void;
+  }
+  let { onStartAgain }: Props = $props();
+
+  // Focused on mount, same as StillTherePrompt's own primary button - CartExpiryGuard's overlay claims
+  // aria-modal and traps Tab against document.activeElement, so without this nothing inside the overlay is
+  // focused and the trap never engages: Tab walks straight through to the merchant's page behind it.
+  let startAgainButton = $state<HTMLButtonElement | null>(null);
+  $effect(() => {
+    startAgainButton?.focus();
+  });
+</script>
+
+<div class="expired">
+  <div class="icon">!</div>
+  <h2>Your cart has expired</h2>
+  <p class="desc">
+    The tickets in your cart were held for a limited time and have now been released. Nothing has been
+    charged. Start again to choose your tickets.
+  </p>
+  <button class="btn btn-primary" bind:this={startAgainButton} onclick={onStartAgain}>Start again</button>
+</div>
+
+<style>
+  .expired {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 24px;
+    height: 100%;
+    text-align: center;
+  }
+  .icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    margin-bottom: 20px;
+    border: 2px solid var(--bw-color-border);
+    color: var(--bw-color-text-secondary);
+  }
+  h2 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+  .desc {
+    color: var(--bw-color-text-secondary);
+    font-size: 14px;
+    margin-bottom: 28px;
+    max-width: 300px;
+    line-height: 1.5;
+  }
+</style>

package/src/lib/CartExpiryGuard.svelte

@@ -0,0 +1,410 @@
+<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';
+
+  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, cartManager, extensionEnabled = EXTENSION_ENABLED }: Props = $props();
+
+  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();
+    // Posted first so a listener that cares about expiry specifically (register.ts's bw:cart-expired) hears
+    // it before the more general cart:updated below - order does not matter to either side today, but this
+    // keeps the more specific signal from ever reading as a follow-up to the general one.
+    postMessage({ type: 'cart:expired' });
+    // 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 Checkout.svelte's own onCartExpired for the other
+    // caller of this exact message.
+    postMessage({ type: 'cart:updated', cart: null });
+  }
+
+  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>