@code-collective/booking-widget 1.0.4 → 1.0.6

package/src/lib/Checkout.svelte

@@ -30,31 +30,41 @@
   load();
 </script>
 
-{#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,
-      });
-    }}
-  />
-{:else}
-  <div class="loading-center" style="height:100vh;color:var(--bw-color-text-secondary)">
-    No items in cart.
-  </div>
-{/if}
+<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,
+        });
+      }}
+    />
+  {: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/CheckoutModal.svelte

@@ -126,15 +126,25 @@
     const updated = await api.getCart();
     cart = updated;
     currentView = 'cart';
+    notifyCartUpdated();
   }
 
   async function removeItem(item: CheckoutCartItemDetailDto) {
     await api.removeCartItem(item.id);
     const updated = await api.getCart();
     cart = updated;
+    notifyCartUpdated();
     if (cart.items.length === 0) close();
   }
 
+  // A standalone postMessage - not the itemCount/cartItemId-shaped cart:change TicketConfigurator posts on
+  // add (which bw-configurator.svelte re-dispatches as the public bw:cart-change event and auto-opens
+  // checkout for). This is purely internal: CartBar/CartOverviewButton listen for it to refetch their own
+  // total after an edit or remove, which otherwise only ever fetch once on mount.
+  function notifyCartUpdated(): void {
+    postMessage({ type: 'cart:updated' });
+  }
+
   async function onPayNow() {
     hasAttemptedSubmit = true;
     if (!contactForm?.isValid() || !privacyAccepted) return;

package/src/lib/TicketConfigurator.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { BookingApi } 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';
@@ -12,11 +13,11 @@
     api: BookingApi;
     cartManager: CartManager;
     productId: string;
-    wizardPages: WizardPages;
+    wizardPages?: WizardPages;
     autoSelectSingleTimeSlot?: boolean;
     onCancel?: () => void;
   }
-  let { api, cartManager, productId, wizardPages, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
+  let { api, cartManager, productId, wizardPages = DEFAULT_WIZARD_PAGES, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
 
   let product = $state<CheckoutProductDto | null>(null);
   let isLoading = $state(true);
@@ -56,23 +57,37 @@
         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 just tells CartBar/CartOverviewButton to refetch their own
+      // total, same signal update/remove in CheckoutModal use - see this event's own doc comment there.
+      postMessage({ type: 'cart:updated' });
     } finally {
       isAddingToCart = false;
     }
   }
 </script>
 
-{#if isLoading || isAddingToCart}
-  <div class="loading-center" style="height:100vh">
-    <div class="spinner"></div>
-  </div>
-{:else if product}
-  <WizardPage
-    {product}
-    {api}
-    {wizardPages}
-    {autoSelectSingleTimeSlot}
-    {onCancel}
-    onComplete={onAddToCart}
-  />
-{/if}
+<div class="bw-widget">
+  {#if isLoading || isAddingToCart}
+    <div class="loading-center" style="height:100vh">
+      <div class="spinner"></div>
+    </div>
+  {:else if product}
+    <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;
+  }
+</style>

package/src/lib/api.ts

@@ -17,6 +17,7 @@ import { dateKey } from './utils';
 
 export interface BookingApi {
   sessionToken: string;
+  cartToken: string;
 
   // Session
   startSession(checkoutKey: string): Promise<CheckoutSessionDto>;
@@ -46,7 +47,7 @@ export interface BookingApi {
 
 export class ApiClient implements BookingApi {
   sessionToken = '';
-  private cartToken = '';
+  cartToken = '';
   private client;
 
   constructor(baseUrl: string) {

package/src/lib/app.css

@@ -26,13 +26,17 @@
 }
 
 /* ── Reset ─────────────────────────────────────────────── */
-* {
+/* Scoped to .bw-widget (present on every mountable component's own root - TicketConfigurator, Checkout,
+   CartBar, CartOverviewButton) rather than the bare selectors this used to be, since Option 2/3 consumers
+   mount these directly into their own app alongside their own global styles/resets (Tailwind preflight,
+   etc.) - an unscoped * or body rule here would leak onto their entire page, not just the widget. */
+.bw-widget, .bw-widget * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-body {
+.bw-widget {
   font-family: var(--bw-font-family);
   font-size: 14px;
   line-height: 1.5;
@@ -41,8 +45,12 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-button { cursor: pointer; font-family: inherit; }
-input, select, textarea { font-family: inherit; }
+/* button/input/etc form controls don't inherit font-family by default even from an ancestor that sets it
+   (a standard browser quirk, not specific to this reset) - covers both a bw-widget div wrapping a button
+   (TicketConfigurator, Checkout) and bw-widget being set directly on the control itself (CartOverviewButton's
+   own <button>), since a plain descendant selector alone only matches the first case. */
+.bw-widget button, button.bw-widget { cursor: pointer; font-family: inherit; }
+.bw-widget :is(input, select, textarea), :is(input, select, textarea).bw-widget { font-family: inherit; }
 
 /* ── Spinner ───────────────────────────────────────────── */
 @keyframes spin { to { transform: rotate(360deg); } }

package/src/lib/cart-manager.ts

@@ -69,6 +69,7 @@ export class CartManager {
         idleExpiresAt: '',
         absoluteExpiresAt: stored.absoluteExpiresAt,
       };
+      this.api.cartToken = stored.cartToken;
     } catch {
       // corrupt or unavailable
     }

package/src/lib/fake-api.ts

@@ -43,7 +43,7 @@ const ITEMS_STORAGE_KEY = 'morii-checkout-cart-items';
 
 export class FakeApiClient implements BookingApi {
   sessionToken = '';
-  private cartToken = '';
+  cartToken = '';
   private cartItems: FakeCartItem[] = [];
 
   constructor() {

package/src/lib/index.ts

@@ -19,8 +19,9 @@ export { default as CartOverviewButton } from './CartOverviewButton.svelte';
 
 // Re-export utilities
 export { ApiClient, FakeApiClient, SessionManager, CartManager };
+export { resolveWizardPages, resolveEditPages, DEFAULT_WIZARD_PAGES } from './config';
 export type { BookingApi } from './api';
-export type { WizardPages, CartOverviewDisplay, WidgetMode, WizardWidgetType } from './config';
+export type { WizardPages, WizardPageConfig, CartOverviewDisplay, WidgetMode, WizardWidgetType } from './config';
 export type { components, operations, paths } from './generated-types';
 export type * from './client-types';