@code-collective/booking-widget 1.0.9 → 1.0.12

package/src/lib/cart-overview.svelte.ts

@@ -0,0 +1,97 @@
+// The cart state behind both CartOverview presentations. Extracted because the bar and the button had the
+// same load-then-follow-cart:updated logic written twice, and both answered a failed fetch the same wrong
+// way: `cart = null`, rendering exactly what an empty cart renders - nothing at all. On a narrow layout the
+// bar is the only route to checkout, so "no DOM" has to mean something a consumer can act on.
+
+import type { BookingApi } from './api';
+import type { CartManager } from './cart-manager';
+import type { CartOverviewState } from './config';
+import type { CheckoutCartDetailDto } from './client-types';
+import { onWidgetMessage } from './messages';
+
+export interface CartOverview {
+  readonly cart: CheckoutCartDetailDto | null;
+  readonly state: CartOverviewState;
+  /** Re-reads the cart. What the error presentation's retry is wired to. */
+  readonly reload: () => void;
+}
+
+/**
+ * Call during component initialisation - it registers an $effect that follows cart:updated for the
+ * component's lifetime.
+ */
+export function createCartOverview(
+  // Accessors rather than values: these arrive as props, and reading them through a closure keeps this
+  // following the current ones rather than pinning whichever pair happened to be passed on first render.
+  getApi: () => BookingApi,
+  getCartManager: () => CartManager,
+  onStateChange?: (state: CartOverviewState) => void,
+): CartOverview {
+  let cart = $state<CheckoutCartDetailDto | null>(null);
+  let failed = $state(false);
+  let isLoading = $state(true);
+  // Only the newest load may write. A read still in flight when a fresher cart arrives - from a retry, or
+  // from cart:updated after an add elsewhere on the page - would otherwise land afterwards and overwrite it,
+  // and a transient failure landing late would replace a perfectly good cart summary with the error view.
+  let currentLoad = 0;
+
+  async function load() {
+    const thisLoad = ++currentLoad;
+    isLoading = true;
+    failed = false;
+    // No token held means there is genuinely nothing to fetch - an empty cart, not a failure.
+    if (!getCartManager().hasCart) {
+      cart = null;
+      isLoading = false;
+      return;
+    }
+    try {
+      const loaded = await getApi().getCart();
+      if (thisLoad !== currentLoad) return;
+      cart = loaded;
+    } catch {
+      if (thisLoad !== currentLoad) return;
+      cart = null;
+      failed = true;
+    }
+    isLoading = false;
+  }
+
+  void load();
+
+  // load() only runs once - without this, adding/editing/removing an item elsewhere on the page (the
+  // configurator, or the checkout modal's own edit/remove) leaves this showing a stale total. The event
+  // already carries the fresh cart (see TicketConfigurator/CheckoutModal's own posting sites), so it is
+  // applied directly rather than triggering a second, redundant getCart() call.
+  $effect(() =>
+    onWidgetMessage((d) => {
+      if (d.type === 'cart:updated') {
+        // Supersedes any read still in flight - this cart is newer than whatever it will return.
+        currentLoad += 1;
+        cart = d.cart;
+        // A cart arriving by message is a cart successfully read somewhere else on the page, so whatever
+        // this one's own fetch ran into is no longer the current answer.
+        failed = false;
+        isLoading = false;
+      }
+    }),
+  );
+
+  const state = $derived<CartOverviewState>(
+    isLoading ? 'loading' : failed ? 'error' : (cart?.items?.length ?? 0) > 0 ? 'ready' : 'empty',
+  );
+
+  $effect(() => {
+    onStateChange?.(state);
+  });
+
+  return {
+    get cart() {
+      return cart;
+    },
+    get state() {
+      return state;
+    },
+    reload: () => void load(),
+  };
+}

package/src/lib/config.ts

