@code-collective/booking-widget 1.0.7 → 1.0.9

package/src/lib/index.ts

@@ -6,6 +6,7 @@ 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';
@@ -35,6 +36,10 @@ interface BaseConfig {
   // consumer build a custom cart summary (item count, remaining time, item details) without calling the
   // checkout API directly.
   onCartUpdated?: (cart: CheckoutCartDetailDto | null) => void;
+  // Fires when the cart's own clock ran out (or, for mountCheckout, when it loads onto a cart the server has
+  // already let go) - see messages.ts's own cart:expired doc comment for why this is narrower than an
+  // onCartUpdated(null) call, which a manual clear can also produce.
+  onCartExpired?: () => void;
 }
 
 export interface ConfiguratorConfig extends BaseConfig {
@@ -96,12 +101,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,
@@ -112,12 +112,12 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
-  }
-  window.addEventListener('message', messageHandler);
+    if (d.type === 'cart:expired') config.onCartExpired?.();
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },
@@ -125,7 +125,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 ?? '');
 
@@ -133,18 +133,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({
@@ -156,12 +152,12 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
-  }
-  window.addEventListener('message', messageHandler);
+    if (d.type === 'cart:expired') config.onCartExpired?.();
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },
@@ -182,22 +178,17 @@ 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();
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
-  }
-  window.addEventListener('message', messageHandler);
+    if (d.type === 'cart:expired') config.onCartExpired?.();
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },

package/src/lib/messages.ts

