@code-collective/booking-widget 1.0.0

package/src/lib/api.ts

@@ -0,0 +1,204 @@
+import createClient, { type Middleware } from 'openapi-fetch';
+import type { paths } from './generated-types';
+import type {
+  CheckoutSessionDto,
+  CheckoutProductDto,
+  CheckoutAvailabilityCalendarDto,
+  CheckoutAvailabilityDto,
+  CheckoutCartResult,
+  CheckoutCartDetailDto,
+  CheckoutAddCartItemDto,
+  CheckoutCartItemAddedDto,
+  CheckoutCartPaymentInitiationDto,
+  CheckoutCartConfirmResultDto,
+  OctoContact,
+} from './client-types';
+import { dateKey } from './utils';
+
+export interface BookingApi {
+  sessionToken: string;
+
+  // Session
+  startSession(checkoutKey: string): Promise<CheckoutSessionDto>;
+  refreshSession(): Promise<CheckoutSessionDto>;
+
+  // Catalog
+  getProduct(productId: string): Promise<CheckoutProductDto>;
+  getAvailabilityCalendar(
+    productId: string,
+    optionId: string,
+  ): Promise<Record<string, CheckoutAvailabilityCalendarDto>>;
+  getAvailability(
+    productId: string,
+    optionId: string,
+    localDate: string,
+  ): Promise<CheckoutAvailabilityDto[]>;
+
+  // Cart
+  createCart(): Promise<CheckoutCartResult>;
+  getCart(): Promise<CheckoutCartDetailDto>;
+  addCartItem(request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto>;
+  updateCartItem(itemId: string, request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto>;
+  removeCartItem(itemId: string): Promise<void>;
+  payCart(contact: OctoContact): Promise<CheckoutCartPaymentInitiationDto>;
+  confirmCart(): Promise<CheckoutCartConfirmResultDto>;
+}
+
+export class ApiClient implements BookingApi {
+  sessionToken = '';
+  private cartToken = '';
+  private client;
+
+  constructor(baseUrl: string) {
+    this.client = createClient<paths>({ baseUrl });
+
+    const authMiddleware: Middleware = {
+      onRequest: ({ request }) => {
+        request.headers.set('Origin', window.location.origin);
+        if (this.sessionToken) {
+          request.headers.set('Morii-Checkout-Session', this.sessionToken);
+        }
+        if (this.cartToken) {
+          request.headers.set('Morii-Checkout-Cart', this.cartToken);
+        }
+        return request;
+      },
+    };
+    this.client.use(authMiddleware);
+  }
+
+  private unwrap<T>(result: { data?: T; error?: unknown; response: Response }): T {
+    if (result.data === undefined) {
+      throw new Error(`API error ${result.response.status}`);
+    }
+    return result.data;
+  }
+
+  // --- Session ---
+
+  async startSession(checkoutKey: string): Promise<CheckoutSessionDto> {
+    const session = this.unwrap(
+      await this.client.POST('/v1/checkout/session', {
+        body: { checkoutKey },
+      }),
+    );
+    this.sessionToken = session.sessionToken ?? '';
+    return session;
+  }
+
+  async refreshSession(): Promise<CheckoutSessionDto> {
+    const session = this.unwrap(
+      await this.client.POST('/v1/checkout/session/refresh'),
+    );
+    this.sessionToken = session.sessionToken ?? '';
+    return session;
+  }
+
+  // --- Catalog ---
+
+  async getProduct(productId: string): Promise<CheckoutProductDto> {
+    return this.unwrap(
+      await this.client.GET('/v1/checkout/products/{productId}', {
+        params: { path: { productId } },
+      }),
+    );
+  }
+
+  async getAvailabilityCalendar(
+    productId: string,
+    optionId: string,
+  ): Promise<Record<string, CheckoutAvailabilityCalendarDto>> {
+    const now = new Date();
+    const end = new Date(now);
+    end.setDate(end.getDate() + 90);
+
+    const list = this.unwrap(
+      await this.client.POST('/v1/checkout/availability/calendar', {
+        body: {
+          productId,
+          optionId,
+          localDateStart: dateKey(now),
+          localDateEnd: dateKey(end),
+        },
+      }),
+    );
+
+    const result: Record<string, CheckoutAvailabilityCalendarDto> = {};
+    for (const item of list) {
+      result[item.localDate] = item;
+    }
+    return result;
+  }
+
+  async getAvailability(
+    productId: string,
+    optionId: string,
+    localDate: string,
+  ): Promise<CheckoutAvailabilityDto[]> {
+    return this.unwrap(
+      await this.client.POST('/v1/checkout/availability', {
+        body: {
+          productId,
+          optionId,
+          localDate,
+        },
+      }),
+    );
+  }
+
+  // --- Cart ---
+
+  async createCart(): Promise<CheckoutCartResult> {
+    const cart = this.unwrap(
+      await this.client.POST('/v1/checkout/cart'),
+    );
+    this.cartToken = cart.cartToken ?? '';
+    return cart;
+  }
+
+  async getCart(): Promise<CheckoutCartDetailDto> {
+    return this.unwrap(
+      await this.client.GET('/v1/checkout/cart'),
+    );
+  }
+
+  async addCartItem(request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto> {
+    return this.unwrap(
+      await this.client.POST('/v1/checkout/cart/items', {
+        body: request,
+      }),
+    );
+  }
+
+  async updateCartItem(itemId: string, request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto> {
+    return this.unwrap(
+      await this.client.PATCH('/v1/checkout/cart/items/{itemId}', {
+        params: { path: { itemId } },
+        body: request,
+      }),
+    );
+  }
+
+  async removeCartItem(itemId: string): Promise<void> {
+    const result = await this.client.DELETE('/v1/checkout/cart/items/{itemId}', {
+      params: { path: { itemId } },
+    });
+    if (result.response.status >= 400) {
+      throw new Error(`API error ${result.response.status}`);
+    }
+  }
+
+  async payCart(contact: OctoContact): Promise<CheckoutCartPaymentInitiationDto> {
+    return this.unwrap(
+      await this.client.POST('/v1/checkout/cart/pay', {
+        body: { contact },
+      }),
+    );
+  }
+
+  async confirmCart(): Promise<CheckoutCartConfirmResultDto> {
+    return this.unwrap(
+      await this.client.POST('/v1/checkout/cart/confirm'),
+    );
+  }
+}

package/src/lib/app.css

@@ -0,0 +1,246 @@
+/* ── Design tokens ─────────────────────────────────────── */
+/* Host sites override --bw-* variables to theme the widget.
+   The Ventrata site sets --header-background, --footer-background, --primary (HSL),
+   --primary-light (HSL), --primary-dark (HSL) inline on the root element per supplier.
+   We fall back to those so the widget auto-themes to the host's branding. */
+:root {
+  --bw-color-primary: var(--header-background, #E30613);
+  --bw-color-primary-dark: var(--footer-background, #C00510);
+  --bw-color-primary-light: rgba(227, 6, 19, 0.08);
+  --bw-color-text: #212121;
+  --bw-color-text-secondary: #757575;
+  --bw-color-border: #E0E0E0;
+  --bw-color-bg: #FFFFFF;
+  --bw-color-surface: #F5F5F5;
+  --bw-color-success: #4CAF50;
+  --bw-color-error: var(--header-background, #E30613);
+  --bw-font-family: var(--default-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  --bw-radius-sm: 4px;
+  --bw-radius-md: var(--radius, 8px);
+  --bw-radius-lg: 12px;
+  --bw-radius-pill: 9999px;
+  --bw-transition: 0.15s ease;
+  --bw-shadow-1: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
+  --bw-shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+  --bw-shadow-3: 0 10px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
+}
+
+/* ── Reset ─────────────────────────────────────────────── */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--bw-font-family);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--bw-color-text);
+  background: var(--bw-color-bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+button { cursor: pointer; font-family: inherit; }
+input, select, textarea { font-family: inherit; }
+
+/* ── Spinner ───────────────────────────────────────────── */
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--bw-color-border);
+  border-top-color: var(--bw-color-primary);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+.loading-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 120px;
+}
+
+/* ── Page header bar ───────────────────────────────────── */
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bw-color-border);
+  background: var(--bw-color-bg);
+}
+
+.page-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.page-header .spacer { flex: 1; }
+
+/* ── Icon / nav button ─────────────────────────────────── */
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: none;
+  border: none;
+  border-radius: var(--bw-radius-pill);
+  font-size: 20px;
+  color: var(--bw-color-text);
+  transition: background var(--bw-transition);
+}
+
+.icon-btn:hover {
+  background: var(--bw-color-surface);
+}
+
+/* ── Cards ─────────────────────────────────────────────── */
+.card {
+  background: var(--bw-color-bg);
+  border: 1px solid var(--bw-color-border);
+  border-radius: var(--bw-radius-lg);
+  padding: 16px;
+  transition: border-color var(--bw-transition);
+}
+
+.card-selectable {
+  cursor: pointer;
+  text-align: left;
+}
+
+.card-selectable:hover {
+  border-color: var(--bw-color-text);
+}
+
+.card-selected {
+  border-color: var(--bw-color-text);
+  border-width: 2px;
+}
+
+/* ── Action bar (full-width bottom button) ─────────────── */
+.action-bar {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+  padding: 12px 16px;
+  border-top: 1px solid var(--bw-color-border);
+  background: var(--bw-color-bg);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+.action-bar .btn-secondary {
+  height: 48px;
+  padding: 0 20px;
+  border: 1px solid var(--bw-color-border);
+  background: var(--bw-color-bg);
+}
+
+.action-bar .btn-primary {
+  flex: 1;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 700;
+  position: relative;
+}
+
+.action-bar .btn-primary .arrow {
+  position: absolute;
+  right: 16px;
+  font-size: 20px;
+}
+
+/* ── Buttons ───────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--bw-radius-md);
+  padding: 10px 20px;
+  transition: background var(--bw-transition), box-shadow var(--bw-transition), opacity var(--bw-transition);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
+.btn-primary {
+  background: var(--bw-color-primary);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--bw-color-primary-dark);
+  box-shadow: var(--bw-shadow-1);
+}
+
+.btn-secondary {
+  background: var(--bw-color-bg);
+  color: var(--bw-color-text);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bw-color-border);
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--bw-color-primary);
+  color: var(--bw-color-primary);
+}
+
+.btn-outline:hover:not(:disabled) {
+  background: var(--bw-color-primary-light);
+}
+
+.btn-split {
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+/* ── Form inputs ───────────────────────────────────────── */
+.input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--bw-color-border);
+  border-radius: var(--bw-radius-md);
+  font-size: 14px;
+  outline: none;
+  transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
+}
+
+.input:focus {
+  border-color: var(--bw-color-primary);
+  box-shadow: 0 0 0 3px var(--bw-color-primary-light);
+}
+
+.input-error {
+  border-color: var(--bw-color-error);
+  background: #FEF2F2;
+}
+
+.input-error:focus {
+  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
+}
+
+/* ── Section titles ────────────────────────────────────── */
+.section-title {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--bw-color-text-secondary);
+  margin-bottom: 12px;
+}

