@code-collective/booking-widget 1.0.9 → 1.0.12

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

@@ -1,97 +1,97 @@
-<svelte:options customElement={{ tag: 'bw-checkout', shadow: 'none' }} />
-
-<script lang="ts">
-  import Checkout from '../Checkout.svelte';
-  import { resolveWizardPages, resolveEditPages } from '../config';
-  import { onWidgetMessage } from '../messages';
-  import { getSharedServices } from './shared';
-
-  let {
-    'wizard-pages': wizardPagesJson = '',
-    'edit-pages': editPagesJson = '',
-    'is-modal': isModalAttr = undefined,
-    'auto-select-single-time-slot': autoSelectSingleTimeSlotAttr = undefined,
-  } = $props();
-
-  let autoSelectSingleTimeSlot = $derived(autoSelectSingleTimeSlotAttr !== undefined);
-
-  let isModal = $derived(isModalAttr !== undefined);
-  let showModal = $state(false);
-
-  const { api, cartManager, ready: readyPromise } = getSharedServices();
-
-  let ready = $state(false);
-  readyPromise.then(() => { ready = true; });
-
-  let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
-  let editPages = $derived(resolveEditPages(wizardPagesJson, editPagesJson));
-
-  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', {}); }
-
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'modal:close') {
-      if (isModal) showModal = false;
-      dispatch('bw:close', {});
-    }
-    if (d.type === 'order:complete') {
-      // Deliberately does not close the modal - order:complete only reports that the order is confirmed
-      // (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',
-      });
-    }
-  }));
-
-  // 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>
-  {/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>
+<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';
+  import { getSharedServices } from './shared';
+
+  let {
+    'wizard-pages': wizardPagesJson = '',
+    'edit-pages': editPagesJson = '',
+    'is-modal': isModalAttr = undefined,
+    'auto-select-single-time-slot': autoSelectSingleTimeSlotAttr = undefined,
+  } = $props();
+
+  let autoSelectSingleTimeSlot = $derived(autoSelectSingleTimeSlotAttr !== undefined);
+
+  let mode = $derived(isModalAttr !== undefined ? 'modal' as const : 'inline' as const);
+
+  const { api, cartManager, ready: readyPromise, host } = getSharedServices();
+
+  let ready = $state(false);
+  readyPromise.then(() => { ready = true; });
+
+  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 target = anchor?.closest('bw-checkout') ?? document.body;
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  // 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) => {
+    // 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') {
+      // Deliberately does not close the modal - order:complete only reports that the order is confirmed
+      // (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,
+        currency: d.currency,
+      });
+    }
+  }));
+</script>
+
+<!-- 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}
+</div>

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

@@ -1,56 +1,72 @@
-<svelte:options customElement={{ tag: 'bw-configurator', shadow: 'none' }} />
-
-<script lang="ts">
-  import TicketConfigurator from '../TicketConfigurator.svelte';
-  import { resolveWizardPages } from '../config';
-  import { onWidgetMessage, 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(resolveWizardPages(wizardPagesJson));
-
-  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
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:change') {
-      dispatch('bw:cart-change', {
-        itemCount: d.itemCount ?? 0,
-        cartItemId: d.cartItemId ?? '',
-        totalFormatted: d.totalFormatted ?? '',
-      });
-    }
-  }));
-
-  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}
-
+<svelte:options customElement={{ tag: 'bw-configurator', shadow: 'none' }} />
+
+<script lang="ts">
+  import TicketConfigurator from '../TicketConfigurator.svelte';
+  import { resolveWizardPages } from '../config';
+  import { onWidgetMessage, postMessage } from '../messages';
+  import { getSharedServices } from './shared';
+
+  let {
+    'product-id': productId = '',
+    'wizard-pages': wizardPagesJson = '',
+    'auto-select-single-time-slot': autoSelectSingleTimeSlot = undefined,
+    'no-auto-checkout': noAutoCheckout = undefined,
+    cancelable = undefined,
+  } = $props();
+
+  const { api, cartManager, ready: readyPromise } = getSharedServices();
+
+  let ready = $state(false);
+  readyPromise.then(() => { ready = true; });
+
+  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 target = anchor?.closest('bw-configurator') ?? document.body;
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  // Forward postMessage events as CustomEvents
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:change') {
+      dispatch('bw:cart-change', {
+        itemCount: d.itemCount ?? 0,
+        cartItemId: d.cartItemId ?? '',
+        totalFormatted: d.totalFormatted ?? '',
+      });
+    }
+  }));
+
+  const onCancel = cancelable !== undefined
+    ? () => { postMessage({ type: 'modal:close' }); dispatch('bw:cancel', {}); }
+    : undefined;
+</script>
+
+<!-- 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>
+