@@ -1,153 +1,162 @@
-// 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';
-
-export type WizardWidgetType = 'option' | 'age-category' | 'date' | 'time' | 'pickup' | 'addon';
-
-export interface WizardPageConfig {
-  title: string;
-  widgets: WizardWidgetType[];
-}
-
-export type WizardPages = WizardPageConfig[];
-
-export const DEFAULT_WIZARD_PAGES: WizardPages = [
-  { title: 'Option',         widgets: ['option', 'age-category'] },
-  { title: 'Schedule',       widgets: ['date', 'time'] },
-  { title: 'Pickup',         widgets: ['pickup'] },
-];
-
-const WIZARD_PRESETS: Record<string, WizardPages> = {
-  'option-first': DEFAULT_WIZARD_PAGES,
-  'date-first': [
-    { title: 'Age & capacity', widgets: ['age-category'] },
-    { title: 'Schedule',       widgets: ['date', 'time'] },
-    { title: 'Option',         widgets: ['option'] },
-    { title: 'Pickup',         widgets: ['pickup'] },
-  ],
-};
-
-// Accepts a preset name ("option-first", "date-first") or a JSON array of { title, widgets } objects.
-export function resolveWizardPages(value: string | null | undefined): WizardPages {
-  if (!value) return DEFAULT_WIZARD_PAGES;
-  if (value in WIZARD_PRESETS) return WIZARD_PRESETS[value];
-  try {
-    const parsed = JSON.parse(value);
-    if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].widgets) return parsed;
-  } catch { /* use default */ }
-  return DEFAULT_WIZARD_PAGES;
-}
-
-// Grouping for the checkout edit-item accordion - deliberately different from the step wizard's own page
-// breakdown, since a step-by-step flow and a "review everything at once" accordion don't need the same
-// shape. Age & capacity, date and time always live together in one section here, regardless of which
-// preset is in play - only where that section falls (first vs. second) changes with option-first vs.
-// date-first.
-const EDIT_PRESETS: Record<string, WizardPages> = {
-  'option-first': [
-    { title: 'Option', widgets: ['option'] },
-    { title: 'Age, Date & Time', widgets: ['age-category', 'date', 'time'] },
-    { title: 'Pickup', widgets: ['pickup'] },
-  ],
-  'date-first': [
-    { title: 'Age, Date & Time', widgets: ['age-category', 'date', 'time'] },
-    { title: 'Option', widgets: ['option'] },
-    { title: 'Pickup', widgets: ['pickup'] },
-  ],
-};
-
-// Resolves the grouping for the checkout edit-item accordion. If editValue is set, it's resolved the same
-// way as wizardPages (a preset name or a custom JSON array). Otherwise, defaults to the grouped layout for
-// whichever named wizard preset wizardValue resolves to (including the "no value given" case, which is
-// option-first) - but if wizardValue is itself a custom, unnamed page layout, there's no sensible grouping
-// to infer, so editPages just mirrors it directly.
-export function resolveEditPages(wizardValue: string | null | undefined, editValue: string | null | undefined): WizardPages {
-  if (editValue) {
-    if (editValue in EDIT_PRESETS) return EDIT_PRESETS[editValue];
-    try {
-      const parsed = JSON.parse(editValue);
-      if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].widgets) return parsed;
-    } catch { /* fall through to the wizardPages-derived default */ }
-  }
-
-  const wizardKey = wizardValue ? (wizardValue in WIZARD_PRESETS ? wizardValue : null) : 'option-first';
-  if (wizardKey) return EDIT_PRESETS[wizardKey];
-
-  return resolveWizardPages(wizardValue);
-}
-
-export interface AppConfig {
-  apiBaseUrl: string;
-  productId: string;
-  checkoutKey: string;
-  currency: string;
-  mode: WidgetMode;
-  cartDisplay: CartOverviewDisplay;
-  orderId: string;
-  wizardPages: WizardPages;
-  editPages: WizardPages;
-  autoSelectSingleTimeSlot: boolean;
-  name: string;
-  cancelable: boolean;
-}
-
-export function readConfig(): AppConfig {
-  const params = new URLSearchParams(window.location.search);
-
-  if (params.has('product') || params.has('mode')) {
-    const productId = params.get('product') ?? '';
-    return {
-      apiBaseUrl: params.get('apiBaseUrl') ?? DEFAULT_QA_API_BASE_URL,
-      productId,
-      checkoutKey: params.get('checkoutKey') ?? deriveCheckoutKey(productId),
-      currency: params.get('currency') ?? 'ZAR',
-      mode: parseMode(params.get('mode')),
-      cartDisplay: parseCartDisplay(params.get('cartDisplay')),
-      orderId: params.get('orderId') ?? '',
-      wizardPages: resolveWizardPages(params.get('wizard')),
-      editPages: resolveEditPages(params.get('wizard'), params.get('edit')),
-      autoSelectSingleTimeSlot: params.get('autoSelectSingleTimeSlot') === 'true',
-      name: params.get('name') ?? '',
-      cancelable: params.get('cancelable') === 'true',
-    };
-  }
-
-  return {
-    apiBaseUrl: DEFAULT_QA_API_BASE_URL,
-    productId: DEFAULT_QA_PRODUCT_ID,
-    checkoutKey: DEFAULT_QA_CHECKOUT_KEY,
-    currency: 'ZAR',
-    mode: 'configurator',
-    cartDisplay: 'bar',
-    orderId: '',
-    wizardPages: DEFAULT_WIZARD_PAGES,
-    editPages: EDIT_PRESETS['option-first'],
-    autoSelectSingleTimeSlot: false,
-    name: '',
-    cancelable: false,
-  };
-}
-
-function parseMode(value: string | null): WidgetMode {
-  if (value === 'checkout' || value === 'cart-overview') return value;
-  return 'configurator';
-}
-
-function parseCartDisplay(value: string | null): CartOverviewDisplay {
-  if (value === 'button') return 'button';
-  return 'bar';
-}
-
-// Demo only — products whose id starts with a-j use "morii", the rest use "csbs".
-// This will be replaced with a real checkout key lookup.
-function deriveCheckoutKey(productId: string): string {
-  const first = productId[0]?.toLowerCase() ?? '';
-  return first >= 'a' && first <= 'j' ? 'morii' : 'csbs';
-}
+// 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';
+
+// How <Checkout> presents itself: in the page where it is placed, or as an overlay portalled to <body>.
+export type CheckoutMode = 'inline' | 'modal';
+
+// What <CartOverview> and its two presentations currently have to show. Distinguishing 'empty' from 'error'
+// is the whole point: a bar that renders nothing for both leaves a consumer unable to tell a cart with no
+// items from a fetch that failed, which - as the only route to checkout on a narrow layout - is the one
+// place that cannot be undebuggable.
+export type CartOverviewState = 'loading' | 'empty' | 'ready' | 'error';
+
+export type WizardWidgetType = 'option' | 'age-category' | 'date' | 'time' | 'pickup' | 'addon';
+
+export interface WizardPageConfig {
+  title: string;
+  widgets: WizardWidgetType[];
+}
+
+export type WizardPages = WizardPageConfig[];
+
+export const DEFAULT_WIZARD_PAGES: WizardPages = [
+  { title: 'Option',         widgets: ['option', 'age-category'] },
+  { title: 'Schedule',       widgets: ['date', 'time'] },
+  { title: 'Pickup',         widgets: ['pickup'] },
+];
+
+const WIZARD_PRESETS: Record<string, WizardPages> = {
+  'option-first': DEFAULT_WIZARD_PAGES,
+  'date-first': [
+    { title: 'Age & capacity', widgets: ['age-category'] },
+    { title: 'Schedule',       widgets: ['date', 'time'] },
+    { title: 'Option',         widgets: ['option'] },
+    { title: 'Pickup',         widgets: ['pickup'] },
+  ],
+};
+
+// Accepts a preset name ("option-first", "date-first") or a JSON array of { title, widgets } objects.
+export function resolveWizardPages(value: string | null | undefined): WizardPages {
+  if (!value) return DEFAULT_WIZARD_PAGES;
+  if (value in WIZARD_PRESETS) return WIZARD_PRESETS[value];
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].widgets) return parsed;
+  } catch { /* use default */ }
+  return DEFAULT_WIZARD_PAGES;
+}
+
+// Grouping for the checkout edit-item accordion - deliberately different from the step wizard's own page
+// breakdown, since a step-by-step flow and a "review everything at once" accordion don't need the same
+// shape. Age & capacity, date and time always live together in one section here, regardless of which
+// preset is in play - only where that section falls (first vs. second) changes with option-first vs.
+// date-first.
+const EDIT_PRESETS: Record<string, WizardPages> = {
+  'option-first': [
+    { title: 'Option', widgets: ['option'] },
+    { title: 'Age, Date & Time', widgets: ['age-category', 'date', 'time'] },
+    { title: 'Pickup', widgets: ['pickup'] },
+  ],
+  'date-first': [
+    { title: 'Age, Date & Time', widgets: ['age-category', 'date', 'time'] },
+    { title: 'Option', widgets: ['option'] },
+    { title: 'Pickup', widgets: ['pickup'] },
+  ],
+};
+
+// Resolves the grouping for the checkout edit-item accordion. If editValue is set, it's resolved the same
+// way as wizardPages (a preset name or a custom JSON array). Otherwise, defaults to the grouped layout for
+// whichever named wizard preset wizardValue resolves to (including the "no value given" case, which is
+// option-first) - but if wizardValue is itself a custom, unnamed page layout, there's no sensible grouping
+// to infer, so editPages just mirrors it directly.
+export function resolveEditPages(wizardValue: string | null | undefined, editValue: string | null | undefined): WizardPages {
+  if (editValue) {
+    if (editValue in EDIT_PRESETS) return EDIT_PRESETS[editValue];
+    try {
+      const parsed = JSON.parse(editValue);
+      if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].widgets) return parsed;
+    } catch { /* fall through to the wizardPages-derived default */ }
+  }
+
+  const wizardKey = wizardValue ? (wizardValue in WIZARD_PRESETS ? wizardValue : null) : 'option-first';
+  if (wizardKey) return EDIT_PRESETS[wizardKey];
+
+  return resolveWizardPages(wizardValue);
+}
+
+export interface AppConfig {
+  apiBaseUrl: string;
+  productId: string;
+  checkoutKey: string;
+  currency: string;
+  mode: WidgetMode;
+  cartDisplay: CartOverviewDisplay;
+  orderId: string;
+  wizardPages: WizardPages;
+  editPages: WizardPages;
+  autoSelectSingleTimeSlot: boolean;
+  name: string;
+  cancelable: boolean;
+}
+
+export function readConfig(): AppConfig {
+  const params = new URLSearchParams(window.location.search);
+
+  if (params.has('product') || params.has('mode')) {
+    const productId = params.get('product') ?? '';
+    return {
+      apiBaseUrl: params.get('apiBaseUrl') ?? DEFAULT_QA_API_BASE_URL,
+      productId,
+      checkoutKey: params.get('checkoutKey') ?? deriveCheckoutKey(productId),
+      currency: params.get('currency') ?? 'ZAR',
+      mode: parseMode(params.get('mode')),
+      cartDisplay: parseCartDisplay(params.get('cartDisplay')),
+      orderId: params.get('orderId') ?? '',
+      wizardPages: resolveWizardPages(params.get('wizard')),
+      editPages: resolveEditPages(params.get('wizard'), params.get('edit')),
+      autoSelectSingleTimeSlot: params.get('autoSelectSingleTimeSlot') === 'true',
+      name: params.get('name') ?? '',
+      cancelable: params.get('cancelable') === 'true',
+    };
+  }
+
+  return {
+    apiBaseUrl: DEFAULT_QA_API_BASE_URL,
+    productId: DEFAULT_QA_PRODUCT_ID,
+    checkoutKey: DEFAULT_QA_CHECKOUT_KEY,
+    currency: 'ZAR',
+    mode: 'configurator',
+    cartDisplay: 'bar',
+    orderId: '',
+    wizardPages: DEFAULT_WIZARD_PAGES,
+    editPages: EDIT_PRESETS['option-first'],
+    autoSelectSingleTimeSlot: false,
+    name: '',
+    cancelable: false,
+  };
+}
+
+function parseMode(value: string | null): WidgetMode {
+  if (value === 'checkout' || value === 'cart-overview') return value;
+  return 'configurator';
+}
+
+function parseCartDisplay(value: string | null): CartOverviewDisplay {
+  if (value === 'button') return 'button';
+  return 'bar';
+}
+
+// Demo only — products whose id starts with a-j use "morii", the rest use "csbs".
+// This will be replaced with a real checkout key lookup.
+function deriveCheckoutKey(productId: string): string {
+  const first = productId[0]?.toLowerCase() ?? '';
+  return first >= 'a' && first <= 'j' ? 'morii' : 'csbs';
+}

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