package/src/lib/cart-manager.ts

@@ -0,0 +1,76 @@
+import type { CheckoutCartResult } from './client-types';
+import type { BookingApi } from './api';
+
+const STORAGE_KEY = 'morii-checkout-cart';
+
+interface StoredCart {
+  cartToken: string;
+  absoluteExpiresAt: string;
+}
+
+export class CartManager {
+  private cart: CheckoutCartResult | null = null;
+
+  constructor(private api: BookingApi) {
+    this.loadFromStorage();
+  }
+
+  get cartToken(): string {
+    return this.cart?.cartToken ?? '';
+  }
+
+  get hasCart(): boolean {
+    return this.cart !== null && !this.isExpired();
+  }
+
+  async ensureCart(): Promise<CheckoutCartResult> {
+    if (this.cart && !this.isExpired()) {
+      return this.cart;
+    }
+
+    const cart = await this.api.createCart();
+    this.cart = cart;
+    this.saveToStorage();
+    return cart;
+  }
+
+  private isExpired(): boolean {
+    if (!this.cart) return true;
+    return new Date(this.cart.absoluteExpiresAt ?? 0).getTime() <= Date.now();
+  }
+
+  private saveToStorage(): void {
+    if (!this.cart) return;
+    const stored: StoredCart = {
+      cartToken: this.cart.cartToken ?? '',
+      absoluteExpiresAt: this.cart.absoluteExpiresAt ?? '',
+    };
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+    } catch {
+      // localStorage unavailable (e.g. iframe sandbox)
+    }
+  }
+
+  private loadFromStorage(): void {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+
+      const stored: StoredCart = JSON.parse(raw);
+      if (new Date(stored.absoluteExpiresAt).getTime() <= Date.now()) {
+        localStorage.removeItem(STORAGE_KEY);
+        return;
+      }
+
+      this.cart = {
+        cartToken: stored.cartToken,
+        issuedAt: '',
+        idleExpiresAt: '',
+        absoluteExpiresAt: stored.absoluteExpiresAt,
+      };
+    } catch {
+      // corrupt or unavailable
+    }
+  }
+}

