@code-collective/booking-widget 1.0.10 → 1.0.13

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/client-types.ts

@@ -23,17 +23,21 @@ export type CheckoutCartConfirmItemResultDto = S['CheckoutCartConfirmItemResultD
 export type OctoContact = S['OctoContact'];
 
 // Client-side types
-export type PaymentOutcome = 'successful' | 'pending' | 'failed' | 'cancelled';
+// 'partial' is its own outcome rather than a kind of 'failed' because the shopper's card WAS charged: the
+// payment succeeded and only some of the booking's items could be confirmed afterwards. It gets a heading of
+// its own in ResultView, since "Payment Failed" printed over the words "Your payment succeeded" invites
+// exactly the wrong reaction - paying again elsewhere, or charging back a payment that did go through.
+export type PaymentOutcome = 'successful' | 'pending' | 'partial' | 'failed' | 'cancelled';
 
 export interface PaymentStatus {
   outcome: PaymentOutcome;
   resultCode?: string;
   resultDescription?: string;
-  // Only meaningful for outcome 'failed'. A card that was actually charged - which is every 'failed' this
-  // gateway produces once confirmation itself is what failed, not the payment - must never be offered a
-  // "try again" that re-opens the card form, since the shopper would be charged a second time for a booking
-  // that already has their money against it. Defaults true (the ordinary declined/expired/errored case,
-  // where nothing was charged and retrying is exactly correct) so existing callers need not set it.
+  // Only meaningful for outcome 'failed', and only for a 'failed' that nonetheless took the shopper's money:
+  // it must never be offered a "try again" that re-opens the card form, since they would be charged a second
+  // time for a booking that already has their money against it. Defaults true (the ordinary declined/expired/
+  // errored case, where nothing was charged and retrying is exactly correct) so existing callers need not set
+  // it. The confirm-partial case this was first introduced for now carries its own 'partial' outcome.
   retryPayment?: boolean;
 }
 

package/src/lib/config.ts

@@ -9,6 +9,15 @@ 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 {

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

@@ -15,9 +15,20 @@
   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 host = (document.querySelector('bw-cart') as HTMLElement) ?? document.body;
-    host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    const target = anchor?.closest('bw-cart') ?? document.body;
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
   }
 
   $effect(() => onWidgetMessage((d) => {
@@ -27,9 +38,12 @@
   }));
 </script>
 
-{#if ready}
-  <CartOverview {api} {cartManager} {display} />
-{:else}
-  <div class="loading-center"><div class="spinner"></div></div>
-{/if}
+<!-- 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>
 

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

@@ -1,6 +1,9 @@
 <svelte:options customElement={{ tag: 'bw-checkout', shadow: 'none' }} />
 
 <script lang="ts">
+  // Presentation-free: the overlay, the scrim, the click-outside close and the portal all live in
+  // Checkout.svelte now, so the ES build renders the same modal from the same code. What is left here is the
+  // custom element's own surface - attributes in, bw:* events out.
   import Checkout from '../Checkout.svelte';
   import { resolveWizardPages, resolveEditPages } from '../config';
   import { onWidgetMessage } from '../messages';
@@ -15,10 +18,9 @@
 
   let autoSelectSingleTimeSlot = $derived(autoSelectSingleTimeSlotAttr !== undefined);
 
-  let isModal = $derived(isModalAttr !== undefined);
-  let showModal = $state(false);
+  let mode = $derived(isModalAttr !== undefined ? 'modal' as const : 'inline' as const);
 
-  const { api, cartManager, ready: readyPromise } = getSharedServices();
+  const { api, cartManager, ready: readyPromise, host } = getSharedServices();
 
   let ready = $state(false);
   readyPromise.then(() => { ready = true; });
@@ -26,18 +28,48 @@
   let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
   let editPages = $derived(resolveEditPages(wizardPagesJson, editPagesJson));
 
+  // Each instance dispatches on its own element, found by walking up from a node it rendered. It used to
+  // use document.querySelector('bw-checkout'), 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 host = (document.querySelector('bw-checkout') as HTMLElement) ?? document.body;
-    host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    const target = anchor?.closest('bw-checkout') ?? document.body;
+    target.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', {}); }
+  // The element's public methods - Svelte exposes these on the custom element itself, so a merchant can
+  // drive checkout from their own UI: document.querySelector('bw-checkout').open(). Both go through the
+  // host, which is what bw-cart's button and an add-to-cart already reach, so opening this way hides the
+  // bar carts and fires bw:modal-open like any other route in. They used to set this element's own
+  // showModal instead, which skipped all of that.
+  export function open() { host.openCheckout(); }
+  export function close() { host.closeCheckout(); }
+
+  // One dismissal produces two modal:close messages - Checkout's own scrim/Escape, and the panel posting
+  // again as it is torn down - so dispatching per message fired bw:close twice for one close. A plain
+  // variable rather than $state, for the same reason Checkout.svelte's own guard is: the second message
+  // arrives while Svelte is still flushing the teardown, where a $state write is not yet readable.
+  let closeReported = false;
+  let wasOpen = false;
+  $effect(() => {
+    const isOpen = host.isCheckoutOpen;
+    if (isOpen && !wasOpen) closeReported = false;
+    wasOpen = isOpen;
+  });
 
   $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'modal:close') {
-      if (isModal) showModal = false;
+    // Only a close this element was open for. modal:close is page-wide - the expiry guard's "start again"
+    // and a cancelable configurator both post it with no checkout showing - and reporting those burned the
+    // guard, so the shopper's real dismissal afterwards said nothing at all.
+    if (d.type === 'modal:close' && !closeReported && wasOpen) {
+      closeReported = true;
       dispatch('bw:close', {});
     }
     if (d.type === 'order:complete') {
@@ -45,53 +77,21 @@
       // (for host analytics/cart-clearing), not that the shopper has finished looking at the result screen.
       // The modal stays open until they dismiss it themselves, which sends modal:close separately.
       dispatch('bw:order-confirmed', {
-        cartToken: d.cartToken ?? '',
-        value: d.value ?? 0,
-        currency: d.currency ?? 'ZAR',
+        cartToken: d.cartToken,
+        value: d.value,
+        currency: d.currency,
       });
     }
   }));
