@code-collective/booking-widget 1.0.0

package/src/lib/CartOverviewButton.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { CheckoutCartDetailDto } from './client-types';
+  import type { BookingApi } from './api';
+  import { CartManager } from './cart-manager';
+  import { formatCurrency } from './currency';
+  import { postMessage } from './messages';
+  import { onDestroy } from 'svelte';
+
+  interface Props {
+    api: BookingApi;
+    cartManager: CartManager;
+  }
+  let { api, cartManager }: Props = $props();
+
+  let cart = $state<CheckoutCartDetailDto | null>(null);
+  let remaining = $state('');
+
+  async function load() {
+    if (!cartManager.hasCart) return;
+    try {
+      cart = await api.getCart();
+    } catch {
+      cart = null;
+    }
+  }
+
+  load();
+
+  function updateTimer() {
+    if (!cart) { remaining = '0:00'; return; }
+    const diff = Math.max(0, new Date(cart.absoluteExpiresAt).getTime() - Date.now());
+    const mins = Math.floor(diff / 60000);
+    const secs = Math.floor((diff % 60000) / 1000);
+    remaining = `${mins}:${String(secs).padStart(2, '0')}`;
+  }
+
+  updateTimer();
+  const interval = setInterval(updateTimer, 1000);
+  onDestroy(() => clearInterval(interval));
+
+  let itemCount = $derived(cart?.items.length ?? 0);
+
+  let totalLabel = $derived(() => {
+    if (!cart || cart.items.length === 0) return '';
+    const currency = cart.items[0].currencyCode;
+    const total = cart.items.reduce((sum, i) => sum + i.amount, 0);
+    return formatCurrency(total, currency, 2, 0);
+  });
+</script>
+
+{#if cart && cart.items.length > 0}
+  <button class="cart-overview-btn" onclick={() => postMessage({ type: 'modal:open' })}>
+    <svg class="cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
+      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
+    </svg>
+    <span class="cart-badge">{itemCount}</span>
+    <span class="cart-total">{totalLabel()}</span>
+    <span class="cart-sep"></span>
+    <span class="cart-timer">{remaining}</span>
+  </button>
+{/if}
+
+<style>
+  .cart-overview-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 12px 20px;
+    background: var(--bw-color-primary);
+    color: white;
+    border: none;
+    border-radius: 999px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .cart-overview-btn:hover {
+    background: var(--bw-color-primary-dark);
+  }
+  .cart-icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+  .cart-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 5px;
+    background: white;
+    color: var(--bw-color-primary);
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: 800;
+    flex-shrink: 0;
+  }
+  .cart-total {
+    flex: 1;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 700;
+  }
+  .cart-sep {
+    width: 1px;
+    height: 16px;
+    background: rgba(255,255,255,0.35);
+    flex-shrink: 0;
+  }
+  .cart-timer {
+    font-variant-numeric: tabular-nums;
+    font-size: 13px;
+    opacity: 0.85;
+    flex-shrink: 0;
+  }
+</style>

package/src/lib/Checkout.svelte

@@ -0,0 +1,55 @@
+<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 { postMessage } from './messages';
+  import CheckoutModal from './CheckoutModal.svelte';
+
+  interface Props {
+    api: BookingApi;
+    wizardPages?: WizardPages;
+  }
+  let { api, wizardPages = DEFAULT_WIZARD_PAGES }: Props = $props();
+
+  let cart = $state<CheckoutCartDetailDto | null>(null);
+  let isLoading = $state(true);
+
+  async function load() {
+    try {
+      cart = await api.getCart();
+    } catch {
+      cart = null;
+    }
+    isLoading = false;
+  }
+
+  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}

package/src/lib/CheckoutModal.svelte

