@code-collective/booking-widget 1.0.10 → 1.0.12

package/src/lib/TicketConfigurator.svelte

@@ -1,152 +1,166 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import { ApiError, isPriceMismatch } from './api';
-  import type { WizardPages } from './config';
-  import { DEFAULT_WIZARD_PAGES } from './config';
-  import type { CartItem, CheckoutProductDto } from './client-types';
-  import { CartManager } from './cart-manager';
-  import { postMessage } from './messages';
-  import { expandUnitItems } from './utils';
-  import { formatCurrency } from './currency';
-  import WizardPage from './WizardPage.svelte';
-
-  interface Props {
-    api: BookingApi;
-    cartManager: CartManager;
-    productId: string;
-    wizardPages?: WizardPages;
-    autoSelectSingleTimeSlot?: boolean;
-    onCancel?: () => void;
-  }
-  let { api, cartManager, productId, wizardPages = DEFAULT_WIZARD_PAGES, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
-
-  let product = $state<CheckoutProductDto | null>(null);
-  let isLoading = $state(true);
-  let isAddingToCart = $state(false);
-  let addToCartError = $state<string | null>(null);
-
-  async function load() {
-    product = await api.getProduct(productId);
-    isLoading = false;
-  }
-
-  load();
-
-  async function addItemToCart(item: CartItem): Promise<void> {
-    await cartManager.ensureCart();
-
-    const unitItems = expandUnitItems(item.units);
-    const added = await api.addCartItem({
-      productId: item.productId,
-      optionId: item.optionId,
-      unitItems,
-      availabilityId: item.availabilityId,
-      localDate: item.localDate,
-      pickupPointId: item.pickupPointId,
-      // Currency and precision are the supplier's to state, not ours - the API resolves both server-side and
-      // ignores anything sent here. Amount stays, but only as a claim about the price the customer was shown:
-      // the server accepts it solely when it matches what the supplier is asking or a price the server itself
-      // published, and returns PRICE_MISMATCH otherwise.
-      amount: item.totalPrice,
-    });
-
-    const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
-    postMessage({
-      type: 'cart:change',
-      itemCount: unitItems.length,
-      cartItemId: added.id,
-      totalFormatted: total,
-      openCheckout: true,
-    });
-    // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
-    // public bw:cart-change event. This one carries the fresh cart itself: CartBar/CartOverviewButton/Checkout
-    // use it to update their own state without each independently re-fetching, and it's forwarded to
-    // consumers as the public bw:cart-updated event/onCartUpdated callback - see this event's own doc comment
-    // in CheckoutModal (the other place it's posted from, after an edit/remove).
-    const cart = await api.getCart().catch(() => null);
-    postMessage({ type: 'cart:updated', cart });
-  }
-
-  async function onAddToCart(item: CartItem) {
-    isAddingToCart = true;
-    addToCartError = null;
-
-    try {
-      await addItemToCart(item);
-    } catch (e) {
-      // The supplier moved the price while the customer was configuring, and the amount they agreed to is no
-      // longer one the server accepts. Retrying is useless - the wizard still holds the old prices, so it
-      // would resubmit exactly the same amount and fail identically. The only way out is to re-fetch and let
-      // the customer see the new price, which is what the message asks them to do.
-      if (isPriceMismatch(e)) {
-        await reloadAfterPriceChange();
-        return;
-      }
-
-      // CartManager only knows a cart is expired from timestamps it saw at creation - it can't see the
-      // server's idle window sliding forward, so a cart that looks valid locally can still be rejected
-      // server-side. A 401/404 here means exactly that: drop the stale cart and retry once with a fresh one
-      // before giving up, rather than leaving the user stuck with no feedback and no way to proceed.
-      const isStaleCart = e instanceof ApiError && (e.status === 401 || e.status === 404);
-      if (isStaleCart) {
-        cartManager.reset();
-        try {
-          await addItemToCart(item);
-        } catch {
-          addToCartError = 'Something went wrong adding this to your cart. Please try again.';
-        }
-      } else {
-        addToCartError = 'Something went wrong adding this to your cart. Please try again.';
-      }
-    } finally {
-      isAddingToCart = false;
-    }
-  }
-
-  async function reloadAfterPriceChange() {
-    addToCartError = "This ticket's price has changed since you started. Please check the updated price and try again.";
-    try {
-      await load();
-    } catch {
-      // The reload is what makes the message actionable; if even that fails the customer needs to start over
-      // rather than be left looking at prices we already know are wrong.
-      addToCartError = "This ticket's price has changed and we could not load the new one. Please reload the page.";
-    }
-  }
-</script>
-
-<div class="bw-widget">
-  {#if isLoading || isAddingToCart}
-    <div class="loading-center" style="height:100vh">
-      <div class="spinner"></div>
-    </div>
-  {:else if product}
-    {#if addToCartError}
-      <p class="add-to-cart-error">{addToCartError}</p>
-    {/if}
-    <WizardPage
-      {product}
-      {api}
-      {wizardPages}
-      {autoSelectSingleTimeSlot}
-      {onCancel}
-      onComplete={onAddToCart}
-    />
-  {/if}
-</div>
-
-<style>
-  /* display: contents - a plain box here would break WizardPage's own .wizard{height:100%}, which needs
-     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
-  .bw-widget {
-    display: contents;
-  }
-
-  .add-to-cart-error {
-    margin: 0;
-    padding: 12px 16px;
-    background: #fdecea;
-    color: #b3261e;
-    font-size: 14px;
-  }
-</style>
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import { ApiError, isPriceMismatch } from './api';
+  import type { WizardPages } from './config';
+  import { DEFAULT_WIZARD_PAGES } from './config';
+  import type { CartItem, CheckoutProductDto } from './client-types';
+  import { CartManager } from './cart-manager';
+  import { postMessage } from './messages';
+  import { expandUnitItems } from './utils';
+  import { formatCurrency } from './currency';
+  import WizardPage from './WizardPage.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+
+  interface Props {
+    // Optional when a BookingProvider is above this component - it supplies both from its host.
+    api?: BookingApi;
+    cartManager?: CartManager;
+    productId: string;
+    wizardPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
+    // Whether an add from this configurator asks to be carried on into checkout. Stated on the cart:change
+    // message rather than acted on here, so the host decides how to honour it - and so bw-configurator's
+    // no-auto-checkout attribute and a host's own autoOpenCheckout: false meet in the same branch (see
+    // host.svelte.ts) instead of each build having its own way to suppress it.
+    autoOpenCheckout?: boolean;
+    onCancel?: () => void;
+  }
+  let { api: apiProp, cartManager: cartManagerProp, productId, wizardPages = DEFAULT_WIZARD_PAGES,
+    autoSelectSingleTimeSlot = false, autoOpenCheckout = true, onCancel }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'TicketConfigurator', 'api'));
+  let cartManager = $derived(
+    requireBookingService(cartManagerProp ?? bookingHost?.cartManager, 'TicketConfigurator', 'cartManager'),
+  );
+
+  let product = $state<CheckoutProductDto | null>(null);
+  let isLoading = $state(true);
+  let isAddingToCart = $state(false);
+  let addToCartError = $state<string | null>(null);
+
+  async function load() {
+    product = await api.getProduct(productId);
+    isLoading = false;
+  }
+
+  load();
+
+  async function addItemToCart(item: CartItem): Promise<void> {
+    await cartManager.ensureCart();
+
+    const unitItems = expandUnitItems(item.units);
+    const added = await api.addCartItem({
+      productId: item.productId,
+      optionId: item.optionId,
+      unitItems,
+      availabilityId: item.availabilityId,
+      localDate: item.localDate,
+      pickupPointId: item.pickupPointId,
+      // Currency and precision are the supplier's to state, not ours - the API resolves both server-side and
+      // ignores anything sent here. Amount stays, but only as a claim about the price the customer was shown:
+      // the server accepts it solely when it matches what the supplier is asking or a price the server itself
+      // published, and returns PRICE_MISMATCH otherwise.
+      amount: item.totalPrice,
+    });
+
+    const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
+    postMessage({
+      type: 'cart:change',
+      itemCount: unitItems.length,
+      cartItemId: added.id ?? '',
+      totalFormatted: total,
+      openCheckout: autoOpenCheckout,
+    });
+    // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
+    // public bw:cart-change event. This one carries the fresh cart itself: CartBar/CartOverviewButton/Checkout
+    // use it to update their own state without each independently re-fetching, and it's forwarded to
+    // consumers as the public bw:cart-updated event/onCartUpdated callback - see this event's own doc comment
+    // in CheckoutModal (the other place it's posted from, after an edit/remove).
+    const cart = await api.getCart().catch(() => null);
+    postMessage({ type: 'cart:updated', cart });
+  }
+
+  async function onAddToCart(item: CartItem) {
+    isAddingToCart = true;
+    addToCartError = null;
+
+    try {
+      await addItemToCart(item);
+    } catch (e) {
+      // The supplier moved the price while the customer was configuring, and the amount they agreed to is no
+      // longer one the server accepts. Retrying is useless - the wizard still holds the old prices, so it
+      // would resubmit exactly the same amount and fail identically. The only way out is to re-fetch and let
+      // the customer see the new price, which is what the message asks them to do.
+      if (isPriceMismatch(e)) {
+        await reloadAfterPriceChange();
+        return;
+      }
+
+      // CartManager only knows a cart is expired from timestamps it saw at creation - it can't see the
+      // server's idle window sliding forward, so a cart that looks valid locally can still be rejected
+      // server-side. A 401/404 here means exactly that: drop the stale cart and retry once with a fresh one
+      // before giving up, rather than leaving the user stuck with no feedback and no way to proceed.
+      const isStaleCart = e instanceof ApiError && (e.status === 401 || e.status === 404);
+      if (isStaleCart) {
+        cartManager.reset();
+        try {
+          await addItemToCart(item);
+        } catch {
+          addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+        }
+      } else {
+        addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+      }
+    } finally {
+      isAddingToCart = false;
+    }
+  }
+
+  async function reloadAfterPriceChange() {
+    addToCartError = "This ticket's price has changed since you started. Please check the updated price and try again.";
+    try {
+      await load();
+    } catch {
+      // The reload is what makes the message actionable; if even that fails the customer needs to start over
+      // rather than be left looking at prices we already know are wrong.
+      addToCartError = "This ticket's price has changed and we could not load the new one. Please reload the page.";
+    }
+  }
+</script>
+
+<div class="bw-widget">
+  {#if isLoading || isAddingToCart}
+    <div class="loading-center" style="height:100vh">
+      <div class="spinner"></div>
+    </div>
+  {:else if product}
+    {#if addToCartError}
+      <p class="add-to-cart-error">{addToCartError}</p>
+    {/if}
+    <WizardPage
+      {product}
+      {api}
+      {wizardPages}
+      {autoSelectSingleTimeSlot}
+      {onCancel}
+      onComplete={onAddToCart}
+    />
+  {/if}
+</div>
+
+<style>
+  /* display: contents - a plain box here would break WizardPage's own .wizard{height:100%}, which needs
+     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
+  .bw-widget {
+    display: contents;
+  }
+
+  .add-to-cart-error {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+  }
+</style>

package/src/lib/UnitCounter.svelte

@@ -5,10 +5,14 @@
   interface Props {
     unit: CheckoutUnitDto;
     quantity: number;
+    /** Boxed rows separate themselves where space is tight; unboxed ones rely on spacing alone. */
+    boxed?: boolean;
+    /** Draw a rule above every row but the first, for lists too narrow to separate on spacing. */
+    divided?: boolean;
     max?: number;
     onChange: (qty: number) => void;
   }
-  let { unit, quantity, max, onChange }: Props = $props();
+  let { unit, quantity, boxed = true, divided = false, max, onChange }: Props = $props();
 
   let priceLabel = $derived(() => {
     if (!unit.pricing || unit.pricing.length === 0) return '';
@@ -65,7 +69,7 @@
   }
 </script>
 
-<div class="card row">
+<div class="row" class:card={boxed} class:plain={!boxed} class:divided>
   <div class="info">
     <span class="name">{unit.title ?? unit.id}</span>
     {#if priceLabel()}
@@ -102,6 +106,16 @@
     display: flex;
     align-items: center;
   }
+  /* Without the card's own padding the rows would butt up against each other; the list's gap alone
+     is not enough once the border that used to imply the spacing is gone. */
+  .plain {
+    padding: 12px 0;
+  }
+  /* :not(:first-child) resolves against whatever list the caller puts these rows in, so the row keeps
+     ownership of its own chrome instead of the list reaching in through :global. */
+  .divided:not(:first-child) {
+    border-top: 1px solid var(--bw-color-border);
+  }
   .info {
     flex: 1;
     display: flex;

package/src/lib/WizardPage.svelte

@@ -1,3 +1,19 @@
+<script module lang="ts">
+  import type { WizardWidgetType as WidgetType } from './config';
+
+  // The question each step is asking, shown under the page title in place of a second bold heading.
+  // 'addon' is present only to keep the record exhaustive - the widget is never rendered, see
+  // isWidgetVisible - and renders nothing if that ever changes without copy being written.
+  const WIDGET_SUBTITLES: Record<WidgetType, string> = {
+    'option': 'Which option would you like?',
+    'age-category': 'How many tickets would you like?',
+    'date': 'When would you like to go?',
+    'time': 'What time works for you?',
+    'pickup': 'Where would you like to be picked up?',
+    'addon': '',
+  };
+</script>
+
 <script lang="ts">
   import type { CartItem, CartUnitItem, CheckoutProductDto, CheckoutCartItemDetailDto, CheckoutOptionDto, CheckoutAvailabilityDto, CheckoutPickupLocationDto, CheckoutAvailabilityCalendarDto } from './client-types';
   import type { BookingApi } from './api';
@@ -9,6 +25,7 @@
   import AvailabilityCalendar from './AvailabilityCalendar.svelte';
   import TimeSlotPicker from './TimeSlotPicker.svelte';
   import SelectableCard from './SelectableCard.svelte';
+  import { createInlineLayout } from './layout.svelte';
   import { onMount } from 'svelte';
 
   interface Props {
@@ -26,6 +43,11 @@
     editItem, autoSelectSingleTimeSlot = false, onComplete, onCancel,
   }: Props = $props();
 
+  // Inline (the host's sidebar) and full-screen (the host's sheet) want different chrome - see
+  // layout.svelte.ts for why the breakpoint is what it is. Edit mode is a checkout-modal accordion
+  // rather than either presentation, so it ignores this entirely.
+  const layout = createInlineLayout();
+
   let editMode = $derived(editItem != null);
   // In age-first flow the option is selected after date/time, so it should
   // stay changeable even during an edit. Lock it only in option-first flow.
@@ -448,26 +470,13 @@
   }
 </script>
 
-<div class="wizard">
-  {#if !editMode}
+<div class="wizard" class:inline={!editMode && layout.isInline}>
+  {#if !editMode && layout.isInline}
     <div class="wizard-header">
       <h2>Buy Tickets</h2>
     </div>
   {/if}
 
-  {#if !editMode}
-    <div class="page-title-row">
-      <h3 class="page-title">{pageTitle()}</h3>
-      {#if visiblePages().length > 1}
-        <div class="page-dots">
-          {#each visiblePages() as _, i}
-            <span class="dot" class:active={i === pageIndex}></span>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  {/if}
-
   {#if editMode}
     <div class="wizard-body">
       {#each editSections() as section, sectionIndex}
@@ -570,10 +579,15 @@
 
   {:else}
     <div class="wizard-body">
+      {#if !layout.isInline}
+        <h2 class="body-title">Buy Tickets</h2>
+      {/if}
+      <h3 class="page-title">{pageTitle()}</h3>
+
       {#each currentPage()?.widgets ?? [] as widgetType}
         {#if widgetType === 'option' && !lockedOptionId}
           <div class="section">
-            <h4 class="section-title">Options</h4>
+            <h4 class="section-title">{WIDGET_SUBTITLES[widgetType]}</h4>
             <div class="option-list">
               {#each product.options as option}
                 <OptionCard
@@ -588,11 +602,13 @@
 
         {#if widgetType === 'age-category' && availableUnits().length > 0}
           <div class="section">
-            <h4 class="section-title">How many tickets?</h4>
-            <div class="unit-list">
+            <h4 class="section-title">{WIDGET_SUBTITLES[widgetType]}</h4>
+            <div class="unit-list" class:divided={layout.isInline}>
               {#each availableUnits() as unit}
                 <UnitCounter
                   {unit}
+                  boxed={false}
+                  divided={layout.isInline}
                   quantity={unitQuantities[unit.id] ?? 0}
                   max={maxForUnit(unit.id)}
                   onChange={(qty) => onUnitChanged(unit.id, qty)}
@@ -604,7 +620,7 @@
 
         {#if widgetType === 'date' && hasQuantities}
           <div class="section">
-            <h4 class="section-title">Choose a date</h4>
+            <h4 class="section-title">{WIDGET_SUBTITLES[widgetType]}</h4>
             <AvailabilityCalendar
               {availabilityByDate}
               {selectedDate}
@@ -616,7 +632,7 @@
 
         {#if widgetType === 'time' && selectedDate && !hideTimePicker}
           <div class="section">
-            <h4 class="section-title">Select a time</h4>
+            <h4 class="section-title">{WIDGET_SUBTITLES[widgetType]}</h4>
             <TimeSlotPicker
               {timeSlots}
               {selectedTime}
@@ -628,7 +644,7 @@
 
         {#if widgetType === 'pickup' && selectedOption?.pickupAvailable && selectedOption.pickupLocations}
           <div class="section">
-            <h4 class="section-title">Select pickup point</h4>
+            <h4 class="section-title">{WIDGET_SUBTITLES[widgetType]}</h4>
             <div class="pickup-list">
               {#each selectedOption.pickupLocations as point}
                 <SelectableCard
@@ -644,16 +660,28 @@
       {/each}
     </div>
 
-    <div class="action-bar">
-      {#if pageIndex > 0 || onCancel}
-        <button class="btn btn-secondary" onclick={goBack}>
-          {pageIndex > 0 ? 'Back' : 'Cancel'}
-        </button>
+    <div class="wizard-footer">
+      {#if visiblePages().length > 1}
+        <div class="page-dots">
+          {#each visiblePages() as _, i}
+            <span class="dot" class:active={i === pageIndex}></span>
+          {/each}
+        </div>
       {/if}
-      <button class="btn btn-primary" onclick={goNext} disabled={!pageComplete()}>
-        {isLastPage() ? 'Add to Cart' : 'Next'}
-        <span class="arrow">&rarr;</span>
-      </button>
+
+      <div class="action-bar">
+        <!-- Back always earns its place. Cancel only does in the sheet, which the widget owns outright -
+             inline it sits in the host's page with the rest of the site still around it, so there is
+             nothing for a first-page Cancel to dismiss. -->
+        {#if pageIndex > 0 || (onCancel && !layout.isInline)}
+          <button class="btn btn-secondary" onclick={goBack}>
+            {pageIndex > 0 ? 'Back' : 'Cancel'}
+          </button>
+        {/if}
+        <button class="btn btn-primary" onclick={goNext} disabled={!pageComplete()}>
+          {isLastPage() ? 'Add to Cart' : 'Next'}
+        </button>
+      </div>
     </div>
   {/if}
 </div>
@@ -679,6 +707,12 @@
     max-height: 100%;
     overflow: hidden;
   }
+  /* The sheet is handed the whole screen and fills it. The sidebar is handed a column and hugs
+     whatever the current step actually needs, so a two-unit step isn't a mostly-empty box. */
+  .wizard.inline {
+    height: auto;
+    max-height: none;
+  }
   .wizard-header {
     padding: 20px 16px 16px;
     border-bottom: 1px solid var(--bw-color-border);
@@ -687,20 +721,47 @@
     font-size: 20px;
     font-weight: 800;
   }
-  .page-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px 0;
+  /* Full-screen only. The host's sheet already puts a bar above the widget, so this title belongs
+     in the body - rendered as a second header it would sit directly under the host's own. */
+  .body-title {
+    font-size: 20px;
+    font-weight: 800;
+    margin-bottom: 16px;
   }
   .page-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--bw-color-text);
+    margin-bottom: 4px;
+  }
+  /* Dots and buttons share one sticky block, so the step indicator stays with the control that
+     advances it instead of scrolling away with the body. */
+  .wizard-footer {
+    flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: var(--bw-color-bg);
+    border-top: 1px solid var(--bw-color-border);
+  }
+  .wizard-footer .action-bar {
+    position: static;
+    border-top: none;
   }
   .page-dots {
     display: flex;
+    justify-content: center;
     gap: 6px;
+    padding: 14px 16px 0;
+  }
+  /* Inline sits inside the host's own white card, so the whole footer is tinted to read as a footer
+     rather than as more body. The sheet has the screen edge doing that job already. The action bar
+     carries its own opaque background for the sheet, which has to give way to the tint here. */
+  .wizard.inline .wizard-footer {
+    background: var(--bw-color-surface);
+  }
+  .wizard.inline .wizard-footer .action-bar {
+    background: transparent;
   }
   .dot {
     width: 8px;
@@ -783,6 +844,12 @@
     flex-direction: column;
     gap: 10px;
   }
+  /* Inline only: at sidebar width a rule reads as the separation in less vertical space than the gap
+     the sheet can afford. The rule itself belongs to UnitCounter - only the spacing it replaces is
+     the list's business. */
+  .unit-list.divided {
+    gap: 0;
+  }
 
   /* ── Confirm dialog ────────────────────── */
   .dialog-backdrop {

package/src/lib/app.css

@@ -157,14 +157,8 @@
   height: 48px;
   font-size: 16px;
   font-weight: 700;
-  position: relative;
 }
 
-.action-bar .btn-primary .arrow {
-  position: absolute;
-  right: 16px;
-  font-size: 20px;
-}
 
 /* ── Buttons ───────────────────────────────────────────── */
 .btn {

package/src/lib/booking-context.ts

@@ -0,0 +1,33 @@
+// How a BookingProvider hands the host down to the components beneath it, so a consumer writes
+// <TicketConfigurator {productId} /> rather than restating host.api and host.cartManager on every tag. The
+// props are still there and still win - the custom-element wrappers pass them explicitly, because each
+// bw-* element is the root of its own Svelte tree and context does not cross that boundary.
+
+import { getContext, setContext } from 'svelte';
+import type { BookingHost } from './host.svelte';
+
+const BOOKING_HOST = Symbol('booking-host');
+
+/** Call during component initialisation - BookingProvider is the only thing that should need this. */
+export function setBookingHostContext(host: BookingHost): void {
+  setContext(BOOKING_HOST, host);
+}
+
+/** The host from the nearest BookingProvider, or undefined when there is none. */
+export function getBookingHostContext(): BookingHost | undefined {
+  return getContext<BookingHost | undefined>(BOOKING_HOST);
+}
+
+/**
+ * Resolves a service a component cannot render without, and says plainly what to do when it is missing.
+ * Without this the failure is a `Cannot read properties of undefined` from somewhere deep in a load().
+ */
+export function requireBookingService<T>(value: T | undefined, component: string, prop: string): T {
+  if (value === undefined || value === null) {
+    throw new Error(
+      `<${component}> has no ${prop}. Pass ${prop}={...}, or wrap it in ` +
+        `<BookingProvider host={createBookingHost(...)}>.`,
+    );
+  }
+  return value;
+}