@code-collective/booking-widget 1.0.3 → 1.0.6

package/src/lib/Checkout.svelte

@@ -9,8 +9,11 @@
   interface Props {
     api: BookingApi;
     wizardPages?: WizardPages;
+    editPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
   }
-  let { api, wizardPages = DEFAULT_WIZARD_PAGES }: Props = $props();
+  let { api, 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);
@@ -27,29 +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}
-    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

@@ -16,10 +16,12 @@
     cart: CheckoutCartDetailDto;
     api: BookingApi;
     wizardPages?: WizardPages;
+    editPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
     onClose: () => void;
     onOrderConfirmed: () => void;
   }
-  let { cart, api, wizardPages, onClose, onOrderConfirmed }: Props = $props();
+  let { cart, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onClose, onOrderConfirmed }: Props = $props();
 
   type View = 'cart' | 'contact' | 'edit' | 'payment' | 'result';
   let currentView = $state<View>('cart');
@@ -124,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;
@@ -210,6 +222,8 @@
       product={productsById.get(editingItem.productId)!}
       {api}
       {wizardPages}
+      {editPages}
+      {autoSelectSingleTimeSlot}
       onBack={() => { currentView = 'cart'; }}
       onClose={close}
       onUpdated={onItemUpdated}
@@ -250,15 +264,14 @@
 
   {:else}
     <!-- Cart view -->
-    <div class="body">
-      <div class="cart-header">
-        <h2 class="cart-title">Your cart</h2>
-        <div class="cart-header-right">
-          <CountdownTimer expiresAt={expiresAt()} />
-          <button class="keep-shopping-btn" onclick={continueShopping}>+ Keep shopping</button>
-        </div>
-      </div>
+    <div class="page-header">
+      <h2>Your cart</h2>
+      <span class="spacer"></span>
+      <CountdownTimer expiresAt={expiresAt()} />
+      <button class="keep-shopping-btn" onclick={continueShopping}>+ Keep shopping</button>
+    </div>
 
+    <div class="body">
       {#each cart.items as item}
         <div class="cart-card">
           <div class="cart-card-top">
@@ -296,9 +309,11 @@
         <span>Total payable today</span>
         <span class="cart-total-amount">{formattedTotal()}</span>
       </div>
+    </div>
 
-      <button class="checkout-btn" onclick={() => { currentView = 'contact'; }}>
-        Checkout &rarr;
+    <div class="action-bar">
+      <button class="btn btn-primary" onclick={() => { currentView = 'contact'; }}>
+        Checkout <span class="arrow">&rarr;</span>
       </button>
     </div>
   {/if}
@@ -320,21 +335,6 @@
   }
 
   /* -- Cart view -- */
-  .cart-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  .cart-title {
-    font-size: 22px;
-    font-weight: 800;
-  }
-  .cart-header-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
   .keep-shopping-btn {
     padding: 8px 16px;
     background: none;
@@ -443,23 +443,6 @@
     font-size: 20px;
     font-weight: 800;
   }
-  .checkout-btn {
-    display: block;
-    width: 100%;
-    padding: 16px;
-    background: var(--bw-color-primary);
-    color: white;
-    border: none;
-    border-radius: var(--bw-radius-md);
-    font-size: 16px;
-    font-weight: 700;
-    cursor: pointer;
-    text-align: center;
-  }
-  .checkout-btn:hover {
-    background: var(--bw-color-primary-dark);
-  }
-
   /* -- Contact view -- */
   .contact-header {
     display: flex;

package/src/lib/EditBookingView.svelte

@@ -11,11 +11,13 @@
     product: CheckoutProductDto;
     api: BookingApi;
     wizardPages?: WizardPages;
+    editPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
     onBack: () => void;
     onClose: () => void;
     onUpdated: () => void;
   }
-  let { cartItem, product, api, wizardPages, onBack, onClose, onUpdated }: Props = $props();
+  let { cartItem, product, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onBack, onClose, onUpdated }: Props = $props();
 
   let isSaving = $state(false);
 
@@ -55,7 +57,9 @@
       {product}
       {api}
       wizardPages={wizardPages ?? DEFAULT_WIZARD_PAGES}
+      editPages={editPages ?? wizardPages ?? DEFAULT_WIZARD_PAGES}
       editItem={cartItem}
+      {autoSelectSingleTimeSlot}
       {onComplete}
       onCancel={onBack}
     />

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>