@code-collective/booking-widget 1.0.7 → 1.0.9

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/EditBookingView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { CartItem, CheckoutCartItemDetailDto, CheckoutProductDto } from './client-types';
   import type { BookingApi } from './api';
-  import { ApiError } from './api';
+  import { ApiError, isPriceMismatch } from './api';
   import type { WizardPages } from './config';
   import { DEFAULT_WIZARD_PAGES } from './config';
   import { expandUnitItems } from './utils';
@@ -17,8 +17,11 @@
     onBack: () => void;
     onClose: () => void;
     onUpdated: () => void;
+    /// Re-fetches the products this view is handed, so a price that moved under the customer can be shown to
+    /// them. Owned by the parent because `product` is a prop here - this view cannot refresh it itself.
+    onPriceChanged?: () => Promise<void>;
   }
-  let { cartItem, product, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onBack, onClose, onUpdated }: Props = $props();
+  let { cartItem, product, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onBack, onClose, onUpdated, onPriceChanged }: Props = $props();
 
   let isSaving = $state(false);
   let errorMessage = $state<string | null>(null);
@@ -34,12 +37,20 @@
         availabilityId: item.availabilityId,
         localDate: item.localDate,
         pickupPointId: item.pickupPointId,
+        // Currency and precision are resolved server-side - see the same call in TicketConfigurator.
         amount: item.totalPrice,
