@code-collective/booking-widget 1.0.6 → 1.0.8

package/src/lib/elements/bw-checkout.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
   import Checkout from '../Checkout.svelte';
   import { resolveWizardPages, resolveEditPages } from '../config';
+  import { onWidgetMessage } from '../messages';
   import { getSharedServices } from './shared';
 
   let {
@@ -17,7 +18,7 @@
   let isModal = $derived(isModalAttr !== undefined);
   let showModal = $state(false);
 
-  const { api, ready: readyPromise } = getSharedServices();
+  const { api, cartManager, ready: readyPromise } = getSharedServices();
 
   let ready = $state(false);
   readyPromise.then(() => { ready = true; });
@@ -34,30 +35,22 @@
   export function open() { showModal = true; }
   export function close() { showModal = false; dispatch('bw:close', {}); }
 
-  function handleMessage(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  $effect(() => onWidgetMessage((d) => {
     if (d.type === 'modal:close') {
       if (isModal) showModal = false;
       dispatch('bw:close', {});
     }
     if (d.type === 'order:complete') {
-      if (isModal) showModal = false;
+      // Deliberately does not close the modal - order:complete only reports that the order is confirmed
+      // (for host analytics/cart-clearing), not that the shopper has finished looking at the result screen.
+      // The modal stays open until they dismiss it themselves, which sends modal:close separately.
       dispatch('bw:order-confirmed', {
         cartToken: d.cartToken ?? '',
         value: d.value ?? 0,
         currency: d.currency ?? 'ZAR',
       });
     }
-  }
-
-  $effect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  });
+  }));
 
   // Listen for a custom 'bw:open' event so register.ts can trigger it
   $effect(() => {
@@ -74,12 +67,12 @@
     <div class="bw-modal-overlay" onclick={() => close()}>
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
       <div class="bw-modal-inner" onclick={(e) => e.stopPropagation()}>
-        <Checkout {api} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
+        <Checkout {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
       </div>
     </div>
   {/if}
 {:else if ready}
-  <Checkout {api} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
+  <Checkout {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
 {:else}
   <div class="loading-center"><div class="spinner"></div></div>
 {/if}

package/src/lib/elements/bw-configurator.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
   import TicketConfigurator from '../TicketConfigurator.svelte';
   import { resolveWizardPages } from '../config';
-  import { postMessage } from '../messages';
+  import { onWidgetMessage, postMessage } from '../messages';
   import { getSharedServices } from './shared';
 
   let {
@@ -26,12 +26,7 @@
   }
 
   // Forward postMessage events as CustomEvents
-  function handleMessage(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  $effect(() => onWidgetMessage((d) => {
     if (d.type === 'cart:change') {
       dispatch('bw:cart-change', {
         itemCount: d.itemCount ?? 0,
@@ -39,12 +34,7 @@
         totalFormatted: d.totalFormatted ?? '',
       });
     }
-  }
-
-  $effect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  });
+  }));
 
   const onCancel = cancelable !== undefined
     ? () => { postMessage({ type: 'modal:close' }); dispatch('bw:cancel', {}); }

package/src/lib/elements/env.ts

@@ -7,5 +7,4 @@ const w = window as any;
 const env: string = w.BW_CHECKOUT_ENV ?? 'prod';
 const explicitUrl: string | undefined = w.BW_CHECKOUT_API_URL;
 
-export const useFakeApi = env === 'fake';
 export const defaultApiBaseUrl = explicitUrl ?? API_URLS[env] ?? API_URLS.prod;

package/src/lib/elements/register.ts

@@ -1,17 +1,17 @@
 import '../app.css';
 import type { BookingApi } from '../api';
 import { ApiClient } from '../api';
-import { FakeApiClient } from '../fake-api';
 import { SessionManager } from '../session-manager';
 import { CartManager } from '../cart-manager';
-import { defaultApiBaseUrl, useFakeApi } from './env';
+import { defaultApiBaseUrl } from './env';
+import { onWidgetMessage } from '../messages';
 
 // Bootstrap shared services BEFORE element imports trigger connectedCallback.
 // Elements read from window.__bwServices instead of importing shared.ts,
 // because the IIFE bundler inlines imports per-element — a module-level
 // singleton would be duplicated. window is the only truly shared scope.
 const checkoutKey = document.querySelector('[checkout-key]')?.getAttribute('checkout-key') ?? '';
-const api: BookingApi = useFakeApi ? new FakeApiClient() : new ApiClient(defaultApiBaseUrl);
+const api: BookingApi = new ApiClient(defaultApiBaseUrl);
 const sessionManager = new SessionManager(api);
 const cartManager = new CartManager(api);
 sessionManager.startBackgroundRefresh();
@@ -22,6 +22,17 @@ import './bw-configurator.svelte';
 import './bw-cart.svelte';
 import './bw-checkout.svelte';
 
+// Cart-global, not tied to any one element (unlike the bw:* events forwarded per-element in autoWire below),
+// so this is wired once here rather than per bw-configurator/bw-cart/bw-checkout instance. Carries the same
+// cart TicketConfigurator/CheckoutModal already fetch for their own posting - see those files' own comments -
+// so a consumer can build a custom cart summary (item count, remaining time, item details) without calling
+// the checkout API directly.
+onWidgetMessage((d) => {
+  if (d.type === 'cart:updated' && 'cart' in d) {
+    window.dispatchEvent(new CustomEvent('bw:cart-updated', { detail: { cart: d.cart } }));
+  }
+});
+
 interface BwOptions {
   shouldBottomCloseOnModal: boolean;
   autoSelectSingleTimeSlot: boolean;

package/src/lib/generated-types.ts

@@ -373,6 +373,7 @@ export interface components {
         CheckoutCartPaymentInitiationDto: {
             checkoutId?: string | null;
             redirectUrl?: string | null;
+            entityId?: string | null;
         };
         CheckoutCartResult: {
             cartToken?: string | null;

package/src/lib/index.ts

@@ -2,10 +2,11 @@ import './app.css';
 import { mount, unmount } from 'svelte';
 import type { WizardPages, CartOverviewDisplay } from './config';
 import type { BookingApi } from './api';
-import { ApiClient } from './api';
-import { FakeApiClient } from './fake-api';
+import type { CheckoutCartDetailDto } from './client-types';
+import { ApiClient, ApiError } from './api';
 import { SessionManager } from './session-manager';
 import { CartManager } from './cart-manager';
+import { onWidgetMessage } from './messages';
 import TicketConfiguratorComponent from './TicketConfigurator.svelte';
 import CheckoutComponent from './Checkout.svelte';
 import CartOverviewComponent from './CartOverview.svelte';
@@ -18,7 +19,7 @@ export { default as CartBar } from './CartBar.svelte';
 export { default as CartOverviewButton } from './CartOverviewButton.svelte';
 
 // Re-export utilities
-export { ApiClient, FakeApiClient, SessionManager, CartManager };
+export { ApiClient, ApiError, SessionManager, CartManager };
 export { resolveWizardPages, resolveEditPages, DEFAULT_WIZARD_PAGES } from './config';
 export type { BookingApi } from './api';
 export type { WizardPages, WizardPageConfig, CartOverviewDisplay, WidgetMode, WizardWidgetType } from './config';
@@ -30,7 +31,11 @@ export type * from './client-types';
 interface BaseConfig {
   apiBaseUrl?: string;
   checkoutKey?: string;
-  useFakeApi?: boolean;
+  // Cart-global, not tied to any one mount function - fires after any add/edit/remove, anywhere on the page,
+  // carrying the same cart TicketConfigurator/CheckoutModal already fetch for their own internal use. Lets a
+  // consumer build a custom cart summary (item count, remaining time, item details) without calling the
+  // checkout API directly.
+  onCartUpdated?: (cart: CheckoutCartDetailDto | null) => void;
 }
 
 export interface ConfiguratorConfig extends BaseConfig {
@@ -63,9 +68,7 @@ export interface MountedWidget {
 // --- Shared bootstrap ---
 
 function bootstrap(config: BaseConfig): { api: BookingApi; sessionManager: SessionManager; cartManager: CartManager } {
-  const api: BookingApi = config.useFakeApi
-    ? new FakeApiClient()
-    : new ApiClient(config.apiBaseUrl ?? '');
+  const api: BookingApi = new ApiClient(config.apiBaseUrl ?? '');
 
   const sessionManager = new SessionManager(api);
   const cartManager = new CartManager(api);
@@ -94,12 +97,7 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
   });
 
   // Listen for postMessage events and forward to callbacks
-  function messageHandler(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  const stopListening = onWidgetMessage((d) => {
     if (d.type === 'cart:change' && config.onCartChange) {
       config.onCartChange({
         itemCount: (d.itemCount as number) ?? 0,
@@ -107,12 +105,14 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
         totalFormatted: (d.totalFormatted as string) ?? '',
       });
     }
-  }
-  window.addEventListener('message', messageHandler);
+    if (d.type === 'cart:updated' && 'cart' in d) {
+      config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
+    }
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },
@@ -120,7 +120,7 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
 }
 
 export async function mountCheckout(target: HTMLElement, config: CheckoutConfig): Promise<MountedWidget> {
-  const { api, sessionManager } = bootstrap(config);
+  const { api, sessionManager, cartManager } = bootstrap(config);
 
   await sessionManager.ensureSession(config.checkoutKey ?? '');
 
@@ -128,18 +128,14 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
     target,
     props: {
       api,
+      cartManager,
       wizardPages: config.wizardPages,
       editPages: config.editPages,
       autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? false,
     },
   });
 
-  function messageHandler(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  const stopListening = onWidgetMessage((d) => {
     if (d.type === 'modal:close' && config.onClose) config.onClose();
     if (d.type === 'order:complete' && config.onOrderConfirmed) {
       config.onOrderConfirmed({
@@ -148,12 +144,14 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
         currency: (d.currency as string) ?? 'ZAR',
       });
     }
-  }
-  window.addEventListener('message', messageHandler);
+    if (d.type === 'cart:updated' && 'cart' in d) {
+      config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
+    }
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },
@@ -174,19 +172,16 @@ export async function mountCartOverview(target: HTMLElement, config: CartOvervie
     },
   });
 
-  function messageHandler(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  const stopListening = onWidgetMessage((d) => {
     if (d.type === 'modal:open' && config.onCheckout) config.onCheckout();
-  }
-  window.addEventListener('message', messageHandler);
+    if (d.type === 'cart:updated' && 'cart' in d) {
+      config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
+    }
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },

package/src/lib/messages.ts

@@ -1,3 +1,63 @@
-export function postMessage(data: Record<string, unknown>): void {
-  window.parent?.postMessage(JSON.stringify(data), '*');
-}
+// The widget's own components talk to each other over postMessage - a cart added in bw-configurator has to
+// reach the bar in bw-cart and the modal in bw-checkout, which are separate custom elements with no shared
+// Svelte tree. That makes every one of these messages same-window and same-origin, and the guards below exist
+// to keep it that way.
+
+/** Messages this widget sends itself. Anything else on the wire is not ours. */
+const WIDGET_MESSAGE_TYPES = new Set([
+  'cart:change',
+  'cart:updated',
+  'modal:open',
+  'modal:close',
+  'order:complete',
+]);
+
+/**
+ * Sends a widget message.
+ *
+ * Targets this window's own origin rather than '*'. These payloads carry `cart`, and CheckoutCartDetailDto
+ * includes `cartToken` - a bearer credential that authorises reading, modifying and paying for the cart. With
+ * '*' that went to whatever origin happened to be framing the widget, which in the standalone iframe build is
+ * not necessarily anyone we trust.
+ */
+export function postMessage(data: Record<string, unknown>): void {
+  window.parent?.postMessage(JSON.stringify(data), window.location.origin);
+}
+
+/**
+ * Subscribes to widget messages, ignoring anything that did not come from this widget.
+ *
+ * The elements mount directly into the merchant's own document (shadow: 'none'), so these listeners sit on
+ * the top-level window of a third-party page. Without this check, any iframe already on that page - an ad, a
+ * chat widget, a tag manager - could reach them with window.parent.postMessage and drive the widget: spoof
+ * the total on the payment consent screen, fire a forged order confirmation into the merchant's analytics, or
+ * close the modal mid-confirm on a card that has already been charged.
+ *
+ * Checking `source` is what does the real work: a message from another frame carries that frame's own window,
+ * never ours, and it cannot be spoofed. The origin check is belt-and-braces for the same-window case.
+ */
+export function onWidgetMessage(handler: (data: Record<string, unknown>) => void): () => void {
+  function listener(e: MessageEvent) {
+    if (e.source !== window || e.origin !== window.location.origin) {
+      return;
+    }
+
+    let data: Record<string, unknown>;
+    try {
+      data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+    } catch {
+      return;
+    }
+
+    // Anything without one of our own type values is someone else's traffic sharing this window - a library
+    // or the host page talking to itself - not something to hand to a widget handler.
+    if (typeof data?.type !== 'string' || !WIDGET_MESSAGE_TYPES.has(data.type)) {
+      return;
+    }
+
+    handler(data);
+  }
+
+  window.addEventListener('message', listener);
+  return () => window.removeEventListener('message', listener);
+}

package/src/lib/peach-sdk.ts

@@ -0,0 +1,40 @@
+const SDK_URLS: Record<string, string> = {
+  prod: 'https://checkout.peachpayments.com/js/checkout.js',
+  qa: 'https://sandbox-checkout.peachpayments.com/js/checkout.js',
+};
+
+let loadPromise: Promise<void> | null = null;
+
+// Lazily injects Peach's Copy&Pay SDK the first time PaymentPage mounts, so consumers embedding the widget
+// (any of the three integration options) never have to know this script exists, let alone which
+// environment's URL to point at - same window.BW_CHECKOUT_ENV convention elements/env.ts already uses for
+// the checkout API base URL, with an explicit override for anything that doesn't fit that pattern.
+export function loadPeachSdk(): Promise<void> {
+  if ((window as any).Checkout) {
+    return Promise.resolve();
+  }
+  if (loadPromise) {
+    return loadPromise;
+  }
+
+  const w = window as any;
+  const env: string = w.BW_CHECKOUT_ENV ?? 'prod';
+  const src: string = w.BW_CHECKOUT_PEACH_SDK_URL ?? SDK_URLS[env] ?? SDK_URLS.prod;
+
+  loadPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${src}"]`);
+    if (existing) {
+      existing.addEventListener('load', () => resolve());
+      existing.addEventListener('error', () => reject(new Error('Failed to load the Peach Payments SDK script')));
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error('Failed to load the Peach Payments SDK script'));
+    document.head.appendChild(script);
+  });
+
+  return loadPromise;
+}