@code-collective/booking-widget 1.0.3 → 1.0.4

package/src/lib/WizardPage.svelte

@@ -1,7 +1,7 @@
 <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 type { WizardPages, WizardPageConfig, WizardWidgetType } from './config';
   import { formatCurrency } from './currency';
   import { dateKey, formatTime, parseDateFromAvailabilityId } from './utils';
   import OptionCard from './OptionCard.svelte';
@@ -15,13 +15,14 @@
     product: CheckoutProductDto;
     api: BookingApi;
     wizardPages: WizardPages;
+    editPages?: WizardPages;
     editItem?: CheckoutCartItemDetailDto;
     autoSelectSingleTimeSlot?: boolean;
     onComplete: (item: CartItem) => void;
     onCancel?: () => void;
   }
   let {
-    product, api, wizardPages,
+    product, api, wizardPages, editPages = wizardPages,
     editItem, autoSelectSingleTimeSlot = false, onComplete, onCancel,
   }: Props = $props();
 
@@ -43,10 +44,27 @@
   let loadingTimeSlots = $state(false);
   let dirty = $state(false);
   let showConfirmDialog = $state(false);
+  let expandedSection = $state(0);
+
+  // Widgets whose previously-made selection was invalidated by a later change (e.g. a
+  // capacity increase that no longer fits the selected slot) and now needs to be redone.
+  // Surfaced on the edit accordion as a red border + "needs new configuration" summary,
+  // even while collapsed, so the user knows exactly what to revisit instead of everything.
+  let invalidatedWidgets = $state<Set<WizardWidgetType>>(new Set());
+
+  function markInvalidated(...types: WizardWidgetType[]) {
+    invalidatedWidgets = new Set([...invalidatedWidgets, ...types]);
+  }
+
+  function clearInvalidated(...types: WizardWidgetType[]) {
+    if (types.every(t => !invalidatedWidgets.has(t))) return;
+    invalidatedWidgets = new Set([...invalidatedWidgets].filter(w => !types.includes(w)));
+  }
 
   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 hasNoTimeSlots = $derived(!loadingTimeSlots && timeSlots.length === 0);
   let hideTimePicker = $derived(hasAllDaySlot || (autoSelectSingleTimeSlot && hasSingleSlot));
 
   // -- Flow detection --
@@ -55,8 +73,8 @@
   // 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'));
+    const agePage = wizardPages.findIndex(p => p.widgets.includes('age-category'));
+    const optPage = wizardPages.findIndex(p => p.widgets.includes('option'));
     return agePage >= 0 && (optPage < 0 || agePage < optPage);
   });
 
@@ -132,7 +150,7 @@
       case 'option': return !lockedOptionId;
       case 'age-category': return selectedOption != null;
       case 'date': return hasQuantities;
-      case 'time': return selectedDate != null && !hideTimePicker;
+      case 'time': return selectedDate != null && !hideTimePicker && !hasNoTimeSlots;
       case 'pickup': return selectedTimeSlot != null && selectedOption?.pickupAvailable === true;
       case 'addon': return false;
     }
