@code-collective/booking-widget 1.0.10 → 1.0.12

package/src/lib/CheckoutPanel.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import type { WizardPages } from './config';
+  import { DEFAULT_WIZARD_PAGES } from './config';
+  import type { CheckoutCartDetailDto } from './client-types';
+  import { isInvalidCart } from './api';
+  import { onWidgetMessage, postMessage } from './messages';
+  import type { CartManager } from './cart-manager';
+  import CheckoutModal from './CheckoutModal.svelte';
+  import CartExpiredView from './CartExpiredView.svelte';
+
+  interface Props {
+    api: BookingApi;
+    cartManager?: CartManager;
+    wizardPages?: WizardPages;
+    editPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
+  }
+  let { api, cartManager, wizardPages = DEFAULT_WIZARD_PAGES, editPages: editPagesProp,
+    autoSelectSingleTimeSlot = false }: Props = $props();
+  let editPages = $derived(editPagesProp ?? wizardPages);
+
+  let cart = $state<CheckoutCartDetailDto | null>(null);
+  let isLoading = $state(true);
+  let expired = $state(false);
+
+  async function load() {
+    // A token this widget still holds for a cart the server has already let go (its window ran out while the
+    // tab sat there) used to render as a bare "No items in cart", with the dead token left in storage for the
+    // next add to trip over. Only a held token can mean that - with none, an empty cart is just empty.
+    const hadCart = api.cartToken !== '';
+    try {
+      cart = await api.getCart();
+    } catch (e) {
+      cart = null;
+      if (hadCart && isInvalidCart(e)) {
+        onCartExpired();
+        expired = true;
+      }
+    }
+    isLoading = false;
+  }
+
+  load();
+
+  // Drops the stored token so whatever the shopper does next starts a fresh cart, and clears bw-cart's
+  // bar/button and any host-side summary built from bw:cart-updated - the cart they were describing no longer
+  // exists. Mirrors what onOrderConfirmed below does once a cart has served its purpose the other way.
+  function onCartExpired() {
+    cartManager?.reset();
+    postMessage({ type: 'cart:updated', cart: null });
+    postMessage({ type: 'cart:expired' });
+  }
+
+  // In modal mode, modal:close is what actually dismisses this screen - bw-checkout.svelte remounts this
+  // component fresh the next time it opens, so the click is fully handled there. Rendered permanently
+  // in-page instead, nothing is listening for modal:close, so without the reload below the click would do
+  // nothing a shopper can see: expired flips off, but cart is still the stale null from the load() that
+  // found it gone, leaving the same "No items in cart" text up with no sign anything happened.
+  function startAgain() {
+    expired = false;
+    postMessage({ type: 'modal:close' });
+    void load();
+  }
+
+  // In modal mode this is redundant - bw-checkout.svelte only mounts this component fresh each time the
+  // modal opens, so it already gets a current cart. Rendered permanently in-page instead (no is-modal), it
+  // would otherwise only ever see the cart as it was on first mount. The event already carries the fresh
+  // cart (see TicketConfigurator/CheckoutModal's own posting sites), so this applies it directly rather than
+  // triggering a second, redundant getCart() call or flashing the spinner over an already-visible cart.
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
+  }));
+</script>
+
+<div class="bw-widget">
+  {#if isLoading}
+    <div class="loading-center" style="height:100vh">
+      <div class="spinner"></div>
+    </div>
+  {:else if cart && cart.items.length > 0}
+    <CheckoutModal
+      {cart}
+      {api}
+      {wizardPages}
+      {editPages}
+      {autoSelectSingleTimeSlot}
+      onClose={() => postMessage({ type: 'modal:close' })}
+      onOrderConfirmed={() => {
+        const total = cart!.items.reduce((s, i) => s + i.amount, 0);
+        const currency = cart!.items[0]?.currencyCode ?? 'ZAR';
+        postMessage({
+          type: 'order:complete',
+          cartToken: cart!.cartToken ?? '',
+          value: total,
+          currency,
+        });
+        // The cart is paid and confirmed, so its token has done its job. Nothing used to clear it, so it sat
+        // in localStorage on the merchant's origin until absoluteExpiresAt - readable by every third-party
+        // script they load, and picked up by the next person to use a shared or kiosk browser.
+        cartManager?.reset();
+      }}
+    />
+  {:else if expired}
+    <div style="height:100vh">
+      <CartExpiredView onStartAgain={startAgain} />
+    </div>
+  {:else}
+    <div class="loading-center" style="height:100vh;color:var(--bw-color-text-secondary)">
+      No items in cart.
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* display: contents - a plain box here would break CheckoutModal's own .modal{height:100%}, which needs
+     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
+  .bw-widget {
+    display: contents;
+  }
+</style>

package/src/lib/PaymentPage.svelte

@@ -1,177 +1,191 @@
-<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, expiresAt }: Props = $props();
-
-  let failed = $state(false);
-  let errorMessage = $state('');
-
-  let peachInstance: any = null;
-
-  onMount(() => {
-    (async () => {
-      try {
-        await loadPeachSdk();
-
-        const Checkout = (window as any).Checkout;
-        if (!Checkout) {
-          failed = true;
-          errorMessage = 'Payment SDK not loaded';
-          return;
-        }
-
-        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' }); },
-            onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
-            onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
-            onError: () => { cleanup(); onPaymentComplete({ status: 'error' }); },
-          },
-        });
-
-        peachInstance.render('#peach-container');
-      } catch (e) {
-        failed = true;
-        errorMessage = String(e);
-      }
-    })();
-  });
-
-  function cleanup() {
-    if (peachInstance) {
-      peachInstance.unmount();
-      peachInstance = null;
-    }
-  }
-
-  onDestroy(cleanup);
-</script>
-
-<!-- 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>
-
-    <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-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;
-    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;
-  }
-  #peach-container {
-    height: 100%;
-  }
-  .error-state {
-    text-align: center;
-    padding: 32px 16px;
-  }
-  .error-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    border: 2px solid var(--bw-color-border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    color: var(--bw-color-text-secondary);
-    margin: 0 auto 16px;
-  }
-  .error-title {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 8px;
-  }
-  .error-msg {
-    font-size: 14px;
-    color: var(--bw-color-text-secondary);
-  }
-  .error-state .btn {
-    margin-top: 16px;
-  }
-</style>
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { loadPeachSdk, loadedPeachSdkUrl } 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, expiresAt }: Props = $props();
+
+  let failed = $state(false);
+  let errorMessage = $state('');
+
+  let peachInstance: any = null;
+
+  onMount(() => {
+    (async () => {
+      try {
+        await loadPeachSdk();
+
+        const Checkout = (window as any).Checkout;
+        if (!Checkout) {
+          failed = true;
+          errorMessage = 'Payment SDK not loaded';
+          return;
+        }
+
+        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' }); },
+            onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
+            onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
+            onError: () => { reportPeachFailure('Peach reported an error rendering the card form'); cleanup(); onPaymentComplete({ status: 'error' }); },
+          },
+        });
+
+        peachInstance.render('#peach-container');
+      } catch (e) {
+        reportPeachFailure(String(e));
+        failed = true;
+        errorMessage = String(e);
+      }
+    })();
+  });
+
+  // Peach renders its own "an unrecoverable error has occurred" card inside its iframe, which tells a
+  // developer nothing about why. By far the most common cause is an SDK from one environment against a
+  // checkoutId created in another - the checkout API makes the checkout, so the two have to agree - and
+  // that is invisible unless the URL actually loaded is named.
+  function reportPeachFailure(reason: string) {
+    console.error(
+      `[booking-widget] Peach checkout did not render: ${reason}. ` +
+        `SDK loaded from ${loadedPeachSdkUrl() ?? 'an already-present window.Checkout'} for checkoutId ` +
+        `${checkoutId}. If that environment does not match the checkout API this cart came from, set ` +
+        `peachEnv on createBookingHost (or window.BW_CHECKOUT_PEACH_SDK_URL).`,
+    );
+  }
+
+  function cleanup() {
+    if (peachInstance) {
+      peachInstance.unmount();
+      peachInstance = null;
+    }
+  }
+
+  onDestroy(cleanup);
+</script>
+
+<!-- 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>
+
+    <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-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;
+    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;
+  }
+  #peach-container {
+    height: 100%;
+  }
+  .error-state {
+    text-align: center;
+    padding: 32px 16px;
+  }
+  .error-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 2px solid var(--bw-color-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: var(--bw-color-text-secondary);
+    margin: 0 auto 16px;
+  }
+  .error-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  .error-msg {
+    font-size: 14px;
+    color: var(--bw-color-text-secondary);
+  }
+  .error-state .btn {
+    margin-top: 16px;
+  }
+</style>

package/src/lib/PickupPointPicker.svelte

@@ -45,7 +45,7 @@
       onclick={() => onContinue(selectedPoint)}
     >
       <span>{formattedTotal}</span>
-      <span>Continue &rarr;</span>
+      <span>Continue</span>
     </button>
   </div>
 </div>