@code-collective/booking-widget 1.0.9 → 1.0.12

package/src/lib/CartOverviewButton.svelte

@@ -1,101 +1,104 @@
-<script lang="ts">
-  import type { CheckoutCartDetailDto } from './client-types';
-  import type { BookingApi } from './api';
-  import { CartManager } from './cart-manager';
-  import { onWidgetMessage, postMessage } from './messages';
-  import { formatRemaining, cartDeadline } from './cart-expiry';
-  import { onDestroy } from 'svelte';
-
-  interface Props {
-    api: BookingApi;
-    cartManager: CartManager;
-  }
-  let { api, cartManager }: Props = $props();
-
-  let cart = $state<CheckoutCartDetailDto | null>(null);
-  let remaining = $state('');
-
-  async function load() {
-    if (!cartManager.hasCart) return;
-    try {
-      cart = await api.getCart();
-    } catch {
-      cart = null;
-    }
-  }
-
-  load();
-
-  // load() above only runs once on mount - without this, adding/editing/removing an item elsewhere on the
-  // page (the configurator, or the checkout modal's own edit/remove) leaves this button showing a stale total.
-  // The event already carries the fresh cart (see TicketConfigurator/CheckoutModal's own posting sites), so
-  // this applies it directly rather than triggering a second, redundant getCart() call.
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
-  }));
-
-  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 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;
-  }
-</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,128 +1,141 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import type { WizardPages } from './config';
-  import { DEFAULT_WIZARD_PAGES } from './config';
-  import type { CheckoutCartDetailDto } from './client-types';
-  import { isInvalidCart } from './api';
-  import { onWidgetMessage, postMessage } from './messages';
-  import type { CartManager } from './cart-manager';
-  import CheckoutModal from './CheckoutModal.svelte';
-  import CartExpiredView from './CartExpiredView.svelte';
-
-  interface Props {
-    api: BookingApi;
-    cartManager?: CartManager;
-    wizardPages?: WizardPages;
-    editPages?: WizardPages;
-    autoSelectSingleTimeSlot?: boolean;
-  }
-  let { api, cartManager, wizardPages = DEFAULT_WIZARD_PAGES, editPages: editPagesProp,
-    autoSelectSingleTimeSlot = false }: Props = $props();
-  let editPages = $derived(editPagesProp ?? wizardPages);
-
-  let cart = $state<CheckoutCartDetailDto | null>(null);
-  let isLoading = $state(true);
-  let expired = $state(false);
-
-  async function load() {
-    // A token this widget still holds for a cart the server has already let go (its window ran out while the
-    // tab sat there) used to render as a bare "No items in cart", with the dead token left in storage for the
-    // next add to trip over. Only a held token can mean that - with none, an empty cart is just empty.
-    const hadCart = api.cartToken !== '';
-    try {
-      cart = await api.getCart();
-    } catch (e) {
-      cart = null;
-      if (hadCart && isInvalidCart(e)) {
-        onCartExpired();
-        expired = true;
-      }
-    }
-    isLoading = false;
-  }
-
-  load();
-
-  // Drops the stored token so whatever the shopper does next starts a fresh cart, and clears bw-cart's
-  // bar/button and any host-side summary built from bw:cart-updated - the cart they were describing no longer
-  // exists. Mirrors what onOrderConfirmed below does once a cart has served its purpose the other way.
-  function onCartExpired() {
-    cartManager?.reset();
-    // See CartExpiryGuard.svelte's own expire() for why this is posted alongside, and before, cart:updated.
-    postMessage({ type: 'cart:expired' });
-    postMessage({ type: 'cart:updated', cart: null });
-  }
-
-  // In modal mode, modal:close is what actually dismisses this screen - bw-checkout.svelte remounts this
-  // component fresh the next time it opens, so the click is fully handled there. Rendered permanently
-  // in-page instead, nothing is listening for modal:close, so without the reload below the click would do
-  // nothing a shopper can see: expired flips off, but cart is still the stale null from the load() that
-  // found it gone, leaving the same "No items in cart" text up with no sign anything happened.
-  function startAgain() {
-    expired = false;
-    postMessage({ type: 'modal:close' });
-    void load();
-  }
-
-  // In modal mode this is redundant - bw-checkout.svelte only mounts this component fresh each time the
-  // modal opens, so it already gets a current cart. Rendered permanently in-page instead (no is-modal), it
-  // would otherwise only ever see the cart as it was on first mount. The event already carries the fresh
-  // cart (see TicketConfigurator/CheckoutModal's own posting sites), so this applies it directly rather than
-  // triggering a second, redundant getCart() call or flashing the spinner over an already-visible cart.
-  //
-  // cart:expired is CartExpiryGuard's own signal that the clock (not a manual clear) is why the cart just
-  // went null - it fires page-wide, including while this modal is already open showing a live cart, and
-  // without it this falls through to the plain "No items in cart" branch below instead of CartExpiredView,
-  // exactly as if the shopper had simply never had anything in their cart at all.
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
-    if (d.type === 'cart:expired') expired = true;
-  }));
-</script>
-
-<div class="bw-widget">
-  {#if isLoading}
-    <div class="loading-center" style="height:100vh">
-      <div class="spinner"></div>
-    </div>
-  {:else if cart && cart.items.length > 0}
-    <CheckoutModal
-      {cart}
-      {api}
-      {wizardPages}
-      {editPages}
-      {autoSelectSingleTimeSlot}
-      onClose={() => postMessage({ type: 'modal:close' })}
-      onOrderConfirmed={() => {
-        const total = cart!.items.reduce((s, i) => s + i.amount, 0);
-        const currency = cart!.items[0]?.currencyCode ?? 'ZAR';
-        postMessage({
-          type: 'order:complete',
-          cartToken: cart!.cartToken,
-          value: total,
-          currency,
-        });
-        // The cart is paid and confirmed, so its token has done its job. Nothing used to clear it, so it sat
-        // in localStorage on the merchant's origin until absoluteExpiresAt - readable by every third-party
-        // script they load, and picked up by the next person to use a shared or kiosk browser.
-        cartManager?.reset();
-      }}
-    />
-  {:else if expired}
-    <div style="height:100vh">
-      <CartExpiredView onStartAgain={startAgain} />
-    </div>
-  {:else}
-    <div class="loading-center" style="height:100vh;color:var(--bw-color-text-secondary)">
-      No items in cart.
-    </div>
-  {/if}
-</div>
-
-<style>
-  /* display: contents - a plain box here would break CheckoutModal's own .modal{height:100%}, which needs
-     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
-  .bw-widget {
-    display: contents;
-  }
-</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>