@code-collective/booking-widget 1.0.0

package/src/lib/WizardPage.svelte

@@ -0,0 +1,561 @@
+<script lang="ts">
+  import type { CartItem, CartUnitItem, CheckoutProductDto, CheckoutCartItemDetailDto, CheckoutOptionDto, CheckoutAvailabilityDto, CheckoutPickupLocationDto, CheckoutAvailabilityCalendarDto } from './client-types';
+  import type { BookingApi } from './api';
+  import type { WizardPages, WizardWidgetType } from './config';
+  import { formatCurrency } from './currency';
+  import { dateKey, formatTime, parseDateFromAvailabilityId } from './utils';
+  import OptionCard from './OptionCard.svelte';
+  import UnitCounter from './UnitCounter.svelte';
+  import AvailabilityCalendar from './AvailabilityCalendar.svelte';
+  import TimeSlotPicker from './TimeSlotPicker.svelte';
+  import SelectableCard from './SelectableCard.svelte';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    product: CheckoutProductDto;
+    api: BookingApi;
+    wizardPages: WizardPages;
+    editItem?: CheckoutCartItemDetailDto;
+    autoSelectSingleTimeSlot?: boolean;
+    onComplete: (item: CartItem) => void;
+    onCancel?: () => void;
+  }
+  let {
+    product, api, wizardPages,
+    editItem, autoSelectSingleTimeSlot = false, onComplete, onCancel,
+  }: Props = $props();
+
+  let editMode = $derived(editItem != null);
+  // In age-first flow the option is selected after date/time, so it should
+  // stay changeable even during an edit. Lock it only in option-first flow.
+  let lockedOptionId = $derived(editItem && !isAgeFirstFlow() ? editItem.optionId : undefined);
+
+  let pageIndex = $state(0);
+  let selectedOption = $state<CheckoutOptionDto | null>(null);
+  let unitQuantities = $state<Record<string, number>>({});
+  let selectedDate = $state<Date | null>(null);
+  let selectedTime = $state<string | null>(null);
+  let selectedTimeSlot = $state<CheckoutAvailabilityDto | null>(null);
+  let selectedPickupPoint = $state<CheckoutPickupLocationDto | null>(null);
+  let availabilityByDate = $state<Record<string, CheckoutAvailabilityCalendarDto>>({});
+  let timeSlots = $state<CheckoutAvailabilityDto[]>([]);
+  let loadingAvailability = $state(false);
+  let loadingTimeSlots = $state(false);
+  let dirty = $state(false);
+  let showConfirmDialog = $state(false);
+
+  let hasQuantities = $derived(Object.values(unitQuantities).some(q => q > 0));
+  let hasAllDaySlot = $derived(timeSlots.length === 1 && timeSlots[0].allDay);
+  let hasSingleSlot = $derived(timeSlots.length === 1);
+  let hideTimePicker = $derived(hasAllDaySlot || (autoSelectSingleTimeSlot && hasSingleSlot));
+
+  // -- Flow detection --
+  // When age-category appears on an earlier page than option, the user picks
+  // quantities first, then date/time, then option last. All options share the
+  // same unit types, so we can show units and fetch availability before an
+  // option is selected by using the first option as a stand-in.
+  let isAgeFirstFlow = $derived(() => {
+    const agePage = wizardPages.findIndex(p => p.includes('age-category'));
+    const optPage = wizardPages.findIndex(p => p.includes('option'));
+    return agePage >= 0 && (optPage < 0 || agePage < optPage);
+  });
+
+  let availableUnits = $derived(() => {
+    if (selectedOption) return selectedOption.units;
+    if (isAgeFirstFlow()) return product.options[0]?.units ?? [];
+    return [];
+  });
+
+  let effectiveOptionId = $derived(() => {
+    if (selectedOption) return selectedOption.id;
+    if (isAgeFirstFlow()) return product.options[0]?.id ?? null;
+    return null;
+  });
+
+  onMount(() => {
+    if (!editItem) return;
+    restoreFromCartItem(editItem);
+  });
+
+  function restoreFromCartItem(item: CheckoutCartItemDetailDto) {
+    const opt = product.options.find(o => o.id === item.optionId);
+    if (opt) selectedOption = opt;
+
+    const counts: Record<string, number> = {};
+    for (const u of item.unitItems) {
+      counts[u.unitId] = (counts[u.unitId] ?? 0) + 1;
+    }
+    unitQuantities = counts;
+
+    if (hasQuantities) restoreAvailabilityState(item.availabilityId, item.pickupPointId);
+  }
+
+  async function restoreAvailabilityState(availabilityId?: string, pickupPointId?: string) {
+    await fetchAvailability();
+
+    if (!availabilityId) return;
+
+    const localDate = parseDateFromAvailabilityId(availabilityId);
+    if (!localDate) return;
+
+    const optionId = effectiveOptionId();
+    if (!optionId) return;
+
+    const parts = localDate.split('-').map(Number);
+    selectedDate = new Date(parts[0], parts[1] - 1, parts[2]);
+
+    loadingTimeSlots = true;
+    const slots = await api.getAvailability(product.id, optionId, localDate);
+    timeSlots = slots;
+    loadingTimeSlots = false;
+
+    const match = slots.find(s => s.id === availabilityId);
+    if (match) {
+      selectedTimeSlot = match;
+      if (!match.allDay) {
+        selectedTime = formatTime(match.localDateTimeStart);
+      }
+      if (pickupPointId && selectedOption?.pickupAvailable) {
+        selectedPickupPoint = selectedOption.pickupLocations?.find(p => p.id === pickupPointId) ?? null;
+      }
+    }
+  }
+
+  function isWidgetVisible(type: WizardWidgetType): boolean {
+    if (isAgeFirstFlow()) return isWidgetVisibleAgeFirst(type);
+    return isWidgetVisibleOptionFirst(type);
+  }
+
+  // Default flow: option -> age-category -> date -> time -> pickup
+  function isWidgetVisibleOptionFirst(type: WizardWidgetType): boolean {
+    switch (type) {
+      case 'option': return !lockedOptionId;
+      case 'age-category': return selectedOption != null;
+      case 'date': return hasQuantities;
+      case 'time': return selectedDate != null && !hideTimePicker;
+      case 'pickup': return selectedTimeSlot != null && selectedOption?.pickupAvailable === true;
+      case 'addon': return false;
+    }
+  }
+
+  // Alternate flow: age-category -> date -> time -> option -> pickup
+  function isWidgetVisibleAgeFirst(type: WizardWidgetType): boolean {
+    switch (type) {
+      case 'age-category': return availableUnits().length > 0;
+      case 'date': return hasQuantities;
+      case 'time': return selectedDate != null && !hideTimePicker;
+      case 'option': return !lockedOptionId && (selectedTimeSlot != null || (selectedDate != null && hideTimePicker));
+      case 'pickup': return selectedOption != null && selectedOption.pickupAvailable === true && selectedTimeSlot != null;
+      case 'addon': return false;
+    }
+  }
+
+  let visiblePages = $derived(() => {
+    const result: { index: number; widgets: WizardWidgetType[] }[] = [];
+    for (let i = 0; i < wizardPages.length; i++) {
+      const visible = wizardPages[i].filter(isWidgetVisible);
+      if (visible.length > 0) result.push({ index: i, widgets: visible });
+    }
+    return result;
+  });
+
+  let allVisibleWidgets = $derived(() => {
+    const result: WizardWidgetType[] = [];
+    for (const page of wizardPages) {
+      for (const w of page) {
+        if (isWidgetVisible(w) && !result.includes(w)) result.push(w);
+      }
+    }
+    return result;
+  });
+
+  let currentPage = $derived(() => {
+    const pages = visiblePages();
+    if (pageIndex >= pages.length) return pages[pages.length - 1] ?? null;
+    return pages[pageIndex] ?? null;
+  });
+
+  let isLastPage = $derived(() => pageIndex >= visiblePages().length - 1);
+
+  let pageComplete = $derived(() => {
+    const widgets = editMode ? allVisibleWidgets() : (currentPage()?.widgets ?? []);
+    if (widgets.length === 0) return false;
+    for (const w of widgets) {
+      switch (w) {
+        case 'option': if (!selectedOption) return false; break;
+        case 'age-category': if (!hasQuantities) return false; break;
+        case 'date': if (!selectedDate) return false; break;
+        case 'time': if (!selectedTime && !hideTimePicker) return false; break;
+        case 'pickup':
+          if (selectedOption?.pickupRequired && !selectedPickupPoint) return false;
+          break;
+      }
+    }
+    return true;
+  });
+
+  let formattedTotal = $derived(() => {
+    if (!selectedTimeSlot?.unitPricing || selectedTimeSlot.unitPricing.length === 0) return '';
+    let total = 0;
+    for (const up of selectedTimeSlot.unitPricing) {
+      const qty = unitQuantities[up.unitId] ?? 0;
+      if (qty > 0) total += up.retail * qty;
+    }
+    const first = selectedTimeSlot.unitPricing[0];
+    return formatCurrency(total, first.currency, first.currencyPrecision);
+  });
+
+  function selectOption(option: CheckoutOptionDto) {
+    // In age-first flow the user already picked quantities, date, and time
+    // before reaching the option step — keep those selections intact.
+    if (isAgeFirstFlow()) {
+      selectedOption = option;
+      selectedPickupPoint = null;
+      dirty = true;
+      return;
+    }
+
+    selectedOption = option;
+    unitQuantities = Object.fromEntries(option.units.map(u => [u.id, 0]));
+    selectedDate = null;
+    selectedTime = null;
+    selectedTimeSlot = null;
+    selectedPickupPoint = null;
+    availabilityByDate = {};
+    timeSlots = [];
+    dirty = true;
+  }
+
+  function onUnitChanged(unitId: string, qty: number) {
+    unitQuantities = { ...unitQuantities, [unitId]: qty };
+    dirty = true;
+    if (hasQuantities && Object.keys(availabilityByDate).length === 0) {
+      fetchAvailability();
+    }
+  }
+
+  async function fetchAvailability() {
+    const optionId = effectiveOptionId();
+    if (!optionId) return;
+    loadingAvailability = true;
+    availabilityByDate = await api.getAvailabilityCalendar(product.id, optionId);
+    loadingAvailability = false;
+  }
+
+  async function onDateSelected(date: Date) {
+    const optionId = effectiveOptionId();
+    if (!optionId) return;
+    selectedDate = date;
+    selectedTime = null;
+    selectedTimeSlot = null;
+    selectedPickupPoint = null;
+    timeSlots = [];
+    dirty = true;
+    loadingTimeSlots = true;
+
+    const slots = await api.getAvailability(product.id, optionId, dateKey(date));
+    timeSlots = slots;
+    loadingTimeSlots = false;
+
+    if (slots.length === 1 && (slots[0].allDay || autoSelectSingleTimeSlot)) {
+      selectedTimeSlot = slots[0];
+      if (!slots[0].allDay) {
+        selectedTime = formatTime(slots[0].localDateTimeStart);
+      }
+    }
+  }
+
+  function onTimeSelected(time: string) {
+    const slot = timeSlots.find(s => formatTime(s.localDateTimeStart) === time && s.available);
+    if (!slot) return;
+    selectedTime = time;
+    selectedTimeSlot = slot;
+    selectedPickupPoint = null;
+    dirty = true;
+  }
+
+  function onPickupSelected(point: CheckoutPickupLocationDto) {
+    selectedPickupPoint = point;
+    dirty = true;
+  }
+
+  function goNext() {
+    if (isLastPage()) completeWizard();
+    else pageIndex++;
+  }
+
+  function goBack() {
+    if (pageIndex > 0) {
+      pageIndex--;
+    } else if (onCancel) {
+      handleCancel();
+    } else if (!lockedOptionId && selectedOption) {
+      selectedOption = null;
+      unitQuantities = {};
+      selectedDate = null;
+      selectedTime = null;
+      selectedTimeSlot = null;
+      selectedPickupPoint = null;
+      availabilityByDate = {};
+      timeSlots = [];
+    }
+  }
+
+  function handleCancel() {
+    if (dirty) {
+      showConfirmDialog = true;
+      return;
+    }
+    onCancel?.();
+  }
+
+  function confirmDiscard() {
+    showConfirmDialog = false;
+    onCancel?.();
+  }
+
+  function completeWizard() {
+    if (!selectedTimeSlot || !selectedOption) return;
+
+    const cartUnits: CartUnitItem[] = [];
+    for (const up of (selectedTimeSlot.unitPricing ?? [])) {
+      const qty = unitQuantities[up.unitId] ?? 0;
+      if (qty <= 0) continue;
+      const unit = availableUnits().find(u => u.id === up.unitId);
+      cartUnits.push({
+        unitId: up.unitId,
+        quantity: qty,
+        title: unit?.title ?? up.unitId,
+        pricePerUnit: up.retail,
+      });
+    }
+
+    let totalPrice = 0;
+    for (const u of cartUnits) totalPrice += u.pricePerUnit * u.quantity;
+
+    const firstPricing = selectedTimeSlot.unitPricing?.[0];
+    const currency = firstPricing?.currency ?? product.defaultCurrency ?? 'ZAR';
+    const currencyPrecision = firstPricing?.currencyPrecision ?? 2;
+
+    onComplete({
+      productId: product.id,
+      optionId: selectedOption.id,
+      optionTitle: selectedOption.title,
+      availabilityId: selectedTimeSlot.id,
+      localDate: selectedDate ? dateKey(selectedDate) : undefined,
+      pickupPointId: selectedPickupPoint?.id,
+      units: cartUnits,
+      totalPrice,
+      currency,
+      currencyPrecision,
+    });
+  }
+</script>
+
+<div class="wizard">
+  {#if !editMode}
+    <div class="wizard-header">
+      <h2>Buy Tickets</h2>
+    </div>
+  {/if}
+
+  <div class="wizard-body">
+    {#each editMode ? allVisibleWidgets() : (currentPage()?.widgets ?? []) as widgetType}
+      {#if widgetType === 'option' && !lockedOptionId}
+        <div class="section">
+          <h4 class="section-title">Options</h4>
+          <div class="option-list">
+            {#each product.options as option}
+              <OptionCard
+                {option}
+                selected={selectedOption?.id === option.id}
+                onSelect={() => selectOption(option)}
+              />
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if widgetType === 'age-category' && availableUnits().length > 0}
+        <div class="section">
+          <h4 class="section-title">How many tickets?</h4>
+          <div class="unit-list">
+            {#each availableUnits() as unit}
+              <UnitCounter
+                {unit}
+                quantity={unitQuantities[unit.id] ?? 0}
+                onChange={(qty) => onUnitChanged(unit.id, qty)}
+              />
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if widgetType === 'date' && hasQuantities}
+        <div class="section">
+          <h4 class="section-title">Choose a date</h4>
+          <AvailabilityCalendar
+            {availabilityByDate}
+            {selectedDate}
+            onDateSelected={onDateSelected}
+            loading={loadingAvailability}
+          />
+        </div>
+      {/if}
+
+      {#if widgetType === 'time' && selectedDate && !hideTimePicker}
+        <div class="section">
+          <h4 class="section-title">Select a time</h4>
+          <TimeSlotPicker
+            {timeSlots}
+            {selectedTime}
+            loading={loadingTimeSlots}
+            onTimeSelected={onTimeSelected}
+          />
+        </div>
+      {/if}
+
+      {#if widgetType === 'pickup' && selectedOption?.pickupAvailable && selectedOption.pickupLocations}
+        <div class="section">
+          <h4 class="section-title">Select pickup point</h4>
+          <div class="pickup-list">
+            {#each selectedOption.pickupLocations as point}
+              <SelectableCard
+                selected={selectedPickupPoint?.id === point.id}
+                onSelect={() => onPickupSelected(point)}
+                heading={point.title ?? point.id}
+                body={point.address}
+              />
+            {/each}
+          </div>
+        </div>
+      {/if}
+    {/each}
+
+    <div class="action-bar">
+      {#if editMode}
+        <button class="btn btn-secondary" onclick={handleCancel}>
+          Return to Cart
+        </button>
+        <button class="btn btn-primary" onclick={completeWizard} disabled={!pageComplete()}>
+          Save &amp; Update
+        </button>
+      {:else}
+        {#if pageIndex > 0 || onCancel}
+          <button class="btn btn-secondary" onclick={goBack}>
+            {pageIndex > 0 ? 'Back' : 'Cancel'}
+          </button>
+        {/if}
+        <button class="btn btn-primary" onclick={goNext} disabled={!pageComplete()}>
+          {isLastPage() ? 'Add to Cart' : 'Next'}
+          <span class="arrow">&rarr;</span>
+        </button>
+      {/if}
+    </div>
+  </div>
+</div>
+
+{#if showConfirmDialog}
+  <div class="dialog-backdrop" onclick={() => { showConfirmDialog = false; }}>
+    <div class="dialog" onclick={(e) => e.stopPropagation()}>
+      <h3 class="dialog-title">You have unsaved changes</h3>
+      <p class="dialog-body">Would you like to proceed?</p>
+      <div class="dialog-actions">
+        <button class="dialog-btn-text" onclick={confirmDiscard}>Discard changes</button>
+        <button class="dialog-btn-fill" onclick={() => { showConfirmDialog = false; }}>Return to editing</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .wizard {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+  .wizard-header {
+    padding: 20px 16px 16px;
+    border-bottom: 1px solid var(--bw-color-border);
+  }
+  .wizard-header h2 {
+    font-size: 20px;
+    font-weight: 800;
+  }
+  .wizard-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+  .section {
+    margin-bottom: 24px;
+  }
+  .option-list, .pickup-list, .unit-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  /* ── Confirm dialog ────────────────────── */
+  .dialog-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+  }
+  .dialog {
+    background: white;
+    border-radius: var(--bw-radius-lg);
+    padding: 24px;
+    width: 90%;
+    max-width: 360px;
+    box-shadow: var(--bw-shadow-3);
+  }
+  .dialog-title {
+    font-size: 17px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+  .dialog-body {
+    font-size: 14px;
+    color: var(--bw-color-text-secondary);
+    margin-bottom: 24px;
+  }
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+  .dialog-btn-text {
+    background: none;
+    border: none;
+    color: var(--bw-color-primary);
+    font-size: 14px;
+    font-weight: 600;
+    padding: 10px 16px;
+    border-radius: var(--bw-radius-md);
+  }
+  .dialog-btn-text:hover {
+    background: var(--bw-color-primary-light);
+  }
+  .dialog-btn-fill {
+    background: var(--bw-color-primary);
+    color: white;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 10px 20px;
+    border-radius: var(--bw-radius-md);
+  }
+  .dialog-btn-fill:hover {
+    background: var(--bw-color-primary-dark);
+  }
+</style>