@code-collective/booking-widget 1.0.6 → 1.0.7

package/src/lib/api.ts

@@ -15,6 +15,14 @@ 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;
@@ -70,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;
   }
@@ -185,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/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();

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,7 +18,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 +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 {
@@ -63,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);
@@ -107,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);
 
@@ -148,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);
 
@@ -181,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;
+}

package/src/lib/fake-api.ts

@@ -1,282 +0,0 @@
-import type {
-  CheckoutAddCartItemDto,
-  CheckoutSessionDto,
-  CheckoutProductDto,
-  CheckoutAvailabilityCalendarDto,
-  CheckoutAvailabilityDto,
-  CheckoutCartResult,
-  CheckoutCartDetailDto,
-  CheckoutCartItemDetailDto,
-  CheckoutCartItemAddedDto,
-  CheckoutCartPaymentInitiationDto,
-  CheckoutCartConfirmResultDto,
-  CheckoutCartConfirmItemResultDto,
-  OctoContact,
-} from './client-types';
-import type { BookingApi } from './api';
-import {
-  sampleProductData,
-  generateSampleAvailability,
-  generateSampleTimeSlots,
-} from './mock-data';
-
-function delay<T>(ms: number, fn: () => T): Promise<T> {
-  return new Promise((r) => setTimeout(() => r(fn()), ms));
-}
-
-function uuid(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
-
-interface FakeCartItem {
-  id: string;
-  bookingUuid: string;
-  request: CheckoutAddCartItemDto;
-}
-
-const CART_STORAGE_KEY = 'morii-checkout-cart';
-const ITEMS_STORAGE_KEY = 'morii-checkout-cart-items';
-
-export class FakeApiClient implements BookingApi {
-  sessionToken = '';
-  cartToken = '';
-  private cartItems: FakeCartItem[] = [];
-
-  constructor() {
-    this.loadCartFromStorage() || this.seedCart();
-  }
-
-  private seedCart(): void {
-    this.cartToken = `fake-cart-seeded`;
-
-    this.cartItems = [
-      {
-        id: '00000000-0000-0000-0000-000000000001',
-        bookingUuid: '00000000-0000-0000-0000-aaaaaaaaaaaa',
-        request: {
-          productId: sampleProductData.id,
-          optionId: 'option_blue_tram',
-          unitItems: [{ unitId: 'unit_adult' }, { unitId: 'unit_adult' }, { unitId: 'unit_child' }],
-          availabilityId: 'avail_seeded',
-          amount: 202500,
-          currencyCode: 'ZAR',
-          currencyPrecision: 2,
-        },
-      },
-    ];
-
-    this.saveCartToStorage();
-  }
-
-  private saveCartToStorage(): void {
-    try {
-      const now = new Date();
-      const absolute = new Date(now.getTime() + 60 * 60_000);
-      localStorage.setItem(CART_STORAGE_KEY, JSON.stringify({
-        cartToken: this.cartToken,
-        absoluteExpiresAt: absolute.toISOString(),
-      }));
-      localStorage.setItem(ITEMS_STORAGE_KEY, JSON.stringify(this.cartItems));
-    } catch {
-      // localStorage unavailable
-    }
-  }
-
-  private loadCartFromStorage(): boolean {
-    try {
-      const cartRaw = localStorage.getItem(CART_STORAGE_KEY);
-      const itemsRaw = localStorage.getItem(ITEMS_STORAGE_KEY);
-      if (!cartRaw || !itemsRaw) return false;
-
-      const cart = JSON.parse(cartRaw);
-      if (new Date(cart.absoluteExpiresAt).getTime() <= Date.now()) return false;
-
-      this.cartToken = cart.cartToken;
-      this.cartItems = JSON.parse(itemsRaw);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  // --- Session ---
-
-  async startSession(_checkoutKey: string): Promise<CheckoutSessionDto> {
-    return delay(300, () => {
-      const now = new Date();
-      const expires = new Date(now.getTime() + 30 * 60_000);
-      const refresh = new Date(now.getTime() + 20 * 60_000);
-      this.sessionToken = `fake-session-${uuid().slice(0, 8)}`;
-      const session: CheckoutSessionDto = {
-        sessionToken: this.sessionToken,
-        issuedAt: now.toISOString(),
-        expiresAt: expires.toISOString(),
-        refreshAfter: refresh.toISOString(),
-        octo: {
-          basePath: '/v1/checkout/octo',
-          capabilities: 'pricing,content,pickups',
-        },
-        supplier: {
-          name: 'Franschhoek Wine Tram',
-        },
-      };
-      return session;
-    });
-  }
-
-  async refreshSession(): Promise<CheckoutSessionDto> {
-    return this.startSession('');
-  }
-
-  // --- Catalog ---
-
-  async getProduct(productId: string): Promise<CheckoutProductDto> {
-    return delay(500, () => ({ ...sampleProductData, id: productId }));
-  }
-
-  async getAvailabilityCalendar(
-    _productId: string,
-    _optionId: string,
-  ): Promise<Record<string, CheckoutAvailabilityCalendarDto>> {
-    return delay(600, () => generateSampleAvailability());
-  }
-
-  async getAvailability(
-    _productId: string,
-    _optionId: string,
-    localDate: string,
-  ): Promise<CheckoutAvailabilityDto[]> {
-    return delay(400, () => {
-      const parts = localDate.split('-').map(Number);
-      const date = new Date(parts[0], parts[1] - 1, parts[2]);
-      return generateSampleTimeSlots(date);
-    });
-  }
-
-  // --- Cart ---
-
-  async createCart(): Promise<CheckoutCartResult> {
-    return delay(300, () => {
-      const now = new Date();
-      const idle = new Date(now.getTime() + 15 * 60_000);
-      const absolute = new Date(now.getTime() + 60 * 60_000);
-
-      if (this.cartToken && this.cartItems.length > 0) {
-        return {
-          cartToken: this.cartToken,
-          issuedAt: now.toISOString(),
-          idleExpiresAt: idle.toISOString(),
-          absoluteExpiresAt: absolute.toISOString(),
-        };
-      }
-
-      this.cartToken = `fake-cart-${uuid().slice(0, 8)}`;
-      this.cartItems = [];
-      this.saveCartToStorage();
-      return {
-        cartToken: this.cartToken,
-        issuedAt: now.toISOString(),
-        idleExpiresAt: idle.toISOString(),
-        absoluteExpiresAt: absolute.toISOString(),
-      };
-    });
-  }
-
-  async getCart(): Promise<CheckoutCartDetailDto> {
-    return delay(300, () => {
-      const now = new Date();
-      const idle = new Date(now.getTime() + 15 * 60_000);
-      const absolute = new Date(now.getTime() + 60 * 60_000);
-      const detail: CheckoutCartDetailDto = {
-        cartToken: this.cartToken,
-        issuedAt: now.toISOString(),
-        idleExpiresAt: idle.toISOString(),
-        absoluteExpiresAt: absolute.toISOString(),
-        items: this.cartItems.map((item): CheckoutCartItemDetailDto => ({
-          id: item.id,
-          bookingUuid: item.bookingUuid,
-          productId: item.request.productId,
-          optionId: item.request.optionId,
-          unitItems: item.request.unitItems,
-          availabilityId: item.request.availabilityId,
-          localDate: item.request.localDate,
-          pickupPointId: item.request.pickupPointId,
-          amount: item.request.amount,
-          currencyCode: item.request.currencyCode,
-          currencyPrecision: item.request.currencyPrecision,
-        })),
-      };
-      return detail;
-    });
-  }
-
-  async addCartItem(request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto> {
-    return delay(400, () => {
-      const item: FakeCartItem = {
-        id: uuid(),
-        bookingUuid: uuid(),
-        request,
-      };
-      this.cartItems.push(item);
-      this.saveCartToStorage();
-      return { id: item.id, bookingUuid: item.bookingUuid };
-    });
-  }
-
-  async updateCartItem(itemId: string, request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto> {
-    return delay(400, () => {
-      const existing = this.cartItems.find((i) => i.id === itemId);
-      if (existing) {
-        existing.request = request;
-        this.saveCartToStorage();
-        return { id: existing.id, bookingUuid: existing.bookingUuid };
-      }
-      const item: FakeCartItem = { id: itemId, bookingUuid: uuid(), request };
-      this.cartItems.push(item);
-      this.saveCartToStorage();
-      return { id: item.id, bookingUuid: item.bookingUuid };
-    });
-  }
-
-  async removeCartItem(itemId: string): Promise<void> {
-    return delay(200, () => {
-      this.cartItems = this.cartItems.filter((i) => i.id !== itemId);
-      this.saveCartToStorage();
-    });
-  }
-
-  async payCart(_contact: OctoContact): Promise<CheckoutCartPaymentInitiationDto> {
-    return delay(800, () => ({
-      checkoutId: `fake-checkout-${uuid().slice(0, 8)}`,
-      redirectUrl: '',
-    }));
-  }
-
-  async confirmCart(): Promise<CheckoutCartConfirmResultDto> {
-    return delay(700, () => {
-      const result: CheckoutCartConfirmResultDto = {
-        items: this.cartItems.map((item): CheckoutCartConfirmItemResultDto => ({
-          bookingUuid: item.bookingUuid,
-          statusCode: 200,
-          body: JSON.stringify({
-            id: `booking-${item.bookingUuid.slice(0, 8)}`,
-            uuid: item.bookingUuid,
-            status: 'CONFIRMED',
-            productId: item.request.productId,
-            optionId: item.request.optionId,
-            unitItems: (item.request.unitItems ?? []).map((u) => ({
-              uuid: uuid(),
-              unitId: u.unitId,
-              status: 'CONFIRMED',
-            })),
-          }),
-        })),
-      };
-      return result;
-    });
-  }
-}