package/src/lib/client-types.ts

@@ -0,0 +1,52 @@
+import type { components } from './generated-types';
+
+type S = components['schemas'];
+
+// Generated API types — re-exported so consumers use direct imports
+// instead of bracket access (S['CheckoutProductDto']) throughout the codebase.
+export type CheckoutSessionDto = S['CheckoutSessionDto'];
+export type CheckoutProductDto = S['CheckoutProductDto'];
+export type CheckoutOptionDto = S['CheckoutOptionDto'];
+export type CheckoutUnitDto = S['CheckoutUnitDto'];
+export type CheckoutUnitPricingDto = S['CheckoutUnitPricingDto'];
+export type CheckoutPickupLocationDto = S['CheckoutPickupLocationDto'];
+export type CheckoutAvailabilityCalendarDto = S['CheckoutAvailabilityCalendarDto'];
+export type CheckoutAvailabilityDto = S['CheckoutAvailabilityDto'];
+export type CheckoutCartResult = S['CheckoutCartResult'];
+export type CheckoutCartDetailDto = S['CheckoutCartDetailDto'];
+export type CheckoutCartItemDetailDto = S['CheckoutCartItemDetailDto'];
+export type CheckoutAddCartItemDto = S['CheckoutAddCartItemDto'];
+export type CheckoutCartItemAddedDto = S['CheckoutCartItemAddedDto'];
+export type CheckoutCartPaymentInitiationDto = S['CheckoutCartPaymentInitiationDto'];
+export type CheckoutCartConfirmResultDto = S['CheckoutCartConfirmResultDto'];
+export type CheckoutCartConfirmItemResultDto = S['CheckoutCartConfirmItemResultDto'];
+export type OctoContact = S['OctoContact'];
+
+// Client-side types
+export type PaymentOutcome = 'successful' | 'pending' | 'failed' | 'cancelled';
+
+export interface PaymentStatus {
+  outcome: PaymentOutcome;
+  resultCode?: string;
+  resultDescription?: string;
+}
+
+export interface CartItem {
+  productId: string;
+  optionId: string;
+  optionTitle: string;
+  availabilityId: string;
+  localDate?: string;
+  pickupPointId?: string;
+  units: CartUnitItem[];
+  totalPrice: number;
+  currency: string;
+  currencyPrecision: number;
+}
+
+export interface CartUnitItem {
+  unitId: string;
+  quantity: number;
+  title: string;
+  pricePerUnit: number;
+}

