@code-collective/booking-widget 1.0.0

package/src/lib/index.ts

@@ -0,0 +1,189 @@
+import './app.css';
+import { mount, unmount } from 'svelte';
+import type { WizardPages, CartOverviewDisplay } from './config';
+import type { BookingApi } from './api';
+import { ApiClient } from './api';
+import { FakeApiClient } from './fake-api';
+import { SessionManager } from './session-manager';
+import { CartManager } from './cart-manager';
+import TicketConfiguratorComponent from './TicketConfigurator.svelte';
+import CheckoutComponent from './Checkout.svelte';
+import CartOverviewComponent from './CartOverview.svelte';
+
+// Re-export components for direct Svelte usage
+export { default as TicketConfigurator } from './TicketConfigurator.svelte';
+export { default as Checkout } from './Checkout.svelte';
+export { default as CartOverview } from './CartOverview.svelte';
+export { default as CartBar } from './CartBar.svelte';
+export { default as CartOverviewButton } from './CartOverviewButton.svelte';
+
+// Re-export utilities
+export { ApiClient, FakeApiClient, SessionManager, CartManager };
+export type { BookingApi } from './api';
+export type { WizardPages, CartOverviewDisplay, WidgetMode, WizardWidgetType } from './config';
+export type { components, operations, paths } from './generated-types';
+export type * from './client-types';
+
+// --- Mount function configs ---
+
+interface BaseConfig {
+  apiBaseUrl?: string;
+  checkoutKey?: string;
+  useFakeApi?: boolean;
+}
+
+export interface ConfiguratorConfig extends BaseConfig {
+  productId: string;
+  currency?: string;
+  wizardPages?: WizardPages;
+  autoSelectSingleTimeSlot?: boolean;
+  cancelable?: boolean;
+  onCartChange?: (detail: { itemCount: number; cartItemId: string; totalFormatted: string }) => void;
+  onCancel?: () => void;
+}
+
+export interface CheckoutConfig extends BaseConfig {
+  wizardPages?: WizardPages;
+  onClose?: () => void;
+  onOrderConfirmed?: (detail: { cartToken: string; value: number; currency: string }) => void;
+}
+
+export interface CartOverviewConfig extends BaseConfig {
+  display?: CartOverviewDisplay;
+  onCheckout?: () => void;
+}
+
+export interface MountedWidget {
+  destroy: () => void;
+}
+
+// --- Shared bootstrap ---
+
+function bootstrap(config: BaseConfig): { api: BookingApi; sessionManager: SessionManager; cartManager: CartManager } {
+  const api: BookingApi = config.useFakeApi
+    ? new FakeApiClient()
+    : new ApiClient(config.apiBaseUrl ?? '');
+
+  const sessionManager = new SessionManager(api);
+  const cartManager = new CartManager(api);
+  sessionManager.startBackgroundRefresh();
+
+  return { api, sessionManager, cartManager };
+}
+
+// --- Mount functions ---
+
+export async function mountConfigurator(target: HTMLElement, config: ConfiguratorConfig): Promise<MountedWidget> {
+  const { api, sessionManager, cartManager } = bootstrap(config);
+
+  await sessionManager.ensureSession(config.checkoutKey ?? '');
+
+  const component = mount(TicketConfiguratorComponent, {
+    target,
+    props: {
+      api,
+      cartManager,
+      productId: config.productId,
+      wizardPages: config.wizardPages,
+      autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? false,
+      onCancel: config.onCancel,
+    },
+  });
+
+  // Listen for postMessage events and forward to callbacks
+  function messageHandler(e: MessageEvent) {
+    let d: Record<string, unknown>;
+    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+    catch { return; }
+    if (!d?.type) return;
+
+    if (d.type === 'cart:change' && config.onCartChange) {
+      config.onCartChange({
+        itemCount: (d.itemCount as number) ?? 0,
+        cartItemId: (d.cartItemId as string) ?? '',
+        totalFormatted: (d.totalFormatted as string) ?? '',
+      });
+    }
+  }
+  window.addEventListener('message', messageHandler);
+
+  return {
+    destroy() {
+      window.removeEventListener('message', messageHandler);
+      sessionManager.stop();
+      unmount(component);
+    },
+  };
+}
+
+export async function mountCheckout(target: HTMLElement, config: CheckoutConfig): Promise<MountedWidget> {
+  const { api, sessionManager } = bootstrap(config);
+
+  await sessionManager.ensureSession(config.checkoutKey ?? '');
+
+  const component = mount(CheckoutComponent, {
+    target,
+    props: {
+      api,
+      wizardPages: config.wizardPages,
+    },
+  });
+
+  function messageHandler(e: MessageEvent) {
+    let d: Record<string, unknown>;
+    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+    catch { return; }
+    if (!d?.type) return;
+
+    if (d.type === 'modal:close' && config.onClose) config.onClose();
+    if (d.type === 'order:complete' && config.onOrderConfirmed) {
+      config.onOrderConfirmed({
+        cartToken: (d.cartToken as string) ?? '',
+        value: (d.value as number) ?? 0,
+        currency: (d.currency as string) ?? 'ZAR',
+      });
+    }
+  }
+  window.addEventListener('message', messageHandler);
+
+  return {
+    destroy() {
+      window.removeEventListener('message', messageHandler);
+      sessionManager.stop();
+      unmount(component);
+    },
+  };
+}
+
+export async function mountCartOverview(target: HTMLElement, config: CartOverviewConfig): Promise<MountedWidget> {
+  const { api, sessionManager, cartManager } = bootstrap(config);
+
+  await sessionManager.ensureSession(config.checkoutKey ?? '');
+
+  const component = mount(CartOverviewComponent, {
+    target,
+    props: {
+      api,
+      cartManager,
+      display: config.display ?? 'bar',
+    },
+  });
+
+  function messageHandler(e: MessageEvent) {
+    let d: Record<string, unknown>;
+    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
+    catch { return; }
+    if (!d?.type) return;
+
+    if (d.type === 'modal:open' && config.onCheckout) config.onCheckout();
+  }
+  window.addEventListener('message', messageHandler);
+
+  return {
+    destroy() {
+      window.removeEventListener('message', messageHandler);
+      sessionManager.stop();
+      unmount(component);
+    },
+  };
+}

