@code-collective/booking-widget 1.0.4 → 1.0.7

package/src/lib/TicketConfigurator.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { BookingApi } from './api';
+  import { ApiError } from './api';
   import type { WizardPages } from './config';
+  import { DEFAULT_WIZARD_PAGES } from './config';
   import type { CartItem, CheckoutProductDto } from './client-types';
   import { CartManager } from './cart-manager';
   import { postMessage } from './messages';
@@ -12,15 +14,16 @@
     api: BookingApi;
     cartManager: CartManager;
     productId: string;
-    wizardPages: WizardPages;
+    wizardPages?: WizardPages;
     autoSelectSingleTimeSlot?: boolean;
     onCancel?: () => void;
   }
-  let { api, cartManager, productId, wizardPages, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
+  let { api, cartManager, productId, wizardPages = DEFAULT_WIZARD_PAGES, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
 
   let product = $state<CheckoutProductDto | null>(null);
   let isLoading = $state(true);
   let isAddingToCart = $state(false);
+  let addToCartError = $state<string | null>(null);
 
   async function load() {
     product = await api.getProduct(productId);
@@ -29,50 +32,99 @@
 
   load();
 
+  async function addItemToCart(item: CartItem): Promise<void> {
+    await cartManager.ensureCart();
+
+    const unitItems = expandUnitItems(item.units);
+    const added = await api.addCartItem({
+      productId: item.productId,
+      optionId: item.optionId,
+      unitItems,
+      availabilityId: item.availabilityId,
+      localDate: item.localDate,
+      pickupPointId: item.pickupPointId,
+      amount: item.totalPrice,
+      currencyCode: item.currency,
+      currencyPrecision: item.currencyPrecision,
+    });
+
+    const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
+    postMessage({
+      type: 'cart:change',
+      itemCount: unitItems.length,
+      cartItemId: added.id,
+      totalFormatted: total,
+      openCheckout: true,
+    });
+    // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
+    // public bw:cart-change event. This one carries the fresh cart itself: CartBar/CartOverviewButton/Checkout
+    // use it to update their own state without each independently re-fetching, and it's forwarded to
+    // consumers as the public bw:cart-updated event/onCartUpdated callback - see this event's own doc comment
+    // in CheckoutModal (the other place it's posted from, after an edit/remove).
+    const cart = await api.getCart().catch(() => null);
+    postMessage({ type: 'cart:updated', cart });
+  }
+
   async function onAddToCart(item: CartItem) {
     isAddingToCart = true;
+    addToCartError = null;
 
     try {
-      await cartManager.ensureCart();
-
-      const unitItems = expandUnitItems(item.units);
-      const added = await api.addCartItem({
-        productId: item.productId,
-        optionId: item.optionId,
-        unitItems,
-        availabilityId: item.availabilityId,
-        localDate: item.localDate,
-        pickupPointId: item.pickupPointId,
-        amount: item.totalPrice,
-        currencyCode: item.currency,
-        currencyPrecision: item.currencyPrecision,
-      });
-
-      const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
-      postMessage({
-        type: 'cart:change',
-        itemCount: unitItems.length,
-        cartItemId: added.id,
-        totalFormatted: total,
-        openCheckout: true,
-      });
+      await addItemToCart(item);
+    } catch (e) {
+      // 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
+      // before giving up, rather than leaving the user stuck with no feedback and no way to proceed.
+      const isStaleCart = e instanceof ApiError && (e.status === 401 || e.status === 404);
+      if (isStaleCart) {
+        cartManager.reset();
+        try {
+          await addItemToCart(item);
+        } catch {
+          addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+        }
+      } else {
+        addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+      }
     } finally {
       isAddingToCart = false;
     }
   }
 </script>
 
-{#if isLoading || isAddingToCart}
-  <div class="loading-center" style="height:100vh">
-    <div class="spinner"></div>
-  </div>
-{:else if product}
-  <WizardPage
-    {product}
-    {api}
-    {wizardPages}
-    {autoSelectSingleTimeSlot}
-    {onCancel}
-    onComplete={onAddToCart}
-  />
-{/if}
+<div class="bw-widget">
+  {#if isLoading || isAddingToCart}
+    <div class="loading-center" style="height:100vh">
+      <div class="spinner"></div>
+    </div>
+  {:else if product}
+    {#if addToCartError}
+      <p class="add-to-cart-error">{addToCartError}</p>
+    {/if}
+    <WizardPage
+      {product}
+      {api}
+      {wizardPages}
+      {autoSelectSingleTimeSlot}
+      {onCancel}
+      onComplete={onAddToCart}
+    />
+  {/if}
+</div>
+
+<style>
+  /* display: contents - a plain box here would break WizardPage's own .wizard{height:100%}, which needs
+     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
+  .bw-widget {
+    display: contents;
+  }
+
+  .add-to-cart-error {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+  }
+</style>

package/src/lib/api.ts

@@ -15,8 +15,17 @@ import type {
 } from './client-types';
 import { dateKey } from './utils';
 
+// Lets a caller distinguish "the server said no, and specifically why" (e.g. 402 - not paid yet, retryable
+// while Peach's webhook is still in flight) from any other failure, without parsing the message string.
+export class ApiError extends Error {
+  constructor(public readonly status: number) {
+    super(`API error ${status}`);
+  }
+}
+
 export interface BookingApi {
   sessionToken: string;
+  cartToken: string;
 
   // Session
   startSession(checkoutKey: string): Promise<CheckoutSessionDto>;
@@ -46,7 +55,7 @@ export interface BookingApi {
 
 export class ApiClient implements BookingApi {
   sessionToken = '';
-  private cartToken = '';
+  cartToken = '';
   private client;
 
   constructor(baseUrl: string) {
@@ -69,7 +78,7 @@ export class ApiClient implements BookingApi {
 
   private unwrap<T>(result: { data?: T; error?: unknown; response: Response }): T {
     if (result.data === undefined) {
-      throw new Error(`API error ${result.response.status}`);
+      throw new ApiError(result.response.status);
     }
     return result.data;
   }
@@ -184,7 +193,7 @@ export class ApiClient implements BookingApi {
       params: { path: { itemId } },
     });
     if (result.response.status >= 400) {
-      throw new Error(`API error ${result.response.status}`);
+      throw new ApiError(result.response.status);
     }
   }
 

package/src/lib/app.css

@@ -26,13 +26,17 @@
 }
 
 /* ── Reset ─────────────────────────────────────────────── */
-* {
+/* Scoped to .bw-widget (present on every mountable component's own root - TicketConfigurator, Checkout,
+   CartBar, CartOverviewButton) rather than the bare selectors this used to be, since Option 2/3 consumers
+   mount these directly into their own app alongside their own global styles/resets (Tailwind preflight,
+   etc.) - an unscoped * or body rule here would leak onto their entire page, not just the widget. */
+.bw-widget, .bw-widget * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-body {
+.bw-widget {
   font-family: var(--bw-font-family);
   font-size: 14px;
   line-height: 1.5;
@@ -41,8 +45,12 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-button { cursor: pointer; font-family: inherit; }
-input, select, textarea { font-family: inherit; }
+/* button/input/etc form controls don't inherit font-family by default even from an ancestor that sets it
+   (a standard browser quirk, not specific to this reset) - covers both a bw-widget div wrapping a button
+   (TicketConfigurator, Checkout) and bw-widget being set directly on the control itself (CartOverviewButton's
+   own <button>), since a plain descendant selector alone only matches the first case. */
+.bw-widget button, button.bw-widget { cursor: pointer; font-family: inherit; }
+.bw-widget :is(input, select, textarea), :is(input, select, textarea).bw-widget { font-family: inherit; }
 
 /* ── Spinner ───────────────────────────────────────────── */
 @keyframes spin { to { transform: rotate(360deg); } }

package/src/lib/cart-manager.ts

@@ -34,6 +34,19 @@ export class CartManager {
     return cart;
   }
 
+  // The client only knows a cart's absolute/idle expiry from whenever it was last (re)created here - it
+  // never sees the server's sliding idle window update in between, so a cart the server has since rejected
+  // (e.g. idle timeout) can still look valid locally. Callers use this to drop that stale state and force
+  // ensureCart to mint a fresh one after the server refuses an operation on the cart it was given.
+  reset(): void {
+    this.cart = null;
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch {
+      // localStorage unavailable (e.g. iframe sandbox)
+    }
+  }
+
   private isExpired(): boolean {
     if (!this.cart) return true;
     return new Date(this.cart.absoluteExpiresAt ?? 0).getTime() <= Date.now();
@@ -69,6 +82,7 @@ export class CartManager {
         idleExpiresAt: '',
         absoluteExpiresAt: stored.absoluteExpiresAt,
       };
+      this.api.cartToken = stored.cartToken;
     } catch {
       // corrupt or unavailable
     }

package/src/lib/config.ts

@@ -1,3 +1,10 @@
+// Defaults for the standalone dev app (App.svelte) when no query params are given at all, or no apiBaseUrl
+// is given - same real QA product booking/demo/product.html's own fallback attributes point at, so `npm run
+// dev` with no params still shows something real instead of talking to an empty relative URL.
+const DEFAULT_QA_API_BASE_URL = 'https://qa.tranzact.co.za/morii-checkout/api';
+const DEFAULT_QA_PRODUCT_ID = 'fec72dc6-0357-411b-88f5-d37083ab88cb';
+const DEFAULT_QA_CHECKOUT_KEY = 'morii_checkout_key_2qGS3onnv2eigOiV6RT1yQ';
+
 export type WidgetMode = 'configurator' | 'checkout' | 'cart-overview';
 
 export type CartOverviewDisplay = 'bar' | 'button';
@@ -81,7 +88,6 @@ export interface AppConfig {
   productId: string;
   checkoutKey: string;
   currency: string;
-  useFakeApi: boolean;
   mode: WidgetMode;
   cartDisplay: CartOverviewDisplay;
   orderId: string;
@@ -96,14 +102,12 @@ export function readConfig(): AppConfig {
   const params = new URLSearchParams(window.location.search);
 
   if (params.has('product') || params.has('mode')) {
-    const apiBaseUrl = params.get('apiBaseUrl') ?? '';
     const productId = params.get('product') ?? '';
     return {
-      apiBaseUrl,
+      apiBaseUrl: params.get('apiBaseUrl') ?? DEFAULT_QA_API_BASE_URL,
       productId,
       checkoutKey: params.get('checkoutKey') ?? deriveCheckoutKey(productId),
       currency: params.get('currency') ?? 'ZAR',
-      useFakeApi: params.get('useFakeApi') === 'true' || !apiBaseUrl,
       mode: parseMode(params.get('mode')),
       cartDisplay: parseCartDisplay(params.get('cartDisplay')),
       orderId: params.get('orderId') ?? '',
@@ -116,11 +120,10 @@ export function readConfig(): AppConfig {
   }
 
   return {
-    apiBaseUrl: '',
-    productId: '',
-    checkoutKey: 'morii',
+    apiBaseUrl: DEFAULT_QA_API_BASE_URL,
+    productId: DEFAULT_QA_PRODUCT_ID,
+    checkoutKey: DEFAULT_QA_CHECKOUT_KEY,
     currency: 'ZAR',
-    useFakeApi: true,
     mode: 'configurator',
     cartDisplay: 'bar',
     orderId: '',

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,16 @@
 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';
 
 // 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 +21,20 @@ 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.
+window.addEventListener('message', (e) => {
+  let d: Record<string, unknown>;
+  try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+  catch { return; }
+  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/index.ts

@@ -2,8 +2,8 @@ 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 TicketConfiguratorComponent from './TicketConfigurator.svelte';
@@ -18,9 +18,10 @@ 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, CartOverviewDisplay, WidgetMode, WizardWidgetType } from './config';
+export type { WizardPages, WizardPageConfig, CartOverviewDisplay, WidgetMode, WizardWidgetType } from './config';
 export type { components, operations, paths } from './generated-types';
 export type * from './client-types';
 
@@ -29,7 +30,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 {
@@ -62,9 +67,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);
@@ -106,6 +109,9 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
         totalFormatted: (d.totalFormatted as string) ?? '',
       });
     }
+    if (d.type === 'cart:updated' && 'cart' in d) {
+      config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
+    }
   }
   window.addEventListener('message', messageHandler);
 
@@ -147,6 +153,9 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
         currency: (d.currency as string) ?? 'ZAR',
       });
     }
+    if (d.type === 'cart:updated' && 'cart' in d) {
+      config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
+    }
   }
   window.addEventListener('message', messageHandler);
 
@@ -180,6 +189,9 @@ export async function mountCartOverview(target: HTMLElement, config: CartOvervie
     if (!d?.type) return;
 
     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);
 

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;
+}