@code-collective/booking-widget 1.0.0

package/src/lib/ConsentSection.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  interface Props {
+    privacyAccepted: boolean;
+    marketingOptIn: boolean;
+    hasAttemptedSubmit: boolean;
+    onPrivacyChanged: (v: boolean) => void;
+    onMarketingChanged: (v: boolean) => void;
+  }
+  let { privacyAccepted, marketingOptIn, hasAttemptedSubmit, onPrivacyChanged, onMarketingChanged }: Props = $props();
+</script>
+
+<div class="consent">
+  <label class="check" class:error={hasAttemptedSubmit && !privacyAccepted}>
+    <input type="checkbox" checked={privacyAccepted} onchange={(e) => onPrivacyChanged((e.target as HTMLInputElement).checked)} />
+    <span>I accept the privacy policy *</span>
+  </label>
+  <label class="check">
+    <input type="checkbox" checked={marketingOptIn} onchange={(e) => onMarketingChanged((e.target as HTMLInputElement).checked)} />
+    <span>I would like to receive marketing communications</span>
+  </label>
+</div>
+
+<style>
+  .consent {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .check {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    font-size: 13px;
+    cursor: pointer;
+    line-height: 1.4;
+  }
+  .check.error span { color: var(--bw-color-error); }
+  input[type="checkbox"] {
+    margin-top: 2px;
+    accent-color: var(--bw-color-primary);
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+</style>

package/src/lib/ContactForm.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { OctoContact } from './client-types';
+
+  interface Props {
+    hasAttemptedSubmit: boolean;
+  }
+  let { hasAttemptedSubmit }: Props = $props();
+
+  let firstName = $state('');
+  let lastName = $state('');
+  let emailAddress = $state('');
+  let phoneNumber = $state('');
+
+  export function isValid(): boolean {
+    return firstName.trim() !== '' && emailAddress.trim() !== '' && phoneNumber.trim() !== '';
+  }
+
+  export function getContact(): OctoContact {
+    return {
+      firstName: firstName.trim(),
+      lastName: lastName.trim(),
+      emailAddress: emailAddress.trim(),
+      phoneNumber: phoneNumber.trim(),
+    };
+  }
+
+  function hasError(value: string): boolean {
+    return hasAttemptedSubmit && value.trim() === '';
+  }
+</script>
+
+<div class="form">
+  <div class="field">
+    <label for="firstName">First name *</label>
+    <input id="firstName" class="input" class:input-error={hasError(firstName)} bind:value={firstName} />
+  </div>
+  <div class="field">
+    <label for="lastName">Last name</label>
+    <input id="lastName" class="input" bind:value={lastName} />
+  </div>
+  <div class="field">
+    <label for="email">Email address *</label>
+    <input id="email" type="email" class="input" class:input-error={hasError(emailAddress)} bind:value={emailAddress} />
+  </div>
+  <div class="field">
+    <label for="phone">Phone number *</label>
+    <input id="phone" type="tel" class="input" class:input-error={hasError(phoneNumber)} bind:value={phoneNumber} />
+  </div>
+</div>
+
+<style>
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--bw-color-text-secondary);
+  }
+</style>

