npm - @code-collective/booking-widget - Versions diffs - 1.0.9 → 1.0.12 - Mend

@code-collective/booking-widget 1.0.9 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/CHANGELOG.md +46 -0
package/README.md +500 -388
package/dist/booking-widget.css +1 -1
package/dist/booking-widget.js +2415 -1745
package/dist/booking-widget.min.css +1 -1
package/dist/booking-widget.min.js +39 -23
package/dist/booking-widget.umd.cjs +5 -3
package/package.json +58 -55
package/src/lib/BookingProvider.svelte +21 -0
package/src/lib/CartBar.svelte +26 -41
package/src/lib/CartBarView.svelte +78 -61
package/src/lib/CartExpiryGuard.svelte +15 -9
package/src/lib/CartOverview.svelte +30 -20
package/src/lib/CartOverviewButton.svelte +104 -101
package/src/lib/Checkout.svelte +141 -128
package/src/lib/CheckoutModal.svelte +838 -805
package/src/lib/CheckoutPanel.svelte +121 -0
package/src/lib/PaymentPage.svelte +191 -177
package/src/lib/PickupPointPicker.svelte +1 -1
package/src/lib/TicketConfigurator.svelte +166 -152
package/src/lib/UnitCounter.svelte +16 -2
package/src/lib/WizardPage.svelte +102 -35
package/src/lib/app.css +0 -6
package/src/lib/booking-context.ts +33 -0
package/src/lib/cart-overview.svelte.ts +97 -0
package/src/lib/config.ts +162 -153
package/src/lib/elements/bw-cart.svelte +49 -35
package/src/lib/elements/bw-checkout.svelte +97 -97
package/src/lib/elements/bw-configurator.svelte +72 -56
package/src/lib/elements/register.ts +171 -196
package/src/lib/elements/shared.ts +18 -14
package/src/lib/elements/theme.css +0 -6
package/src/lib/host.svelte.ts +336 -0
package/src/lib/index.ts +242 -196
package/src/lib/layout.svelte.ts +52 -0
package/src/lib/messages.ts +157 -77
package/src/lib/peach-sdk.ts +86 -40
package/src/lib/portal.ts +23 -0
package/src/lib/CartExpiryGuard.test.ts +0 -331
package/src/lib/CheckoutModal.confirm-outcome.test.ts +0 -91
package/src/lib/CheckoutModal.payment-timeout.test.ts +0 -140
package/src/lib/test/fixtures.ts +0 -107
package/src/lib/test/messages-mock.ts +0 -34

package/src/lib/host.svelte.ts ADDED Viewed

