@code-collective/booking-widget 1.0.8 → 1.0.10

package/src/lib/CountdownTimer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
+  import { formatRemaining } from './cart-expiry';
 
   interface Props { expiresAt: Date }
   let { expiresAt }: Props = $props();
@@ -7,10 +8,7 @@
   let remaining = $state('');
 
   function update() {
-    const diff = Math.max(0, expiresAt.getTime() - Date.now());
-    const mins = Math.floor(diff / 60000);
-    const secs = Math.floor((diff % 60000) / 1000);
-    remaining = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    remaining = formatRemaining(expiresAt.getTime() - Date.now());
   }
 
   update();

package/src/lib/PaymentPage.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { loadPeachSdk } from './peach-sdk';
+  import CountdownTimer from './CountdownTimer.svelte';
 
   interface Props {
     checkoutId: string;
     entityId: string;
     onPaymentComplete: (result: { status: string }) => void;
+    // The cart's remaining life, shown in this dialog's own header so the shopper can see it over Peach's
+    // form - CheckoutModal's own cart timer is behind this overlay. Optional so callers that predate it need
+    // not pass one. CartExpiryGuard.svelte is what actually warns and acts as this counts down to zero - it
+    // renders above this overlay too, so there is nothing else for this dialog to do near the deadline.
+    expiresAt?: Date;
   }
-  let { checkoutId, entityId, onPaymentComplete }: Props = $props();
+  let { checkoutId, entityId, onPaymentComplete, expiresAt }: Props = $props();
 
   let failed = $state(false);
   let errorMessage = $state('');
@@ -76,6 +82,10 @@
   <div class="payment-dialog" onclick={(e) => e.stopPropagation()}>
     <div class="page-header">
       <h2>Payment</h2>
+      {#if expiresAt}
+        <span class="spacer"></span>
+        <CountdownTimer {expiresAt} />
+      {/if}
     </div>
 
     <div class="body">
@@ -84,6 +94,12 @@
           <div class="error-icon">!</div>
           <p class="error-title">Unable to load payment form</p>
           <p class="error-msg">{errorMessage || 'The checkout session may have expired.'}</p>
+          <!-- Peach's own Cancel/Back never rendered, so this dialog needs one exit of its own here. Reported
+               as an error rather than a cancel: nothing was charged, and CheckoutModal's error path abandons
+               the attempt so a retry mints a fresh Peach checkout instead of reopening this one - which is the
+               only sensible outcome for a checkout that would not even render (e.g. one resumed after a reload
+               that Peach has since expired). -->
+          <button class="btn btn-primary" onclick={() => onPaymentComplete({ status: 'error' })}>Start over</button>
         </div>
       {:else}
         <div id="peach-container"></div>
@@ -155,4 +171,7 @@
     font-size: 14px;
     color: var(--bw-color-text-secondary);
   }
+  .error-state .btn {
+    margin-top: 16px;
+  }
 </style>