package/src/lib/messages.ts

@@ -0,0 +1,3 @@
+export function postMessage(data: Record<string, unknown>): void {
+  window.parent?.postMessage(JSON.stringify(data), '*');
+}

package/src/lib/mock-data.ts

@@ -0,0 +1,241 @@
+import type {
+  CheckoutUnitDto,
+  CheckoutPickupLocationDto,
+  CheckoutOptionDto,
+  CheckoutProductDto,
+  CheckoutUnitPricingDto,
+  CheckoutAvailabilityCalendarDto,
+  CheckoutAvailabilityDto,
+} from './client-types';
+
+const adultUnit: CheckoutUnitDto = {
+  id: 'unit_adult',
+  type: 'ADULT',
+  title: 'Adult',
+  restrictions: { minAge: 12, maxAge: 100 },
+  pricing: [{ retail: 76500, currency: 'ZAR', currencyPrecision: 2 }],
+};
+
+const childUnit: CheckoutUnitDto = {
+  id: 'unit_child',
+  type: 'CHILD',
+  title: 'Junior',
+  restrictions: { minAge: 2, maxAge: 11 },
+  pricing: [{ retail: 49500, currency: 'ZAR', currencyPrecision: 2 }],
+};
+
+const pickupLocations: CheckoutPickupLocationDto[] = [
+  {
+    id: 'pickup_long_street',
+    title: 'Long Street',
+    directions: 'Corner of Long and Kloof Street, outside the Engen garage',
+    address: '186 Long St, Cape Town City Centre, 8001',
+    latitude: -33.9249,
+    longitude: 18.4167,
+  },
+  {
+    id: 'pickup_camps_bay',
+    title: 'Camps Bay',
+    directions: 'At the main bus stop on Victoria Road',
+    address: 'Victoria Rd, Camps Bay, Cape Town, 8005',
+    latitude: -33.9506,
+    longitude: 18.3782,
+  },
+  {
+    id: 'pickup_sea_point_1',
+    title: 'Sea Point Stop 1',
+    directions: 'Outside Winchester Mansions, Beach Road',
+    address: '221 Beach Rd, Sea Point, Cape Town, 8005',
+    latitude: -33.9171,
+    longitude: 18.3889,
+  },
+  {
+    id: 'pickup_va_waterfront',
+    title: 'V&A Waterfront',
+    directions: 'Two Oceans Aquarium bus bay, Dock Road',
+    address: 'Dock Rd, V&A Waterfront, Cape Town, 8001',
+    latitude: -33.908,
+    longitude: 18.4178,
+  },
+];
+
+function makeOption(id: string, internalName: string, title: string, description: string): CheckoutOptionDto {
+  return {
+    id,
+    internalName,
+    title,
+    description,
+    units: [adultUnit, childUnit],
+    pickupAvailable: true,
+    pickupRequired: true,
+    pickupLocations,
+  };
+}
+
+export const sampleProductData: CheckoutProductDto = {
+  id: '241c39c3-9c76-4a6f-bb38-3a4f18d08a61',
+  internalName: 'Franschhoek Wine Tram Xplorer Tour',
+  title: 'Franschhoek Wine Tram Xplorer Tour',
+  description: 'Explore the Franschhoek Wine Valley by heritage tram and open-top bus.',
+  options: [
+    makeOption(
+      'option_blue_tram',
+      'BLUE Line - Tram then Bus',
+      'BLUE Line - Tram then Bus',
+      'Start your journey on the heritage tram through the vineyards, then transfer to the bus.',
+    ),
+    makeOption(
+      'option_blue_bus',
+      'BLUE Line - Bus then Tram',
+      'BLUE Line - Bus then Tram',
+      'Begin with the hop-on bus route, then switch to the heritage tram.',
+    ),
+    makeOption(
+      'option_pink_tram',
+      'PINK Line - Tram then Bus',
+      'PINK Line - Tram then Bus',
+      'Explore the PINK route starting on the tram through the winelands.',
+    ),
+    makeOption(
+      'option_pink_bus',
+      'PINK Line - Bus then Tram',
+      'PINK Line - Bus then Tram',
+      'Explore the PINK route starting on the bus before switching to the tram.',
+    ),
+    makeOption(
+      'option_red_tram',
+      'RED Line - Tram then Bus',
+      'RED Line - Tram then Bus',
+      'Ride the RED route beginning with the scenic tram leg.',
+    ),
+    makeOption(
+      'option_red_bus',
+      'RED Line - Bus then Tram',
+      'RED Line - Bus then Tram',
+      'Take the RED route starting on the bus, then enjoy the tram.',
+    ),
+    makeOption(
+      'option_green_bus',
+      'GREEN Line - Bus then Tram',
+      'GREEN Line - Bus then Tram',
+      'The GREEN route begins with a comfortable bus ride before the tram.',
+    ),
+    makeOption(
+      'option_green_tram',
+      'GREEN Line - Tram then Bus',
+      'GREEN Line - Tram then Bus',
+      'The GREEN route begins with the heritage tram through the valley.',
+    ),
+  ],
+};
+
+function formatDate(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function isWeekend(d: Date): boolean {
+  const day = d.getDay();
+  return day === 0 || day === 6;
+}
+
+function isHalloween(d: Date): boolean {
+  return d.getMonth() === 9 && d.getDate() === 31 && d.getFullYear() === 2026;
+}
+
+function makeUnitPricing(): CheckoutUnitPricingDto[] {
+  return [
+    { unitId: 'unit_adult', original: 88500, retail: 76500, net: 65000, currency: 'ZAR', currencyPrecision: 2 },
+    { unitId: 'unit_child', original: 49500, retail: 49500, net: 42000, currency: 'ZAR', currencyPrecision: 2 },
+  ];
+}
+
+export function generateSampleAvailability(): Record<string, CheckoutAvailabilityCalendarDto> {
+  const result: Record<string, CheckoutAvailabilityCalendarDto> = {};
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  let soldOutCounter = 0;
+
+  for (let i = 0; i < 90; i++) {
+    const d = new Date(today);
+    d.setDate(d.getDate() + i);
+    const key = formatDate(d);
+
+    if (isWeekend(d)) {
+      result[key] = { localDate: key, available: false, status: 'CLOSED', openingHours: null };
+      continue;
+    }
+
+    soldOutCounter++;
+
+    if (soldOutCounter % 5 === 0) {
+      result[key] = {
+        localDate: key,
+        available: false,
+        status: 'SOLD_OUT',
+        openingHours: [{ from: '08:45', to: '17:00' }],
+        unitPricing: makeUnitPricing(),
+      };
+      continue;
+    }
+
+    if (isHalloween(d)) {
+      result[key] = {
+        localDate: key,
+        available: true,
+        status: 'AVAILABLE',
+        openingHours: null,
+        unitPricing: makeUnitPricing(),
+      };
+      continue;
+    }
+
+    result[key] = {
+      localDate: key,
+      available: true,
+      status: 'AVAILABLE',
+      openingHours: [{ from: '08:45', to: '17:00' }],
+      unitPricing: makeUnitPricing(),
+    };
+  }
+
+  return result;
+}
+
+export function generateSampleTimeSlots(date: Date): CheckoutAvailabilityDto[] {
+  const dateStr = formatDate(date);
+
+  if (isHalloween(date)) {
+    return [
+      {
+        id: `avail_${dateStr}_allday`,
+        localDateTimeStart: `${dateStr}T00:00:00`,
+        localDateTimeEnd: `${dateStr}T23:59:59`,
+        allDay: true,
+        available: true,
+        status: 'AVAILABLE',
+        vacancies: 50,
+        utcCutoffAt: `${dateStr}T22:00:00Z`,
+        openingHours: null,
+        unitPricing: makeUnitPricing(),
+      },
+    ];
+  }
+
+  return [
+    {
+      id: `avail_${dateStr}_0845`,
+      localDateTimeStart: `${dateStr}T08:45:00`,
+      localDateTimeEnd: `${dateStr}T17:00:00`,
+      allDay: false,
+      available: true,
+      status: 'AVAILABLE',
+      vacancies: 24,
+      utcCutoffAt: `${dateStr}T06:45:00Z`,
+      openingHours: [{ from: '08:45', to: '17:00' }],
+      pickupAvailable: true,
+      pickupRequired: true,
+      unitPricing: makeUnitPricing(),
+    },
+  ];
+}

package/src/lib/session-manager.ts

@@ -0,0 +1,75 @@
+import type { CheckoutSessionDto } from './client-types';
+import type { BookingApi } from './api';
+
+const REFRESH_INTERVAL_MS = 5 * 60_000;
+const EXPIRY_BUFFER_MS = 2 * 60_000;
+
+export class SessionManager {
+  private sessions = new Map<string, CheckoutSessionDto>();
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+  private activeCheckoutKey = '';
+
+  constructor(private api: BookingApi) {}
+
+  async ensureSession(checkoutKey: string): Promise<CheckoutSessionDto> {
+    const cached = this.sessions.get(checkoutKey);
+
+    if (cached && !this.isExpired(cached)) {
+      this.activateSession(checkoutKey, cached);
+      return cached;
+    }
+
+    const session = await this.api.startSession(checkoutKey);
+    this.sessions.set(checkoutKey, session);
+    this.activeCheckoutKey = checkoutKey;
+    return session;
+  }
+
+  startBackgroundRefresh(): void {
+    if (this.intervalId) return;
+    this.intervalId = setInterval(() => this.refreshExpiringSessions(), REFRESH_INTERVAL_MS);
+  }
+
+  stop(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  private activateSession(checkoutKey: string, session: CheckoutSessionDto): void {
+    this.activeCheckoutKey = checkoutKey;
+    this.api.sessionToken = session.sessionToken ?? '';
+  }
+
+  private isExpired(session: CheckoutSessionDto): boolean {
+    return new Date(session.expiresAt ?? 0).getTime() <= Date.now();
+  }
+
+  private isExpiringSoon(session: CheckoutSessionDto): boolean {
+    return new Date(session.refreshAfter ?? 0).getTime() <= Date.now() + EXPIRY_BUFFER_MS;
+  }
+
+  private async refreshExpiringSessions(): Promise<void> {
+    for (const [key, session] of this.sessions) {
+      if (this.isExpired(session)) {
+        this.sessions.delete(key);
+        continue;
+      }
+
+      if (!this.isExpiringSoon(session)) continue;
+
+      try {
+        this.api.sessionToken = session.sessionToken ?? '';
+        const refreshed = await this.api.refreshSession();
+        this.sessions.set(key, refreshed);
+
+        if (key === this.activeCheckoutKey) {
+          this.api.sessionToken = refreshed.sessionToken ?? '';
+        }
+      } catch {
+        this.sessions.delete(key);
+      }
+    }
+  }
+}

package/src/lib/utils.ts

@@ -0,0 +1,25 @@
+import type { CartUnitItem } from './client-types';
+
+export function dateKey(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function formatTime(isoDateTime: string): string {
+  const dt = new Date(isoDateTime);
+  return `${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`;
+}
+
+export function parseDateFromAvailabilityId(id: string): string | null {
+  const match = id.match(/\d{4}-\d{2}-\d{2}/);
+  return match ? match[0] : null;
+}
+
+export function expandUnitItems(units: CartUnitItem[]): { unitId: string }[] {
+  const items: { unitId: string }[] = [];
+  for (const u of units) {
+    for (let i = 0; i < u.quantity; i++) {
+      items.push({ unitId: u.unitId });
+    }
+  }
+  return items;
+}