@code-collective/booking-widget 1.0.2 → 1.0.4

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');
@@ -210,6 +212,8 @@
       product={productsById.get(editingItem.productId)!}
       {api}
       {wizardPages}
+      {editPages}
+      {autoSelectSingleTimeSlot}
       onBack={() => { currentView = 'cart'; }}
       onClose={close}
       onUpdated={onItemUpdated}
@@ -250,15 +254,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 +299,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 +325,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 +433,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}
     />