@code-collective/booking-widget 1.0.12 → 1.0.14

package/src/lib/index.ts

@@ -1,242 +1,242 @@
-import './app.css';
-import { mount, unmount } from 'svelte';
-import type { CartOverviewDisplay, CartOverviewState } from './config';
-import type { BookingHost, BookingHostConfig } from './host.svelte';
-import { createBookingHost } from './host.svelte';
-import { ApiClient, ApiError } from './api';
-import { SessionManager } from './session-manager';
-import { CartManager } from './cart-manager';
-import { onWidgetMessage } from './messages';
-import TicketConfiguratorComponent from './TicketConfigurator.svelte';
-import CheckoutComponent from './Checkout.svelte';
-import CartOverviewComponent from './CartOverview.svelte';
-
-// Re-export components for direct Svelte usage
-export { default as TicketConfigurator } from './TicketConfigurator.svelte';
-export { default as Checkout } from './Checkout.svelte';
-export { default as CartOverview } from './CartOverview.svelte';
-export { default as CartBar } from './CartBar.svelte';
-export { default as CartOverviewButton } from './CartOverviewButton.svelte';
-// Required if you are not using the elements build: it owns the "still shopping?" warning, the expired view
-// and the payment-timeout hand-over, and nothing else on the page does. createBookingHost mounts it for you;
-// export it for consumers composing everything by hand.
-export { default as CartExpiryGuard } from './CartExpiryGuard.svelte';
-// Supplies the host to everything beneath it, so components need no api/cartManager props of their own.
-export { default as BookingProvider } from './BookingProvider.svelte';
-
-// Re-export utilities
-export { ApiClient, ApiError, SessionManager, CartManager };
-export { resolveWizardPages, resolveEditPages, DEFAULT_WIZARD_PAGES } from './config';
-export { createBookingHost, setBookingDefaults, getBookingDefaults, requestCheckoutOpen, requestCheckoutClose } from './host.svelte';
-export { portal } from './portal';
-export { setPeachSdk } from './peach-sdk';
-export type { PeachEnv } from './peach-sdk';
-export { getBookingHostContext } from './booking-context';
-export { onWidgetMessage, postMessage } from './messages';
-export type { BookingApi } from './api';
-export type { BookingHost, BookingHostConfig, BookingDefaults, ResolvedBookingOptions } from './host.svelte';
-export type {
-  WizardPages, WizardPageConfig, CartOverviewDisplay, CartOverviewState, CheckoutMode, WidgetMode, WizardWidgetType,
-} from './config';
-export type {
-  WidgetMessage, WidgetMessageType, CartChangeMessage, CartUpdatedMessage, CartExpiredMessage,
-  ModalOpenMessage, ModalCloseMessage, OrderCompleteMessage, PaymentStartedMessage, PaymentEndedMessage,
-  PaymentTimedOutMessage,
-} from './messages';
-export type { components, operations, paths } from './generated-types';
-export type * from './client-types';
-
-// --- Mount function configs ---
-
-// Every mount function takes the same host options, so a consumer mounting more than one widget can hand all
-// of them the same host and get one session, one cart and one expiry guard - see `host` below.
-type BaseConfig = Omit<BookingHostConfig, 'onCheckoutOpenChange'> & {
-  // An existing host to mount into. Without one each mount function builds its own, which means its own
-  // session and its own cart - fine for a single widget on a page, wrong for two.
-  host?: BookingHost;
-};
-
-export interface ConfiguratorConfig extends BaseConfig {
-  productId: string;
-  currency?: string;
-  cancelable?: boolean;
-  // onCartChange and the other cart callbacks come from BookingHostConfig - see createBookingHost.
-  onCancel?: () => void;
-}
-
-export interface CheckoutConfig extends BaseConfig {
-  // Inline by default - the mount target is a container the consumer positioned itself. Pass 'modal' for the
-  // portalled overlay the custom-elements build shows.
-  mode?: 'inline' | 'modal';
-  onClose?: () => void;
-}
-
-export interface CartOverviewConfig extends BaseConfig {
-  display?: CartOverviewDisplay;
-  onCheckout?: () => void;
-  /** Distinguishes an empty cart from one that could not be read - see CartOverview. */
-  onStateChange?: (state: CartOverviewState) => void;
-}
-
-export interface MountedWidget {
-  destroy: () => void;
-}
-
-// --- Mount functions ---
-
-interface MountContext {
-  host: BookingHost;
-  /** Tearing the widget down tears the host down too - but only the host this mount built itself. */
-  release: () => void;
-}
-
-/**
- * Resolves the host a mount function will use. A host passed in is the consumer's to destroy - other widgets
- * are probably still using it - so this mount only unsubscribes the callbacks it added to it.
- */
-/**
- * Waits for the session, releasing whatever the mount just acquired if it is refused. Without this a
- * rejected ready - an unallowlisted checkout key, the failure consumers are told to expect - left the
- * host's message subscription, its session-refresh interval and its expiry-guard refcount behind, and that
- * leaked refcount pins CartExpiryGuard on <body> for the life of the page.
- */
-async function readyOrRelease(context: MountContext): Promise<void> {
-  try {
-    await context.host.ready;
-  } catch (e) {
-    context.release();
-    throw e;
-  }
-}
-
-function hostFor(config: BaseConfig): MountContext {
-  if (!config.host) {
-    const host = createBookingHost(config);
-    return { host, release: () => host.destroy() };
-  }
-
-  // The host was built elsewhere and already carries its own callbacks, so the ones on this config would
-  // otherwise be dropped on the floor - a consumer following the documented `{ host, onOrderConfirmed }`
-  // shape would get a checkout that never reports a confirmed order. They are wired to the same messages
-  // the host itself listens to.
-  return { host: config.host, release: subscribeCallbacks(config) };
-}
-
-function subscribeCallbacks(config: BaseConfig): () => void {
-  const { onCartChange, onCartUpdated, onCartExpired, onOrderConfirmed } = config;
-  if (!onCartChange && !onCartUpdated && !onCartExpired && !onOrderConfirmed) return () => {};
-
-  return onWidgetMessage((d) => {
-    if (d.type === 'cart:change') {
-      onCartChange?.({
-        itemCount: d.itemCount,
-        cartItemId: d.cartItemId,
-        totalFormatted: d.totalFormatted,
-      });
-    }
-    if (d.type === 'cart:updated') onCartUpdated?.(d.cart);
-    if (d.type === 'cart:expired') onCartExpired?.();
-    if (d.type === 'order:complete') {
-      onOrderConfirmed?.({ cartToken: d.cartToken, value: d.value, currency: d.currency });
-    }
-  });
-}
-
-export async function mountConfigurator(target: HTMLElement, config: ConfiguratorConfig): Promise<MountedWidget> {
-  const context = hostFor(config);
-  const { host, release } = context;
-
-  await readyOrRelease(context);
-
-  const component = mount(TicketConfiguratorComponent, {
-    target,
-    props: {
-      api: host.api,
-      cartManager: host.cartManager,
-      productId: config.productId,
-      wizardPages: config.wizardPages ?? host.options.wizardPages,
-      autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? host.options.autoSelectSingleTimeSlot,
-      // Stated per configurator so this and the host's own autoOpenCheckout meet in the same branch - see
-      // host.svelte.ts. Both have to say yes for an add to open checkout, which is what lets one configurator
-      // on a page opt out (the ES equivalent of the element's no-auto-checkout) without silencing the rest.
-      autoOpenCheckout: config.autoOpenCheckout !== false,
-      onCancel: config.onCancel,
-    },
-  });
-
-  return {
-    destroy() {
-      unmount(component);
-      release();
-    },
-  };
-}
-
-export async function mountCheckout(target: HTMLElement, config: CheckoutConfig): Promise<MountedWidget> {
-  const context = hostFor(config);
-  const { host, release } = context;
-
-  await readyOrRelease(context);
-
-  const component = mount(CheckoutComponent, {
-    target,
-    props: {
-      api: host.api,
-      cartManager: host.cartManager,
-      wizardPages: config.wizardPages ?? host.options.wizardPages,
-      editPages: config.editPages ?? host.options.editPages,
-      autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? host.options.autoSelectSingleTimeSlot,
-      mode: config.mode ?? 'inline',
-      // The modal opens and closes with the host, which is what an add-to-cart and the cart bar's button
-      // both reach. A consumer wanting to drive it directly can call host.openCheckout().
-      get open() {
-        return host.isCheckoutOpen;
-      },
-      // Fires for every dismissal, not just the scrim - Checkout answers the modal:close message rather
-      // than only its own overlay click.
-      onClose: config.onClose,
-    },
-  });
-
-  return {
-    destroy() {
-      unmount(component);
-      release();
-    },
-  };
-}
-
-export async function mountCartOverview(target: HTMLElement, config: CartOverviewConfig): Promise<MountedWidget> {
-  const context = hostFor(config);
-  const { host, release } = context;
-
-  await readyOrRelease(context);
-
-  const component = mount(CartOverviewComponent, {
-    target,
-    props: {
-      api: host.api,
-      cartManager: host.cartManager,
-      display: config.display ?? 'bar',
-      onStateChange: config.onStateChange,
-    },
-  });
-
-  const stopListening = config.onCheckout
-    ? onCheckoutRequested(config.onCheckout)
-    : () => {};
-
-  return {
-    destroy() {
-      stopListening();
-      unmount(component);
-      release();
-    },
-  };
-}
-
-function onCheckoutRequested(onCheckout: () => void): () => void {
-  return onWidgetMessage((d) => {
-    if (d.type === 'modal:open') onCheckout();
-  });
-}
+import './app.css';
+import { mount, unmount } from 'svelte';
+import type { CartOverviewDisplay, CartOverviewState } from './config';
+import type { BookingHost, BookingHostConfig } from './host.svelte';
+import { createBookingHost } from './host.svelte';
+import { ApiClient, ApiError } from './api';
+import { SessionManager } from './session-manager';
+import { CartManager } from './cart-manager';
+import { onWidgetMessage } from './messages';
+import TicketConfiguratorComponent from './TicketConfigurator.svelte';
+import CheckoutComponent from './Checkout.svelte';
+import CartOverviewComponent from './CartOverview.svelte';
+
+// Re-export components for direct Svelte usage
+export { default as TicketConfigurator } from './TicketConfigurator.svelte';
+export { default as Checkout } from './Checkout.svelte';
+export { default as CartOverview } from './CartOverview.svelte';
+export { default as CartBar } from './CartBar.svelte';
+export { default as CartOverviewButton } from './CartOverviewButton.svelte';
+// Required if you are not using the elements build: it owns the "still shopping?" warning, the expired view
+// and the payment-timeout hand-over, and nothing else on the page does. createBookingHost mounts it for you;
+// export it for consumers composing everything by hand.
+export { default as CartExpiryGuard } from './CartExpiryGuard.svelte';
+// Supplies the host to everything beneath it, so components need no api/cartManager props of their own.
+export { default as BookingProvider } from './BookingProvider.svelte';
+
+// Re-export utilities
+export { ApiClient, ApiError, SessionManager, CartManager };
+export { resolveWizardPages, resolveEditPages, DEFAULT_WIZARD_PAGES } from './config';
+export { createBookingHost, setBookingDefaults, getBookingDefaults, requestCheckoutOpen, requestCheckoutClose } from './host.svelte';
+export { portal } from './portal';
+export { setPeachSdk } from './peach-sdk';
+export type { PeachEnv } from './peach-sdk';
+export { getBookingHostContext } from './booking-context';
+export { onWidgetMessage, postMessage } from './messages';
+export type { BookingApi } from './api';
+export type { BookingHost, BookingHostConfig, BookingDefaults, ResolvedBookingOptions } from './host.svelte';
+export type {
+  WizardPages, WizardPageConfig, CartOverviewDisplay, CartOverviewState, CheckoutMode, WidgetMode, WizardWidgetType,
+} from './config';
+export type {
+  WidgetMessage, WidgetMessageType, CartChangeMessage, CartUpdatedMessage, CartExpiredMessage,
+  ModalOpenMessage, ModalCloseMessage, OrderCompleteMessage, PaymentStartedMessage, PaymentEndedMessage,
+  PaymentTimedOutMessage,
+} from './messages';
+export type { components, operations, paths } from './generated-types';
+export type * from './client-types';
+
+// --- Mount function configs ---
+
+// Every mount function takes the same host options, so a consumer mounting more than one widget can hand all
+// of them the same host and get one session, one cart and one expiry guard - see `host` below.
+type BaseConfig = Omit<BookingHostConfig, 'onCheckoutOpenChange'> & {
+  // An existing host to mount into. Without one each mount function builds its own, which means its own
+  // session and its own cart - fine for a single widget on a page, wrong for two.
+  host?: BookingHost;
+};
+
+export interface ConfiguratorConfig extends BaseConfig {
+  productId: string;
+  currency?: string;
+  cancelable?: boolean;
+  // onCartChange and the other cart callbacks come from BookingHostConfig - see createBookingHost.
+  onCancel?: () => void;
+}
+
+export interface CheckoutConfig extends BaseConfig {
+  // Inline by default - the mount target is a container the consumer positioned itself. Pass 'modal' for the
+  // portalled overlay the custom-elements build shows.
+  mode?: 'inline' | 'modal';
+  onClose?: () => void;
+}
+
+export interface CartOverviewConfig extends BaseConfig {
+  display?: CartOverviewDisplay;
+  onCheckout?: () => void;
+  /** Distinguishes an empty cart from one that could not be read - see CartOverview. */
+  onStateChange?: (state: CartOverviewState) => void;
+}
+
+export interface MountedWidget {
+  destroy: () => void;
+}
+
+// --- Mount functions ---
+
+interface MountContext {
+  host: BookingHost;
+  /** Tearing the widget down tears the host down too - but only the host this mount built itself. */
+  release: () => void;
+}
+
+/**
+ * Resolves the host a mount function will use. A host passed in is the consumer's to destroy - other widgets
+ * are probably still using it - so this mount only unsubscribes the callbacks it added to it.
+ */
+/**
+ * Waits for the session, releasing whatever the mount just acquired if it is refused. Without this a
+ * rejected ready - an unallowlisted checkout key, the failure consumers are told to expect - left the
+ * host's message subscription, its session-refresh interval and its expiry-guard refcount behind, and that
+ * leaked refcount pins CartExpiryGuard on <body> for the life of the page.
+ */
+async function readyOrRelease(context: MountContext): Promise<void> {
+  try {
+    await context.host.ready;
+  } catch (e) {
+    context.release();
+    throw e;
+  }
+}
+
+function hostFor(config: BaseConfig): MountContext {
+  if (!config.host) {
+    const host = createBookingHost(config);
+    return { host, release: () => host.destroy() };
+  }
+
+  // The host was built elsewhere and already carries its own callbacks, so the ones on this config would
+  // otherwise be dropped on the floor - a consumer following the documented `{ host, onOrderConfirmed }`
+  // shape would get a checkout that never reports a confirmed order. They are wired to the same messages
+  // the host itself listens to.
+  return { host: config.host, release: subscribeCallbacks(config) };
+}
+
+function subscribeCallbacks(config: BaseConfig): () => void {
+  const { onCartChange, onCartUpdated, onCartExpired, onOrderConfirmed } = config;
+  if (!onCartChange && !onCartUpdated && !onCartExpired && !onOrderConfirmed) return () => {};
+
+  return onWidgetMessage((d) => {
+    if (d.type === 'cart:change') {
+      onCartChange?.({
+        itemCount: d.itemCount,
+        cartItemId: d.cartItemId,
+        totalFormatted: d.totalFormatted,
+      });
+    }
+    if (d.type === 'cart:updated') onCartUpdated?.(d.cart);
+    if (d.type === 'cart:expired') onCartExpired?.();
+    if (d.type === 'order:complete') {
+      onOrderConfirmed?.({ cartToken: d.cartToken, value: d.value, currency: d.currency });
+    }
+  });
+}
+
+export async function mountConfigurator(target: HTMLElement, config: ConfiguratorConfig): Promise<MountedWidget> {
+  const context = hostFor(config);
+  const { host, release } = context;
+
+  await readyOrRelease(context);
+
+  const component = mount(TicketConfiguratorComponent, {
+    target,
+    props: {
+      api: host.api,
+      cartManager: host.cartManager,
+      productId: config.productId,
+      wizardPages: config.wizardPages ?? host.options.wizardPages,
+      autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? host.options.autoSelectSingleTimeSlot,
+      // Stated per configurator so this and the host's own autoOpenCheckout meet in the same branch - see
+      // host.svelte.ts. Both have to say yes for an add to open checkout, which is what lets one configurator
+      // on a page opt out (the ES equivalent of the element's no-auto-checkout) without silencing the rest.
+      autoOpenCheckout: config.autoOpenCheckout !== false,
+      onCancel: config.onCancel,
+    },
+  });
+
+  return {
+    destroy() {
+      unmount(component);
+      release();
+    },
+  };
+}
+
+export async function mountCheckout(target: HTMLElement, config: CheckoutConfig): Promise<MountedWidget> {
+  const context = hostFor(config);
+  const { host, release } = context;
+
+  await readyOrRelease(context);
+
+  const component = mount(CheckoutComponent, {
+    target,
+    props: {
+      api: host.api,
+      cartManager: host.cartManager,
+      wizardPages: config.wizardPages ?? host.options.wizardPages,
+      editPages: config.editPages ?? host.options.editPages,
+      autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? host.options.autoSelectSingleTimeSlot,
+      mode: config.mode ?? 'inline',
+      // The modal opens and closes with the host, which is what an add-to-cart and the cart bar's button
+      // both reach. A consumer wanting to drive it directly can call host.openCheckout().
+      get open() {
+        return host.isCheckoutOpen;
+      },
+      // Fires for every dismissal, not just the scrim - Checkout answers the modal:close message rather
+      // than only its own overlay click.
+      onClose: config.onClose,
+    },
+  });
+
+  return {
+    destroy() {
+      unmount(component);
+      release();
+    },
+  };
+}
+
+export async function mountCartOverview(target: HTMLElement, config: CartOverviewConfig): Promise<MountedWidget> {
+  const context = hostFor(config);
+  const { host, release } = context;
+
+  await readyOrRelease(context);
+
+  const component = mount(CartOverviewComponent, {
+    target,
+    props: {
+      api: host.api,
+      cartManager: host.cartManager,
+      display: config.display ?? 'bar',
+      onStateChange: config.onStateChange,
+    },
+  });
+
+  const stopListening = config.onCheckout
+    ? onCheckoutRequested(config.onCheckout)
+    : () => {};
+
+  return {
+    destroy() {
+      stopListening();
+      unmount(component);
+      release();
+    },
+  };
+}
+
+function onCheckoutRequested(onCheckout: () => void): () => void {
+  return onWidgetMessage((d) => {
+    if (d.type === 'modal:open') onCheckout();
+  });
+}