@code-collective/booking-widget 1.0.12 → 1.0.14

package/src/lib/cart-overview.svelte.ts

@@ -1,97 +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(),
-  };
-}
+// 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/checkout-item-view.ts

@@ -0,0 +1,63 @@
+// Pure view-model helpers for rendering a CheckoutCartDetailDto's items - split out of CheckoutModal.svelte
+// because none of these hold or need reactive state of their own; they are plain functions of the item (and,
+// for the ones that need titles/units, the already-loaded product catalog), called straight from the
+// template on every render.
+
+import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutProductDto } from './client-types';
+
+export function cartTotal(cart: CheckoutCartDetailDto): number {
+  return cart.items.reduce((s, i) => s + i.amount, 0);
+}
+
+// Every item in one cart shares a currency (PayCheckoutCartCommandHandler refuses to mix them), so the first
+// item's is the cart's - defaulting to ZAR only for the moment before the first item exists.
+export function cartCurrency(cart: CheckoutCartDetailDto): string {
+  return cart.items[0]?.currencyCode ?? 'ZAR';
+}
+
+export function productTitle(item: CheckoutCartItemDetailDto, productsById: Map<string, CheckoutProductDto>): string {
+  return productsById.get(item.productId)?.title ?? item.productId;
+}
+
+export function optionTitle(item: CheckoutCartItemDetailDto, productsById: Map<string, CheckoutProductDto>): string {
+  const product = productsById.get(item.productId);
+  return product?.options.find((o) => o.id === item.optionId)?.title ?? item.optionId;
+}
+
+export interface GroupedUnit {
+  unitId: string;
+  title: string;
+  quantity: number;
+  linePrice: number;
+}
+
+export function groupUnits(
+  item: CheckoutCartItemDetailDto,
+  productsById: Map<string, CheckoutProductDto>,
+): GroupedUnit[] {
+  const product = productsById.get(item.productId);
+  const option = product?.options.find((o) => o.id === item.optionId);
+  const counts = new Map<string, number>();
+  for (const u of item.unitItems) {
+    counts.set(u.unitId, (counts.get(u.unitId) ?? 0) + 1);
+  }
+  return [...counts.entries()].map(([unitId, quantity]) => {
+    const unit = option?.units.find((u) => u.id === unitId);
+    const unitPrice = unit?.pricing?.[0]?.retail ?? 0;
+    return {
+      unitId,
+      title: unit?.title ?? unitId,
+      quantity,
+      linePrice: unitPrice * quantity,
+    };
+  });
+}
+
+export function itemDateLabel(item: CheckoutCartItemDetailDto): string | null {
+  if (!item.availabilityId) return null;
+  const match = item.availabilityId.match(/(\d{4})-(\d{2})-(\d{2})/);
+  if (!match) return null;
+  const d = new Date(+match[1], +match[2] - 1, +match[3]);
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
+}