@@ -0,0 +1,336 @@
+// The widget's host layer: everything that makes an embedded widget behave like a finished checkout rather
+// than a set of rendering primitives. It used to exist only inside elements/register.ts, so it shipped with
+// the custom-elements build alone and every consumer of the ES build re-implemented it - differently, and
+// without the parts that are easy to miss (the expiry guard, the payment timeout, the portalled modal).
+//
+// register.ts is now a thin DOM adapter over this: it reads attributes and window.bwOptions, builds a host,
+// and binds bw:* events to it. Both builds therefore auto-wire through the same branches.
+import { mount, unmount } from 'svelte';
+import type { BookingApi } from './api';
+import { ApiClient } from './api';
+import { SessionManager } from './session-manager';
+import { CartManager } from './cart-manager';
+import type { WizardPages } from './config';
+import type { CheckoutCartDetailDto } from './client-types';
+import { onWidgetMessage, postMessage } from './messages';
+import CartExpiryGuard from './CartExpiryGuard.svelte';
+import { setPeachSdk, type PeachEnv } from './peach-sdk';
+/**
+ * Site-wide defaults, applied to every host created afterwards. The ES equivalent of window.bwOptions, which
+ * register.ts now feeds through this same function - so a site does not have to thread
+ * autoSelectSingleTimeSlot and wizardPages down through every component individually.
+ */
+export interface BookingDefaults {
+  apiBaseUrl?: string;
+  checkoutKey?: string;
+  /**
+   * Whether adding an item carries the shopper on into checkout. Opt out, never opt in - the same default,
+   * and the same branch, as the elements build's no-auto-checkout attribute.
+   *
+   * A function is re-asked on every add, so a layout that already shows the configurator inline (a desktop
+   * sidebar, say) can suppress the hand-off it does not need without the widget knowing anything about
+   * breakpoints: autoOpenCheckout: () => !desktopQuery.matches.
+   */
+  autoOpenCheckout?: boolean | (() => boolean);
+  /** Hide bar-display cart overviews while checkout is open, and restore them on close. */
+  shouldBottomCloseOnModal?: boolean;
+  autoSelectSingleTimeSlot?: boolean;
+  wizardPages?: WizardPages;
+  editPages?: WizardPages;
+  /**
+   * Mounts CartExpiryGuard on <body>. On by default, and worth leaving on: it owns the "still shopping?"
+   * warning, the expired view, and the payment-timeout hand-over, none of which live anywhere else.
+   */
+  mountExpiryGuard?: boolean;
+  /** Whether the expiry guard offers to extend, or only warns. Defaults to the guard's own setting. */
+  extensionEnabled?: boolean;
+  /**
+   * Which Peach Payments SDK the card form loads. **Set this whenever apiBaseUrl points at anything but
+   * production**: the checkout API creates the Peach checkout, so a sandbox API with the production SDK
+   * gives a card form that refuses to render. The elements build reads window.BW_CHECKOUT_ENV instead.
+   */
+  peachEnv?: PeachEnv;
+  /** An explicit Peach SDK URL, for an environment peachEnv does not name. */
+  peachSdkUrl?: string;
+}
+export interface BookingHostConfig extends BookingDefaults {
+  /**
+   * An API client to use instead of building one from apiBaseUrl - a test double, or a fake that serves a
+   * demo page without a backend.
+   */
+  api?: BookingApi;
+  /**
+   * Fires on an add, with the detail only the add knows: which item, how many units, the formatted total.
+   * onCartUpdated follows it with the whole cart - use that one for a summary, this one for "added to cart"
+   * analytics or a toast naming what was just added.
+   */
+  onCartChange?: (detail: { itemCount: number; cartItemId: string; totalFormatted: string }) => void;
+  /** Fires after any add/edit/remove anywhere on the page, carrying the cart the widget already fetched. */
+  onCartUpdated?: (cart: CheckoutCartDetailDto | null) => void;
+  /** The cart's window ran out. Distinct from the null onCartUpdated a confirmed order also produces. */
+  onCartExpired?: () => void;
+  onCheckoutOpenChange?: (open: boolean) => void;
+  onOrderConfirmed?: (detail: { cartToken: string; value: number; currency: string }) => void;
+}
+/** The options a host resolved, for components that need to be handed them as props. */
+export interface ResolvedBookingOptions {
+  autoSelectSingleTimeSlot: boolean;
+  wizardPages: WizardPages | undefined;
+  editPages: WizardPages | undefined;
+  shouldBottomCloseOnModal: boolean;
+}
+export interface BookingHost {
+  readonly api: BookingApi;
+  readonly sessionManager: SessionManager;
+  readonly cartManager: CartManager;
+  /** Resolves once the checkout session exists. Components can render before it; requests cannot. */
+  readonly ready: Promise<void>;
+  readonly isCheckoutOpen: boolean;
+  readonly options: ResolvedBookingOptions;
+  openCheckout: () => void;
+  closeCheckout: () => void;
+  destroy: () => void;
+}
+let siteDefaults: BookingDefaults = {};
+/** Merges into the site-wide defaults. Call before creating hosts; later calls do not affect existing ones. */
+export function setBookingDefaults(defaults: BookingDefaults): void {
+  siteDefaults = { ...siteDefaults, ...defaults };
+}
+export function getBookingDefaults(): BookingDefaults {
+  return { ...siteDefaults };
+}
+/** Test seam - drops anything a previous setBookingDefaults put in place. */
+export function resetBookingDefaults(): void {
+  siteDefaults = {};
+}
+export function createBookingHost(config: BookingHostConfig = {}): BookingHost {
+  const settings = { ...siteDefaults, ...config };
+  if (settings.peachEnv || settings.peachSdkUrl) {
+    setPeachSdk({ env: settings.peachEnv, url: settings.peachSdkUrl });
+  }
+  const api: BookingApi = settings.api ?? new ApiClient(settings.apiBaseUrl ?? '');
+  const sessionManager = new SessionManager(api);
+  const cartManager = new CartManager(api);
+  // No session and no refresh timer on a server render. ApiClient's middleware reads
+  // window.location.origin for the Origin header the service enforces, so a session started there rejects
+  // with a ReferenceError - and a background interval would outlive the render with nothing to cancel it.
+  // The hydrated page builds its own host; this one exists only so a component body can run.
+  const hasDom = typeof window !== 'undefined';
+  let ready: Promise<void>;
+  if (hasDom) {
+    sessionManager.startBackgroundRefresh();
+    ready = sessionManager.ensureSession(settings.checkoutKey ?? '').then(() => {});
+    // A refusal is the consumer's to handle - the docs tell them to catch it - but an unhandled rejection
+    // can take a Node SSR render down with it, and nothing else here observes this promise. Attaching a
+    // no-op handler marks it handled without preventing the consumer's own catch from running.
+    void ready.catch(() => {});
+  } else {
+    ready = Promise.resolve();
+  }
+  const options: ResolvedBookingOptions = {
+    autoSelectSingleTimeSlot: settings.autoSelectSingleTimeSlot ?? false,
+    wizardPages: settings.wizardPages,
+    editPages: settings.editPages,
+    shouldBottomCloseOnModal: settings.shouldBottomCloseOnModal ?? true,
+  };
+  let isCheckoutOpen = $state(false);
+  let destroyed = false;
+  function setCheckoutOpen(open: boolean) {
+    if (isCheckoutOpen === open) return;
+    isCheckoutOpen = open;
+    settings.onCheckoutOpenChange?.(open);
+  }
+  function openCheckout() {
+    setCheckoutOpen(true);
+  }
+  function closeCheckout() {
+    setCheckoutOpen(false);
+  }
+  // Asked per add rather than read once, so a consumer can answer it from whatever its layout currently is.
+  function shouldAutoOpen(): boolean {
+    const setting = settings.autoOpenCheckout ?? true;
+    return typeof setting === 'function' ? setting() : setting;
+  }
+  const stopListening = onWidgetMessage((d) => {
+    switch (d.type) {
+      case 'cart:change':
+        // openCheckout on the message is the single source of truth for both builds - the configurator that
+        // added the item states whether this add is one the shopper should be carried on from, and the host
+        // decides whether to honour it. Nothing else reads the intent to check out from an add.
+        if (d.openCheckout && shouldAutoOpen()) openCheckout();
+        settings.onCartChange?.({
+          itemCount: d.itemCount,
+          cartItemId: d.cartItemId,
+          totalFormatted: d.totalFormatted,
+        });
+        break;
+      case 'modal:open':
+        openCheckout();
+        break;
+      case 'modal:close':
+        closeCheckout();
+        break;
+      case 'cart:updated':
+        settings.onCartUpdated?.(d.cart);
+        break;
+      case 'cart:expired':
+        settings.onCartExpired?.();
+        break;
+      case 'order:complete':
+        settings.onOrderConfirmed?.({ cartToken: d.cartToken, value: d.value, currency: d.currency });
+        break;
+    }
+  });
+  const releaseGuard = (settings.mountExpiryGuard ?? true)
+    ? acquireExpiryGuard(api, cartManager, settings.extensionEnabled)
+    : null;
+  return {
+    api,
+    sessionManager,
+    cartManager,
+    ready,
+    get isCheckoutOpen() {
+      return isCheckoutOpen;
+    },
+    options,
+    openCheckout,
+    closeCheckout,
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      // Closed before the teardown so anything driven off onCheckoutOpenChange is left in a sane state - the
+      // elements adapter hides the bottom cart bars while checkout is open, and a host destroyed mid-checkout
+      // would otherwise leave them hidden with nothing left alive to bring them back.
+      closeCheckout();
+      stopListening();
+      releaseGuard?.();
+      sessionManager.stop();
+    },
+  };
+}
+// The guard is a page singleton, not a per-host one. Every mount function builds its own host when it is not
+// handed one, so the documented three-call sequence (configurator + cart overview + checkout) would otherwise
+// put three guards on <body> and show the shopper three "still shopping?" dialogs at once. The first host to
+// ask mounts it; it goes away when the last one releases it.
+interface GuardHolder {
+  api: BookingApi;
+  cartManager: CartManager;
+  extensionEnabled?: boolean;
+}
+let guardHolders: GuardHolder[] = [];
+let unmountGuard: (() => void) | null = null;
+function acquireExpiryGuard(
+  api: BookingApi,
+  cartManager: CartManager,
+  extensionEnabled?: boolean,
+): () => void {
+  const holder: GuardHolder = { api, cartManager, extensionEnabled };
+  guardHolders.push(holder);
+  if (guardHolders.length === 1) mountGuardFor(holder);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const wasMounted = guardHolders[0] === holder;
+    guardHolders = guardHolders.filter((h) => h !== holder);
+    if (guardHolders.length === 0) {
+      unmountGuard?.();
+      unmountGuard = null;
+      return;
+    }
+    // The guard was watching this holder's cart through this holder's api, and that host is going away -
+    // its session is stopped and nobody else uses its CartManager. Left alone it would keep polling a dead
+    // client and watching a cart nobody has, so the surviving holders would get no still-shopping prompt
+    // and no expiry clear at all.
+    if (wasMounted) {
+      unmountGuard?.();
+      mountGuardFor(guardHolders[0]);
+    }
+  };
+}
+function mountGuardFor(holder: GuardHolder) {
+  unmountGuard = mountExpiryGuard(holder.api, holder.cartManager, holder.extensionEnabled);
+}
+/**
+ * Mounted on <body> rather than inside any one widget's tree: a page may carry only a configurator and a cart
+ * bar and no checkout at all, and the warning - and the expiry it can lead to - still has to reach the
+ * shopper. Session readiness is irrelevant to it; cart operations only need the cart token.
+ */
+function mountExpiryGuard(
+  api: BookingApi,
+  cartManager: CartManager,
+  extensionEnabled?: boolean,
+): (() => void) | null {
+  if (typeof document === 'undefined') return null;
+  const guardHost = document.createElement('div');
+  guardHost.dataset.bwExpiryGuard = '';
+  // A host created from a script in <head> runs before <body> exists, so the mount waits for the document
+  // rather than throwing on a null body and taking the message wiring above down with it.
+  let component: Record<string, unknown> | null = null;
+  let cancelled = false;
+  function doMount() {
+    if (cancelled) return;
+    document.body.appendChild(guardHost);
+    component = mount(CartExpiryGuard, {
+      target: guardHost,
+      props: extensionEnabled === undefined ? { api, cartManager } : { api, cartManager, extensionEnabled },
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', doMount, { once: true });
+  } else {
+    doMount();
+  }
+  return () => {
+    cancelled = true;
+    document.removeEventListener('DOMContentLoaded', doMount);
+    if (component) unmount(component);
+    guardHost.remove();
+  };
+}
+/** Closes checkout from outside a host - the message every build already listens to. */
+export function requestCheckoutClose(): void {
+  postMessage({ type: 'modal:close' });
+}
+/** Opens checkout from outside a host - what the cart bar's own button posts. */
+export function requestCheckoutOpen(): void {
+  postMessage({ type: 'modal:open' });
+}