@code-collective/booking-widget 1.0.0

package/src/lib/TicketConfigurator.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import type { WizardPages } from './config';
+  import type { CartItem, CheckoutProductDto } from './client-types';
+  import { CartManager } from './cart-manager';
+  import { postMessage } from './messages';
+  import { expandUnitItems } from './utils';
+  import { formatCurrency } from './currency';
+  import WizardPage from './WizardPage.svelte';
+
+  interface Props {
+    api: BookingApi;
+    cartManager: CartManager;
+    productId: string;
+    wizardPages: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
+    onCancel?: () => void;
+  }
+  let { api, cartManager, productId, wizardPages, autoSelectSingleTimeSlot = false, onCancel }: Props = $props();
+
+  let product = $state<CheckoutProductDto | null>(null);
+  let isLoading = $state(true);
+  let isAddingToCart = $state(false);
+
+  async function load() {
+    product = await api.getProduct(productId);
+    isLoading = false;
+  }
+
+  load();
+
+  async function onAddToCart(item: CartItem) {
+    isAddingToCart = true;
+
+    try {
+      await cartManager.ensureCart();
+
+      const unitItems = expandUnitItems(item.units);
+      const added = await api.addCartItem({
+        productId: item.productId,
+        optionId: item.optionId,
+        unitItems,
+        availabilityId: item.availabilityId,
+        localDate: item.localDate,
+        pickupPointId: item.pickupPointId,
+        amount: item.totalPrice,
+        currencyCode: item.currency,
+        currencyPrecision: item.currencyPrecision,
+      });
+
+      const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
+      postMessage({
+        type: 'cart:change',
+        itemCount: unitItems.length,
+        cartItemId: added.id,
+        totalFormatted: total,
+        openCheckout: true,
+      });
+    } 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}

package/src/lib/TimeSlotPicker.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { CheckoutAvailabilityDto } from './client-types';
+  import { formatTime } from './utils';
+  import SelectableCard from './SelectableCard.svelte';
+
+  interface Props {
+    timeSlots: CheckoutAvailabilityDto[];
+    selectedTime: string | null;
+    loading: boolean;
+    onTimeSelected: (time: string) => void;
+  }
+  let { timeSlots, selectedTime, loading, onTimeSelected }: Props = $props();
+</script>
+
+{#if loading}
+  <div class="loading-center"><div class="spinner"></div></div>
+{:else if timeSlots.length === 1 && timeSlots[0].allDay}
+  <p class="hint">All-day availability</p>
+{:else if timeSlots.length > 0}
+  <div class="slots">
+    {#each timeSlots as slot}
+      {@const time = formatTime(slot.localDateTimeStart)}
+      <SelectableCard
+        selected={selectedTime === time}
+        onSelect={() => onTimeSelected(time)}
+        heading={time}
+        body={slot.vacancies != null ? `${slot.vacancies} left` : undefined}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .hint {
+    text-align: center;
+    padding: 12px;
+    color: var(--bw-color-text-secondary);
+    font-size: 14px;
+  }
+  .slots {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+</style>

package/src/lib/UnitCounter.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { CheckoutUnitDto } from './client-types';
+  import { formatCurrency } from './currency';
+
+  interface Props {
+    unit: CheckoutUnitDto;
+    quantity: number;
+    onChange: (qty: number) => void;
+  }
+  let { unit, quantity, onChange }: Props = $props();
+
+  let priceLabel = $derived(() => {
+    if (!unit.pricing || unit.pricing.length === 0) return '';
+    const p = unit.pricing[0];
+    return `from ${formatCurrency(p.retail, p.currency, p.currencyPrecision)}`;
+  });
+
+  function decrement() { if (quantity > 0) onChange(quantity - 1); }
+
+  function increment() {
+    onChange(quantity + 1);
+  }
+</script>
+
+<div class="card row">
+  <div class="info">
+    <span class="name">{unit.title ?? unit.id}</span>
+    {#if priceLabel()}
+      <span class="price">{priceLabel()}</span>
+    {/if}
+  </div>
+  <div class="stepper">
+    <button class="step-btn" onclick={decrement} disabled={quantity === 0} aria-label="Decrease">&minus;</button>
+    <span class="qty">{quantity}</span>
+    <button class="step-btn" onclick={increment} aria-label="Increase">+</button>
+  </div>
+</div>
+
+<style>
+  .row {
+    display: flex;
+    align-items: center;
+  }
+  .info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .name {
+    font-size: 15px;
+    font-weight: 700;
+  }
+  .price {
+    font-size: 13px;
+    color: var(--bw-color-text-secondary);
+  }
+  .stepper {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .step-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: transparent;
+    border: 1.5px solid var(--bw-color-border);
+    color: var(--bw-color-primary);
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background var(--bw-transition), color var(--bw-transition), border-color var(--bw-transition);
+  }
+  .step-btn:hover:not(:disabled) {
+    background: var(--bw-color-primary);
+    color: white;
+  }
+  .step-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+  .qty {
+    font-size: 17px;
+    font-weight: 700;
+    min-width: 32px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+</style>