@code-collective/booking-widget 1.0.10 → 1.0.12

package/package.json

@@ -1,55 +1,58 @@
-{
-  "name": "@code-collective/booking-widget",
-  "version": "1.0.10",
-  "type": "module",
-  "main": "dist/booking-widget.umd.cjs",
-  "module": "dist/booking-widget.js",
-  "svelte": "src/lib/index.ts",
-  "exports": {
-    ".": {
-      "svelte": "./src/lib/index.ts",
-      "import": "./dist/booking-widget.js",
-      "require": "./dist/booking-widget.umd.cjs"
-    },
-    "./style.css": "./dist/booking-widget.css",
-    "./elements": "./dist/booking-widget.min.js"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "prepublishOnly": "npm run build && npm run build:elements",
-    "build:elements": "vite build --mode elements",
-    "postbuild:elements": "node -e \"const{readFileSync:r}=require('fs'),{createHash:h}=require('crypto');['dist/booking-widget.min.js','dist/booking-widget.min.css'].forEach(f=>{const d=h('sha384').update(r(f)).digest('base64');console.log(f+' -> sha384-'+d)})\"",
-    "build:demo": "vite build --mode demo",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest run",
-    "release": "node scripts/publish.cjs"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@testing-library/svelte": "^5.4.2",
-    "@tsconfig/svelte": "^5.0.0",
-    "jsdom": "^30.0.1",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.5.0",
-    "vite": "^8.2.2",
-    "vitest": "^5.0.0"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "svelte": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "openapi-fetch": "^0.17.0"
-  }
-}
+{
+  "name": "@code-collective/booking-widget",
+  "version": "1.0.12",
+  "type": "module",
+  "main": "dist/booking-widget.umd.cjs",
+  "module": "dist/booking-widget.js",
+  "svelte": "src/lib/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "import": "./dist/booking-widget.js",
+      "require": "./dist/booking-widget.umd.cjs"
+    },
+    "./style.css": "./dist/booking-widget.css",
+    "./elements": "./dist/booking-widget.min.js"
+  },
+  "files": [
+    "dist",
+    "src/lib",
+    "!src/lib/**/*.test.ts",
+    "!src/lib/test",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build && npm run build:elements",
+    "build:elements": "vite build --mode elements",
+    "postbuild:elements": "node -e \"const{readFileSync:r}=require('fs'),{createHash:h}=require('crypto');['dist/booking-widget.min.js','dist/booking-widget.min.css'].forEach(f=>{const d=h('sha384').update(r(f)).digest('base64');console.log(f+' -> sha384-'+d)})\"",
+    "build:demo": "vite build --mode demo",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "release": "node scripts/publish.cjs"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@testing-library/svelte": "^5.4.2",
+    "@tsconfig/svelte": "^5.0.0",
+    "jsdom": "^30.0.1",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.5.0",
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "openapi-fetch": "^0.17.0"
+  }
+}

package/src/lib/BookingProvider.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  // Puts a host in context for everything beneath it. The host itself is still built by the consumer -
+  // createBookingHost() works anywhere, including a module shared across several Astro islands, and this
+  // only decides which components can see it.
+  import type { Snippet } from 'svelte';
+  import type { BookingHost } from './host.svelte';
+  import { setBookingHostContext } from './booking-context';
+
+  interface Props {
+    host: BookingHost;
+    children: Snippet;
+  }
+  let { host, children }: Props = $props();
+
+  // Read once, deliberately: context is set at initialisation and a provider serves one host for its
+  // lifetime. Swapping hosts mid-flight would strand every component already reading the old one.
+  // svelte-ignore state_referenced_locally
+  setBookingHostContext(host);
+</script>
+
+{@render children()}

package/src/lib/CartBar.svelte