@@ -1,35 +1,49 @@
-<svelte:options customElement={{ tag: 'bw-cart', shadow: 'none' }} />
-
-<script lang="ts">
-  import CartOverview from '../CartOverview.svelte';
-  import type { CartOverviewDisplay } from '../config';
-  import { onWidgetMessage } from '../messages';
-  import { getSharedServices } from './shared';
-
-  let {
-    display = 'bar' as CartOverviewDisplay,
-  } = $props();
-
-  const { api, cartManager, ready: readyPromise } = getSharedServices();
-
-  let ready = $state(false);
-  readyPromise.then(() => { ready = true; });
-
-  function dispatch(name: string, detail: unknown) {
-    const host = (document.querySelector('bw-cart') as HTMLElement) ?? document.body;
-    host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
-  }
-
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'modal:open') {
-      dispatch('bw:checkout', {});
-    }
-  }));
-</script>
-
-{#if ready}
-  <CartOverview {api} {cartManager} {display} />
-{:else}
-  <div class="loading-center"><div class="spinner"></div></div>
-{/if}
-
+<svelte:options customElement={{ tag: 'bw-cart', shadow: 'none' }} />
+
+<script lang="ts">
+  import CartOverview from '../CartOverview.svelte';
+  import type { CartOverviewDisplay } from '../config';
+  import { onWidgetMessage } from '../messages';
+  import { getSharedServices } from './shared';
+
+  let {
+    display = 'bar' as CartOverviewDisplay,
+  } = $props();
+
+  const { api, cartManager, ready: readyPromise } = getSharedServices();
+
+  let ready = $state(false);
+  readyPromise.then(() => { ready = true; });
+
+  // Each instance dispatches on its own element, found by walking up from a node it rendered. It used to
+  // use document.querySelector('bw-cart'), which is the *first* one on the page - so with two of these
+  // elements every event was dispatched twice on that first element (and the second element never received
+  // its own at all). The shipped demo has two <bw-cart>, so that was not hypothetical.
+  //
+  // Walking up rather than $host(): these wrappers are compiled both with and without customElement (the
+  // elements build and the test/ES build), and $host() only exists in the former. With no custom element
+  // above it - which is how the tests mount these - closest() finds nothing and body carries the event,
+  // which still reaches window.
+  let anchor = $state<HTMLElement | null>(null);
+
+  function dispatch(name: string, detail: unknown) {
+    const target = anchor?.closest('bw-cart') ?? document.body;
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'modal:open') {
+      dispatch('bw:checkout', {});
+    }
+  }));
+</script>
+
+<!-- display: contents so this is only an anchor for dispatch(), never a box in the layout. -->
+<div style="display: contents" bind:this={anchor}>
+  {#if ready}
+    <CartOverview {api} {cartManager} {display} />
+  {:else}
+    <div class="loading-center"><div class="spinner"></div></div>
+  {/if}
+</div>
+