package/src/lib/CountdownTimer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  interface Props { expiresAt: Date }
+  let { expiresAt }: Props = $props();
+
+  let remaining = $state('');
+
+  function update() {
+    const diff = Math.max(0, expiresAt.getTime() - Date.now());
+    const mins = Math.floor(diff / 60000);
+    const secs = Math.floor((diff % 60000) / 1000);
+    remaining = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+  }
+
+  update();
+  const interval = setInterval(update, 1000);
+  onDestroy(() => clearInterval(interval));
+</script>
+
+<span class="timer">{remaining}</span>
+
+<style>
+  .timer {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--bw-color-text-secondary);
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/src/lib/EditBookingView.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { CartItem, CheckoutCartItemDetailDto, CheckoutProductDto } from './client-types';
+  import type { BookingApi } from './api';
+  import type { WizardPages } from './config';
+  import { DEFAULT_WIZARD_PAGES } from './config';
+  import { expandUnitItems } from './utils';
+  import WizardPage from './WizardPage.svelte';
+
+  interface Props {
+    cartItem: CheckoutCartItemDetailDto;
+    product: CheckoutProductDto;
+    api: BookingApi;
+    wizardPages?: WizardPages;
+    onBack: () => void;
+    onClose: () => void;
+    onUpdated: () => void;
+  }
+  let { cartItem, product, api, wizardPages, onBack, onClose, onUpdated }: Props = $props();
+
+  let isSaving = $state(false);
+
+  async function onComplete(item: CartItem) {
+    isSaving = true;
+    try {
+      await api.updateCartItem(cartItem.id, {
+        productId: item.productId,
+        optionId: item.optionId,
+        unitItems: expandUnitItems(item.units),
+        availabilityId: item.availabilityId,
+        localDate: item.localDate,
+        pickupPointId: item.pickupPointId,
+        amount: item.totalPrice,
+        currencyCode: item.currency,
+        currencyPrecision: item.currencyPrecision,
+      });
+      onUpdated();
+    } finally {
+      isSaving = false;
+    }
+  }
+</script>
+
+<div class="edit-view">
+  <div class="page-header">
+    <button class="icon-btn" onclick={onBack} aria-label="Back">&larr;</button>
+    <h2>Edit Item</h2>
+    <span class="spacer"></span>
+    <button class="icon-btn" onclick={onClose} aria-label="Close">&times;</button>
+  </div>
+
+  {#if isSaving}
+    <div class="loading-center"><div class="spinner"></div></div>
+  {:else}
+    <WizardPage
+      {product}
+      {api}
+      wizardPages={wizardPages ?? DEFAULT_WIZARD_PAGES}
+      editItem={cartItem}
+      {onComplete}
+      onCancel={onBack}
+    />
+  {/if}
+</div>
+
+<style>
+  .edit-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+</style>

package/src/lib/OptionCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { CheckoutOptionDto } from './client-types';
+  import { formatCurrency } from './currency';
+  import SelectableCard from './SelectableCard.svelte';
+
+  interface Props {
+    option: CheckoutOptionDto;
+    selected: boolean;
+    onSelect: () => void;
+  }
+  let { option, selected, onSelect }: Props = $props();
+
+  let pricingLine = $derived(() => {
+    const parts: string[] = [];
+    for (const unit of option.units) {
+      if (!unit.pricing || unit.pricing.length === 0) continue;
+      const p = unit.pricing[0];
+      parts.push(`${unit.title ?? unit.id} from ${formatCurrency(p.retail, p.currency, p.currencyPrecision)}`);
+    }
+    return parts.join(', ');
+  });
+</script>
+
+<SelectableCard
+  {selected}
+  {onSelect}
+  heading={option.title}
+  body={option.description}
+>
+  {#if pricingLine()}
+    <p class="pricing">{pricingLine()}</p>
+  {/if}
+</SelectableCard>
+
+<style>
+  .pricing {
+    font-size: 13px;
+    font-weight: 700;
+    margin-top: 8px;
+  }
+</style>

package/src/lib/PaymentPage.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+
+  interface Props {
+    checkoutId: string;
+    totalFormatted: string;
+    onBack: () => void;
+    onClose: () => void;
+    onPaymentComplete: (result: { status: string }) => void;
+  }
+  let { checkoutId, totalFormatted, onBack, onClose, onPaymentComplete }: Props = $props();
+
+  let failed = $state(false);
+  let errorMessage = $state('');
+
+  let peachInstance: any = null;
+
+  onMount(() => {
+    try {
+      const Checkout = (window as any).Checkout;
+      if (!Checkout) {
+        failed = true;
+        errorMessage = 'Payment SDK not loaded';
+        return;
+      }
+
+      peachInstance = Checkout.initiate({
+        checkoutId,
+        customisations: {
+          card: { submitButtonText: 'Pay Now' },
+          theme: { brand: { primary: '#E30613' } },
+        },
+        eventHandlers: {
+          onCompleted: () => { cleanup(); onPaymentComplete({ status: 'completed' }); },
+          onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
+          onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
+          onError: () => { cleanup(); onPaymentComplete({ status: 'error' }); },
+        },
+      });
+
+      peachInstance.render('#peach-container');
+    } catch (e) {
+      failed = true;
+      errorMessage = String(e);
+    }
+  });
+
+  function cleanup() {
+    if (peachInstance) {
+      peachInstance.unmount();
+      peachInstance = null;
+    }
+  }
+
+  onDestroy(cleanup);
+</script>
+
+<div class="payment-page">
+  <div class="page-header">
+    <button class="icon-btn" onclick={onBack} aria-label="Back">&larr;</button>
+    <h2>Payment</h2>
+    <span class="spacer"></span>
+    <button class="icon-btn" onclick={onClose} aria-label="Close">&times;</button>
+  </div>
+
+  <div class="body">
+    <div class="amount-bar">
+      <span>Amount to pay</span>
+      <span class="amount">{totalFormatted}</span>
+    </div>
+
+    {#if failed}
+      <div class="error-state">
+        <div class="error-icon">!</div>
+        <p class="error-title">Unable to load payment form</p>
+        <p class="error-msg">{errorMessage || 'The checkout session may have expired.'}</p>
+      </div>
+    {:else}
+      <div class="brands">
+        <span class="brand">VISA</span>
+        <span class="brand">MC</span>
+        <span class="brand">AMEX</span>
+      </div>
+      <div id="peach-container"></div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .payment-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+  .amount-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background: var(--bw-color-surface);
+    border-radius: var(--bw-radius-lg);
+    margin-bottom: 20px;
+    font-weight: 600;
+    font-size: 15px;
+  }
+  .amount {
+    color: var(--bw-color-primary);
+    font-size: 18px;
+    font-weight: 700;
+  }
+  .brands {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  .brand {
+    padding: 4px 10px;
+    border: 1px solid var(--bw-color-border);
+    border-radius: var(--bw-radius-sm);
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--bw-color-text-secondary);
+    letter-spacing: 0.02em;
+  }
+  .error-state {
+    text-align: center;
+    padding: 32px 16px;
+  }
+  .error-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 2px solid var(--bw-color-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: var(--bw-color-text-secondary);
+    margin: 0 auto 16px;
+  }
+  .error-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  .error-msg {
+    font-size: 14px;
+    color: var(--bw-color-text-secondary);
+  }
+</style>

package/src/lib/PickupPointPicker.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { CheckoutPickupLocationDto } from './client-types';
+
+  interface Props {
+    pickupPoints: CheckoutPickupLocationDto[];
+    isRequired: boolean;
+    formattedTotal: string;
+    onBack: () => void;
+    onContinue: (point: CheckoutPickupLocationDto | null) => void;
+  }
+  let { pickupPoints, isRequired, formattedTotal, onBack, onContinue }: Props = $props();
+
+  let selectedId = $state<string | null>(null);
+
+  let selectedPoint = $derived(
+    pickupPoints.find(p => p.id === selectedId) ?? null,
+  );
+</script>
+
+<div class="pickup-page">
+  <div class="page-header">
+    <button class="icon-btn" onclick={onBack} aria-label="Back">&larr;</button>
+    <h2>Select pickup point</h2>
+  </div>
+
+  <div class="list">
+    {#each pickupPoints as point}
+      <button
+        class="card card-selectable"
+        class:card-selected={selectedId === point.id}
+        onclick={() => { selectedId = point.id; }}
+      >
+        <div class="name">{point.title ?? point.id}</div>
+        {#if point.address}
+          <div class="address">{point.address}</div>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  <div class="action-bar">
+    <button
+      class="btn btn-primary btn-split"
+      disabled={isRequired && !selectedPoint}
+      onclick={() => onContinue(selectedPoint)}
+    >
+      <span>{formattedTotal}</span>
+      <span>Continue &rarr;</span>
+    </button>
+  </div>
+</div>
+
+<style>
+  .pickup-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .name {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .address {
+    font-size: 12px;
+    color: var(--bw-color-text-secondary);
+    margin-top: 4px;
+  }
+</style>

package/src/lib/ResultView.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { PaymentStatus } from './client-types';
+
+  interface Props {
+    status: PaymentStatus | null;
+    verifying: boolean;
+    onDone: () => void;
+    onRetry: () => void;
+  }
+  let { status, verifying, onDone, onRetry }: Props = $props();
+
+  let success = $derived(status?.outcome === 'successful');
+</script>
+
+<div class="result">
+  {#if verifying}
+    <div class="spinner"></div>
+    <p class="hint">Verifying payment...</p>
+  {:else}
+    <div class="icon" class:success class:failure={!success}>
+      {success ? '\u2713' : '!'}
+    </div>
+    <h2>{success ? 'Payment Successful' : 'Payment Failed'}</h2>
+    <p class="desc">
+      {success
+        ? 'Your booking has been confirmed.'
+        : status?.resultDescription ?? 'Something went wrong. Please try again.'}
+    </p>
+    {#if success}
+      <button class="btn btn-primary" onclick={onDone}>Done</button>
+    {:else}
+      <button class="btn btn-outline" onclick={onRetry}>Try Again</button>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .result {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 24px;
+    height: 100%;
+    text-align: center;
+  }
+  .hint {
+    color: var(--bw-color-text-secondary);
+    font-size: 14px;
+    margin-top: 16px;
+  }
+  .icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    margin-bottom: 20px;
+  }
+  .icon.success {
+    border: 2px solid var(--bw-color-success);
+    color: var(--bw-color-success);
+    background: rgba(76, 175, 80, 0.08);
+  }
+  .icon.failure {
+    border: 2px solid var(--bw-color-error);
+    color: var(--bw-color-error);
+    background: var(--bw-color-primary-light);
+  }
+  h2 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+  .desc {
+    color: var(--bw-color-text-secondary);
+    font-size: 14px;
+    margin-bottom: 28px;
+    max-width: 280px;
+    line-height: 1.5;
+  }
+</style>

package/src/lib/SelectableCard.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    selected: boolean;
+    onSelect: () => void;
+    heading?: string;
+    body?: string;
+    leading?: Snippet;
+    children?: Snippet;
+  }
+  let { selected, onSelect, heading, body, leading, children }: Props = $props();
+</script>
+
+<button
+  class="card card-selectable"
+  class:card-selected={selected}
+  onclick={onSelect}
+>
+  <div class="layout">
+    {#if leading}
+      <div class="leading">
+        {@render leading()}
+      </div>
+    {/if}
+    <div class="text">
+      {#if heading}
+        <div class="heading">{heading}</div>
+      {/if}
+      {#if body}
+        <div class="body">{body}</div>
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+    <span class="radio" class:radio-selected={selected}></span>
+  </div>
+</button>
+
+<style>
+  .layout {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .text {
+    flex: 1;
+  }
+  .heading {
+    font-size: 15px;
+    font-weight: 700;
+    margin-bottom: 4px;
+  }
+  .body {
+    font-size: 13px;
+    color: var(--bw-color-text-secondary);
+    line-height: 1.5;
+  }
+  .radio {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    border: 2px solid var(--bw-color-border);
+    border-radius: 50%;
+  }
+  .radio-selected {
+    border-color: var(--bw-color-text);
+    background: var(--bw-color-text);
+  }
+</style>