@@ -0,0 +1,510 @@
+<script lang="ts">
+  import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutCartPaymentInitiationDto, CheckoutCartConfirmResultDto, CheckoutProductDto } from './client-types';
+  import type { BookingApi } from './api';
+  import type { WizardPages } from './config';
+  import { formatCurrency } from './currency';
+  import { postMessage } from './messages';
+  import { onDestroy } from 'svelte';
+  import ContactForm from './ContactForm.svelte';
+  import ConsentSection from './ConsentSection.svelte';
+  import CountdownTimer from './CountdownTimer.svelte';
+  import PaymentPage from './PaymentPage.svelte';
+  import ResultView from './ResultView.svelte';
+  import EditBookingView from './EditBookingView.svelte';
+
+  interface Props {
+    cart: CheckoutCartDetailDto;
+    api: BookingApi;
+    wizardPages?: WizardPages;
+    onClose: () => void;
+    onOrderConfirmed: () => void;
+  }
+  let { cart, api, wizardPages, onClose, onOrderConfirmed }: Props = $props();
+
+  type View = 'cart' | 'contact' | 'edit' | 'payment' | 'result';
+  let currentView = $state<View>('cart');
+  let editingItem = $state<CheckoutCartItemDetailDto | null>(null);
+  let paymentResult = $state<CheckoutCartPaymentInitiationDto | null>(null);
+  let confirmResult = $state<CheckoutCartConfirmResultDto | null>(null);
+  let confirmFailed = $state(false);
+  let isLoading = $state(true);
+  let isConfirming = $state(false);
+  let privacyAccepted = $state(false);
+  let marketingOptIn = $state(false);
+  let hasAttemptedSubmit = $state(false);
+
+  let contactForm = $state<ContactForm | null>(null);
+
+  // Load product data so we can display titles and unit info
+  let productsById = $state<Map<string, CheckoutProductDto>>(new Map());
+
+  async function loadProducts() {
+    const productIds = [...new Set(cart.items.map((i) => i.productId))];
+    const results = await Promise.all(productIds.map((id) => api.getProduct(id)));
+    const map = new Map<string, CheckoutProductDto>();
+    for (const p of results) {
+      map.set(p.id, p);
+    }
+    productsById = map;
+    isLoading = false;
+  }
+
+  loadProducts();
+
+  let cartTotal = $derived(() => cart.items.reduce((s, i) => s + i.amount, 0));
+  let cartCurrency = $derived(() => cart.items[0]?.currencyCode ?? 'ZAR');
+
+  let formattedTotal = $derived(() =>
+    formatCurrency(cartTotal(), cartCurrency(), 2, 2));
+
+  let expiresAt = $derived(() => new Date(cart.absoluteExpiresAt));
+
+  function productTitle(item: CheckoutCartItemDetailDto): string {
+    return productsById.get(item.productId)?.title ?? item.productId;
+  }
+
+  function optionTitle(item: CheckoutCartItemDetailDto): string {
+    const product = productsById.get(item.productId);
+    return product?.options.find((o) => o.id === item.optionId)?.title ?? item.optionId;
+  }
+
+  interface GroupedUnit {
+    unitId: string;
+    title: string;
+    quantity: number;
+    linePrice: number;
+  }
+
+  function groupUnits(item: CheckoutCartItemDetailDto): GroupedUnit[] {
+    const product = productsById.get(item.productId);
+    const option = product?.options.find((o) => o.id === item.optionId);
+    const counts = new Map<string, number>();
+    for (const u of item.unitItems) {
+      counts.set(u.unitId, (counts.get(u.unitId) ?? 0) + 1);
+    }
+    return [...counts.entries()].map(([unitId, quantity]) => {
+      const unit = option?.units.find((u) => u.id === unitId);
+      const unitPrice = unit?.pricing?.[0]?.retail ?? 0;
+      return {
+        unitId,
+        title: unit?.title ?? unitId,
+        quantity,
+        linePrice: unitPrice * quantity,
+      };
+    });
+  }
+
+  function itemDateLabel(item: CheckoutCartItemDetailDto): string | null {
+    if (!item.availabilityId) return null;
+    const match = item.availabilityId.match(/(\d{4})-(\d{2})-(\d{2})/);
+    if (!match) return null;
+    const d = new Date(+match[1], +match[2] - 1, +match[3]);
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
+  }
+
+  onDestroy(() => postMessage({ type: 'modal:close' }));
+
+  function close() {
+    postMessage({ type: 'modal:close' });
+    onClose();
+  }
+
+  function continueShopping() {
+    close();
+  }
+
+  function editItem(item: CheckoutCartItemDetailDto) {
+    editingItem = item;
+    currentView = 'edit';
+  }
+
+  async function onItemUpdated() {
+    // Reload cart after edit
+    const updated = await api.getCart();
+    cart = updated;
+    currentView = 'cart';
+  }
+
+  async function removeItem(item: CheckoutCartItemDetailDto) {
+    await api.removeCartItem(item.id);
+    const updated = await api.getCart();
+    cart = updated;
+    if (cart.items.length === 0) close();
+  }
+
+  async function onPayNow() {
+    hasAttemptedSubmit = true;
+    if (!contactForm?.isValid() || !privacyAccepted) return;
+
+    const contact = contactForm.getContact();
+
+    isLoading = true;
+    try {
+      paymentResult = await api.payCart(contact);
+      currentView = 'payment';
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function onPaymentComplete(result: { status: string }) {
+    if (result.status === 'cancelled') {
+      currentView = 'contact';
+      return;
+    }
+
+    if (result.status === 'expired') {
+      confirmFailed = true;
+      isConfirming = false;
+      currentView = 'result';
+      return;
+    }
+
+    isConfirming = true;
+    currentView = 'result';
+    try {
+      confirmResult = await api.confirmCart();
+      const allOk = confirmResult.items.every((i) => i.statusCode >= 200 && i.statusCode < 300);
+      confirmFailed = !allOk;
+      isConfirming = false;
+      if (allOk) {
+        postMessage({ type: 'modal:close' });
+        onOrderConfirmed();
+      }
+    } catch {
+      confirmFailed = true;
+      isConfirming = false;
+    }
+  }
+</script>
+
+<div class="modal">
+  {#if isLoading}
+    <div class="loading-center" style="height:100%">
+      <div class="spinner"></div>
+    </div>
+
+  {:else if currentView === 'payment' && paymentResult}
+    <PaymentPage
+      checkoutId={paymentResult.checkoutId}
+      totalFormatted={formattedTotal()}
+      onBack={() => { currentView = 'contact'; }}
+      onClose={close}
+      {onPaymentComplete}
+    />
+
+  {:else if currentView === 'result'}
+    <ResultView
+      status={isConfirming ? null : confirmFailed
+        ? { outcome: 'failed', resultDescription: 'Something went wrong confirming your order. Please try again.' }
+        : { outcome: 'successful' }}
+      verifying={isConfirming}
+      onDone={() => { postMessage({ type: 'modal:close' }); onOrderConfirmed(); }}
+      onRetry={() => { currentView = 'payment'; }}
+    />
+
+  {:else if currentView === 'edit' && editingItem && productsById.get(editingItem.productId)}
+    <EditBookingView
+      cartItem={editingItem}
+      product={productsById.get(editingItem.productId)!}
+      {api}
+      {wizardPages}
+      onBack={() => { currentView = 'cart'; }}
+      onClose={close}
+      onUpdated={onItemUpdated}
+    />
+
+  {:else if currentView === 'contact'}
+    <!-- Contact Details view -->
+    <div class="page-header">
+      <button class="icon-btn" onclick={() => { currentView = 'cart'; }} aria-label="Back">&larr;</button>
+      <h2>Checkout</h2>
+      <span class="spacer"></span>
+      <button class="icon-btn" onclick={close} aria-label="Close">&times;</button>
+    </div>
+
+    <div class="body">
+      <div class="contact-header">
+        <span class="contact-title">Contact Details</span>
+        <span class="required-hint">* Required Fields</span>
+      </div>
+      <ContactForm bind:this={contactForm} {hasAttemptedSubmit} />
+      <div style="margin-top:24px">
+        <ConsentSection
+          {privacyAccepted}
+          {marketingOptIn}
+          {hasAttemptedSubmit}
+          onPrivacyChanged={(v) => { privacyAccepted = v; }}
+          onMarketingChanged={(v) => { marketingOptIn = v; }}
+        />
+      </div>
+    </div>
+
+    <div class="pay-bar">
+      <span class="pay-bar-total">{formattedTotal()}</span>
+      <button class="pay-bar-btn" onclick={onPayNow}>
+        Pay Now <span class="arrow">&rarr;</span>
+      </button>
+    </div>
+
+  {: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>
+
+      {#each cart.items as item}
+        <div class="cart-card">
+          <div class="cart-card-top">
+            <h3 class="cart-product">{productTitle(item)}</h3>
+            <span class="cart-item-total">{formatCurrency(item.amount, item.currencyCode, 2, 0)}</span>
+          </div>
+          <div class="cart-detail-lines">
+            {#if itemDateLabel(item)}
+              <p class="cart-detail">{itemDateLabel(item)}</p>
+            {/if}
+            <p class="cart-detail">{optionTitle(item)}</p>
+          </div>
+
+          <div class="cart-divider"></div>
+
+          <div class="cart-units">
+            {#each groupUnits(item) as gu}
+              <div class="cart-unit-line">
+                <span class="cart-unit-label">{gu.title} &times; {gu.quantity}</span>
+                <span class="cart-unit-price">{formatCurrency(gu.linePrice, item.currencyCode, 2, 0)}</span>
+              </div>
+            {/each}
+          </div>
+
+          <div class="cart-actions">
+            <button class="action-edit" onclick={() => editItem(item)}>Edit</button>
+            <button class="action-remove" onclick={() => removeItem(item)}>Remove</button>
+          </div>
+        </div>
+      {/each}
+
+      <div class="cart-total-divider"></div>
+
+      <div class="cart-total-row">
+        <span>Total payable today</span>
+        <span class="cart-total-amount">{formattedTotal()}</span>
+      </div>
+
+      <button class="checkout-btn" onclick={() => { currentView = 'contact'; }}>
+        Checkout &rarr;
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .modal {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    background: var(--bw-color-surface);
+  }
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  /* -- 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;
+    border: 2px solid #222;
+    border-radius: var(--bw-radius-md);
+    font-size: 13px;
+    font-weight: 600;
+    color: #222;
+    cursor: pointer;
+  }
+  .keep-shopping-btn:hover {
+    background: #f5f5f5;
+  }
+
+  .cart-card {
+    border: 1px solid var(--bw-color-border);
+    border-radius: var(--bw-radius-lg);
+    padding: 20px;
+    margin-bottom: 16px;
+  }
+  .cart-card-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  .cart-product {
+    font-size: 16px;
+    font-weight: 700;
+    flex: 1;
+  }
+  .cart-item-total {
+    font-size: 16px;
+    font-weight: 800;
+    white-space: nowrap;
+  }
+  .cart-detail-lines {
+    margin-top: 4px;
+  }
+  .cart-detail {
+    font-size: 13px;
+    color: var(--bw-color-text-secondary);
+    line-height: 1.5;
+  }
+  .cart-divider {
+    border-top: 1px dashed var(--bw-color-border);
+    margin: 14px 0;
+  }
+  .cart-units {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 14px;
+  }
+  .cart-unit-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+  }
+  .cart-unit-label {
+    color: #333;
+  }
+  .cart-unit-price {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .cart-actions {
+    display: flex;
+    gap: 16px;
+  }
+  .action-edit {
+    background: none;
+    border: none;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--bw-color-primary);
+    padding: 0;
+    cursor: pointer;
+  }
+  .action-edit:hover { text-decoration: underline; }
+  .action-remove {
+    background: none;
+    border: none;
+    font-size: 13px;
+    font-weight: 600;
+    color: #555;
+    padding: 0;
+    cursor: pointer;
+  }
+  .action-remove:hover { text-decoration: underline; }
+
+  .cart-total-divider {
+    border-top: 3px solid #111;
+    margin: 8px 0 20px;
+  }
+  .cart-total-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  .cart-total-amount {
+    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;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .contact-title {
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .required-hint {
+    font-size: 12px;
+    color: var(--bw-color-primary);
+  }
+
+  .pay-bar {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    background: var(--bw-color-primary);
+    color: white;
+    position: sticky;
+    bottom: 0;
+  }
+  .pay-bar-total {
+    padding: 0 20px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .pay-bar-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    height: 52px;
+    padding: 0 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .pay-bar-btn .arrow {
+    font-size: 20px;
+  }
+</style>