@code-collective/booking-widget 1.0.12 → 1.0.14

package/src/lib/CartOverview.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import type { CartOverviewDisplay, CartOverviewState } from './config';
-  import { CartManager } from './cart-manager';
-  import CartBar from './CartBar.svelte';
-  import CartOverviewButton from './CartOverviewButton.svelte';
-  import { getBookingHostContext, requireBookingService } from './booking-context';
-
-  interface Props {
-    api?: BookingApi;
-    cartManager?: CartManager;
-    display: CartOverviewDisplay;
-    onStateChange?: (state: CartOverviewState) => void;
-  }
-  let { api, cartManager, display, onStateChange }: Props = $props();
-
-  // Resolved here as well as in the children so a missing host names CartOverview, which is what the
-  // consumer actually wrote, rather than CartBar.
-  const bookingHost = getBookingHostContext();
-  let resolvedApi = $derived(requireBookingService(api ?? bookingHost?.api, 'CartOverview', 'api'));
-  let resolvedCartManager = $derived(
-    requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartOverview', 'cartManager'),
-  );
-</script>
-
-{#if display === 'button'}
-  <CartOverviewButton api={resolvedApi} cartManager={resolvedCartManager} {onStateChange} />
-{:else}
-  <CartBar api={resolvedApi} cartManager={resolvedCartManager} {onStateChange} />
-{/if}
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import type { CartOverviewDisplay, CartOverviewState } from './config';
+  import { CartManager } from './cart-manager';
+  import CartBar from './CartBar.svelte';
+  import CartOverviewButton from './CartOverviewButton.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+
+  interface Props {
+    api?: BookingApi;
+    cartManager?: CartManager;
+    display: CartOverviewDisplay;
+    onStateChange?: (state: CartOverviewState) => void;
+  }
+  let { api, cartManager, display, onStateChange }: Props = $props();
+
+  // Resolved here as well as in the children so a missing host names CartOverview, which is what the
+  // consumer actually wrote, rather than CartBar.
+  const bookingHost = getBookingHostContext();
+  let resolvedApi = $derived(requireBookingService(api ?? bookingHost?.api, 'CartOverview', 'api'));
+  let resolvedCartManager = $derived(
+    requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartOverview', 'cartManager'),
+  );
+</script>
+
+{#if display === 'button'}
+  <CartOverviewButton api={resolvedApi} cartManager={resolvedCartManager} {onStateChange} />
+{:else}
+  <CartBar api={resolvedApi} cartManager={resolvedCartManager} {onStateChange} />
+{/if}

package/src/lib/CartOverviewButton.svelte

@@ -1,104 +1,104 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import type { CartOverviewState } from './config';
-  import { CartManager } from './cart-manager';
-  import { postMessage } from './messages';
-  import { formatRemaining, cartDeadline } from './cart-expiry';
-  import { createCartOverview } from './cart-overview.svelte';
-  import { onDestroy } from 'svelte';
-  import { getBookingHostContext, requireBookingService } from './booking-context';
-
-  interface Props {
-    api?: BookingApi;
-    cartManager?: CartManager;
-    // Lets a host render its own summary against the same state the button is in, rather than inferring it
-    // from an empty DOM - see cart-overview.svelte.ts.
-    onStateChange?: (state: CartOverviewState) => void;
-  }
-  let { api, cartManager, onStateChange }: Props = $props();
-
-  const bookingHost = getBookingHostContext();
-  const overview = createCartOverview(
-    () => requireBookingService(api ?? bookingHost?.api, 'CartOverviewButton', 'api'),
-    () => requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartOverviewButton', 'cartManager'),
-    (s) => onStateChange?.(s),
-  );
-  let cart = $derived(overview.cart);
-
-  let remaining = $state('');
-
-  function updateTimer() {
-    remaining = cart ? formatRemaining(cartDeadline(cart).getTime() - Date.now()) : formatRemaining(0);
-  }
-
-  updateTimer();
-  const interval = setInterval(updateTimer, 1000);
-  onDestroy(() => clearInterval(interval));
-
-  let itemCount = $derived(cart?.items.length ?? 0);
-</script>
-
-{#if overview.state === 'error'}
-  <!-- An empty cart and a cart that could not be read used to render identically (as nothing), leaving the
-       shopper with no route to checkout and no sign that anything had gone wrong. -->
-  <button class="cart-overview-btn is-error bw-widget" onclick={() => overview.reload()}>
-    <span class="cart-error-label">Cart unavailable - retry</span>
-  </button>
-{:else if cart && cart.items.length > 0}
-  <button class="cart-overview-btn bw-widget" onclick={() => postMessage({ type: 'modal:open' })}>
-    <svg class="cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
-      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
-    </svg>
-    <span class="cart-badge">{itemCount}</span>
-    <span class="cart-timer">{remaining}</span>
-  </button>
-{/if}
-
-<style>
-  .cart-overview-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 14px;
-    width: 100%;
-    padding: 14px 24px;
-    background: var(--bw-color-primary);
-    color: white;
-    border: none;
-    border-radius: 999px;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-  .cart-overview-btn:hover {
-    background: var(--bw-color-primary-dark);
-  }
-  .cart-icon {
-    width: 22px;
-    height: 22px;
-    flex-shrink: 0;
-  }
-  .cart-badge {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    background: white;
-    color: var(--bw-color-primary);
-    border-radius: 50%;
-    font-size: 14px;
-    font-weight: 800;
-    flex-shrink: 0;
-  }
-  .cart-timer {
-    font-variant-numeric: tabular-nums;
-    font-size: 20px;
-    font-weight: 700;
-    flex-shrink: 0;
-  }
-  .cart-error-label {
-    font-size: 15px;
-    font-weight: 600;
-  }
-</style>
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import type { CartOverviewState } from './config';
+  import { CartManager } from './cart-manager';
+  import { postMessage } from './messages';
+  import { formatRemaining, cartDeadline } from './cart-expiry';
+  import { createCartOverview } from './cart-overview.svelte';
+  import { onDestroy } from 'svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+
+  interface Props {
+    api?: BookingApi;
+    cartManager?: CartManager;
+    // Lets a host render its own summary against the same state the button is in, rather than inferring it
+    // from an empty DOM - see cart-overview.svelte.ts.
+    onStateChange?: (state: CartOverviewState) => void;
+  }
+  let { api, cartManager, onStateChange }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  const overview = createCartOverview(
+    () => requireBookingService(api ?? bookingHost?.api, 'CartOverviewButton', 'api'),
+    () => requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartOverviewButton', 'cartManager'),
+    (s) => onStateChange?.(s),
+  );
+  let cart = $derived(overview.cart);
+
+  let remaining = $state('');
+
+  function updateTimer() {
+    remaining = cart ? formatRemaining(cartDeadline(cart).getTime() - Date.now()) : formatRemaining(0);
+  }
+
+  updateTimer();
+  const interval = setInterval(updateTimer, 1000);
+  onDestroy(() => clearInterval(interval));
+
+  let itemCount = $derived(cart?.items.length ?? 0);
+</script>
+
+{#if overview.state === 'error'}
+  <!-- An empty cart and a cart that could not be read used to render identically (as nothing), leaving the
+       shopper with no route to checkout and no sign that anything had gone wrong. -->
+  <button class="cart-overview-btn is-error bw-widget" onclick={() => overview.reload()}>
+    <span class="cart-error-label">Cart unavailable - retry</span>
+  </button>
+{:else if cart && cart.items.length > 0}
+  <button class="cart-overview-btn bw-widget" onclick={() => postMessage({ type: 'modal:open' })}>
+    <svg class="cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
+      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
+    </svg>
+    <span class="cart-badge">{itemCount}</span>
+    <span class="cart-timer">{remaining}</span>
+  </button>
+{/if}
+
+<style>
+  .cart-overview-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    width: 100%;
+    padding: 14px 24px;
+    background: var(--bw-color-primary);
+    color: white;
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .cart-overview-btn:hover {
+    background: var(--bw-color-primary-dark);
+  }
+  .cart-icon {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+  }
+  .cart-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    background: white;
+    color: var(--bw-color-primary);
+    border-radius: 50%;
+    font-size: 14px;
+    font-weight: 800;
+    flex-shrink: 0;
+  }
+  .cart-timer {
+    font-variant-numeric: tabular-nums;
+    font-size: 20px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+  .cart-error-label {
+    font-size: 15px;
+    font-weight: 600;
+  }
+</style>

package/src/lib/Checkout.svelte

@@ -1,141 +1,141 @@
-<script lang="ts">
-  // The presentation shell around CheckoutPanel. Modal chrome lives here rather than in
-  // elements/bw-checkout.svelte so both builds render the same modal from one implementation - an ES consumer
-  // composing the components itself used to get no modal at all, and had to rebuild the overlay, the scrim,
-  // the click-outside close and the portal by hand.
-  import type { BookingApi } from './api';
-  import type { WizardPages } from './config';
-  import { DEFAULT_WIZARD_PAGES } from './config';
-  import type { CartManager } from './cart-manager';
-  import { onWidgetMessage, postMessage } from './messages';
-  import { portal } from './portal';
-  import CheckoutPanel from './CheckoutPanel.svelte';
-  import { getBookingHostContext, requireBookingService } from './booking-context';
-  import type { CheckoutMode } from './config';
-
-  interface Props {
-    // Optional when a BookingProvider is above this component - it supplies both from its host.
-    api?: BookingApi;
-    cartManager?: CartManager;
-    wizardPages?: WizardPages;
-    editPages?: WizardPages;
-    autoSelectSingleTimeSlot?: boolean;
-    // Inline by default: a consumer already rendering <Checkout> in a panel of its own keeps exactly the
-    // layout it has. createBookingHost asks for 'modal', so anyone wiring up through the host gets the modal
-    // without opting in.
-    mode?: CheckoutMode;
-    // Modal only. A host that owns the open state (see createBookingHost) drives this from outside; a
-    // consumer that renders <Checkout mode="modal" /> and nothing else gets a modal that is open and closes
-    // itself. Note that reopening it after a dismissal means setting open - a modal with no open state has
-    // no way back, by construction, since nothing owns the answer to "should it be showing now".
-    open?: boolean;
-    onClose?: () => void;
-  }
-
-  let {
-    api: apiProp,
-    cartManager: cartManagerProp,
-    wizardPages = DEFAULT_WIZARD_PAGES,
-    editPages,
-    autoSelectSingleTimeSlot = false,
-    mode = 'inline',
-    open: openProp,
-    onClose: onCloseProp,
-  }: Props = $props();
-
-  const bookingHost = getBookingHostContext();
-  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'Checkout', 'api'));
-  let cartManager = $derived(cartManagerProp ?? bookingHost?.cartManager);
-
-  // With a provider the host owns whether checkout is open, so the modal opens on an add-to-cart and closes
-  // on a dismissal with nothing wired up by hand - which is the whole point of the provider. An explicit
-  // open prop still wins, and with neither the modal is simply open, so <Checkout mode="modal" /> on its own
-  // shows something rather than nothing.
-  let open = $derived(openProp ?? bookingHost?.isCheckoutOpen ?? true);
-  let onClose = $derived(onCloseProp ?? (bookingHost ? () => bookingHost.closeCheckout() : undefined));
-
-  let isModal = $derived(mode === 'modal');
-  // Dismissing is answered here as well as reported outwards, so a consumer that passes no open state at all
-  // still gets a modal that closes. A host that does own the state reopens by setting open, which clears
-  // this - see the effect below.
-  let dismissed = $state(false);
-  let isOpen = $derived(!isModal || (open && !dismissed));
-
-  // Whether this dismissal has already been reported. Deliberately a plain variable rather than $state: the
-  // panel posts its own modal:close as it is torn down, which arrives while Svelte is still flushing the
-  // teardown, and a $state write made there is not yet readable by the time that second message is handled -
-  // so guarding on `dismissed` let onClose fire twice for one dismissal.
-  let reported = false;
-
-  // Cleared on a shut -> open transition only, never merely because open is true. An uncontrolled consumer
-  // leaves open at its default forever, so resetting on the level would undo the dismissal the moment this
-  // effect ran again. wasOpen is the effect's memory, not one of its dependencies.
-  let wasOpen = false;
-  $effect(() => {
-    const nowOpen = open;
-    if (nowOpen && !wasOpen) {
-      dismissed = false;
-      reported = false;
-    }
-    wasOpen = nowOpen;
-  });
-
-  // The scrim and Escape only announce the dismissal; the listener below is what acts on it. The panel has
-  // its own ways out - CheckoutModal's close button, and the expired view's "start again" - and each posts
-  // this same message, so routing every dismissal through one place is what keeps onClose from firing for
-  // some of them and not others.
-  function close() {
-    postMessage({ type: 'modal:close' });
-  }
-
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type !== 'modal:close' || !isModal || reported) return;
-    // Only while this modal is actually showing. modal:close is page-wide and several things post it
-    // without any modal being up - the expiry guard's "start again", a cancelable configurator - and
-    // treating those as a dismissal fired onClose for something the shopper never did.
-    if (!isOpen) return;
-    reported = true;
-    dismissed = true;
-    onClose?.();
-  }));
-
-  function onKeydown(e: KeyboardEvent) {
-    if (isOpen && isModal && e.key === 'Escape') close();
-  }
-</script>
-
-<svelte:window onkeydown={onKeydown} />
-
-{#if isModal}
-  {#if isOpen}
-    <!-- Portalled to <body>: a fixed overlay cannot escape a transformed, filtered or sticky ancestor, which
-         is exactly what a product page's sticky sidebar is - see portal.ts. -->
-    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-    <div class="bw-modal-overlay" use:portal onclick={close}>
-      <div class="bw-modal-inner" onclick={(e) => e.stopPropagation()}>
-        <CheckoutPanel {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
-      </div>
-    </div>
-  {/if}
-{:else}
-  <CheckoutPanel {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
-{/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>
+<script lang="ts">
+  // The presentation shell around CheckoutPanel. Modal chrome lives here rather than in
+  // elements/bw-checkout.svelte so both builds render the same modal from one implementation - an ES consumer
+  // composing the components itself used to get no modal at all, and had to rebuild the overlay, the scrim,
+  // the click-outside close and the portal by hand.
+  import type { BookingApi } from './api';
+  import type { WizardPages } from './config';
+  import { DEFAULT_WIZARD_PAGES } from './config';
+  import type { CartManager } from './cart-manager';
+  import { onWidgetMessage, postMessage } from './messages';
+  import { portal } from './portal';
+  import CheckoutPanel from './CheckoutPanel.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+  import type { CheckoutMode } from './config';
+
+  interface Props {
+    // Optional when a BookingProvider is above this component - it supplies both from its host.
+    api?: BookingApi;
+    cartManager?: CartManager;
+    wizardPages?: WizardPages;
+    editPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
+    // Inline by default: a consumer already rendering <Checkout> in a panel of its own keeps exactly the
+    // layout it has. createBookingHost asks for 'modal', so anyone wiring up through the host gets the modal
+    // without opting in.
+    mode?: CheckoutMode;
+    // Modal only. A host that owns the open state (see createBookingHost) drives this from outside; a
+    // consumer that renders <Checkout mode="modal" /> and nothing else gets a modal that is open and closes
+    // itself. Note that reopening it after a dismissal means setting open - a modal with no open state has
+    // no way back, by construction, since nothing owns the answer to "should it be showing now".
+    open?: boolean;
+    onClose?: () => void;
+  }
+
+  let {
+    api: apiProp,
+    cartManager: cartManagerProp,
+    wizardPages = DEFAULT_WIZARD_PAGES,
+    editPages,
+    autoSelectSingleTimeSlot = false,
+    mode = 'inline',
+    open: openProp,
+    onClose: onCloseProp,
+  }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'Checkout', 'api'));
+  let cartManager = $derived(cartManagerProp ?? bookingHost?.cartManager);
+
+  // With a provider the host owns whether checkout is open, so the modal opens on an add-to-cart and closes
+  // on a dismissal with nothing wired up by hand - which is the whole point of the provider. An explicit
+  // open prop still wins, and with neither the modal is simply open, so <Checkout mode="modal" /> on its own
+  // shows something rather than nothing.
+  let open = $derived(openProp ?? bookingHost?.isCheckoutOpen ?? true);
+  let onClose = $derived(onCloseProp ?? (bookingHost ? () => bookingHost.closeCheckout() : undefined));
+
+  let isModal = $derived(mode === 'modal');
+  // Dismissing is answered here as well as reported outwards, so a consumer that passes no open state at all
+  // still gets a modal that closes. A host that does own the state reopens by setting open, which clears
+  // this - see the effect below.
+  let dismissed = $state(false);
+  let isOpen = $derived(!isModal || (open && !dismissed));
+
+  // Whether this dismissal has already been reported. Deliberately a plain variable rather than $state: the
+  // panel posts its own modal:close as it is torn down, which arrives while Svelte is still flushing the
+  // teardown, and a $state write made there is not yet readable by the time that second message is handled -
+  // so guarding on `dismissed` let onClose fire twice for one dismissal.
+  let reported = false;
+
+  // Cleared on a shut -> open transition only, never merely because open is true. An uncontrolled consumer
+  // leaves open at its default forever, so resetting on the level would undo the dismissal the moment this
+  // effect ran again. wasOpen is the effect's memory, not one of its dependencies.
+  let wasOpen = false;
+  $effect(() => {
+    const nowOpen = open;
+    if (nowOpen && !wasOpen) {
+      dismissed = false;
+      reported = false;
+    }
+    wasOpen = nowOpen;
+  });
+
+  // The scrim and Escape only announce the dismissal; the listener below is what acts on it. The panel has
+  // its own ways out - CheckoutModal's close button, and the expired view's "start again" - and each posts
+  // this same message, so routing every dismissal through one place is what keeps onClose from firing for
+  // some of them and not others.
+  function close() {
+    postMessage({ type: 'modal:close' });
+  }
+
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type !== 'modal:close' || !isModal || reported) return;
+    // Only while this modal is actually showing. modal:close is page-wide and several things post it
+    // without any modal being up - the expiry guard's "start again", a cancelable configurator - and
+    // treating those as a dismissal fired onClose for something the shopper never did.
+    if (!isOpen) return;
+    reported = true;
+    dismissed = true;
+    onClose?.();
+  }));
+
+  function onKeydown(e: KeyboardEvent) {
+    if (isOpen && isModal && e.key === 'Escape') close();
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if isModal}
+  {#if isOpen}
+    <!-- Portalled to <body>: a fixed overlay cannot escape a transformed, filtered or sticky ancestor, which
+         is exactly what a product page's sticky sidebar is - see portal.ts. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div class="bw-modal-overlay" use:portal onclick={close}>
+      <div class="bw-modal-inner" onclick={(e) => e.stopPropagation()}>
+        <CheckoutPanel {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
+      </div>
+    </div>
+  {/if}
+{:else}
+  <CheckoutPanel {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
+{/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>