@code-collective/booking-widget 1.0.0

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

@@ -0,0 +1,44 @@
+<svelte:options customElement={{ tag: 'bw-cart', shadow: 'none' }} />
+
+<script lang="ts">
+  import CartOverview from '../CartOverview.svelte';
+  import type { CartOverviewDisplay } from '../config';
+  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 }));
+  }
+
+  function handleMessage(e: MessageEvent) {
+    let d: Record<string, unknown>;
+    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+    catch { return; }
+    if (!d?.type) return;
+
+    if (d.type === 'modal:open') {
+      dispatch('bw:checkout', {});
+    }
+  }
+
+  $effect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  });
+</script>
+
+{#if ready}
+  <CartOverview {api} {cartManager} {display} />
+{:else}
+  <div class="loading-center"><div class="spinner"></div></div>
+{/if}
+

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

@@ -0,0 +1,99 @@
+<svelte:options customElement={{ tag: 'bw-checkout', shadow: 'none' }} />
+
+<script lang="ts">
+  import Checkout from '../Checkout.svelte';
+  import { DEFAULT_WIZARD_PAGES } from '../config';
+  import { getSharedServices } from './shared';
+
+  let {
+    'wizard-pages': wizardPagesJson = '',
+    'is-modal': isModalAttr = undefined,
+  } = $props();
+
+  let isModal = $derived(isModalAttr !== undefined);
+  let showModal = $state(false);
+
+  const { api, ready: readyPromise } = getSharedServices();
+
+  let ready = $state(false);
+  readyPromise.then(() => { ready = true; });
+
+  let wizardPages = $derived(wizardPagesJson ? JSON.parse(wizardPagesJson) : DEFAULT_WIZARD_PAGES);
+
+  function dispatch(name: string, detail: unknown) {
+    const host = (document.querySelector('bw-checkout') as HTMLElement) ?? document.body;
+    host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  // Public API: open/close the modal from outside
+  export function open() { showModal = true; }
+  export function close() { showModal = false; dispatch('bw:close', {}); }
+
+  function handleMessage(e: MessageEvent) {
+    let d: Record<string, unknown>;
+    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+    catch { return; }
+    if (!d?.type) return;
+
+    if (d.type === 'modal:close') {
+      if (isModal) showModal = false;
+      dispatch('bw:close', {});
+    }
+    if (d.type === 'order:complete') {
+      if (isModal) showModal = false;
+      dispatch('bw:order-confirmed', {
+        cartToken: d.cartToken ?? '',
+        value: d.value ?? 0,
+        currency: d.currency ?? 'ZAR',
+      });
+    }
+  }
+
+  $effect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  });
+
+  // Listen for a custom 'bw:open' event so register.ts can trigger it
+  $effect(() => {
+    const host = document.querySelector('bw-checkout');
+    if (!host) return;
+    function onOpen() { showModal = true; }
+    host.addEventListener('bw:open', onOpen);
+    return () => host.removeEventListener('bw:open', onOpen);
+  });
+</script>
+
+{#if isModal}
+  {#if showModal && ready}
+    <div class="bw-modal-overlay" onclick={() => close()}>
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <div class="bw-modal-inner" onclick={(e) => e.stopPropagation()}>
+        <Checkout {api} {wizardPages} />
+      </div>
+    </div>
+  {/if}
+{:else if ready}
+  <Checkout {api} {wizardPages} />
+{:else}
+  <div class="loading-center"><div class="spinner"></div></div>
+{/if}
+
+<style>
+  .bw-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .bw-modal-inner {
+    width: 100%;
+    max-width: 900px;
+    height: 95vh;
+    margin: 2.5vh auto;
+    border-radius: 12px;
+    background: #fff;
+    overflow: hidden;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+  }
+</style>

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

@@ -0,0 +1,66 @@
+<svelte:options customElement={{ tag: 'bw-configurator', shadow: 'none' }} />
+
+<script lang="ts">
+  import TicketConfigurator from '../TicketConfigurator.svelte';
+  import { DEFAULT_WIZARD_PAGES } from '../config';
+  import { postMessage } from '../messages';
+  import { getSharedServices } from './shared';
+
+  let {
+    'product-id': productId = '',
+    'wizard-pages': wizardPagesJson = '',
+    'auto-select-single-time-slot': autoSelectSingleTimeSlot = undefined,
+    cancelable = undefined,
+  } = $props();
+
+  const { api, cartManager, ready: readyPromise } = getSharedServices();
+
+  let ready = $state(false);
+  readyPromise.then(() => { ready = true; });
+
+  let wizardPages = $derived(wizardPagesJson ? JSON.parse(wizardPagesJson) : DEFAULT_WIZARD_PAGES);
+
+  function dispatch(name: string, detail: unknown) {
+    const host = (document.querySelector('bw-configurator') as HTMLElement) ?? document.body;
+    host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  // Forward postMessage events as CustomEvents
+  function handleMessage(e: MessageEvent) {
+    let d: Record<string, unknown>;
+    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+    catch { return; }
+    if (!d?.type) return;
+
+    if (d.type === 'cart:change') {
+      dispatch('bw:cart-change', {
+        itemCount: d.itemCount ?? 0,
+        cartItemId: d.cartItemId ?? '',
+        totalFormatted: d.totalFormatted ?? '',
+      });
+    }
+  }
+
+  $effect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  });
+
+  const onCancel = cancelable !== undefined
+    ? () => { postMessage({ type: 'modal:close' }); dispatch('bw:cancel', {}); }
+    : undefined;
+</script>
+
+{#if ready}
+  <TicketConfigurator
+    {api}
+    {cartManager}
+    {productId}
+    {wizardPages}
+    autoSelectSingleTimeSlot={autoSelectSingleTimeSlot !== undefined}
+    {onCancel}
+  />
+{:else}
+  <div class="loading-center"><div class="spinner"></div></div>
+{/if}
+

package/src/lib/elements/env.ts

@@ -0,0 +1,11 @@
+const API_URLS: Record<string, string> = {
+  prod: 'https://checkout.moriitech.com',
+  qa: 'https://qa.tranzact.co.za/morii-checkout/api',
+};
+
+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

@@ -0,0 +1,149 @@
+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';
+
+// 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 sessionManager = new SessionManager(api);
+const cartManager = new CartManager(api);
+sessionManager.startBackgroundRefresh();
+const ready = sessionManager.ensureSession(checkoutKey).then(() => {});
+(window as any).__bwServices = { api, cartManager, ready };
+
+import './bw-configurator.svelte';
+import './bw-cart.svelte';
+import './bw-checkout.svelte';
+
+interface BwOptions {
+  shouldBottomCloseOnModal: boolean;
+  autoSelectSingleTimeSlot: boolean;
+  wizardPages: string;
+}
+
+const defaultOptions: BwOptions = {
+  shouldBottomCloseOnModal: true,
+  autoSelectSingleTimeSlot: false,
+  wizardPages: '',
+};
+
+const options: BwOptions = {
+  ...defaultOptions,
+  ...((window as any)['bwOptions'] ?? {}),
+};
+
+function forwardToWindow(e: Event) {
+  if (e instanceof CustomEvent) {
+    window.dispatchEvent(new CustomEvent(e.type, { detail: e.detail }));
+  }
+}
+
+function autoWire() {
+  const configurators = document.querySelectorAll('bw-configurator');
+  const carts = document.querySelectorAll('bw-cart');
+  const checkouts = document.querySelectorAll('bw-checkout');
+
+  const allElements = [...configurators, ...carts, ...checkouts];
+
+  // Apply options as element attributes
+  if (options.wizardPages) {
+    allElements.forEach((el) => {
+      if (!el.hasAttribute('wizard-pages')) {
+        el.setAttribute('wizard-pages', options.wizardPages);
+      }
+    });
+  }
+
+  configurators.forEach((el) => {
+    if (options.autoSelectSingleTimeSlot && !el.hasAttribute('auto-select-single-time-slot')) {
+      el.setAttribute('auto-select-single-time-slot', '');
+    }
+  });
+
+  // Auto-add is-modal to any checkout that doesn't already have it
+  checkouts.forEach((el) => {
+    if (!el.hasAttribute('is-modal') && !el.hasAttribute('is-inline')) {
+      el.setAttribute('is-modal', '');
+    }
+  });
+
+  function openCheckout() {
+    checkouts.forEach((el) => {
+      el.dispatchEvent(new CustomEvent('bw:open'));
+    });
+    window.dispatchEvent(new CustomEvent('bw:modal-open'));
+
+    if (options.shouldBottomCloseOnModal) {
+      hideCartBars();
+    }
+  }
+
+  function showCarts() {
+    carts.forEach((el) => {
+      const parent = el.parentElement;
+      if (parent) parent.classList.remove('hidden');
+      (el as HTMLElement).style.display = '';
+    });
+  }
+
+  function hideCartBars() {
+    carts.forEach((el) => {
+      if (el.getAttribute('display') === 'bar') {
+        const parent = el.parentElement;
+        if (parent) parent.classList.add('hidden');
+      }
+    });
+  }
+
+  function showCartBars() {
+    carts.forEach((el) => {
+      if (el.getAttribute('display') === 'bar') {
+        const parent = el.parentElement;
+        if (parent) parent.classList.remove('hidden');
+        (el as HTMLElement).style.display = '';
+      }
+    });
+  }
+
+  // Forward bw:* events to window and wire up default behaviour
+  configurators.forEach((el) => {
+    el.addEventListener('bw:cancel', forwardToWindow);
+    el.addEventListener('bw:cart-change', (e) => {
+      forwardToWindow(e);
+      showCarts();
+      if (!el.hasAttribute('no-auto-checkout')) openCheckout();
+
+      const handler = el.getAttribute('on-cart-change');
+      if (handler && typeof (window as any)[handler] === 'function') {
+        (window as any)[handler]();
+      }
+    });
+  });
+  carts.forEach((el) => {
+    el.addEventListener('bw:checkout', (e) => {
+      forwardToWindow(e);
+      openCheckout();
+    });
+  });
+  checkouts.forEach((el) => {
+    el.addEventListener('bw:close', (e) => {
+      forwardToWindow(e);
+      window.dispatchEvent(new CustomEvent('bw:modal-close'));
+      if (options.shouldBottomCloseOnModal) showCartBars();
+    });
+    el.addEventListener('bw:order-confirmed', forwardToWindow);
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', autoWire);
+} else {
+  autoWire();
+}

package/src/lib/elements/shared.ts

@@ -0,0 +1,14 @@
+import type { BookingApi } from '../api';
+import type { CartManager } from '../cart-manager';
+
+interface SharedServices {
+  api: BookingApi;
+  cartManager: CartManager;
+  ready: Promise<void>;
+}
+
+const w = window as any;
+
+export function getSharedServices(): SharedServices {
+  return w.__bwServices;
+}

package/src/lib/elements/theme.css

@@ -0,0 +1,193 @@
+/* Themeable CSS variables — host page can override --bw-* on :root or on the element.
+   Fallbacks cascade: --bw-color-primary → --header-background → #E30613.
+   This file mirrors app.css for shadow-DOM use if elements ever switch to shadow: 'open'. */
+:host {
+  --bw-color-primary: var(--header-background, #E30613);
+  --bw-color-primary-dark: var(--footer-background, #C00510);
+  --bw-color-primary-light: rgba(227, 6, 19, 0.08);
+  --bw-color-text: #212121;
+  --bw-color-text-secondary: #757575;
+  --bw-color-border: #E0E0E0;
+  --bw-color-bg: #FFFFFF;
+  --bw-color-surface: #F5F5F5;
+  --bw-color-success: #4CAF50;
+  --bw-color-error: var(--header-background, #E30613);
+  --bw-font-family: var(--default-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  --bw-radius-sm: 4px;
+  --bw-radius-md: var(--radius, 8px);
+  --bw-radius-lg: 12px;
+  --bw-radius-pill: 9999px;
+  --bw-transition: 0.15s ease;
+  --bw-shadow-1: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
+  --bw-shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+  --bw-shadow-3: 0 10px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
+
+  display: block;
+}
+
+/* Reset inside shadow root */
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: var(--bw-font-family);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--bw-color-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+button { cursor: pointer; font-family: inherit; }
+input, select, textarea { font-family: inherit; }
+
+/* Spinner */
+@keyframes bw-spin { to { transform: rotate(360deg); } }
+
+.spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--bw-color-border);
+  border-top-color: var(--bw-color-primary);
+  border-radius: 50%;
+  animation: bw-spin 0.7s linear infinite;
+}
+
+.loading-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 120px;
+}
+
+/* Page header bar */
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bw-color-border);
+  background: var(--bw-color-bg);
+}
+
+.page-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.page-header .spacer { flex: 1; }
+
+/* Icon button */
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: none;
+  border: none;
+  border-radius: var(--bw-radius-pill);
+  font-size: 20px;
+  color: var(--bw-color-text);
+  transition: background var(--bw-transition);
+}
+
+.icon-btn:hover {
+  background: var(--bw-color-surface);
+}
+
+/* Cards */
+.card {
+  background: var(--bw-color-bg);
+  border: 1px solid var(--bw-color-border);
+  border-radius: var(--bw-radius-lg);
+  padding: 16px;
+  transition: border-color var(--bw-transition);
+}
+
+.card-selectable {
+  cursor: pointer;
+  text-align: left;
+}
+
+.card-selectable:hover { border-color: var(--bw-color-text); }
+.card-selected { border-color: var(--bw-color-text); border-width: 2px; }
+
+/* Action bar */
+.action-bar {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+  padding: 12px 16px;
+  border-top: 1px solid var(--bw-color-border);
+}
+
+.action-bar .btn-secondary {
+  height: 48px;
+  padding: 0 20px;
+  border: 1px solid var(--bw-color-border);
+  background: var(--bw-color-bg);
+}
+
+.action-bar .btn-primary {
+  flex: 1;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 700;
+  position: relative;
+}
+
+.action-bar .btn-primary .arrow {
+  position: absolute;
+  right: 16px;
+  font-size: 20px;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--bw-radius-md);
+  padding: 10px 20px;
+  transition: background var(--bw-transition), box-shadow var(--bw-transition), opacity var(--bw-transition);
+}
+
+.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
+.btn-primary { background: var(--bw-color-primary); color: white; }
+.btn-primary:hover:not(:disabled) { background: var(--bw-color-primary-dark); box-shadow: var(--bw-shadow-1); }
+.btn-secondary { background: var(--bw-color-bg); color: var(--bw-color-text); }
+.btn-secondary:hover:not(:disabled) { background: var(--bw-color-border); }
+.btn-outline { background: transparent; border: 1px solid var(--bw-color-primary); color: var(--bw-color-primary); }
+.btn-outline:hover:not(:disabled) { background: var(--bw-color-primary-light); }
+
+/* Form inputs */
+.input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--bw-color-border);
+  border-radius: var(--bw-radius-md);
+  font-size: 14px;
+  outline: none;
+  transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
+}
+
+.input:focus { border-color: var(--bw-color-primary); box-shadow: 0 0 0 3px var(--bw-color-primary-light); }
+.input-error { border-color: var(--bw-color-error); background: #FEF2F2; }
+.input-error:focus { box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
+
+/* Section titles */
+.section-title {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--bw-color-text-secondary);
+  margin-bottom: 12px;
+}