@@ -143,7 +161,7 @@
     switch (type) {
       case 'age-category': return availableUnits().length > 0;
       case 'date': return hasQuantities;
-      case 'time': return selectedDate != null && !hideTimePicker;
+      case 'time': return selectedDate != null && !hideTimePicker && !hasNoTimeSlots;
       case 'option': return !lockedOptionId && (selectedTimeSlot != null || (selectedDate != null && hideTimePicker));
       case 'pickup': return selectedOption != null && selectedOption.pickupAvailable === true && selectedTimeSlot != null;
       case 'addon': return false;
@@ -151,18 +169,18 @@
   }
 
   let visiblePages = $derived(() => {
-    const result: { index: number; widgets: WizardWidgetType[] }[] = [];
+    const result: { index: number; title: string; 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 });
+      const visible = wizardPages[i].widgets.filter(isWidgetVisible);
+      if (visible.length > 0) result.push({ index: i, title: wizardPages[i].title, widgets: visible });
     }
     return result;
   });
 
   let allVisibleWidgets = $derived(() => {
     const result: WizardWidgetType[] = [];
-    for (const page of wizardPages) {
-      for (const w of page) {
+    for (const page of editPages) {
+      for (const w of page.widgets) {
         if (isWidgetVisible(w) && !result.includes(w)) result.push(w);
       }
     }
@@ -177,7 +195,53 @@
 
   let isLastPage = $derived(() => pageIndex >= visiblePages().length - 1);
 
+  let pageTitle = $derived(() => currentPage()?.title ?? '');
+
+  function widgetSummary(type: WizardWidgetType): string {
+    switch (type) {
+      case 'option':
+        return selectedOption?.title ?? 'Not selected';
+      case 'age-category': {
+        const parts: string[] = [];
+        for (const unit of availableUnits()) {
+          const qty = unitQuantities[unit.id] ?? 0;
+          if (qty > 0) parts.push(`${qty} ${unit.title}`);
+        }
+        return parts.length > 0 ? parts.join(', ') : 'Not selected';
+      }
+      case 'date':
+        if (!selectedDate) return 'Not selected';
+        return selectedDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+      case 'time':
+        return selectedTime ?? (hideTimePicker ? 'All day' : 'Not selected');
+      case 'pickup':
+        return selectedPickupPoint?.title ?? selectedPickupPoint?.id ?? 'Not selected';
+      default:
+        return '';
+    }
+  }
+
+  function sectionSummary(widgets: WizardWidgetType[]): string {
+    return widgets.map(widgetSummary).filter(s => s && s !== 'Not selected').join(' \u00B7 ') || 'Not selected';
+  }
+
+  let editSections = $derived(() => {
+    const result: { title: string; widgets: WizardWidgetType[] }[] = [];
+    for (const page of editPages) {
+      const visible = page.widgets.filter(isWidgetVisible);
+      if (visible.length > 0) {
+        result.push({ title: page.title, widgets: visible });
+      }
+    }
+    return result;
+  });
+
   let pageComplete = $derived(() => {
+    // A date with confirmed zero slots can never be completed - 'time' is hidden entirely in
+    // this case (see isWidgetVisible), so without this the widget-list check below would never
+    // even look at it and could wrongly treat the page as done.
+    if (selectedDate != null && hasNoTimeSlots) return false;
+
     const widgets = editMode ? allVisibleWidgets() : (currentPage()?.widgets ?? []);
     if (widgets.length === 0) return false;
     for (const w of widgets) {
@@ -207,10 +271,14 @@
 
   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.
+    // before reaching the option step — keep those selections intact. Pickup only
+    // needs to be redone if the new option doesn't offer the point already chosen.
     if (isAgeFirstFlow()) {
       selectedOption = option;
-      selectedPickupPoint = null;
+      if (selectedPickupPoint && !option.pickupLocations?.some(p => p.id === selectedPickupPoint!.id)) {
+        selectedPickupPoint = null;
+        markInvalidated('pickup');
+      }
       dirty = true;
       return;
     }
@@ -232,6 +300,22 @@
     if (hasQuantities && Object.keys(availabilityByDate).length === 0) {
       fetchAvailability();
     }
+    invalidateDateIfCapacityExceedsSlot();
+  }
+
+  // A capacity increase can outgrow the already-selected slot's vacancy - if so, that slot
+  // no longer covers the booking and needs to be reselected. If it still has room (or has no
+  // vacancy limit at all), the date/time picked earlier is still perfectly valid.
+  function invalidateDateIfCapacityExceedsSlot() {
+    if (!selectedTimeSlot || selectedTimeSlot.vacancies == null) return;
+    const totalQty = Object.values(unitQuantities).reduce((sum, q) => sum + q, 0);
+    if (totalQty <= selectedTimeSlot.vacancies) return;
+
+    selectedDate = null;
+    selectedTime = null;
+    selectedTimeSlot = null;
+    timeSlots = [];
+    markInvalidated('date', 'time');
   }
 
   async function fetchAvailability() {
@@ -245,13 +329,15 @@
   async function onDateSelected(date: Date) {
     const optionId = effectiveOptionId();
     if (!optionId) return;
+    // Pickup points are a property of the option, not the date/time, so an already-chosen
+    // one stays valid across a date change and doesn't need to be picked again.
     selectedDate = date;
     selectedTime = null;
     selectedTimeSlot = null;
-    selectedPickupPoint = null;
     timeSlots = [];
     dirty = true;
     loadingTimeSlots = true;
+    clearInvalidated('date', 'time');
 
     const slots = await api.getAvailability(product.id, optionId, dateKey(date));
     timeSlots = slots;
@@ -270,13 +356,14 @@
     if (!slot) return;
     selectedTime = time;
     selectedTimeSlot = slot;
-    selectedPickupPoint = null;
     dirty = true;
+    clearInvalidated('time');
   }
 
   function onPickupSelected(point: CheckoutPickupLocationDto) {
     selectedPickupPoint = point;
     dirty = true;
+    clearInvalidated('pickup');
   }
 
   function goNext() {
@@ -359,100 +446,205 @@
     </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>
+  {#if !editMode}
+    <div class="page-title-row">
+      <h3 class="page-title">{pageTitle()}</h3>
+      {#if visiblePages().length > 1}
+        <div class="page-dots">
+          {#each visiblePages() as _, i}
+            <span class="dot" class:active={i === pageIndex}></span>
+          {/each}
         </div>
       {/if}
+    </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>
+  {#if editMode}
+    <div class="wizard-body">
+      {#each editSections() as section, sectionIndex}
+        {@const sectionInvalidated = section.widgets.some(w => invalidatedWidgets.has(w))}
+        <div class="accordion-section" class:expanded={expandedSection === sectionIndex} class:invalidated={sectionInvalidated}>
+          <button class="accordion-header" onclick={() => { expandedSection = expandedSection === sectionIndex ? -1 : sectionIndex; }}>
+            <div class="accordion-header-text">
+              <span class="accordion-title">{section.title.toUpperCase()}</span>
+              {#if expandedSection !== sectionIndex}
+                <span class="accordion-summary" class:invalidated={sectionInvalidated}>
+                  {sectionInvalidated ? 'Changes made require new configuration' : sectionSummary(section.widgets)}
+                </span>
+              {/if}
+            </div>
+            <span class="accordion-chevron" class:open={expandedSection === sectionIndex}></span>
+          </button>
+          {#if expandedSection === sectionIndex}
+            <div class="accordion-body">
+              {#each section.widgets as widgetType}
+                {#if widgetType === 'option' && !lockedOptionId}
+                  <div class="section">
+                    <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">
+                    <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">
+                    <AvailabilityCalendar
+                      {availabilityByDate}
+                      {selectedDate}
+                      onDateSelected={onDateSelected}
+                      loading={loadingAvailability}
+                    />
+                  </div>
+                {/if}
+
+                {#if widgetType === 'time' && selectedDate && !hideTimePicker}
+                  <div class="section">
+                    <TimeSlotPicker
+                      {timeSlots}
+                      {selectedTime}
+                      loading={loadingTimeSlots}
+                      onTimeSelected={onTimeSelected}
+                    />
+                  </div>
+                {/if}
+
+                {#if widgetType === 'pickup' && selectedOption?.pickupAvailable && selectedOption.pickupLocations}
+                  <div class="section">
+                    <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>
+          {/if}
         </div>
-      {/if}
+      {/each}
+    </div>
 
-      {#if widgetType === 'date' && hasQuantities}
-        <div class="section">
-          <h4 class="section-title">Choose a date</h4>
-          <AvailabilityCalendar
-            {availabilityByDate}
-            {selectedDate}
-            onDateSelected={onDateSelected}
-            loading={loadingAvailability}
-          />
-        </div>
-      {/if}
+    <div class="action-bar">
+      <button class="btn btn-secondary" onclick={handleCancel}>
+        Return to Cart
+      </button>
+      <button class="btn btn-primary" onclick={completeWizard} disabled={!pageComplete()}>
+        Save &amp; Update
+      </button>
+    </div>
 
-      {#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}
+  {:else}
+    <div class="wizard-body">
+      {#each 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 === '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}
+        {#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>
-        </div>
-      {/if}
-    {/each}
+        {/if}
 
-    <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 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}
-        <button class="btn btn-primary" onclick={goNext} disabled={!pageComplete()}>
-          {isLastPage() ? 'Add to Cart' : 'Next'}
-          <span class="arrow">&rarr;</span>
+
+        {#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>
+
+    <div class="action-bar">
+      {#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>
     </div>
-  </div>
+  {/if}
 </div>
 
 {#if showConfirmDialog}
@@ -484,6 +676,89 @@
     font-size: 20px;
     font-weight: 800;
   }
+  .page-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px 0;
+  }
+  .page-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--bw-color-text);
+  }
+  .page-dots {
+    display: flex;
+    gap: 6px;
+  }
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--bw-color-border);
+  }
+  .dot.active {
+    background: var(--bw-color-text);
+  }
+  .accordion-section {
+    border: 1px solid var(--bw-color-border);
+    border-radius: var(--bw-radius-lg);
+    margin-bottom: 12px;
+    overflow: hidden;
+    background: var(--bw-color-bg);
+  }
+  .accordion-section.invalidated {
+    border-color: var(--bw-color-error);
+  }
+  .accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 16px 20px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+  }
+  .accordion-header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    flex: 1;
+  }
+  .accordion-title {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--bw-color-text-secondary);
+  }
+  .accordion-summary {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--bw-color-text);
+  }
+  .accordion-summary.invalidated {
+    color: var(--bw-color-error);
+  }
+  .accordion-chevron {
+    flex-shrink: 0;
+    margin-left: 12px;
+    width: 12px;
+    height: 12px;
+    border-right: 2px solid var(--bw-color-text-secondary);
+    border-bottom: 2px solid var(--bw-color-text-secondary);
+    transform: rotate(45deg);
+    transition: transform 0.15s ease;
+  }
+  .accordion-chevron.open {
+    transform: rotate(-135deg);
+  }
+  .accordion-body {
+    padding: 0 20px 20px;
+  }
   .wizard-body {
     flex: 1;
     overflow-y: auto;