-        currencyCode: item.currency,
-        currencyPrecision: item.currencyPrecision,
       });
       onUpdated();
     } catch (e) {
+      // The supplier moved the price mid-edit, so the amount being submitted is no longer one the server will
+      // accept. Retrying resubmits the same stale figure and fails identically, so the prices this view is
+      // showing have to be refreshed before the customer can do anything useful.
+      if (isPriceMismatch(e)) {
+        errorMessage = "This item's price has changed. Please check the updated price and save again.";
+        await onPriceChanged?.();
+        return;
+      }
+
       // 424 means the cart item itself was rolled back server-side (see CheckoutCartEndpoints.UpdateItemAsync) -
       // the supplier rejected the change, so nothing was saved. Surface that instead of letting it vanish
       // silently: WizardPage stays mounted (not swapped for a spinner) specifically so the user's in-progress

package/src/lib/PaymentPage.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { loadPeachSdk } from './peach-sdk';
+  import CountdownTimer from './CountdownTimer.svelte';
 
   interface Props {
     checkoutId: string;
-    totalFormatted: string;
-    onBack: () => void;
-    onClose: () => void;
+    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, totalFormatted, onBack, onClose, onPaymentComplete }: Props = $props();
+  let { checkoutId, entityId, onPaymentComplete, expiresAt }: Props = $props();
 
   let failed = $state(false);
   let errorMessage = $state('');
@@ -30,9 +34,16 @@
 
         peachInstance = Checkout.initiate({
           checkoutId,
+          // Peach's own "key" field, not our checkoutKey/entityId naming - without it Checkout.initiate()
+          // throws (Cannot read properties of undefined (reading 'trim')) before ever rendering anything,
+          // since the embedded widget authenticates to Peach directly with this rather than through us.
+          key: entityId,
           customisations: {
             card: { submitButtonText: 'Pay Now' },
             theme: { brand: { primary: '#E30613' } },
+            // Peach's own Cancel (method-selection screen) and Back (card-entry screen) are the only
+            // back/exit controls in this dialog - we don't render one of our own alongside them, so there's
+            // exactly one way out per screen instead of ours and Peach's competing for the same job.
           },
           eventHandlers: {
             onCompleted: () => { cleanup(); onPaymentComplete({ status: 'completed' }); },
@@ -60,77 +71,80 @@
   onDestroy(cleanup);
 </script>
 
-<div class="payment-page">
-  <div class="page-header">
-    <button class="icon-btn" onclick={onBack} aria-label="Back">&larr;</button>
-    <h2>Payment</h2>
-    <span class="spacer"></span>
-    <button class="icon-btn" onclick={onClose} aria-label="Close">&times;</button>
-  </div>
-
-  <div class="body">
-    <div class="amount-bar">
-      <span>Amount to pay</span>
-      <span class="amount">{totalFormatted}</span>
+<!-- Peach's own card form renders inside a cross-origin iframe with its own Cancel/Back controls we have no
+     way to hide or reach (no SDK option, no CSS/JS access across origins) - see Checkout.initiate()'s
+     customisations doc comment above. Presenting it as its own nested dialog over the checkout modal, rather
+     than as just another view swapped into that modal's own body, means Peach's own Cancel/Back read as
+     belonging to Peach's own layer instead of visually competing with a second, separate Back of ours - so
+     this dialog has no back/exit control of its own at all; onCancelled below routes back to contact. -->
+<div class="payment-overlay">
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <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>
 
-    {#if failed}
-      <div class="error-state">
-        <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>
-      </div>
-    {:else}
-      <div class="brands">
-        <span class="brand">VISA</span>
-        <span class="brand">MC</span>
-        <span class="brand">AMEX</span>
-      </div>
-      <div id="peach-container"></div>
-    {/if}
+    <div class="body">
+      {#if failed}
+        <div class="error-state">
+          <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>
+      {/if}
+    </div>
   </div>
 </div>
 
 <style>
-  .payment-page {
+  .payment-overlay {
+    position: fixed;
+    inset: 0;
+    /* Above bw-checkout's own .bw-modal-overlay (z-index 10000) so this reads as a second dialog opening
+       on top of the checkout modal, not content living inside it. */
+    z-index: 10001;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+  }
+  .payment-dialog {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    width: 100%;
+    max-width: 480px;
+    height: min(700px, 90vh);
+    background: var(--bw-color-bg);
+    border-radius: var(--bw-radius-lg);
+    box-shadow: var(--bw-shadow-3);
+    overflow: hidden;
   }
   .body {
     flex: 1;
+    /* A definite height (not just flex:1 alone) so #peach-container's own height:100% below has something
+       real to resolve against, and so this scrolls as a single region if content overflows - Peach's own
+       root is `height: inherit`, so without that it collapses to its 360px fallback regardless of how tall
+       the card form actually gets (e.g. once billing address fields are showing), and its submit button
+       ends up overlapping the fields above it. */
+    min-height: 0;
     overflow-y: auto;
     padding: 16px;
   }
-  .amount-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    background: var(--bw-color-surface);
-    border-radius: var(--bw-radius-lg);
-    margin-bottom: 20px;
-    font-weight: 600;
-    font-size: 15px;
-  }
-  .amount {
-    color: var(--bw-color-primary);
-    font-size: 18px;
-    font-weight: 700;
-  }
-  .brands {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 16px;
-  }
-  .brand {
-    padding: 4px 10px;
-    border: 1px solid var(--bw-color-border);
-    border-radius: var(--bw-radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    color: var(--bw-color-text-secondary);
-    letter-spacing: 0.02em;
+  #peach-container {
+    height: 100%;
   }
   .error-state {
     text-align: center;
@@ -157,4 +171,7 @@
     font-size: 14px;
     color: var(--bw-color-text-secondary);
   }
+  .error-state .btn {
+    margin-top: 16px;
+  }
 </style>

package/src/lib/ResultView.svelte

@@ -6,19 +6,43 @@
     verifying: boolean;
     onDone: () => void;
     onRetry: () => void;
+    // Re-checks confirmation on demand without touching payment - only meaningful (and only rendered) for
+    // a 'pending' outcome. Optional so callers that predate this state need not pass it.
+    onCheckAgain?: () => void;
   }
-  let { status, verifying, onDone, onRetry }: Props = $props();
+  let { status, verifying, onDone, onRetry, onCheckAgain }: Props = $props();
 
   let success = $derived(status?.outcome === 'successful');
+  let pending = $derived(status?.outcome === 'pending');
+  // A 'failed' outcome covers two genuinely different situations - see CheckoutModal's own remarks on
+  // confirmOutcome. Only one of them is safe to offer "Try Again" for: the payment itself never went
+  // through (declined, expired, SDK error), so re-opening the card form charges the shopper once, not
+  // twice. The other - payment succeeded but this gateway could not confirm every item - already has the
+  // shopper's money against a real charge; offering to pay again there would risk a second charge for
+  // nothing this screen can fix, so status.retryPayment gates the button rather than the outcome alone.
+  let retryable = $derived(status?.outcome === 'failed' && status.retryPayment !== false);
 </script>
 
 <div class="result">
   {#if verifying}
     <div class="spinner"></div>
     <p class="hint">Verifying payment...</p>
+  {:else if pending}
+    <div class="icon pending">&hellip;</div>
+    <h2>Payment Received</h2>
+    <p class="desc">
+      {status?.resultDescription ??
+        "We're still confirming your booking - this can take a minute. Please don't try to pay again; we'll email your confirmation as soon as it's ready."}
+    </p>
+    <div class="actions">
+      {#if onCheckAgain}
+        <button class="btn btn-primary" onclick={onCheckAgain}>Check Again</button>
+      {/if}
+      <button class="btn btn-outline" onclick={onDone}>Close</button>
+    </div>
   {:else}
     <div class="icon" class:success class:failure={!success}>
-      {success ? '\u2713' : '!'}
+      {success ? '✓' : '!'}
     </div>
     <h2>{success ? 'Payment Successful' : 'Payment Failed'}</h2>
     <p class="desc">
@@ -28,8 +52,10 @@
     </p>
     {#if success}
       <button class="btn btn-primary" onclick={onDone}>Done</button>
-    {:else}
+    {:else if retryable}
       <button class="btn btn-outline" onclick={onRetry}>Try Again</button>
+    {:else}
+      <button class="btn btn-outline" onclick={onDone}>Close</button>
     {/if}
   {/if}
 </div>
@@ -69,6 +95,13 @@
     color: var(--bw-color-error);
     background: var(--bw-color-primary-light);
   }
+  /* Deliberately its own amber, not success green or failure red - payment succeeded (so red reads as an
+     alarming false alarm) but nothing is confirmed yet (so green would be premature). */
+  .icon.pending {
+    border: 2px solid #B8860B;
+    color: #B8860B;
+    background: rgba(184, 134, 11, 0.08);
+  }
   h2 {
     font-size: 20px;
     font-weight: 700;
@@ -81,4 +114,11 @@
     max-width: 280px;
     line-height: 1.5;
   }
+  .actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    max-width: 220px;
+  }
 </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/TicketConfigurator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { BookingApi } from './api';
-  import { ApiError } from './api';
+  import { ApiError, isPriceMismatch } from './api';
   import type { WizardPages } from './config';
   import { DEFAULT_WIZARD_PAGES } from './config';
   import type { CartItem, CheckoutProductDto } from './client-types';
@@ -43,9 +43,11 @@
       availabilityId: item.availabilityId,
       localDate: item.localDate,
       pickupPointId: item.pickupPointId,
+      // Currency and precision are the supplier's to state, not ours - the API resolves both server-side and
+      // ignores anything sent here. Amount stays, but only as a claim about the price the customer was shown:
+      // the server accepts it solely when it matches what the supplier is asking or a price the server itself
+      // published, and returns PRICE_MISMATCH otherwise.
       amount: item.totalPrice,
-      currencyCode: item.currency,
-      currencyPrecision: item.currencyPrecision,
     });
 
     const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
@@ -72,6 +74,15 @@
     try {
       await addItemToCart(item);
     } catch (e) {
+      // The supplier moved the price while the customer was configuring, and the amount they agreed to is no
+      // longer one the server accepts. Retrying is useless - the wizard still holds the old prices, so it
+      // would resubmit exactly the same amount and fail identically. The only way out is to re-fetch and let
+      // the customer see the new price, which is what the message asks them to do.
+      if (isPriceMismatch(e)) {
+        await reloadAfterPriceChange();
+        return;
+      }
+
       // CartManager only knows a cart is expired from timestamps it saw at creation - it can't see the
       // server's idle window sliding forward, so a cart that looks valid locally can still be rejected
       // server-side. A 401/404 here means exactly that: drop the stale cart and retry once with a fresh one
@@ -91,6 +102,17 @@
       isAddingToCart = false;
     }
   }
+
+  async function reloadAfterPriceChange() {
+    addToCartError = "This ticket's price has changed since you started. Please check the updated price and try again.";
+    try {
+      await load();
+    } catch {
+      // The reload is what makes the message actionable; if even that fails the customer needs to start over
+      // rather than be left looking at prices we already know are wrong.
+      addToCartError = "This ticket's price has changed and we could not load the new one. Please reload the page.";
+    }
+  }
 </script>
 
 <div class="bw-widget">

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}