@code-collective/booking-widget 1.0.12 → 1.0.14

package/src/lib/CheckoutPanel.svelte

@@ -1,121 +1,121 @@
-<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();
-    postMessage({ type: 'cart:updated', cart: null });
-    postMessage({ type: 'cart:expired' });
-  }
-
-  // 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.
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
-  }));
-</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">
+  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();
+    postMessage({ type: 'cart:updated', cart: null });
+    postMessage({ type: 'cart:expired' });
+  }
+
+  // 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.
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
+  }));
+</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>