@code-collective/booking-widget 1.0.10 → 1.0.13

package/src/lib/CheckoutPanel.svelte

@@ -0,0 +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>

package/src/lib/PaymentPage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { loadPeachSdk } from './peach-sdk';
+  import { loadPeachSdk, loadedPeachSdkUrl } from './peach-sdk';
   import CountdownTimer from './CountdownTimer.svelte';
 
   interface Props {
@@ -49,18 +49,32 @@
             onCompleted: () => { cleanup(); onPaymentComplete({ status: 'completed' }); },
             onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
             onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
-            onError: () => { cleanup(); onPaymentComplete({ status: 'error' }); },
+            onError: () => { reportPeachFailure('Peach reported an error rendering the card form'); cleanup(); onPaymentComplete({ status: 'error' }); },
           },
         });
 
         peachInstance.render('#peach-container');
       } catch (e) {
+        reportPeachFailure(String(e));
         failed = true;
         errorMessage = String(e);
       }
     })();
   });
 
+  // Peach renders its own "an unrecoverable error has occurred" card inside its iframe, which tells a
+  // developer nothing about why. By far the most common cause is an SDK from one environment against a
+  // checkoutId created in another - the checkout API makes the checkout, so the two have to agree - and
+  // that is invisible unless the URL actually loaded is named.
+  function reportPeachFailure(reason: string) {
+    console.error(
+      `[booking-widget] Peach checkout did not render: ${reason}. ` +
+        `SDK loaded from ${loadedPeachSdkUrl() ?? 'an already-present window.Checkout'} for checkoutId ` +
+        `${checkoutId}. If that environment does not match the checkout API this cart came from, set ` +
+        `peachEnv on createBookingHost (or window.BW_CHECKOUT_PEACH_SDK_URL).`,
+    );
+  }
+
   function cleanup() {
     if (peachInstance) {
       peachInstance.unmount();

package/src/lib/PickupPointPicker.svelte

@@ -45,7 +45,7 @@
       onclick={() => onContinue(selectedPoint)}
     >
       <span>{formattedTotal}</span>
-      <span>Continue &rarr;</span>
+      <span>Continue</span>
     </button>
   </div>
 </div>

package/src/lib/ResultView.svelte

@@ -14,6 +14,10 @@
 
   let success = $derived(status?.outcome === 'successful');
   let pending = $derived(status?.outcome === 'pending');
+  // Paid, but this gateway could not confirm every item - so it gets its own branch below rather than falling
+  // into the failure one. The shopper's card was charged; telling them "Payment Failed" over an explanation
+  // that opens "Your payment succeeded" is how someone ends up paying twice or charging back a good payment.
+  let partial = $derived(status?.outcome === 'partial');
   // A 'failed' outcome covers two genuinely different situations - see CheckoutModal's own remarks on
   // confirmOutcome. Only one of them is safe to offer "Try Again" for: the payment itself never went
   // through (declined, expired, SDK error), so re-opening the card form charges the shopper once, not
@@ -27,12 +31,18 @@
   {#if verifying}
     <div class="spinner"></div>
     <p class="hint">Verifying payment...</p>
+  <!-- 'pending' is reached whenever this gateway could not get a final answer: the webhook still in flight
+       behind a real charge, but also a confirm that gave up after ~15s, a server error, or a cart the server
+       no longer has. Peach fires onCompleted for a declined card too, and a decline the server could not read
+       back (its own status endpoint unreachable) lands here as readily as a charge does - so this screen must
+       not claim a payment was received. It says what is actually known, which is nothing yet, and still asks
+       the shopper not to pay again, which is right either way round (PR 8447 review). -->
   {:else if pending}
     <div class="icon pending">&hellip;</div>
-    <h2>Payment Received</h2>
+    <h2>Still Checking Your Payment</h2>
     <p class="desc">
       {status?.resultDescription ??
-        "We're still confirming your booking - this can take a minute. Please don't try to pay again; we'll email your confirmation as soon as it's ready."}
+        "We couldn't confirm this payment yet. Please don't try to pay again for now - we'll email you as soon as we know where it stands."}
     </p>
     <div class="actions">
       {#if onCheckAgain}
@@ -40,6 +50,14 @@
       {/if}
       <button class="btn btn-outline" onclick={onDone}>Close</button>
     </div>
+  {:else if partial}
+    <div class="icon partial">!</div>
+    <h2>Booking Incomplete</h2>
+    <p class="desc">
+      {status?.resultDescription ??
+        "Your payment succeeded, but we couldn't confirm every item in your booking. Please contact us with your order details."}
+    </p>
+    <button class="btn btn-outline" onclick={onDone}>Close</button>
   {:else}
     <div class="icon" class:success class:failure={!success}>
       {success ? '✓' : '!'}
@@ -96,8 +114,10 @@
     background: var(--bw-color-primary-light);
   }
   /* Deliberately its own amber, not success green or failure red - payment succeeded (so red reads as an
-     alarming false alarm) but nothing is confirmed yet (so green would be premature). */
-  .icon.pending {
+     alarming false alarm) but the booking is not fully confirmed (so green would be premature). The same is
+     true either way round: 'pending' is not confirmed yet, 'partial' will not be for some of its items. */
+  .icon.pending,
+  .icon.partial {
     border: 2px solid #B8860B;
     color: #B8860B;
     background: rgba(184, 134, 11, 0.08);

package/src/lib/TicketConfigurator.svelte

@@ -9,16 +9,30 @@
   import { expandUnitItems } from './utils';
   import { formatCurrency } from './currency';
   import WizardPage from './WizardPage.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
 
   interface Props {
-    api: BookingApi;
-    cartManager: CartManager;
+    // 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, cartManager, productId, wizardPages = DEFAULT_WIZARD_PAGES, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
+  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);
@@ -54,9 +68,9 @@
     postMessage({
       type: 'cart:change',
       itemCount: unitItems.length,
-      cartItemId: added.id,
+      cartItemId: added.id ?? '',
       totalFormatted: total,
-      openCheckout: true,
+      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

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;
+}