package/src/lib/config.ts

@@ -0,0 +1,92 @@
+export type WidgetMode = 'configurator' | 'checkout' | 'cart-overview';
+
+export type CartOverviewDisplay = 'bar' | 'button';
+
+export type WizardWidgetType = 'option' | 'age-category' | 'date' | 'time' | 'pickup' | 'addon';
+
+export type WizardPages = WizardWidgetType[][];
+
+export const DEFAULT_WIZARD_PAGES: WizardPages = [
+  ['option', 'age-category'],
+  ['date', 'time'],
+  ['pickup'],
+];
+
+export interface AppConfig {
+  apiBaseUrl: string;
+  productId: string;
+  checkoutKey: string;
+  currency: string;
+  useFakeApi: boolean;
+  mode: WidgetMode;
+  cartDisplay: CartOverviewDisplay;
+  orderId: string;
+  wizardPages: WizardPages;
+  autoSelectSingleTimeSlot: boolean;
+  name: string;
+  cancelable: boolean;
+}
+
+export function readConfig(): AppConfig {
+  const params = new URLSearchParams(window.location.search);
+
+  if (params.has('product') || params.has('mode')) {
+    const apiBaseUrl = params.get('apiBaseUrl') ?? '';
+    const productId = params.get('product') ?? '';
+    return {
+      apiBaseUrl,
+      productId,
+      checkoutKey: params.get('checkoutKey') ?? deriveCheckoutKey(productId),
+      currency: params.get('currency') ?? 'ZAR',
+      useFakeApi: params.get('useFakeApi') === 'true' || !apiBaseUrl,
+      mode: parseMode(params.get('mode')),
+      cartDisplay: parseCartDisplay(params.get('cartDisplay')),
+      orderId: params.get('orderId') ?? '',
+      wizardPages: parseWizardPages(params.get('wizard')),
+      autoSelectSingleTimeSlot: params.get('autoSelectSingleTimeSlot') === 'true',
+      name: params.get('name') ?? '',
+      cancelable: params.get('cancelable') === 'true',
+    };
+  }
+
+  return {
+    apiBaseUrl: '',
+    productId: '',
+    checkoutKey: 'morii',
+    currency: 'ZAR',
+    useFakeApi: true,
+    mode: 'configurator',
+    cartDisplay: 'bar',
+    orderId: '',
+    wizardPages: DEFAULT_WIZARD_PAGES,
+    autoSelectSingleTimeSlot: false,
+    name: '',
+    cancelable: false,
+  };
+}
+
+function parseMode(value: string | null): WidgetMode {
+  if (value === 'checkout' || value === 'cart-overview') return value;
+  return 'configurator';
+}
+
+function parseCartDisplay(value: string | null): CartOverviewDisplay {
+  if (value === 'button') return 'button';
+  return 'bar';
+}
+
+// Demo only — products whose id starts with a-j use "morii", the rest use "csbs".
+// This will be replaced with a real checkout key lookup.
+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/currency.ts

@@ -0,0 +1,18 @@
+const symbols: Record<string, string> = {
+  ZAR: 'R',
+  USD: '$',
+  EUR: '\u20AC',
+  GBP: '\u00A3',
+};
+
+export function formatCurrency(
+  amountInMinorUnits: number,
+  currency: string,
+  currencyPrecision: number,
+  decimalPlaces = 0,
+): string {
+  const divisor = 10 ** currencyPrecision;
+  const amount = amountInMinorUnits / divisor;
+  const symbol = symbols[currency] ?? currency;
+  return `${symbol}\u00A0${amount.toFixed(decimalPlaces)}`;
+}