@@ -1,3 +1,77 @@
+// 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',
+  // The cart the widget was holding onto is gone because its clock ran out - a strict subset of
+  // cart:updated's own cart:null case (see that message's own callers), fired alongside it so a host that
+  // wants to react to expiry specifically (analytics, a redirect, its own message) does not have to infer it
+  // from an absent cart, which cart:updated also carries for an ordinary manual clear.
+  'cart:expired',
+  'modal:open',
+  'modal:close',
+  'order:complete',
+  // A Peach checkout is open for the cart / has been abandoned so the cart is Open again. Posted by
+  // CheckoutModal for CartExpiryGuard, which keeps prompting but stops acting on the deadline itself while
+  // the server exempts the cart from expiry.
+  'payment:started',
+  'payment:ended',
+  // The cart's one clock ran out while a Peach checkout was open. Posted by CartExpiryGuard for
+  // CheckoutModal, which tears the attempt down (Peach's real status permitting) so the shopper sees the
+  // cart expire there too, rather than an ever-open card form for a cart that is already gone.
+  'payment:timed-out',
+]);
+
+/**
+ * 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.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/payment-attempt.ts

@@ -0,0 +1,56 @@
+// The Peach checkout currently open for the cart, persisted so a page reload mid-payment does not lose it.
+//
+// Once payCart has run, the server holds the cart in AwaitingPaymentConfirmation: exempt from expiry, refusing
+// edits and a second payCart alike, until Peach's webhook settles the attempt or the widget abandons it with
+// the checkoutId it was given. Before this, that id lived only in CheckoutModal's component state, so a reload
+// left the shopper with a cart nothing could act on and a guard that could not tell it was locked. Same store
+// and same lifetime as the cart token itself (see cart-manager.ts for why sessionStorage) - it is only ever
+// meaningful for the cart it was minted against, which is why the token is recorded with it.
+
+const STORAGE_KEY = 'morii-checkout-payment';
+
+const storage: Storage | null = typeof sessionStorage !== 'undefined' ? sessionStorage : null;
+
+export interface PaymentAttempt {
+  checkoutId: string;
+  entityId: string;
+}
+
+interface StoredAttempt extends PaymentAttempt {
+  cartToken: string;
+}
+
+export function rememberPaymentAttempt(cartToken: string, attempt: PaymentAttempt): void {
+  const stored: StoredAttempt = { cartToken, ...attempt };
+  try {
+    storage?.setItem(STORAGE_KEY, JSON.stringify(stored));
+  } catch {
+    // storage unavailable (e.g. iframe sandbox, or a browser blocking site data)
+  }
+}
+
+// The attempt recorded for this cart, if any. One recorded for a different cart is stale - that cart is gone,
+// and the attempt with it - so it is dropped here rather than left to confuse the next reader.
+export function recallPaymentAttempt(cartToken: string): PaymentAttempt | null {
+  try {
+    const raw = storage?.getItem(STORAGE_KEY);
+    if (!raw) return null;
+
+    const stored: StoredAttempt = JSON.parse(raw);
+    if (!cartToken || stored.cartToken !== cartToken || !stored.checkoutId || !stored.entityId) {
+      forgetPaymentAttempt();
+      return null;
+    }
+    return { checkoutId: stored.checkoutId, entityId: stored.entityId };
+  } catch {
+    return null;
+  }
+}
+
+export function forgetPaymentAttempt(): void {
+  try {
+    storage?.removeItem(STORAGE_KEY);
+  } catch {
+    // storage unavailable
+  }
+}

package/src/lib/test/fixtures.ts

@@ -0,0 +1,107 @@
+import { vi } from 'vitest';
+import type { BookingApi } from '../api';
+import { ApiError } from '../api';
+import type { CartManager } from '../cart-manager';
+import type { CheckoutCartDetailDto, CheckoutProductDto } from '../client-types';
+
+export const CART_TOKEN = 'cart-token-1';
+
+/** A one-item cart whose idle deadline is `msFromNow` away and whose ceiling is 35 minutes from creation. */
+export function buildCart(msFromNow: number, options: { ceilingMsFromNow?: number } = {}): CheckoutCartDetailDto {
+  const now = Date.now();
+  return {
+    cartToken: CART_TOKEN,
+    issuedAt: new Date(now - 60_000).toISOString(),
+    idleExpiresAt: new Date(now + msFromNow).toISOString(),
+    absoluteExpiresAt: new Date(now + (options.ceilingMsFromNow ?? 35 * 60_000)).toISOString(),
+    items: [
+      {
+        id: 'item-1',
+        bookingUuid: 'booking-1',
+        productId: 'product-1',
+        optionId: 'option-1',
+        unitItems: [{ unitId: 'adult' }],
+        availabilityId: '2026-10-01T09:00:00+02:00',
+        amount: 1000,
+        currencyCode: 'ZAR',
+        currencyPrecision: 2,
+      },
+    ],
+  };
+}
+
+export const product: CheckoutProductDto = {
+  id: 'product-1',
+  title: 'City Tour Pass',
+  options: [
+    {
+      id: 'option-1',
+      title: 'Day ticket',
+      units: [{ id: 'adult', title: 'Adult', pricing: [{ retail: 1000, currency: 'ZAR', currencyPrecision: 2 }] }],
+    },
+  ],
+} as unknown as CheckoutProductDto;
+
+export function apiError(status: number, code?: string): ApiError {
+  return new ApiError(status, code ? { error: code, errorMessage: code } : undefined);
+}
+
+/**
+ * Every BookingApi member as a vi.fn, with the cart-shaped ones answering sensibly for a live cart by
+ * default. Tests override the one or two members a scenario turns on with mockResolvedValue/
+ * mockRejectedValue/mockImplementation.
+ */
+export function fakeApi(cart: CheckoutCartDetailDto): BookingApi & { [K in keyof BookingApi]: BookingApi[K] } {
+  return {
+    sessionToken: 'session-token-1',
+    cartToken: CART_TOKEN,
+    startSession: vi.fn(),
+    refreshSession: vi.fn(),
+    getProduct: vi.fn().mockResolvedValue(product),
+    getAvailabilityCalendar: vi.fn(),
+    getAvailability: vi.fn(),
+    createCart: vi.fn(),
+    getCart: vi.fn().mockResolvedValue(cart),
+    addCartItem: vi.fn(),
+    updateCartItem: vi.fn(),
+    removeCartItem: vi.fn(),
+    payCart: vi.fn(),
+    confirmCart: vi.fn(),
+    extendCart: vi.fn().mockResolvedValue(cart),
+    abandonPayment: vi.fn().mockResolvedValue(undefined),
+  };
+}
+
+export function fakeCartManager(hasCart = true): CartManager {
+  return {
+    hasCart,
+    cartToken: CART_TOKEN,
+    reset: vi.fn(),
+    ensureCart: vi.fn(),
+  } as unknown as CartManager;
+}
+
+/**
+ * A stand-in for Peach's embedded Checkout SDK global, so PaymentPage mounts for real and the test can drive
+ * Peach's own callback contract - the handlers PaymentPage registers are captured here.
+ */
+export function installFakePeachSdk(): { handlers: () => Record<string, () => void>; unmount: ReturnType<typeof vi.fn> } {
+  let captured: Record<string, () => void> = {};
+  const unmount = vi.fn();
+  (window as unknown as { Checkout: unknown }).Checkout = {
+    initiate: (options: { eventHandlers: Record<string, () => void> }) => {
+      captured = options.eventHandlers;
+      return { render: vi.fn(), unmount };
+    },
+  };
+  return { handlers: () => captured, unmount };
+}
+
+/** Flushes Svelte's effect queue and any microtask chain a component kicked off. */
+export async function settle(): Promise<void> {
+  const { tick } = await import('svelte');
+  for (let i = 0; i < 5; i++) {
+    await tick();
+    await Promise.resolve();
+  }
+}

package/src/lib/test/messages-mock.ts

@@ -0,0 +1,34 @@
+// A synchronous, in-memory stand-in for messages.ts, installed with `vi.mock('./messages', ...)` by tests
+// that mount the widget's components. The real module rides window.postMessage, which is asynchronous and
+// which jsdom delivers without the `source`/`origin` the real onWidgetMessage guards on - so under jsdom the
+// components would never hear each other. This keeps the exact same contract (postMessage in, every
+// subscribed handler out) but delivers inline, and records everything posted so a test can assert on it.
+
+type Handler = (data: Record<string, unknown>) => void;
+
+const handlers = new Set<Handler>();
+
+/** Every message posted since the last reset, oldest first. */
+export const posted: Record<string, unknown>[] = [];
+
+export function postMessage(data: Record<string, unknown>): void {
+  posted.push(data);
+  for (const handler of [...handlers]) {
+    handler(data);
+  }
+}
+
+export function onWidgetMessage(handler: Handler): () => void {
+  handlers.add(handler);
+  return () => handlers.delete(handler);
+}
+
+export function resetMessages(): void {
+  handlers.clear();
+  posted.length = 0;
+}
+
+/** The types of every message posted so far, in order - the usual thing a test wants to assert on. */
+export function postedTypes(): string[] {
+  return posted.map((m) => String(m.type));
+}