-
-  // 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} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
-      </div>
-    </div>
+<!-- Always rendered, even in modal mode with nothing on screen: dispatch() needs an anchor before the
+     session is ready, and Checkout portals its overlay out of here anyway. -->
+<div style="display: contents" bind:this={anchor}>
+  {#if ready}
+    <Checkout {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot}
+      {mode} open={host.isCheckoutOpen} onClose={() => host.closeCheckout()} />
+  {:else if mode === 'inline'}
+    <div class="loading-center"><div class="spinner"></div></div>
   {/if}
-{:else if ready}
-  <Checkout {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
-{: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>
+</div>

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

@@ -10,6 +10,7 @@
     'product-id': productId = '',
     'wizard-pages': wizardPagesJson = '',
     'auto-select-single-time-slot': autoSelectSingleTimeSlot = undefined,
+    'no-auto-checkout': noAutoCheckout = undefined,
     cancelable = undefined,
   } = $props();
 
@@ -20,9 +21,20 @@
 
   let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
 
+  // Each instance dispatches on its own element, found by walking up from a node it rendered. It used to
+  // use document.querySelector('bw-configurator'), 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 host = (document.querySelector('bw-configurator') as HTMLElement) ?? document.body;
-    host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    const target = anchor?.closest('bw-configurator') ?? document.body;
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
   }
 
   // Forward postMessage events as CustomEvents
@@ -41,16 +53,20 @@
     : undefined;
 </script>
 
-{#if ready}
-  <TicketConfigurator
-    {api}
-    {cartManager}
-    {productId}
-    {wizardPages}
-    autoSelectSingleTimeSlot={autoSelectSingleTimeSlot !== undefined}
-    {onCancel}
-  />
-{:else}
-  <div class="loading-center"><div class="spinner"></div></div>
-{/if}
+<!-- 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}
+    <TicketConfigurator
+      {api}
+      {cartManager}
+      {productId}
+      {wizardPages}
+      autoSelectSingleTimeSlot={autoSelectSingleTimeSlot !== undefined}
+      autoOpenCheckout={noAutoCheckout === undefined}
+      {onCancel}
+    />
+  {:else}
+    <div class="loading-center"><div class="spinner"></div></div>
+  {/if}
+</div>
 

package/src/lib/elements/register.ts

@@ -1,70 +1,16 @@
+// 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 type { BookingApi } from '../api';
-import { ApiClient } from '../api';
-import { SessionManager } from '../session-manager';
-import { CartManager } from '../cart-manager';
+import { createBookingHost, setBookingDefaults } from '../host.svelte';
 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;
+  autoOpenCheckout: boolean;
   wizardPages: string;
   editPages: string;
 }
@@ -72,6 +18,7 @@ interface BwOptions {
 const defaultOptions: BwOptions = {
   shouldBottomCloseOnModal: true,
   autoSelectSingleTimeSlot: false,
+  autoOpenCheckout: true,
   wizardPages: '',
   editPages: '',
 };
@@ -81,12 +28,88 @@ const options: BwOptions = {
   ...((window as any)['bwOptions'] ?? {}),
 };
 
-function forwardToWindow(e: Event) {
-  if (e instanceof CustomEvent) {
-    window.dispatchEvent(new CustomEvent(e.type, { detail: e.detail }));
+// 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');
@@ -125,51 +148,17 @@ function autoWire() {
     }
   });
 
-  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
+  // 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:cancel', forwardToWindow);
-    el.addEventListener('bw:cart-change', (e) => {
-      forwardToWindow(e);
+    el.addEventListener('bw:cart-change', () => {
       showCarts();
-      if (!el.hasAttribute('no-auto-checkout')) openCheckout();
 
       const handler = el.getAttribute('on-cart-change');
       if (handler && typeof (window as any)[handler] === 'function') {
@@ -177,20 +166,6 @@ function autoWire() {
       }
     });
   });
-  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);