@@ -1,41 +1,26 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import type { CheckoutCartDetailDto } from './client-types';
-  import { CartManager } from './cart-manager';
-  import { onWidgetMessage } from './messages';
-  import CartBarView from './CartBarView.svelte';
-
-  interface Props {
-    api: BookingApi;
-    cartManager: CartManager;
-  }
-  let { api, cartManager }: Props = $props();
-
-  let cart = $state<CheckoutCartDetailDto | null>(null);
-  let isLoading = $state(true);
-
-  async function load() {
-    if (cartManager.hasCart) {
-      try {
-        cart = await api.getCart();
-      } catch {
-        cart = null;
-      }
-    }
-    isLoading = false;
-  }
-
-  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 bar 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;
-  }));
-</script>
-
-{#if !isLoading}
-  <CartBarView {cart} />
-{/if}
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import type { CartOverviewState } from './config';
+  import { CartManager } from './cart-manager';
+  import { createCartOverview } from './cart-overview.svelte';
+  import CartBarView from './CartBarView.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 bar 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, 'CartBar', 'api'),
+    () => requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartBar', 'cartManager'),
+    (s) => onStateChange?.(s),
+  );
+</script>
+
+<CartBarView cart={overview.cart} state={overview.state} onRetry={overview.reload} />

package/src/lib/CartBarView.svelte

@@ -1,61 +1,78 @@
-<script lang="ts">
-  import type { CheckoutCartDetailDto } from './client-types';
-  import { formatCurrency } from './currency';
-  import { postMessage } from './messages';
-  import CountdownTimer from './CountdownTimer.svelte';
-  import { cartDeadline } from './cart-expiry';
-
-  interface Props {
-    cart: CheckoutCartDetailDto | null;
-  }
-  let { cart }: Props = $props();
-
-  let itemCount = $derived(cart?.items.length ?? 0);
-
-  let totalLabel = $derived(() => {
-    if (!cart || cart.items.length === 0) return '';
-    const currency = cart.items[0].currencyCode;
-    const total = cart.items.reduce((sum, i) => sum + i.amount, 0);
-    return formatCurrency(total, currency, 2, 2);
-  });
-
-  let expiresAt = $derived(() => cart ? cartDeadline(cart) : new Date());
-</script>
-
-{#if cart && cart.items.length > 0}
-  <div class="cart-bar bw-widget">
-    <div class="cart-info">
-      <span class="item-count">{itemCount === 1 ? '1 item' : `${itemCount} items`} <CountdownTimer expiresAt={expiresAt()} /></span>
-      <span class="total">{totalLabel()}</span>
-    </div>
-    <button class="btn btn-primary" onclick={() => postMessage({ type: 'modal:open' })}>
-      Checkout &rarr;
-    </button>
-  </div>
-{/if}
-
-<style>
-  .cart-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: white;
-    border-top: 1px solid var(--bw-color-border);
-    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
-    width: 100%;
-  }
-  .cart-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .item-count {
-    font-size: 12px;
-    color: var(--bw-color-text-secondary);
-  }
-  .total {
-    font-size: 16px;
-    font-weight: 700;
-  }
-</style>
+<script lang="ts">
+  import type { CheckoutCartDetailDto } from './client-types';
+  import type { CartOverviewState } from './config';
+  import { formatCurrency } from './currency';
+  import { postMessage } from './messages';
+  import CountdownTimer from './CountdownTimer.svelte';
+  import { cartDeadline } from './cart-expiry';
+
+  interface Props {
+    cart: CheckoutCartDetailDto | null;
+    state?: CartOverviewState;
+    onRetry?: () => void;
+  }
+  let { cart, state = 'ready', onRetry }: Props = $props();
+
+  let itemCount = $derived(cart?.items.length ?? 0);
+
+  let totalLabel = $derived(() => {
+    if (!cart || cart.items.length === 0) return '';
+    const currency = cart.items[0].currencyCode;
+    const total = cart.items.reduce((sum, i) => sum + i.amount, 0);
+    return formatCurrency(total, currency, 2, 2);
+  });
+
+  let expiresAt = $derived(() => cart ? cartDeadline(cart) : new Date());
+</script>
+
+{#if state === 'error'}
+  <!-- An empty cart and a cart that could not be read used to render identically (as nothing), which left a
+       shopper on a narrow layout with no route to checkout and no sign that anything had gone wrong. -->
+  <div class="cart-bar bw-widget" role="alert">
+    <div class="cart-info">
+      <span class="item-count">Cart unavailable</span>
+      <span class="error-detail">We could not load your cart just now.</span>
+    </div>
+    <button class="btn btn-primary" onclick={() => onRetry?.()}>Retry</button>
+  </div>
+{:else if cart && cart.items.length > 0}
+  <div class="cart-bar bw-widget">
+    <div class="cart-info">
+      <span class="item-count">{itemCount === 1 ? '1 item' : `${itemCount} items`} <CountdownTimer expiresAt={expiresAt()} /></span>
+      <span class="total">{totalLabel()}</span>
+    </div>
+    <button class="btn btn-primary" onclick={() => postMessage({ type: 'modal:open' })}>
+      Checkout
+    </button>
+  </div>
+{/if}
+
+<style>
+  .cart-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: white;
+    border-top: 1px solid var(--bw-color-border);
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
+    width: 100%;
+  }
+  .cart-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .item-count {
+    font-size: 12px;
+    color: var(--bw-color-text-secondary);
+  }
+  .error-detail {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .total {
+    font-size: 16px;
+    font-weight: 700;
+  }
+</style>

package/src/lib/CartExpiryGuard.svelte

@@ -16,15 +16,22 @@
   import CartExpiryWatcher from './CartExpiryWatcher.svelte';
   import StillTherePrompt from './StillTherePrompt.svelte';
   import CartExpiredView from './CartExpiredView.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
 
   interface Props {
-    api: BookingApi;
-    cartManager: CartManager;
+    api?: BookingApi;
+    cartManager?: CartManager;
     // Whether the "are you still there?" prompt is offered - see EXTENSION_ENABLED. Off, the guard only ever
     // shows the expired view at 0:00; the clock itself is unchanged either way.
     extensionEnabled?: boolean;
   }
-  let { api, cartManager, extensionEnabled = EXTENSION_ENABLED }: Props = $props();
+  let { api: apiProp, cartManager: cartManagerProp, extensionEnabled = EXTENSION_ENABLED }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'CartExpiryGuard', 'api'));
+  let cartManager = $derived(
+    requireBookingService(cartManagerProp ?? bookingHost?.cartManager, 'CartExpiryGuard', 'cartManager'),
+  );
 
   let cart = $state<CheckoutCartDetailDto | null>(null);
   let remaining = $state('');