package/src/lib/StillTherePrompt.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  interface Props {
+    remaining: string;
+    // False once the cart can be given no more time - its deadline is at its absolute ceiling (read off the
+    // cart's own instants, see CartExpiryGuard.svelte) - the prompt then only warns, it does not offer what it
+    // cannot deliver. A hold extension the supplier refuses is not this case: the guard closes the prompt
+    // for that deadline instead of showing a second message.
+    canExtend: boolean;
+    extending: boolean;
+    onExtend: () => void;
+    onDismiss: () => void;
+  }
+  let { remaining, canExtend, extending, onExtend, onDismiss }: Props = $props();
+
+  // Focused on mount so a keyboard or screen-reader user lands inside the dialog they have just been shown
+  // rather than wherever they happened to be on the merchant's page behind it.
+  let primaryButton = $state<HTMLButtonElement | null>(null);
+  $effect(() => {
+    primaryButton?.focus();
+  });
+</script>
+
+<!-- No overlay/backdrop of its own - CartExpiryGuard.svelte owns the one shared page-wide overlay this and
+     CartExpiredView both render inside, so there is exactly one dimmed backdrop, never two stacking. -->
+<div class="prompt-card" role="dialog" aria-modal="true" aria-labelledby="bw-still-there-title">
+  <h3 id="bw-still-there-title">Are you still there?</h3>
+  {#if canExtend}
+    <p>
+      Your cart will expire in <strong class="remaining">{remaining}</strong>. Let us know you're still here
+      and we'll hold your tickets a little longer.
+    </p>
+    <button class="btn btn-primary" bind:this={primaryButton} onclick={onExtend} disabled={extending}>
+      {extending ? 'One moment...' : "Yes, I'm still here"}
+    </button>
+  {:else}
+    <p>
+      Your cart will expire in <strong class="remaining">{remaining}</strong> and can't be held any longer.
+      Please complete your booking before then.
+    </p>
+    <button class="btn btn-primary" bind:this={primaryButton} onclick={onDismiss}>OK</button>
+  {/if}
+</div>
+
+<style>
+  .prompt-card {
+    width: 100%;
+    max-width: 360px;
+    padding: 28px 24px;
+    background: var(--bw-color-bg);
+    border-radius: var(--bw-radius-lg);
+    box-shadow: var(--bw-shadow-3);
+    text-align: center;
+  }
+  h3 {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+  p {
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--bw-color-text-secondary);
+    margin-bottom: 20px;
+  }
+  .remaining {
+    color: var(--bw-color-text);
+    font-variant-numeric: tabular-nums;
+  }
+  .btn {
+    width: 100%;
+  }
+</style>

package/src/lib/UnitCounter.svelte

@@ -5,9 +5,10 @@
   interface Props {
     unit: CheckoutUnitDto;
     quantity: number;
+    max?: number;
     onChange: (qty: number) => void;
   }
-  let { unit, quantity, onChange }: Props = $props();
+  let { unit, quantity, max, onChange }: Props = $props();
 
   let priceLabel = $derived(() => {
     if (!unit.pricing || unit.pricing.length === 0) return '';
@@ -15,11 +16,53 @@
     return `from ${formatCurrency(p.retail, p.currency, p.currencyPrecision)}`;
   });
 
-  function decrement() { if (quantity > 0) onChange(quantity - 1); }
+  let inputValue = $state(String(quantity));
+  let limitMessage = $state('');
+
+  $effect(() => {
+    inputValue = String(quantity);
+  });
+
+  function decrement() {
+    if (quantity > 0) onChange(quantity - 1);
+  }
 
   function increment() {
+    if (max != null && quantity >= max) {
+      showLimitMessage();
+      return;
+    }
+    limitMessage = '';
     onChange(quantity + 1);
   }
+
+  function showLimitMessage() {
+    const label = unit.title ?? unit.id;
+    limitMessage = max === 0
+      ? `No ${label} tickets left for this time slot.`
+      : `Only ${max} ${label} ticket${max === 1 ? '' : 's'} left for this time slot.`;
+  }
+
+  function onInput() {
+    const digitsOnly = inputValue.replace(/[^0-9]/g, '');
+    if (digitsOnly !== inputValue) inputValue = digitsOnly;
+    limitMessage = '';
+  }
+
+  function onBlur() {
+    let parsed = inputValue === '' ? 0 : parseInt(inputValue, 10);
+    if (Number.isNaN(parsed)) parsed = 0;
+    if (max != null && parsed > max) {
+      parsed = max;
+      showLimitMessage();
+    }
+    inputValue = String(parsed);
+    if (parsed !== quantity) onChange(parsed);
+  }
+
+  function onFocus(event: Event) {
+    (event.currentTarget as HTMLInputElement).select();
+  }
 </script>
 
 <div class="card row">
@@ -31,10 +74,28 @@
   </div>
   <div class="stepper">
     <button class="step-btn" onclick={decrement} disabled={quantity === 0} aria-label="Decrease">&minus;</button>
-    <span class="qty">{quantity}</span>
-    <button class="step-btn" onclick={increment} aria-label="Increase">+</button>
+    <input
+      class="qty"
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      bind:value={inputValue}
+      oninput={onInput}
+      onblur={onBlur}
+      onfocus={onFocus}
+      aria-label="{unit.title ?? unit.id} quantity"
+    />
+    <button
+      class="step-btn"
+      onclick={increment}
+      disabled={max != null && quantity >= max}
+      aria-label="Increase"
+    >+</button>
   </div>
 </div>
+{#if limitMessage}
+  <p class="limit-message">{limitMessage}</p>
+{/if}
 
 <style>
   .row {
@@ -61,8 +122,8 @@
     gap: 4px;
   }
   .step-btn {
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
     background: transparent;
     border: 1.5px solid var(--bw-color-border);
@@ -82,10 +143,25 @@
     cursor: default;
   }
   .qty {
+    width: 64px;
+    height: 44px;
+    border-radius: 12px;
+    border: 1.5px solid var(--bw-color-border);
+    background: transparent;
+    color: var(--bw-color-text);
     font-size: 17px;
-    font-weight: 700;
-    min-width: 32px;
+    font-weight: 800;
     text-align: center;
     font-variant-numeric: tabular-nums;
+    font-family: inherit;
+  }
+  .qty:focus {
+    outline: none;
+    border-color: var(--bw-color-primary);
+  }
+  .limit-message {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: var(--bw-color-error);
   }
 </style>

package/src/lib/WizardPage.svelte

@@ -318,6 +318,15 @@
     markInvalidated('date', 'time');
   }
 
+  // Once a slot is selected, its vacancy count is the live ceiling on how many of a given
+  // unit can be added - shared across all unit types, so it shrinks as other units are added.
+  function maxForUnit(unitId: string): number | undefined {
+    if (!selectedTimeSlot || selectedTimeSlot.vacancies == null) return undefined;
+    const totalQty = Object.values(unitQuantities).reduce((sum, q) => sum + q, 0);
+    const thisQty = unitQuantities[unitId] ?? 0;
+    return selectedTimeSlot.vacancies - totalQty + thisQty;
+  }
+
   async function fetchAvailability() {
     const optionId = effectiveOptionId();
     if (!optionId) return;
@@ -499,6 +508,7 @@
                         <UnitCounter
                           {unit}
                           quantity={unitQuantities[unit.id] ?? 0}
+                          max={maxForUnit(unit.id)}
                           onChange={(qty) => onUnitChanged(unit.id, qty)}
                         />
                       {/each}
@@ -584,6 +594,7 @@
                 <UnitCounter
                   {unit}
                   quantity={unitQuantities[unit.id] ?? 0}
+                  max={maxForUnit(unit.id)}
                   onChange={(qty) => onUnitChanged(unit.id, qty)}
                 />
               {/each}

package/src/lib/api.ts

@@ -41,6 +41,49 @@ export function isPriceMismatch(e: unknown): e is ApiError {
   return e instanceof ApiError && e.status === 400 && e.code === 'PRICE_MISMATCH';
 }
 
+// The cart token the widget holds no longer names a live cart - it expired (idle or absolute) or was never
+// valid. Every cart route answers this the same way, and the only recovery is a fresh cart.
+export function isInvalidCart(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 401;
+}
+
+// The cart is past the point of being modified or extended - a payment is in flight for it or already done
+// (CheckoutCartEndpoints.CartLockedResult). Unlike the other 409s the API sends, this one carries no code.
+export function isCartLocked(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 409 && e.code === undefined;
+}
+
+// extendCart was refused because the cart's one clock has already run out. Only ever answered while a payment
+// is in flight - anywhere else an expired cart is a plain 401 - because such a cart still validates so its
+// charge can be confirmed, yet its time is up. Not a 401 on purpose: the widget must not drop the cart while
+// a charge may be landing, but tear the attempt down through abandonPayment (Peach's real status permitting).
+export function isCartExpired(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 409 && e.code === 'CART_EXPIRED';
+}
+
+// abandonPayment was refused because Peach's webhook already settled this attempt - most likely as paid. The
+// shopper's money is against the cart, so the right move is to confirm it, not to report it expired.
+export function isPaymentSettled(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 409 && e.code === 'PAYMENT_SETTLED';
+}
+
+// abandonPayment was refused because Peach still has this attempt in flight (a 3-D Secure check or similar has
+// not reached a final outcome). Not paid yet, but a charge may still land, so the cart must not be reopened -
+// wait for the outcome instead. Peach times a pending attempt out within about 30 minutes, after which
+// abandoning may be accepted again.
+export function isPaymentPending(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 409 && e.code === 'PAYMENT_PENDING';
+}
+
+// confirmCart was refused because Peach's webhook already landed with a decline (or other non-success
+// outcome) for this attempt - there is no charge to confirm and waiting longer will not change that. Distinct
+// from the plain 402 confirmCart otherwise answers with (not paid yet, keep retrying while the webhook is
+// still in flight): without this, a declined card retries the same way a slow-but-live one does, and only
+// ever surfaces as "still confirming", never as the decline it actually was.
+export function isPaymentFailed(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 409 && e.code === 'PAYMENT_FAILED';
+}
+
 export interface BookingApi {
   sessionToken: string;
   cartToken: string;
@@ -69,6 +112,15 @@ export interface BookingApi {
   removeCartItem(itemId: string): Promise<void>;
   payCart(contact: OctoContact): Promise<CheckoutCartPaymentInitiationDto>;
   confirmCart(): Promise<CheckoutCartConfirmResultDto>;
+  // Slides the cart's idle window out to a full window from now, clamped at its absolute ceiling, and
+  // re-extends the OCTO holds behind it. There is no refusal to handle: a cart already at its ceiling comes
+  // back with the deadline it already had (see isAtExpiryCeiling). Returns the cart with its new expiry so the
+  // countdown resumes from the server's numbers rather than a local guess.
+  extendCart(): Promise<CheckoutCartDetailDto>;
+  // Reports a specific Peach attempt dead without an outcome so the server reopens the cart for a new one -
+  // used by CheckoutModal itself, which knows the checkoutId Peach's own callback fired for. See
+  // isPaymentSettled for the one refusal that changes what the caller does next.
+  abandonPayment(checkoutId: string): Promise<void>;
 }
 
 export class ApiClient implements BookingApi {
@@ -228,4 +280,21 @@ export class ApiClient implements BookingApi {
       await this.client.POST('/v1/checkout/cart/confirm'),
     );
   }
+
+  async extendCart(): Promise<CheckoutCartDetailDto> {
+    return this.unwrap(
+      await this.client.POST('/v1/checkout/cart/extend'),
+    );
+  }
+
+  async abandonPayment(checkoutId: string): Promise<void> {
+    const result = await this.client.POST('/v1/checkout/cart/abandon-payment', {
+      body: { checkoutId },
+    });
+    // 204 on success, so there is no data to unwrap - same shape as removeCartItem. The error body is kept:
+    // the 409s here carry a code the caller branches on (see isPaymentSettled).
+    if (result.response.status >= 400) {
+      throw new ApiError(result.response.status, result.error);
+    }
+  }
 }

package/src/lib/cart-expiry.ts

@@ -0,0 +1,46 @@
+import type { CheckoutCartDetailDto } from './client-types';
+
+// Whether the "are you still there?" prompt - and with it the shopper's ability to extend the cart - is
+// offered at all. Switched off for now: the cart gets one flat window (CheckoutCartService.IdleDuration,
+// 20 minutes), the countdown shows on every step, and at 0:00 the shopper sees "Your cart has expired" and
+// starts again. The prompt, the extend call and everything the server does for them stay in place behind
+// this flag so a later change can turn them back on without rebuilding any of it. CartExpiryGuard takes it
+// as a prop defaulting to this, so tests can exercise the prompt with it on.
+export const EXTENSION_ENABLED = false;
+
+// How long before the deadline the page-wide "are you still shopping?" prompt appears, when it is enabled at
+// all (EXTENSION_ENABLED above). The one source of truth for the lead time - the guard's prompt reads it from
+// here. Three minutes against the server's 20-minute idle window (CheckoutCartService.IdleDuration) would put
+// the prompt at 17 minutes on a fresh cart, with the cart expiring at 20 if it went unanswered.
+export const EXPIRY_WARNING_MS = 3 * 60 * 1000;
+
+export function formatRemaining(ms: number): string {
+  const clamped = Math.max(0, ms);
+  const mins = Math.floor(clamped / 60000);
+  const secs = Math.floor((clamped % 60000) / 1000);
+  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+}
+
+// The cart's own clock: one standard idle window that only answering the "still there?" prompt slides forward
+// (adding or editing an item deliberately do not, and paying only holds it to a floor so the card form always
+// has time for card entry - CheckoutCartService.PaymentWindowFloor), clamped at the absolute ceiling from
+// creation (see CheckoutCartService's own remarks). idleExpiresAt is therefore always the sooner of the two.
+export function cartDeadline(cart: CheckoutCartDetailDto): Date {
+  return new Date(instant(cart.idleExpiresAt));
+}
+
+// Whether the idle window has been slid as far as the absolute ceiling allows, so answering the prompt again
+// cannot buy any more time. Derived from the two instants the cart already carries rather than from a failed
+// request: the server has no refusal to report, it simply hands back the same deadline.
+export function isAtExpiryCeiling(cart: CheckoutCartDetailDto): boolean {
+  return instant(cart.idleExpiresAt) >= instant(cart.absoluteExpiresAt);
+}
+
+// The latest instant a Date can hold - "no deadline". The API always sends idleExpiresAt; the generated type
+// only marks it optional because of its nullability defaults, so this is a type-level fallback, not a case the
+// server produces.
+const NoDeadline = 8.64e15;
+
+function instant(iso: string | null | undefined): number {
+  return iso ? new Date(iso).getTime() : NoDeadline;
+}

package/src/lib/cart-manager.ts

@@ -1,5 +1,6 @@
 import type { CheckoutCartResult } from './client-types';
 import type { BookingApi } from './api';
+import { forgetPaymentAttempt } from './payment-attempt';
 
 const STORAGE_KEY = 'morii-checkout-cart';
 
@@ -58,6 +59,8 @@ export class CartManager {
     } catch {
       // storage unavailable (e.g. iframe sandbox, or a browser blocking site data)
     }
+    // A Peach attempt only ever belongs to the cart it was started for.
+    forgetPaymentAttempt();
   }
 
   private isExpired(): boolean {
@@ -86,6 +89,7 @@ export class CartManager {
       const stored: StoredCart = JSON.parse(raw);
       if (new Date(stored.absoluteExpiresAt).getTime() <= Date.now()) {
         storage?.removeItem(STORAGE_KEY);
+        forgetPaymentAttempt();
         return;
       }
 

package/src/lib/elements/register.ts

@@ -5,6 +5,8 @@ import { SessionManager } from '../session-manager';
 import { CartManager } from '../cart-manager';
 import { defaultApiBaseUrl } from './env';
 import { onWidgetMessage } from '../messages';
+import { mount } from 'svelte';
+import CartExpiryGuard from '../CartExpiryGuard.svelte';
 
 // Bootstrap shared services BEFORE element imports trigger connectedCallback.
 // Elements read from window.__bwServices instead of importing shared.ts,
@@ -18,6 +20,30 @@ sessionManager.startBackgroundRefresh();
 const ready = sessionManager.ensureSession(checkoutKey).then(() => {});
 (window as any).__bwServices = { api, cartManager, ready };
 
+function whenDomReady(fn: () => void) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+// Mounted once, directly on <body> - not inside any <bw-*> element's own tree, so the "still shopping?"
+// warning and the expiry it can lead to work regardless of which combination of elements (if any include
+// <bw-checkout> at all) the merchant actually placed on this page. Session readiness is irrelevant to it -
+// cart operations only need the cart token, never the session token - so it does not wait on `ready`.
+//
+// Deferred to DOMContentLoaded rather than run inline: a <script> placed in <head> without defer/type=module
+// runs before <body> exists at all, and document.body would be null here. An exception at module level would
+// also skip the cart:updated forwarding and autoWire below, not just the expiry guard.
+function mountExpiryGuard() {
+  const guardHost = document.createElement('div');
+  guardHost.dataset.bwExpiryGuard = '';
+  document.body.appendChild(guardHost);
+  mount(CartExpiryGuard, { target: guardHost, props: { api, cartManager } });
+}
+whenDomReady(mountExpiryGuard);
+
 import './bw-configurator.svelte';
 import './bw-cart.svelte';
 import './bw-checkout.svelte';
@@ -31,6 +57,9 @@ onWidgetMessage((d) => {
   if (d.type === 'cart:updated' && 'cart' in d) {
     window.dispatchEvent(new CustomEvent('bw:cart-updated', { detail: { cart: d.cart } }));
   }
+  if (d.type === 'cart:expired') {
+    window.dispatchEvent(new CustomEvent('bw:cart-expired'));
+  }
 });
 
 interface BwOptions {
@@ -164,8 +193,4 @@ function autoWire() {
   });
 }
 
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', autoWire);
-} else {
-  autoWire();
-}
+whenDomReady(autoWire);