@code-collective/booking-widget 1.0.3 → 1.0.4

package/src/lib/config.ts

@@ -4,14 +4,78 @@ export type CartOverviewDisplay = 'bar' | 'button';
 
 export type WizardWidgetType = 'option' | 'age-category' | 'date' | 'time' | 'pickup' | 'addon';
 
-export type WizardPages = WizardWidgetType[][];
+export interface WizardPageConfig {
+  title: string;
+  widgets: WizardWidgetType[];
+}
+
+export type WizardPages = WizardPageConfig[];
 
 export const DEFAULT_WIZARD_PAGES: WizardPages = [
-  ['option', 'age-category'],
-  ['date', 'time'],
-  ['pickup'],
+  { title: 'Option',         widgets: ['option', 'age-category'] },
+  { title: 'Schedule',       widgets: ['date', 'time'] },
+  { title: 'Pickup',         widgets: ['pickup'] },
 ];
 
+const WIZARD_PRESETS: Record<string, WizardPages> = {
+  'option-first': DEFAULT_WIZARD_PAGES,
+  'date-first': [
+    { title: 'Age & capacity', widgets: ['age-category'] },
+    { title: 'Schedule',       widgets: ['date', 'time'] },
+    { title: 'Option',         widgets: ['option'] },
+    { title: 'Pickup',         widgets: ['pickup'] },
+  ],
+};
+
+// Accepts a preset name ("option-first", "date-first") or a JSON array of { title, widgets } objects.
+export function resolveWizardPages(value: string | null | undefined): WizardPages {
+  if (!value) return DEFAULT_WIZARD_PAGES;
+  if (value in WIZARD_PRESETS) return WIZARD_PRESETS[value];
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].widgets) return parsed;
+  } catch { /* use default */ }
+  return DEFAULT_WIZARD_PAGES;
+}
+
+// Grouping for the checkout edit-item accordion - deliberately different from the step wizard's own page
+// breakdown, since a step-by-step flow and a "review everything at once" accordion don't need the same
+// shape. Age & capacity, date and time always live together in one section here, regardless of which
+// preset is in play - only where that section falls (first vs. second) changes with option-first vs.
+// date-first.
+const EDIT_PRESETS: Record<string, WizardPages> = {
+  'option-first': [
+    { title: 'Option', widgets: ['option'] },
+    { title: 'Age, Date & Time', widgets: ['age-category', 'date', 'time'] },
+    { title: 'Pickup', widgets: ['pickup'] },
+  ],
+  'date-first': [
+    { title: 'Age, Date & Time', widgets: ['age-category', 'date', 'time'] },
+    { title: 'Option', widgets: ['option'] },
+    { title: 'Pickup', widgets: ['pickup'] },
+  ],
+};
+
+// Resolves the grouping for the checkout edit-item accordion. If editValue is set, it's resolved the same
+// way as wizardPages (a preset name or a custom JSON array). Otherwise, defaults to the grouped layout for
+// whichever named wizard preset wizardValue resolves to (including the "no value given" case, which is
+// option-first) - but if wizardValue is itself a custom, unnamed page layout, there's no sensible grouping
+// to infer, so editPages just mirrors it directly.
+export function resolveEditPages(wizardValue: string | null | undefined, editValue: string | null | undefined): WizardPages {
+  if (editValue) {
+    if (editValue in EDIT_PRESETS) return EDIT_PRESETS[editValue];
+    try {
+      const parsed = JSON.parse(editValue);
+      if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].widgets) return parsed;
+    } catch { /* fall through to the wizardPages-derived default */ }
+  }
+
+  const wizardKey = wizardValue ? (wizardValue in WIZARD_PRESETS ? wizardValue : null) : 'option-first';
+  if (wizardKey) return EDIT_PRESETS[wizardKey];
+
+  return resolveWizardPages(wizardValue);
+}
+
 export interface AppConfig {
   apiBaseUrl: string;
   productId: string;
@@ -22,6 +86,7 @@ export interface AppConfig {
   cartDisplay: CartOverviewDisplay;
   orderId: string;
   wizardPages: WizardPages;
+  editPages: WizardPages;
   autoSelectSingleTimeSlot: boolean;
   name: string;
   cancelable: boolean;
@@ -42,7 +107,8 @@ export function readConfig(): AppConfig {
       mode: parseMode(params.get('mode')),
       cartDisplay: parseCartDisplay(params.get('cartDisplay')),
       orderId: params.get('orderId') ?? '',
-      wizardPages: parseWizardPages(params.get('wizard')),
+      wizardPages: resolveWizardPages(params.get('wizard')),
+      editPages: resolveEditPages(params.get('wizard'), params.get('edit')),
       autoSelectSingleTimeSlot: params.get('autoSelectSingleTimeSlot') === 'true',
       name: params.get('name') ?? '',
       cancelable: params.get('cancelable') === 'true',
@@ -59,6 +125,7 @@ export function readConfig(): AppConfig {
     cartDisplay: 'bar',
     orderId: '',
     wizardPages: DEFAULT_WIZARD_PAGES,
+    editPages: EDIT_PRESETS['option-first'],
     autoSelectSingleTimeSlot: false,
     name: '',
     cancelable: false,
@@ -81,12 +148,3 @@ function deriveCheckoutKey(productId: string): string {
   const first = productId[0]?.toLowerCase() ?? '';
   return first >= 'a' && first <= 'j' ? 'morii' : 'csbs';
 }
-
-function parseWizardPages(value: string | null): WizardPages {
-  if (!value) return DEFAULT_WIZARD_PAGES;
-  try {
-    const parsed = JSON.parse(value);
-    if (Array.isArray(parsed) && parsed.every(Array.isArray)) return parsed;
-  } catch { /* use default */ }
-  return DEFAULT_WIZARD_PAGES;
-}

package/src/lib/elements/bw-checkout.svelte

@@ -2,14 +2,18 @@
 
 <script lang="ts">
   import Checkout from '../Checkout.svelte';
-  import { DEFAULT_WIZARD_PAGES } from '../config';
+  import { resolveWizardPages, resolveEditPages } from '../config';
   import { getSharedServices } from './shared';
 
   let {
     'wizard-pages': wizardPagesJson = '',
+    'edit-pages': editPagesJson = '',
     'is-modal': isModalAttr = undefined,
+    'auto-select-single-time-slot': autoSelectSingleTimeSlotAttr = undefined,
   } = $props();
 
+  let autoSelectSingleTimeSlot = $derived(autoSelectSingleTimeSlotAttr !== undefined);
+
   let isModal = $derived(isModalAttr !== undefined);
   let showModal = $state(false);
 
@@ -18,7 +22,8 @@
   let ready = $state(false);
   readyPromise.then(() => { ready = true; });
 
-  let wizardPages = $derived(wizardPagesJson ? JSON.parse(wizardPagesJson) : DEFAULT_WIZARD_PAGES);
+  let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
+  let editPages = $derived(resolveEditPages(wizardPagesJson, editPagesJson));
 
   function dispatch(name: string, detail: unknown) {
     const host = (document.querySelector('bw-checkout') as HTMLElement) ?? document.body;
@@ -69,12 +74,12 @@
     <div class="bw-modal-overlay" onclick={() => close()}>
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
       <div class="bw-modal-inner" onclick={(e) => e.stopPropagation()}>
-        <Checkout {api} {wizardPages} />
+        <Checkout {api} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
       </div>
     </div>
   {/if}
 {:else if ready}
-  <Checkout {api} {wizardPages} />
+  <Checkout {api} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
 {:else}
   <div class="loading-center"><div class="spinner"></div></div>
 {/if}

package/src/lib/elements/bw-configurator.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import TicketConfigurator from '../TicketConfigurator.svelte';
-  import { DEFAULT_WIZARD_PAGES } from '../config';
+  import { resolveWizardPages } from '../config';
   import { postMessage } from '../messages';
   import { getSharedServices } from './shared';
 
@@ -18,7 +18,7 @@
   let ready = $state(false);
   readyPromise.then(() => { ready = true; });
 
-  let wizardPages = $derived(wizardPagesJson ? JSON.parse(wizardPagesJson) : DEFAULT_WIZARD_PAGES);
+  let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
 
   function dispatch(name: string, detail: unknown) {
     const host = (document.querySelector('bw-configurator') as HTMLElement) ?? document.body;

package/src/lib/elements/register.ts

@@ -26,12 +26,14 @@ interface BwOptions {
   shouldBottomCloseOnModal: boolean;
   autoSelectSingleTimeSlot: boolean;
   wizardPages: string;
+  editPages: string;
 }
 
 const defaultOptions: BwOptions = {
   shouldBottomCloseOnModal: true,
   autoSelectSingleTimeSlot: false,
   wizardPages: '',
+  editPages: '',
 };
 
 const options: BwOptions = {
@@ -61,7 +63,16 @@ function autoWire() {
     });
   }
 
-  configurators.forEach((el) => {
+  // edit-pages only affects the checkout edit-item accordion, so it's only meaningful on bw-checkout.
+  if (options.editPages) {
+    checkouts.forEach((el) => {
+      if (!el.hasAttribute('edit-pages')) {
+        el.setAttribute('edit-pages', options.editPages);
+      }
+    });
+  }
+
+  [...configurators, ...checkouts].forEach((el) => {
     if (options.autoSelectSingleTimeSlot && !el.hasAttribute('auto-select-single-time-slot')) {
       el.setAttribute('auto-select-single-time-slot', '');
     }

package/src/lib/index.ts

@@ -44,6 +44,8 @@ export interface ConfiguratorConfig extends BaseConfig {
 
 export interface CheckoutConfig extends BaseConfig {
   wizardPages?: WizardPages;
+  editPages?: WizardPages;
+  autoSelectSingleTimeSlot?: boolean;
   onClose?: () => void;
   onOrderConfirmed?: (detail: { cartToken: string; value: number; currency: string }) => void;
 }
@@ -126,6 +128,8 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
     props: {
       api,
       wizardPages: config.wizardPages,
+      editPages: config.editPages,
+      autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? false,
     },
   });