@@ -322,14 +329,13 @@
     clearTimers();
     closed = true;
     cartManager.reset();
-    // Posted first so a listener that cares about expiry specifically (register.ts's bw:cart-expired) hears
-    // it before the more general cart:updated below - order does not matter to either side today, but this
-    // keeps the more specific signal from ever reading as a follow-up to the general one.
-    postMessage({ type: 'cart:expired' });
     // Tells bw-cart/CartOverviewButton/CheckoutModal (if it happens to be mounted) the cart is gone, the same
-    // signal a manual remove-to-empty already sends - see Checkout.svelte's own onCartExpired for the other
-    // caller of this exact message.
+    // signal a manual remove-to-empty already sends - see CheckoutPanel's own onCartExpired for the other
+    // caller of this exact message. cart:expired follows it because a null cart alone does not say why: a
+    // confirmed order clears the cart the same way, and a host announcing "your cart expired" needs the two
+    // apart.
     postMessage({ type: 'cart:updated', cart: null });
+    postMessage({ type: 'cart:expired' });
   }
 
   function startAgain() {

package/src/lib/CartOverview.svelte

@@ -1,20 +1,30 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import type { CartOverviewDisplay } from './config';
-  import { CartManager } from './cart-manager';
-  import CartBar from './CartBar.svelte';
-  import CartOverviewButton from './CartOverviewButton.svelte';
-
-  interface Props {
-    api: BookingApi;
-    cartManager: CartManager;
-    display: CartOverviewDisplay;
-  }
-  let { api, cartManager, display }: Props = $props();
-</script>
-
-{#if display === 'button'}
-  <CartOverviewButton {api} {cartManager} />
-{:else}
-  <CartBar {api} {cartManager} />
-{/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}