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/elements/register.ts CHANGED Viewed

@@ -1,196 +1,171 @@
-import '../app.css';
-import type { BookingApi } from '../api';
-import { ApiClient } from '../api';
-import { SessionManager } from '../session-manager';
-import { CartManager } from '../cart-manager';
-import { defaultApiBaseUrl } from './env';
-import { onWidgetMessage } from '../messages';
-import { mount } from 'svelte';
-import CartExpiryGuard from '../CartExpiryGuard.svelte';
-// 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 = 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 };
-function whenDomReady(fn: () => void) {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', fn, { once: true });
-  } else {
-    fn();
-  }
-}
-// Mounted once, directly on <body> - not inside any <bw-*> element's own tree, so the "still shopping?"
-// warning and the expiry it can lead to work regardless of which combination of elements (if any include
-// <bw-checkout> at all) the merchant actually placed on this page. Session readiness is irrelevant to it -
-// cart operations only need the cart token, never the session token - so it does not wait on `ready`.
-//
-// Deferred to DOMContentLoaded rather than run inline: a <script> placed in <head> without defer/type=module
-// runs before <body> exists at all, and document.body would be null here. An exception at module level would
-// also skip the cart:updated forwarding and autoWire below, not just the expiry guard.
-function mountExpiryGuard() {
-  const guardHost = document.createElement('div');
-  guardHost.dataset.bwExpiryGuard = '';
-  document.body.appendChild(guardHost);
-  mount(CartExpiryGuard, { target: guardHost, props: { api, cartManager } });
-}
-whenDomReady(mountExpiryGuard);
-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.
-onWidgetMessage((d) => {
-  if (d.type === 'cart:updated' && 'cart' in d) {
-    window.dispatchEvent(new CustomEvent('bw:cart-updated', { detail: { cart: d.cart } }));
-  }
-  if (d.type === 'cart:expired') {
-    window.dispatchEvent(new CustomEvent('bw:cart-expired'));
-  }
-});
-interface BwOptions {
-  shouldBottomCloseOnModal: boolean;
-  autoSelectSingleTimeSlot: boolean;
-  wizardPages: string;
-  editPages: string;
-}
-const defaultOptions: BwOptions = {
-  shouldBottomCloseOnModal: true,
-  autoSelectSingleTimeSlot: false,
-  wizardPages: '',
-  editPages: '',
-};
-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);
-      }
-    });
-  }
-  // edit-pages only affects the checkout edit-item accordion, so it's only meaningful on bw-checkout.
-  if (options.editPages) {
-    checkouts.forEach((el) => {
-      if (!el.hasAttribute('edit-pages')) {
-        el.setAttribute('edit-pages', options.editPages);
-      }
-    });
-  }
-  [...configurators, ...checkouts].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);
-  });
-}
-whenDomReady(autoWire);
+// The custom-elements build's DOM adapter. Everything it used to decide for itself - when checkout opens,
+// where the expiry guard lives, what the site-wide defaults are - now lives in host.svelte.ts, which the ES
+// build reaches too. What is left here is genuinely DOM: read attributes and window.bwOptions, and bind
+// bw:* events to the host.
+import '../app.css';
+import { createBookingHost, setBookingDefaults } from '../host.svelte';
+import { defaultApiBaseUrl } from './env';
+interface BwOptions {
+  shouldBottomCloseOnModal: boolean;
+  autoSelectSingleTimeSlot: boolean;
+  autoOpenCheckout: boolean;
+  wizardPages: string;
+  editPages: string;
+}
+const defaultOptions: BwOptions = {
+  shouldBottomCloseOnModal: true,
+  autoSelectSingleTimeSlot: false,
+  autoOpenCheckout: true,
+  wizardPages: '',
+  editPages: '',
+};
+const options: BwOptions = {
+  ...defaultOptions,
+  ...((window as any)['bwOptions'] ?? {}),
+};
+// Bootstrap the host 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') ?? '';
+// Same values the host is built with, so an ES consumer sharing this page (an island alongside the elements)
+// creates hosts that behave identically without restating them.
+setBookingDefaults({
+  apiBaseUrl: defaultApiBaseUrl,
+  checkoutKey,
+  autoOpenCheckout: options.autoOpenCheckout,
+  shouldBottomCloseOnModal: options.shouldBottomCloseOnModal,
+  autoSelectSingleTimeSlot: options.autoSelectSingleTimeSlot,
+});
+const host = createBookingHost({
+  apiBaseUrl: defaultApiBaseUrl,
+  checkoutKey,
+  autoOpenCheckout: options.autoOpenCheckout,
+  shouldBottomCloseOnModal: options.shouldBottomCloseOnModal,
+  // Cart-global, not tied to any one element (unlike the bw:* events forwarded per-element in autoWire
+  // below). Carries the same cart TicketConfigurator/CheckoutModal already fetch for their own use, so a
+  // consumer can build a custom cart summary without calling the checkout API directly.
+  onCartUpdated: (cart) => dispatchOnWindow('bw:cart-updated', { cart }),
+  onCartExpired: () => dispatchOnWindow('bw:cart-expired', {}),
+  onCheckoutOpenChange: onCheckoutOpenChange,
+});
+(window as any).__bwServices = {
+  api: host.api,
+  cartManager: host.cartManager,
+  ready: host.ready,
+  host,
+};
+function dispatchOnWindow(name: string, detail: unknown) {
+  window.dispatchEvent(new CustomEvent(name, { detail }));
+}
+function whenDomReady(fn: () => void) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+import './bw-configurator.svelte';
+import './bw-cart.svelte';
+import './bw-checkout.svelte';
+function cartElements(): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLElement>('bw-cart')];
+}
+function setCartBarsHidden(hidden: boolean) {
+  cartElements().forEach((el) => {
+    if (el.getAttribute('display') !== 'bar') return;
+    el.parentElement?.classList.toggle('hidden', hidden);
+    if (!hidden) el.style.display = '';
+  });
+}
+// Called on the first add, to reveal carts a merchant left hidden until there was something in them. The
+// host subscribes to the message bus before any element does, so by the time this runs it has already opened
+// checkout for this same add and hidden the bottom bars - revealing everything unconditionally would put a
+// bar straight back over the modal, which is the one thing shouldBottomCloseOnModal exists to prevent.
+function showCarts() {
+  cartElements().forEach((el) => {
+    el.parentElement?.classList.remove('hidden');
+    el.style.display = '';
+  });
+  if (host.options.shouldBottomCloseOnModal) setCartBarsHidden(host.isCheckoutOpen);
+}
+// The host owns whether checkout is open; bw-checkout renders from the same state. All this has to do is
+// tell the page about it.
+function onCheckoutOpenChange(open: boolean) {
+  dispatchOnWindow(open ? 'bw:modal-open' : 'bw:modal-close', {});
+  if (host.options.shouldBottomCloseOnModal) setCartBarsHidden(open);
+}
+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);
+      }
+    });
+  }
+  // edit-pages only affects the checkout edit-item accordion, so it's only meaningful on bw-checkout.
+  if (options.editPages) {
+    checkouts.forEach((el) => {
+      if (!el.hasAttribute('edit-pages')) {
+        el.setAttribute('edit-pages', options.editPages);
+      }
+    });
+  }
+  [...configurators, ...checkouts].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', '');
+    }
+  });
+  // Nothing here re-dispatches bw:* on window any more. Every one of them is dispatched on its element with
+  // bubbles+composed, so it reaches window by itself; forwarding a copy as well delivered each event twice,
+  // and a host counting bw:order-confirmed was double-counting orders. Bubbling is also the delivery that
+  // keeps working for an element added to the page after this ran, which a listener bound here would miss.
+  //
+  // Opening checkout is not wired here either: the add posts cart:change with its own openCheckout, the cart
+  // bar's button posts modal:open, and the host acts on both - so no-auto-checkout suppresses the open
+  // through the same branch an ES consumer's autoOpenCheckout: false does.
+  configurators.forEach((el) => {
+    el.addEventListener('bw:cart-change', () => {
+      showCarts();
+      const handler = el.getAttribute('on-cart-change');
+      if (handler && typeof (window as any)[handler] === 'function') {
+        (window as any)[handler]();
+      }
+    });
+  });
+}
+whenDomReady(autoWire);

package/src/lib/elements/shared.ts CHANGED Viewed

@@ -1,14 +1,18 @@
-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;
-}
+import type { BookingApi } from '../api';
+import type { CartManager } from '../cart-manager';
+import type { BookingHost } from '../host.svelte';
+interface SharedServices {
+  api: BookingApi;
+  cartManager: CartManager;
+  ready: Promise<void>;
+  // The one host register.ts built. Elements read their behaviour from it rather than keeping their own -
+  // notably whether checkout is open, which used to live as separate state inside bw-checkout.
+  host: BookingHost;
+}
+const w = window as any;
+export function getSharedServices(): SharedServices {
+  return w.__bwServices;
+}

package/src/lib/elements/theme.css CHANGED Viewed

@@ -138,14 +138,8 @@ input, select, textarea { font-family: inherit; }
   height: 48px;
   font-size: 16px;
   font-weight: 700;
-  position: relative;
 }
-.action-bar .btn-primary .arrow {
-  position: absolute;
-  right: 16px;
-  font-size: 20px;
-}
 /* Buttons */
 .btn {