@code-collective/booking-widget 1.0.8 → 1.0.10

package/src/lib/generated-types.ts

@@ -125,6 +125,40 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/v1/checkout/cart/extend": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Extend checkout cart */
+        post: operations["ExtendCheckoutCart_v1"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/v1/checkout/cart/abandon-payment": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Abandon checkout cart payment */
+        post: operations["AbandonCheckoutCartPayment_v1"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/v1/checkout/supplier": {
         parameters: {
             query?: never;
@@ -210,6 +244,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/webhooks/peach": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ReceivePeachWebhook"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -228,9 +278,6 @@ export interface components {
             notes?: string | null;
             /** Format: int32 */
             amount?: number;
-            currencyCode?: string | null;
-            /** Format: int32 */
-            currencyPrecision?: number;
         };
         CheckoutAvailabilityCalendarDto: {
             /**
@@ -311,6 +358,9 @@ export interface components {
              */
             localDate?: string;
         };
+        CheckoutCartAbandonPaymentDto: {
+            checkoutId?: string | null;
+        };
         CheckoutCartConfirmItemResultDto: {
             /** Format: uuid */
             bookingUuid?: string;
@@ -393,6 +443,18 @@ export interface components {
              */
             absoluteExpiresAt?: string;
         };
+        CheckoutFaqDto: {
+            question: string | null;
+            answer: string | null;
+        };
+        CheckoutMediaDto: {
+            src: string | null;
+            type: string | null;
+            rel: string | null;
+            title?: string | null;
+            caption?: string | null;
+            copyright?: string | null;
+        };
         CheckoutOpeningHoursDto: {
             from: string | null;
             to: string | null;
@@ -429,7 +491,14 @@ export interface components {
             id: string | null;
             internalName: string | null;
             title?: string | null;
+            shortDescription?: string | null;
             description?: string | null;
+            media?: components["schemas"]["CheckoutMediaDto"][] | null;
+            /** Format: int32 */
+            durationMinutesFrom?: number | null;
+            /** Format: int32 */
+            durationMinutesTo?: number | null;
+            faqs?: components["schemas"]["CheckoutFaqDto"][] | null;
             options: components["schemas"]["CheckoutOptionDto"][] | null;
         };
         CheckoutSessionDto: {
@@ -716,6 +785,48 @@ export interface operations {
             };
         };
     };
+    ExtendCheckoutCart_v1: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CheckoutCartDetailDto"];
+                };
+            };
+        };
+    };
+    AbandonCheckoutCartPayment_v1: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CheckoutCartAbandonPaymentDto"];
+            };
+        };
+        responses: {
+            /** @description No Content */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     CheckoutGetSupplier_v1: {
         parameters: {
             query?: never;
@@ -826,4 +937,22 @@ export interface operations {
             };
         };
     };
+    ReceivePeachWebhook: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
 }

package/src/lib/index.ts

@@ -36,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 {
@@ -108,6 +112,7 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
+    if (d.type === 'cart:expired') config.onCartExpired?.();
   });
 
   return {
@@ -147,6 +152,7 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
+    if (d.type === 'cart:expired') config.onCartExpired?.();
   });
 
   return {
@@ -177,6 +183,7 @@ export async function mountCartOverview(target: HTMLElement, config: CartOvervie
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
+    if (d.type === 'cart:expired') config.onCartExpired?.();
   });
 
   return {

package/src/lib/messages.ts

@@ -1,63 +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',
-  '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);
-}
+// 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.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));
+}