@ticketboothapp/booking 0.1.10 → 0.1.12

package/src/components/booking/BookingFlow.tsx

@@ -0,0 +1,4385 @@
+'use client';
+
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { parseISO, addWeeks, format, isBefore, isAfter, startOfDay, endOfDay } from 'date-fns';
+import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
+import {
+  getAvailabilities,
+  createReservation,
+  cancelReservation,
+  cancelReservationBestEffort,
+  createPaymentIntent,
+  quoteChangeBooking,
+  confirmFreeChangeBooking,
+  createChangeBookingPaymentIntent,
+  confirmFreeBooking,
+  confirmBookingWithoutPayment,
+  confirmPartnerBookingWithoutPayment,
+  getAddOns,
+  validatePromoCode,
+  getPromoDiscount,
+  type Product,
+  type Availability,
+  type ReturnOption,
+  type AddOn,
+  isInsufficientCapacityReserveError,
+  describeStandardTourCapacityConflictMessage,
+  reportReserveCapacityConflictClientContext,
+} from '@/lib/booking-api';
+import {
+  EARLIEST_AVAILABILITY_DATE,
+  LATEST_AVAILABILITY_DATE,
+  INITIAL_FETCH_WEEKS,
+} from '@/lib/booking-constants';
+import { getSundayOfWeek } from '@/lib/booking/sunday-week';
+import { Calendar } from './Calendar';
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
+import { ItineraryBox } from './ItineraryBox';
+import { ItineraryPlaceholder } from './ItineraryPlaceholder';
+import { PickupTimeSelector } from './PickupTimeSelector';
+import { ReturnTimeSelector } from './ReturnTimeSelector';
+import { CancellationPolicySelector } from './CancellationPolicySelector';
+import { TicketSelector } from './TicketSelector';
+import { AddOnsSection } from './AddOnsSection';
+import { CheckoutForm } from './CheckoutForm';
+import { PromoCodeInput } from './PromoCodeInput';
+import { useTranslations, useLocale } from '@/lib/booking/i18n';
+import { type Currency } from './CurrencySwitcher';
+import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import {
+  formatCurrencyAmount,
+  reconcileChangeBookingProposedTotal,
+} from '@/lib/currency';
+import { buildCheckoutBreakdown } from '@/lib/booking/checkout-breakdown';
+import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '@/lib/booking-api';
+import { ItineraryStepType as StepType } from '@/lib/booking-api';
+import {
+  getDisplayPriceFromBaseInDisplayCurrency,
+  computePriceBreakdown,
+  computeOrderSummary,
+  type PriceBreakdown as PriceBreakdownData,
+  type OrderSummary,
+} from '@/lib/booking/pricing';
+import { useCompanyTimezone } from '@/contexts/CompanyContext';
+import { useBookingApp } from '@/contexts/BookingAppContext';
+import { useAvailabilitiesCache, buildAvailabilitiesCacheKey } from '@/contexts/AvailabilitiesCacheContext';
+import { type PriceSummaryLine } from './PriceSummary';
+import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
+import { BookingFlowCollage } from './BookingFlowCollage';
+import { TourDescription } from './TourDescription';
+import { getProductByIdOrSlug } from '@/lib/products-config';
+import { getProducts } from '@/constants/products';
+import defaultStrings from '@/strings';
+import { trackViewItem } from '@/lib/analytics';
+import {
+  buildBookingSourceContext,
+  inferClientBookingSourceFromProductIds,
+  type BookingSourceMetadata,
+} from '@/lib/booking/source-metadata';
+import { getItineraryStepLabel } from '@/lib/booking/itinerary-display';
+import { MANAGE_BOOKING_FROM_CHANGE_PAYMENT, MANAGE_BOOKING_QUERY_FROM } from '@/lib/manage-booking-post-checkout';
+import { ENV } from '@/lib/env';
+import type { BookingFlowUiOptions } from './booking-flow-ui';
+import { BOOKING_FLOW_ABANDON_EVENT } from '@/providers/booking-dialog-provider';
+
+/** Live selection snapshot for change-booking compare UI (parent dialog). */
+export interface ChangeFlowSelectionPreview {
+  tourName: string;
+  dateTime: string | null;
+  ticketsLine: string;
+  itinerarySteps: Array<{ time: string | null; label: string }>;
+  /** Whether the selected date/time differs from the original booking. */
+  dateChanged: boolean;
+  /** Whether the selected tickets/product option differs from the original booking. */
+  ticketsChanged: boolean;
+  /** When false, UI can hide the “new booking” column (selection matches original). */
+  hasChangesFromInitial: boolean;
+  /** New selection grand total (before change-due delta) for summary UI in parent dialog. */
+  selectionTotal: number;
+  selectionCurrency: Currency;
+}
+
+function formatTicketLineItemsForSummary(lines: Array<{ category: string; qty: number }>): string {
+  const labels: Record<string, string> = {
+    ADULT: 'adult',
+    CHILD: 'child',
+    INFANT: 'infant',
+    SENIOR: 'senior',
+    STUDENT: 'student',
+  };
+  const parts = lines
+    .filter((l) => l.qty > 0)
+    .map((l) => {
+      const label = labels[l.category] || l.category.toLowerCase();
+      return `${l.qty} ${label}${l.qty !== 1 ? 's' : ''}`;
+    });
+  return parts.length > 0 ? parts.join(', ') : '—';
+}
+
+function normalizeTicketCategoryFromReceiptLabel(raw: string): string | null {
+  const normalized = raw.trim().toUpperCase();
+  if (!normalized) return null;
+  if (['ADULT', 'CHILD', 'INFANT', 'SENIOR', 'STUDENT'].includes(normalized)) return normalized;
+  const compact = normalized.replace(/[^A-Z]/g, ' ').replace(/\s+/g, ' ').trim();
+  if (/\bADULTS?\b/.test(compact)) return 'ADULT';
+  if (/\bCHILD(REN)?\b/.test(compact)) return 'CHILD';
+  if (/\bINFANTS?\b/.test(compact)) return 'INFANT';
+  if (/\bSENIORS?\b/.test(compact)) return 'SENIOR';
+  if (/\bSTUDENTS?\b/.test(compact)) return 'STUDENT';
+  return null;
+}
+
+function extractTrailingQty(label: string): { baseLabel: string; qty: number } {
+  const trimmed = label.trim();
+  const m = trimmed.match(/^(.*?)(?:\s*[×x]\s*(\d+))$/);
+  if (!m) return { baseLabel: trimmed, qty: 1 };
+  const baseLabel = (m[1] || '').trim();
+  const qty = Math.max(1, Number(m[2]) || 1);
+  return { baseLabel, qty };
+}
+
+function deriveAddOnSelectionsFromReceiptLines(
+  addOns: AddOn[],
+  lines: Array<{ type?: string; label?: string; amount?: number; quantity?: number }>
+): Array<{ addOnId: string; variantId?: string; quantity?: number }> {
+  const selections: Array<{ addOnId: string; variantId?: string; quantity?: number }> = [];
+  for (const line of lines) {
+    const type = (line.type || '').trim().toUpperCase();
+    if (type !== 'FEE') continue;
+    const amount = Number(line.amount ?? 0);
+    if (!Number.isFinite(amount) || amount <= 0) continue;
+    const rawLabel = (line.label || '').trim();
+    if (!rawLabel) continue;
+
+    const { baseLabel, qty } = extractTrailingQty(rawLabel);
+    let matched = false;
+
+    for (const addOn of addOns) {
+      if (matched) break;
+      const addOnName = addOn.name?.trim();
+      if (!addOnName) continue;
+
+      if (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') {
+        for (const variant of addOn.variants ?? []) {
+          const variantLabel = variant.label?.trim();
+          if (!variantLabel) continue;
+          if (baseLabel === `${addOnName} (${variantLabel})`) {
+            selections.push({ addOnId: addOn.addOnId, variantId: variant.id, quantity: qty });
+            matched = true;
+            break;
+          }
+        }
+      } else if (baseLabel === addOnName) {
+        selections.push({ addOnId: addOn.addOnId, quantity: qty });
+        matched = true;
+      }
+    }
+  }
+  return selections;
+}
+
+function findMergedAvailabilityForSelection(
+  merged: Availability[],
+  selected: Availability | null
+): Availability | undefined {
+  if (!selected) return undefined;
+  const optId = selected.productOptionId ?? undefined;
+  const dt = selected.dateTime;
+  const availId = selected.availabilityId?.trim();
+  if (availId && optId) {
+    const exact = merged.find(
+      (a) =>
+        a.availabilityId === availId &&
+        (a.productOptionId === optId || a.productOptionId === undefined)
+    );
+    if (exact) return exact;
+  }
+  return merged.find((a) => a.dateTime === dt && a.productOptionId === optId);
+}
+
+function findMergedReturnVacancies(
+  outbound: Availability | undefined,
+  selectedReturn: ReturnOption | null | undefined
+): number | null {
+  if (!selectedReturn?.returnAvailabilityId || !outbound?.returnOptions?.length) return null;
+  const ro = outbound.returnOptions.find(
+    (r) => r.returnAvailabilityId === selectedReturn.returnAvailabilityId
+  );
+  return ro ? ro.vacancies : null;
+}
+
+function normalizeAddOnSelections(
+  selections: Array<{ addOnId: string; variantId?: string; quantity?: number }>
+): Array<{ addOnId: string; variantId?: string; quantity?: number }> {
+  const qtyByKey = new Map<string, number>();
+  for (const sel of selections) {
+    const addOnId = sel.addOnId?.trim();
+    if (!addOnId) continue;
+    const variantId = sel.variantId?.trim() || '';
+    const key = `${addOnId}::${variantId}`;
+    qtyByKey.set(key, (qtyByKey.get(key) ?? 0) + Math.max(1, Number(sel.quantity) || 1));
+  }
+  return Array.from(qtyByKey.entries()).map(([key, qty]) => {
+    const [addOnId, variantIdRaw] = key.split('::');
+    const variantId = variantIdRaw?.trim() || undefined;
+    return { addOnId, variantId, quantity: qty };
+  });
+}
+
+interface BookingFlowProps {
+  product: Product;
+  /** Product slug (e.g. from URL) - used to look up collage images and video */
+  productId?: string;
+  onBack: () => void;
+  currency: Currency;
+  /** Scroll container ref (e.g. from BookingDialog) - scroll happens inside this element, not window */
+  contentRef?: React.RefObject<HTMLDivElement | null>;
+  /**
+   * Optional callback called when reservation is successfully created (before checkout redirect)
+   * If provided, indicates we're in an embedded context (e.g., provider dashboard)
+   */
+  onSuccess?: (data: { reservationReference: string; bookingReference?: string }) => void;
+  /** When true, shows tour description only (no calendar/checkout). Used for time-gated launch. */
+  isPartialLaunch?: boolean;
+  /**
+   * When true, treat the window as the scroll container (full-page layout),
+   * instead of relying on an internal scrollable div. Used on partner booking pages.
+   */
+  useWindowScroll?: boolean;
+  /** Optional promo code to auto-apply when the flow loads (e.g., partner pages). */
+  autoAppliedPromoCode?: string;
+  /** Optional extra discount percent to show on calendar date badges. */
+  calendarDiscountPercent?: number;
+  /** Optional pickup location IDs to prioritize/highlight in selector (e.g. partner-preferred). */
+  highlightedPickupLocationIds?: string[];
+  mode?: 'standard' | 'change';
+  onPricePreviewChange?: (preview: {
+    subtotal: number;
+    tax: number;
+    total: number;
+    currency: Currency;
+  } | null) => void;
+  /** Change mode: called when date/tickets/itinerary selection updates (for side-by-side compare in dialog). */
+  onChangeFlowSelectionPreview?: (preview: ChangeFlowSelectionPreview | null) => void;
+  originalReceipt?: {
+    subtotal: number;
+    tax: number;
+    total: number;
+    currency: Currency;
+    promoAmount?: number;
+    promoLabel?: string | null;
+    lineItems?: Array<{
+      type?: string;
+      label?: string;
+      amount?: number;
+      quantity?: number;
+    }>;
+  } | null;
+  initialValues?: {
+    bookingReference?: string | null;
+    dateTime?: string | null;
+    /** Inventory slot id from booking (when API persists it); strongest match for change flow. */
+    availabilityId?: string | null;
+    productOptionId?: string | null;
+    pickupLocationId?: string | null;
+    /** Original booked return slot (round-trip), when API provides it. */
+    returnAvailabilityId?: string | null;
+    /** Fallback when only return datetime is on the booking payload. */
+    returnDateTime?: string | null;
+    bookingItems?: Array<{ category: string; count: number }> | null;
+    addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
+    customer?: {
+      firstName?: string | null;
+      lastName?: string | null;
+      email?: string | null;
+    } | null;
+    promoCode?: string | null;
+    /** Booked policy id (change flow); must match server quote which uses booking.cancellationPolicyId. */
+    cancellationPolicyId?: string | null;
+  };
+  /**
+   * When true, suppress the built-in itinerary box/placeholder.
+   * Useful when a parent dialog already renders its own itinerary summary UI.
+   */
+  hideItineraryBox?: boolean;
+  /** Partner / embed-only tweaks; omit for default website behavior. */
+  flowUi?: BookingFlowUiOptions;
+  /** Explicit reserve/checkout source metadata (browser URL layer + optional portal merge at call site). */
+  bookingSourceAttribution: Partial<BookingSourceMetadata>;
+  /** Dedicated partner portal app (`booking.*`): persist reserve `source` as PARTNER_PORTAL. */
+  partnerPortalBooking?: boolean;
+  /** When set (e.g. partner portal), get-availabilities requests this pricing profile from the API. */
+  availabilityPricingProfileId?: string | null;
+  /** When set (e.g. partner portal), get-availabilities filters cancellation policies by this profile. */
+  availabilityCancellationPolicyProfileId?: string | null;
+}
+
+function parseAvailabilityDateTime(value: string): Date {
+  // If API omits timezone offset, treat it as UTC to prevent user-local day shifts.
+  const hasExplicitOffset = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(value);
+  return parseISO(hasExplicitOffset ? value : `${value}Z`);
+}
+
+function deriveDefaultQuantitiesFromAvailabilities(
+  availabilities: Availability[]
+): Record<string, number> | null {
+  const firstWithRates = availabilities.find((avail) => avail.rates && avail.rates.length > 0);
+  if (!firstWithRates?.rates?.length) return null;
+
+  const initialQuantities: Record<string, number> = {};
+  firstWithRates.rates.forEach((rate) => {
+    initialQuantities[rate.category] = rate.category === 'ADULT' ? 1 : 0;
+  });
+
+  return Object.keys(initialQuantities).length > 0 ? initialQuantities : null;
+}
+
+/** Clock time (minutes from midnight) for `isoDateTime` in the given IANA zone — use company TZ only, never `Intl` default / browser local. */
+function getMinutesFromMidnightInTimezone(isoDateTime: string, ianaTimeZone: string): number {
+  const dt = parseAvailabilityDateTime(isoDateTime);
+  const h = parseInt(formatInTimeZone(dt, ianaTimeZone, 'H'), 10);
+  const m = parseInt(formatInTimeZone(dt, ianaTimeZone, 'm'), 10);
+  return h * 60 + m;
+}
+
+/** Smallest difference between two clock times on a 24h circle (handles near-midnight edge cases). */
+function minCircularMinutesDiff(a: number, b: number): number {
+  const d = Math.abs(a - b);
+  return Math.min(d, 24 * 60 - d);
+}
+
+/**
+ * Change-booking only: after a new calendar date, prefer same product option then closest departure time-of-day.
+ * `companyTimezone` must be the company IANA zone (e.g. from useCompanyTimezone) — all wall-clock math is there, not user local.
+ */
+function pickOutboundMatchingPreviousSelection(
+  timesForSelectedDate: Availability[],
+  anchor: { productOptionId: string | null; minutesFromMidnight: number },
+  companyTimezone: string,
+  optionsMap: Map<string, { mostPopular?: boolean }>,
+  isAdmin: boolean
+): Availability | null {
+  const selectable = timesForSelectedDate.filter((a) => (a.vacancies ?? 0) > 0 || isAdmin);
+  if (selectable.length === 0) return null;
+
+  const withOption =
+    anchor.productOptionId != null
+      ? selectable.filter((a) => a.productOptionId === anchor.productOptionId)
+      : [];
+  const pool = withOption.length > 0 ? withOption : selectable;
+
+  const sorted = [...pool].sort((a, b) => {
+    const da = minCircularMinutesDiff(
+      getMinutesFromMidnightInTimezone(a.dateTime, companyTimezone),
+      anchor.minutesFromMidnight
+    );
+    const db = minCircularMinutesDiff(
+      getMinutesFromMidnightInTimezone(b.dateTime, companyTimezone),
+      anchor.minutesFromMidnight
+    );
+    if (Math.abs(da - db) > 0.5) return da - db;
+    const aPop = optionsMap.get(a.productOptionId ?? '')?.mostPopular ? 1 : 0;
+    const bPop = optionsMap.get(b.productOptionId ?? '')?.mostPopular ? 1 : 0;
+    if (aPop !== bPop) return bPop - aPop;
+    return parseAvailabilityDateTime(a.dateTime).getTime() - parseAvailabilityDateTime(b.dateTime).getTime();
+  });
+  return sorted[0] ?? null;
+}
+
+/**
+ * Change-booking only: same return location string then closest return time-of-day in `companyTimezone` (IANA), not user local.
+ */
+function pickReturnMatchingPreviousSelection(
+  sortedReturnOptions: ReturnOption[],
+  anchor: { returnLocation: string; minutesFromMidnight: number },
+  companyTimezone: string,
+  isAdmin: boolean
+): ReturnOption | null {
+  const eligible = sortedReturnOptions.filter((o) => (o.vacancies ?? 0) > 0 || isAdmin);
+  if (eligible.length === 0) return null;
+
+  const sameLoc = eligible.filter((o) => o.returnLocation === anchor.returnLocation);
+  const pool = sameLoc.length > 0 ? sameLoc : eligible;
+
+  const sorted = [...pool].sort((a, b) => {
+    const da = minCircularMinutesDiff(
+      getMinutesFromMidnightInTimezone(a.dateTime, companyTimezone),
+      anchor.minutesFromMidnight
+    );
+    const db = minCircularMinutesDiff(
+      getMinutesFromMidnightInTimezone(b.dateTime, companyTimezone),
+      anchor.minutesFromMidnight
+    );
+    if (Math.abs(da - db) > 0.5) return da - db;
+    return parseAvailabilityDateTime(a.dateTime).getTime() - parseAvailabilityDateTime(b.dateTime).getTime();
+  });
+  return sorted[0] ?? null;
+}
+
+function scoreTicketSubtotalForOption(
+  optionId: string | undefined,
+  bookingItems: Array<{ category: string; count: number }> | null | undefined,
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null | undefined,
+  currency: Currency
+): number | null {
+  if (!optionId || !bookingItems?.length || !precomputedPricesByOption?.[optionId]) return null;
+  const precomputed = precomputedPricesByOption[optionId];
+  let sum = 0;
+  for (const { category, count } of bookingItems) {
+    if (count <= 0) continue;
+    const key = category?.trim();
+    if (!key) continue;
+    const unit =
+      precomputed[key]?.[currency] ??
+      precomputed[key.toUpperCase()]?.[currency] ??
+      precomputed[key.toLowerCase()]?.[currency];
+    if (unit == null) return null;
+    sum += unit * count;
+  }
+  return sum;
+}
+
+/** When several availabilities share the same departure instant, pick using stored option id or closest ticket subtotal to the original receipt. */
+function disambiguateAvailabilityCandidates(
+  candidates: Availability[],
+  initialProductOptionId: string | undefined,
+  bookingItems: Array<{ category: string; count: number }> | null | undefined,
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null | undefined,
+  currency: Currency,
+  originalSubtotalBeforeTax: number | undefined
+): Availability | null {
+  const withVacancyFirst = [...candidates].sort((a, b) => (b.vacancies > 0 ? 1 : 0) - (a.vacancies > 0 ? 1 : 0));
+  const pool = withVacancyFirst.length > 0 ? withVacancyFirst : candidates;
+  if (pool.length === 0) return null;
+  if (pool.length === 1) return pool[0];
+
+  if (initialProductOptionId) {
+    const matched = pool.find((a) => a.productOptionId === initialProductOptionId);
+    if (matched) return matched;
+  }
+
+  if (originalSubtotalBeforeTax != null && precomputedPricesByOption && bookingItems?.length) {
+    let best: Availability | null = null;
+    let bestDiff = Infinity;
+    for (const c of pool) {
+      const score = scoreTicketSubtotalForOption(c.productOptionId, bookingItems, precomputedPricesByOption, currency);
+      if (score == null) continue;
+      const diff = Math.abs(score - originalSubtotalBeforeTax);
+      if (
+        diff < bestDiff - 0.005 ||
+        (diff <= bestDiff + 0.005 && (best == null || (c.vacancies > 0 && best.vacancies <= 0)))
+      ) {
+        bestDiff = diff;
+        best = c;
+      }
+    }
+    if (best) return best;
+  }
+
+  return pool.find((a) => a.vacancies > 0) ?? pool[0];
+}
+
+/**
+ * Map a stored booking datetime (+ optional ids) to a row in `timesForSelectedDate`.
+ * When several options share the same wall time, may defer until `precomputedPricesByOption` is loaded.
+ */
+function resolveInitialAvailabilityFromBooking(
+  timesForSelectedDate: Availability[],
+  target: Date,
+  companyTimezone: string,
+  initialAvailabilityId: string | null | undefined,
+  initialProductOptionId: string | null | undefined,
+  bookingItems: Array<{ category: string; count: number }> | null | undefined,
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null | undefined,
+  currency: Currency,
+  originalSubtotalBeforeTax: number | undefined
+): { selection: Availability | null; defer: boolean } {
+  const availId = initialAvailabilityId?.trim() || null;
+  const optId = initialProductOptionId?.trim() || null;
+
+  if (availId) {
+    const byAvail = timesForSelectedDate.find((a) => a.availabilityId === availId);
+    if (byAvail) return { selection: byAvail, defer: false };
+  }
+
+  const targetMs = target.getTime();
+  const sameInstant = timesForSelectedDate.filter(
+    (a) => parseAvailabilityDateTime(a.dateTime).getTime() === targetMs
+  );
+
+  if (sameInstant.length > 0) {
+    if (sameInstant.length === 1) {
+      return { selection: sameInstant[0], defer: false };
+    }
+    const ambiguous =
+      !optId &&
+      !availId &&
+      new Set(sameInstant.map((s) => s.productOptionId).filter(Boolean)).size > 1;
+    if (ambiguous && !precomputedPricesByOption) {
+      return { selection: null, defer: true };
+    }
+    const picked = disambiguateAvailabilityCandidates(
+      sameInstant,
+      optId ?? undefined,
+      bookingItems,
+      precomputedPricesByOption,
+      currency,
+      originalSubtotalBeforeTax
+    );
+    return { selection: picked, defer: false };
+  }
+
+  const localKey = formatInTimeZone(target, companyTimezone, 'yyyy-MM-dd HH:mm');
+  const sameLocalWall = timesForSelectedDate.filter((a) => {
+    const key = formatInTimeZone(parseAvailabilityDateTime(a.dateTime), companyTimezone, 'yyyy-MM-dd HH:mm');
+    return key === localKey;
+  });
+
+  if (sameLocalWall.length > 0) {
+    if (sameLocalWall.length === 1) {
+      return { selection: sameLocalWall[0], defer: false };
+    }
+    const ambiguous =
+      !optId &&
+      !availId &&
+      new Set(sameLocalWall.map((s) => s.productOptionId).filter(Boolean)).size > 1;
+    if (ambiguous && !precomputedPricesByOption) {
+      return { selection: null, defer: true };
+    }
+    const picked = disambiguateAvailabilityCandidates(
+      sameLocalWall,
+      optId ?? undefined,
+      bookingItems,
+      precomputedPricesByOption,
+      currency,
+      originalSubtotalBeforeTax
+    );
+    return { selection: picked, defer: false };
+  }
+
+  if (optId) {
+    const byOption = timesForSelectedDate.filter((a) => a.productOptionId === optId);
+    if (byOption.length > 0) {
+      const timeMatch = byOption.find((a) => parseAvailabilityDateTime(a.dateTime).getTime() === targetMs);
+      if (timeMatch) return { selection: timeMatch, defer: false };
+      const localMatch = byOption.find(
+        (a) =>
+          formatInTimeZone(parseAvailabilityDateTime(a.dateTime), companyTimezone, 'yyyy-MM-dd HH:mm') === localKey
+      );
+      if (localMatch) return { selection: localMatch, defer: false };
+      const picked = disambiguateAvailabilityCandidates(
+        byOption,
+        optId,
+        bookingItems,
+        precomputedPricesByOption,
+        currency,
+        originalSubtotalBeforeTax
+      );
+      return { selection: picked, defer: false };
+    }
+  }
+
+  const fallback = timesForSelectedDate.find((a) => a.vacancies > 0) ?? null;
+  return { selection: fallback, defer: false };
+}
+
+export function BookingFlow({
+  product,
+  productId,
+  onBack,
+  currency,
+  contentRef,
+  onSuccess,
+  isPartialLaunch = false,
+  useWindowScroll = false,
+  autoAppliedPromoCode,
+  calendarDiscountPercent,
+  highlightedPickupLocationIds,
+  mode = 'standard',
+  onPricePreviewChange,
+  onChangeFlowSelectionPreview,
+  originalReceipt = null,
+  initialValues,
+  hideItineraryBox = false,
+  flowUi,
+  bookingSourceAttribution,
+  partnerPortalBooking = false,
+  availabilityPricingProfileId,
+  availabilityCancellationPolicyProfileId,
+}: BookingFlowProps) {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const companyTimezone = useCompanyTimezone(); // Get timezone from context
+  const pricingProfileIdForAvailabilities = (availabilityPricingProfileId ?? '').trim() || null;
+  const cancellationPolicyProfileIdForAvailabilities =
+    (availabilityCancellationPolicyProfileId ?? '').trim() || null;
+  const {
+    permissions,
+    isSimplifiedPricingView,
+    onShowManage,
+    getSuccessUrl,
+    suppressCalendarDateScroll,
+    mode: bookingAppMode,
+  } = useBookingApp();
+  const availabilitiesCache = useAvailabilitiesCache();
+  const isAdmin = permissions.viewerRole === 'admin';
+  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
+  const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
+  const [selectedReturnOption, setSelectedReturnOption] = useState<ReturnOption | null>(null);
+  const [quantities, setQuantities] = useState<Record<string, number>>({});
+  const [email, setEmail] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [promoCodeInput, setPromoCodeInput] = useState('');
+  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null);
+  const [promoCodeError, setPromoCodeError] = useState('');
+  /** When set by a promo, this policy is forced and shown as a non-selectable row. */
+  const [forcedCancellationPolicy, setForcedCancellationPolicy] = useState<{
+    id: string;
+    label: string;
+    refundTiers?: Array<{ hoursBefore: number; refundPercent: number }>;
+    changeWindowHoursBefore?: number | null;
+  } | null>(null);
+  const cancellationPolicyRef = useRef<HTMLDivElement>(null);
+  const [promoCodeValidating, setPromoCodeValidating] = useState(false);
+  const [pickupLocationId, setPickupLocationId] = useState<string | null>(null);
+  const [pickupLocationSkipped, setPickupLocationSkipped] = useState(false);
+  // Cancellation: change flow seeds from the booking so totals match the quote (server uses booking.cancellationPolicyId).
+  // Standard flow defaults to cheapest policy when pricing config loads.
+  const [cancellationPolicyId, setCancellationPolicyId] = useState<string | null>(() => {
+    const fromBooking = initialValues?.cancellationPolicyId?.trim();
+    if (mode === 'change' && fromBooking) return fromBooking;
+    return null;
+  });
+  /** Add-on selections (lunch, animals, etc.) - filtered by selected product option */
+  const [addOnSelections, setAddOnSelections] = useState<Array<{ addOnId: string; variantId?: string; quantity?: number }>>(() =>
+    normalizeAddOnSelections(initialValues?.addOnSelections ?? [])
+  );
+  /** Fetched add-ons for the selected product option */
+  const [addOns, setAddOns] = useState<AddOn[]>([]);
+
+  // Auto-apply promo code when parent page passes one (e.g. partner pages).
+  // Seed input only; validate/apply runs after date/time + tickets exist (debounced + handleApplyPromo).
+  useEffect(() => {
+    if (!autoAppliedPromoCode) return;
+    const normalizedPromo = autoAppliedPromoCode.trim().toUpperCase();
+    if (!normalizedPromo) return;
+    setPromoCodeInput((current) => current || normalizedPromo);
+  }, [autoAppliedPromoCode]);
+  const [loading, setLoading] = useState(false);
+  const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
+  /** True when fetching additional availability (e.g. new month in dropdown) - shows spinner in date picker */
+  const [isFetchingMoreAvailabilities, setIsFetchingMoreAvailabilities] = useState(false);
+  const [error, setError] = useState('');
+  const [pricingConfig, setPricingConfig] = useState<PricingConfig | null>(null);
+  /** Precomputed prices from ticketbooth-product-prices per option (optionId -> category -> currency -> price). Used for display; rates[].price is for GYG only. */
+  const [precomputedPricesByOption, setPrecomputedPricesByOption] = useState<Record<string, PrecomputedPricesByCategory> | null>(null);
+  const pricingConfigSetRef = useRef(false); // Track if pricingConfig has been set (optimize: only set once)
+  const fetchingRef = useRef(false); // Prevent concurrent fetches
+  const fetchedRangesRef = useRef<Array<{ start: Date; end: Date }>>([]); // Track fetched date ranges
+  const pendingRangeRef = useRef<{ start: Date; end: Date } | null>(null); // Range to fetch when current fetch completes (user navigated during fetch)
+  const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
+  const [selectedDate, setSelectedDate] = useState<string>(() => {
+    if (mode !== 'change' || !initialValues?.dateTime?.trim()) return '';
+    try {
+      const target = parseAvailabilityDateTime(initialValues.dateTime.trim());
+      return formatInTimeZone(target, companyTimezone, 'yyyy-MM-dd');
+    } catch {
+      return '';
+    }
+  });
+  const [isItinerarySticky, setIsItinerarySticky] = useState(false);
+  const isItineraryStickyRef = useRef(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const itineraryRef = useRef<HTMLDivElement>(null);
+  const [showCheckoutModal, setShowCheckoutModal] = useState(false);
+  /** Pending reservation while user is in checkout (RESERVED until confirmed/cancelled). */
+  const pendingReservationRef = useRef<{ reservationReference: string } | null>(null);
+  /** True while Stripe is confirming payment/redirecting; skip unload cancellation during this window. */
+  const paymentSubmitInFlightRef = useRef(false);
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const [termsAcceptedAt, setTermsAcceptedAt] = useState<string | null>(null);
+  const [partnerAttributionConfirmed, setPartnerAttributionConfirmed] = useState(false);
+  const [checkoutClientSecret, setCheckoutClientSecret] = useState('');
+  const [checkoutModalData, setCheckoutModalData] = useState<{
+    reservationReference: string;
+    reservationExpiration?: string;
+    customerLastName?: string;
+    bookingDate?: string;
+    successUrlOverride?: string;
+    ticketLines: CheckoutModalLineItem[];
+    feeLineItems: OrderSummary['feeLineItems'];
+    returnPriceAdjustment: number;
+    cancellationPolicyFee: number;
+    cancellationPolicyLabel?: string;
+    subtotal: number;
+    tax: number;
+    total: number;
+    promoDiscountAmount?: number;
+    discountLabel?: string | null;
+    totalQuantity: number;
+    isTaxIncludedInPrice: boolean;
+    taxRate: number;
+    changeTotals?: {
+      previousTotal: number;
+      newTotal: number;
+      differenceTotal: number;
+    };
+  } | null>(null);
+  /** Admin only: skip sending confirmation at creation (provider dashboard). */
+  const [skipConfirmationCommunications, setSkipConfirmationCommunications] = useState(false);
+  /** Admin only: disable all auto communications for this booking (provider dashboard). */
+  const [disableAutoCommunications, setDisableAutoCommunications] = useState(false);
+  /** Admin only: show choice to pay now or confirm without payment (full balance owed). */
+  const [showAdminPaymentChoice, setShowAdminPaymentChoice] = useState(false);
+  const hasAppliedInitialValuesRef = useRef(false);
+  const hasAppliedInitialQuantitiesRef = useRef(false);
+  const hasHydratedAddOnsFromReceiptRef = useRef(false);
+  const hasAutoSelectedPartnerDateRef = useRef(false);
+  const hasAutoSelectedPartnerPickupRef = useRef(false);
+  const handleDateSelectRef = useRef<(date: string) => void>(() => {});
+  const isChangeFlow = mode === 'change';
+
+  useEffect(() => {
+    setPartnerAttributionConfirmed(false);
+  }, [flowUi?.partnerAttributionSummary, flowUi?.partnerAttributionConfirmLabel]);
+  /**
+   * Change flow: if the booking payload has no return id/datetime, we still need to detect when the
+   * user picks a different return time — baseline is the first auto-selected return for this outbound.
+   */
+  const [implicitReturnBaselineId, setImplicitReturnBaselineId] = useState<string | null>(null);
+  const lockedPromoCode = isChangeFlow
+    ? (initialValues?.promoCode?.trim().toUpperCase() || null)
+    : null;
+  /** Change booking: cannot reduce tickets below original counts (can still decrease after increasing). */
+  const changeBookingMinimumQuantities = useMemo(() => {
+    if (!isChangeFlow || !initialValues?.bookingItems?.length) return undefined;
+    const m: Record<string, number> = {};
+    for (const item of initialValues.bookingItems) {
+      const key = item.category?.trim();
+      if (!key) continue;
+      m[key] = Math.max(0, Number(item.count) || 0);
+    }
+    return m;
+  }, [isChangeFlow, initialValues?.bookingItems]);
+  const [adminChoiceData, setAdminChoiceData] = useState<{
+    reservationReference: string;
+    reservationExpiration?: string;
+    checkoutBreakdown: { lineItems: Array<{ label: string; amount: number; type?: string; quantity?: number }>; totalAmount: number; currency: string };
+    totalAmount: number;
+    datePart: string;
+    timePart: string;
+    availabilityProductOptionId: string;
+    itineraryDisplay?: ItineraryDisplayStep[] | null;
+    clientSecret: string;
+    ticketLinesForModal: CheckoutModalLineItem[];
+    feeLineItems: OrderSummary['feeLineItems'];
+    returnPriceAdjustment: number;
+    cancellationPolicyFee: number;
+    cancellationPolicyLabel?: string;
+    subtotal: number;
+    tax: number;
+    totalQuantity: number;
+    isTaxIncludedInPrice: boolean;
+    taxRate: number;
+    promoDiscountAmount: number;
+    discountLabel?: string | null;
+  } | null>(null);
+  const [latestChangeQuote, setLatestChangeQuote] = useState<{
+    priceDiff: number;
+    currency: Currency;
+    canProceed: boolean;
+    reasonIfBlocked?: string;
+    changeIntentId?: string;
+    quotedTotal?: number;
+  } | null>(null);
+  const [changeQuoteLoading, setChangeQuoteLoading] = useState(false);
+  const [changeQuoteFetchError, setChangeQuoteFetchError] = useState<string | null>(null);
+  const changeQuoteRequestSeq = useRef(0);
+  /** When the user picks a new calendar date in change flow, we match outbound/return from these anchors. */
+  const changeFlowOutboundAnchorRef = useRef<{
+    productOptionId: string | null;
+    minutesFromMidnight: number;
+  } | null>(null);
+  const changeFlowReturnAnchorRef = useRef<{
+    returnLocation: string;
+    minutesFromMidnight: number;
+  } | null>(null);
+
+  // Get all active product options (memoized to prevent recreating array on each render)
+  const activeOptions = useMemo(() => 
+    product.options?.filter(opt => opt.status === 'ACTIVE') || [],
+    [product.options]
+  );
+  
+  // Detect if this is a Private Shuttle product
+  const isPrivateShuttle = product.productType === 'PRIVATE_SHUTTLE';
+  
+  // Create stable string key from option IDs for dependency array
+  const activeOptionIdsKey = useMemo(() => 
+    activeOptions.map(opt => opt.optionId).sort().join(','),
+    [activeOptions]
+  );
+  
+  // Create a Map for O(1) option lookups by optionId (performance optimization)
+  const optionsMap = useMemo(() => {
+    const map = new Map<string, typeof activeOptions[0]>();
+    activeOptions.forEach(opt => map.set(opt.optionId, opt));
+    return map;
+  }, [activeOptions]);
+
+  // Fire view_item when product is first displayed
+  const hasFiredViewItem = useRef(false);
+  useEffect(() => {
+    if (!hasFiredViewItem.current && product) {
+      hasFiredViewItem.current = true;
+      const id = productId || product.productId;
+      const price = product.minPriceByCurrency?.[currency] ?? 0;
+      trackViewItem(id, product.name, price, currency);
+    }
+  }, [product, productId, currency]);
+
+  // Helper function to check if we need to fetch a date range
+  const needsFetch = (start: Date, end: Date): boolean => {
+    if (fetchedRangesRef.current.length === 0) return true;
+    
+    // Check if the requested range is fully covered by fetched ranges
+    // For simplicity, check if any single fetched range fully covers the requested range
+    return !fetchedRangesRef.current.some(range => {
+      const rangeStart = range.start.getTime();
+      const rangeEnd = range.end.getTime();
+      const reqStart = start.getTime();
+      const reqEnd = end.getTime();
+      
+      // Check if this fetched range fully covers the requested range
+      return rangeStart <= reqStart && rangeEnd >= reqEnd;
+    });
+  };
+
+  /** Re-fetch current calendar window so vacancies/booked counts match server after a reserve race. */
+  const reloadAvailabilitiesAfterReserveConflict = useCallback(async (): Promise<Availability[]> => {
+    if (isPartialLaunch || !visibleRange || activeOptions.length === 0) {
+      return [];
+    }
+
+    const startOfEarliestDay = fromZonedTime(new Date(2026, 5, 1, 0, 0, 0, 0), companyTimezone);
+    const endOfLatestDay = fromZonedTime(new Date(2026, 9, 12, 23, 59, 59, 999), companyTimezone);
+    const clampedStart = isBefore(visibleRange.start, startOfEarliestDay)
+      ? startOfEarliestDay
+      : visibleRange.start;
+    let clampedEnd = isAfter(visibleRange.end, endOfLatestDay) ? endOfLatestDay : visibleRange.end;
+
+    if (selectedDate) {
+      try {
+        const selectedDateObj = parseISO(selectedDate);
+        if (isAfter(selectedDateObj, clampedEnd)) {
+          clampedEnd = selectedDateObj;
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+
+    let startDateStr: string;
+    let endDateStr: string;
+
+    if (isPrivateShuttle) {
+      startDateStr = format(startOfDay(clampedStart), 'yyyy-MM-dd');
+      endDateStr = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
+    } else {
+      const startDateInTz = formatInTimeZone(clampedStart, companyTimezone, 'yyyy-MM-dd');
+      const endDateInTz = formatInTimeZone(clampedEnd, companyTimezone, 'yyyy-MM-dd');
+      const startMoment = fromZonedTime(parseISO(`${startDateInTz}T00:00:00.000`), companyTimezone);
+      const endMoment = fromZonedTime(parseISO(`${endDateInTz}T23:59:59.999`), companyTimezone);
+      startDateStr = formatInTimeZone(startMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+      endDateStr = formatInTimeZone(endMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+    }
+
+    const availabilityPromises = activeOptions.map(async (option) => {
+      const result = await getAvailabilities(option.optionId, startDateStr, endDateStr, {
+        promoCode: appliedPromoCode || undefined,
+        ...(pricingProfileIdForAvailabilities
+          ? { pricingProfileId: pricingProfileIdForAvailabilities }
+          : {}),
+        ...(cancellationPolicyProfileIdForAvailabilities
+          ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+          : {}),
+      });
+      if (result.pricingConfig && !pricingConfigSetRef.current) {
+        setPricingConfig((prev) => {
+          if (!prev) {
+            pricingConfigSetRef.current = true;
+            return result.pricingConfig!;
+          }
+          return prev;
+        });
+      }
+      return {
+        optionId: option.optionId,
+        availabilities: result.availabilities.map((avail) => ({
+          ...avail,
+          productOptionId: option.optionId,
+        })),
+        precomputedPrices: result.precomputedPrices,
+        pricingConfig: result.pricingConfig,
+      };
+    });
+
+    const results = await Promise.all(availabilityPromises);
+    const allFetchedAvailabilities = results.flatMap((r) => r.availabilities);
+
+    setPrecomputedPricesByOption((prev) => {
+      const next = { ...(prev || {}) };
+      results.forEach((r) => {
+        if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
+          next[r.optionId] = r.precomputedPrices;
+        }
+      });
+      return Object.keys(next).length > 0 ? next : prev;
+    });
+
+    let mergedOut: Availability[] = [];
+    setAvailabilities((prev) => {
+      const existingMap = new Map(
+        prev.map((avail) => [`${avail.dateTime}-${avail.productOptionId}`, avail])
+      );
+      allFetchedAvailabilities.forEach((avail) => {
+        existingMap.set(`${avail.dateTime}-${avail.productOptionId}`, avail);
+      });
+      mergedOut = Array.from(existingMap.values());
+      return mergedOut;
+    });
+
+    fetchedRangesRef.current.push({ start: new Date(clampedStart), end: new Date(clampedEnd) });
+    fetchedRangesRef.current.sort((a, b) => a.start.getTime() - b.start.getTime());
+    const mergedRanges: Array<{ start: Date; end: Date }> = [];
+    for (const r of fetchedRangesRef.current) {
+      if (mergedRanges.length === 0 || mergedRanges[mergedRanges.length - 1].end < r.start) {
+        mergedRanges.push({ start: r.start, end: r.end });
+      } else {
+        mergedRanges[mergedRanges.length - 1].end =
+          r.end > mergedRanges[mergedRanges.length - 1].end
+            ? r.end
+            : mergedRanges[mergedRanges.length - 1].end;
+      }
+    }
+    fetchedRangesRef.current = mergedRanges;
+
+    const cacheKey = availabilitiesCache
+      ? buildAvailabilitiesCacheKey(
+          product.productId,
+          activeOptionIdsKey,
+          appliedPromoCode,
+          pricingProfileIdForAvailabilities,
+        )
+      : null;
+    if (cacheKey && availabilitiesCache) {
+      const existingCache = availabilitiesCache.get(cacheKey);
+      const existingAvailabilities = existingCache?.availabilities ?? [];
+      const mergedAvailabilitiesMap = new Map(
+        existingAvailabilities.map((a) => [`${a.dateTime}-${a.productOptionId}`, a])
+      );
+      allFetchedAvailabilities.forEach((a) => {
+        mergedAvailabilitiesMap.set(`${a.dateTime}-${a.productOptionId}`, a);
+      });
+      const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
+      results.forEach((r) => {
+        if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
+          mergedPrecomputed[r.optionId] = r.precomputedPrices;
+        }
+      });
+      const firstPricingConfig =
+        (results[0] as { pricingConfig?: PricingConfig } | undefined)?.pricingConfig ??
+        existingCache?.pricingConfig ??
+        null;
+      availabilitiesCache.merge(cacheKey, {
+        fetchedRanges: mergedRanges,
+        availabilities: Array.from(mergedAvailabilitiesMap.values()),
+        pricingConfig: firstPricingConfig,
+        precomputedPricesByOption: Object.keys(mergedPrecomputed).length > 0 ? mergedPrecomputed : null,
+      });
+    }
+
+    return mergedOut;
+  }, [
+    isPartialLaunch,
+    visibleRange,
+    companyTimezone,
+    selectedDate,
+    isPrivateShuttle,
+    activeOptions,
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    product.productId,
+    activeOptionIdsKey,
+    availabilitiesCache,
+  ]);
+
+  // Initialize visible range when unset. Change flow: start the fetch window on the booking week so
+  // availability for the current trip loads first; otherwise anchor at season open for fast first paint.
+  useEffect(() => {
+    if (!visibleRange) {
+      const startOfEarliestDay = fromZonedTime(new Date(2026, 5, 1, 0, 0, 0, 0), companyTimezone);
+      const endOfLatestDay = fromZonedTime(new Date(2026, 9, 12, 23, 59, 59, 999), companyTimezone);
+
+      if (isChangeFlow && initialValues?.dateTime?.trim()) {
+        try {
+          const target = parseAvailabilityDateTime(initialValues.dateTime.trim());
+          const dateStr = formatInTimeZone(target, companyTimezone, 'yyyy-MM-dd');
+          const weekStartStr = getSundayOfWeek(dateStr, companyTimezone);
+          let rangeStart = fromZonedTime(parseISO(`${weekStartStr}T12:00:00`), companyTimezone);
+          if (isBefore(rangeStart, startOfEarliestDay)) {
+            rangeStart = startOfEarliestDay;
+          }
+          let rangeEnd = addWeeks(rangeStart, INITIAL_FETCH_WEEKS);
+          if (isAfter(rangeEnd, endOfLatestDay)) {
+            rangeEnd = endOfLatestDay;
+          }
+          if (!isBefore(rangeEnd, rangeStart)) {
+            setVisibleRange({ start: rangeStart, end: rangeEnd });
+            return;
+          }
+        } catch {
+          /* fall through to default */
+        }
+      }
+
+      const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS);
+      setVisibleRange({ start: EARLIEST_AVAILABILITY_DATE, end: initialEnd });
+    }
+  }, [visibleRange, isChangeFlow, initialValues?.dateTime, companyTimezone]);
+
+  // Fetch availabilities for visible range + buffer
+  useEffect(() => {
+    if (isPartialLaunch) {
+      setLoadingAvailabilities(false);
+      return;
+    }
+    if (activeOptions.length === 0) {
+      setError('No active product options available');
+      setLoadingAvailabilities(false);
+      return;
+    }
+    
+    if (!visibleRange) {
+      // Wait for initial range to be set
+      return;
+    }
+    
+    async function fetchAvailabilities() {
+      // Prevent concurrent fetches - store range to fetch when current one completes
+      if (fetchingRef.current && visibleRange) {
+        pendingRangeRef.current = { start: visibleRange.start, end: visibleRange.end };
+        return;
+      }
+      
+      // Clamp to available date range (use company timezone - date-fns startOfDay/endOfDay use local TZ which can exclude Oct 12)
+      // For end date, we need end of Oct 12 in company timezone (inclusive)
+      if (!visibleRange) return;
+      
+      const startOfEarliestDay = fromZonedTime(new Date(2026, 5, 1, 0, 0, 0, 0), companyTimezone);
+      const endOfLatestDay = fromZonedTime(new Date(2026, 9, 12, 23, 59, 59, 999), companyTimezone);
+      const clampedStart = isBefore(visibleRange.start, startOfEarliestDay) 
+        ? startOfEarliestDay 
+        : visibleRange.start;
+      let clampedEnd = isAfter(visibleRange.end, endOfLatestDay)
+        ? endOfLatestDay
+        : visibleRange.end;
+      
+      // Ensure we include the selected date if it's after the visible range end
+      // This handles the case where user selects a date that's not yet in the visible range
+      if (selectedDate) {
+        try {
+          const selectedDateObj = parseISO(selectedDate);
+          if (isAfter(selectedDateObj, clampedEnd)) {
+            clampedEnd = selectedDateObj;
+          }
+        } catch {
+          // Ignore parse errors
+        }
+      }
+
+      // Check cache first - avoid refetch when reopening same product
+      const cacheKey = availabilitiesCache
+        ? buildAvailabilitiesCacheKey(
+            product.productId,
+            activeOptionIdsKey,
+            appliedPromoCode,
+            pricingProfileIdForAvailabilities,
+          )
+        : null;
+      const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
+      if (cached && cached.availabilities.length > 0) {
+        const cachedInitialQuantities = deriveDefaultQuantitiesFromAvailabilities(cached.availabilities);
+        if (cachedInitialQuantities) {
+          setQuantities((prev) => (Object.keys(prev).length > 0 ? prev : cachedInitialQuantities));
+        }
+        const cacheCoversRange = cached.fetchedRanges.some(
+          (r) => r.start.getTime() <= clampedStart.getTime() && r.end.getTime() >= clampedEnd.getTime()
+        );
+        const isStale = availabilitiesCache?.isStale(cached) ?? false;
+        if (cacheCoversRange) {
+          setAvailabilities(cached.availabilities);
+          if (cached.pricingConfig) {
+            setPricingConfig(cached.pricingConfig);
+            pricingConfigSetRef.current = true;
+          }
+          if (cached.precomputedPricesByOption && Object.keys(cached.precomputedPricesByOption).length > 0) {
+            setPrecomputedPricesByOption(cached.precomputedPricesByOption);
+          }
+          setLoadingAvailabilities(false);
+          setIsFetchingMoreAvailabilities(false);
+          if (!isStale) {
+            fetchedRangesRef.current = [...cached.fetchedRanges];
+            fetchingRef.current = false;
+            return;
+          }
+          // Stale-while-revalidate: show cached data, fetch in background (don't set fetchedRangesRef so we fall through)
+        }
+        // Partial cache: show cached data immediately, then fetch missing range below
+        setAvailabilities(cached.availabilities);
+        if (cached.pricingConfig) {
+          setPricingConfig(cached.pricingConfig);
+          pricingConfigSetRef.current = true;
+        }
+        if (cached.precomputedPricesByOption && Object.keys(cached.precomputedPricesByOption).length > 0) {
+          setPrecomputedPricesByOption(cached.precomputedPricesByOption);
+        }
+        fetchedRangesRef.current = [...cached.fetchedRanges];
+        setLoadingAvailabilities(false);
+      }
+      
+      // Check if we need to fetch this range
+      // Backend always returns CAD prices without fee/tax, so no need to refetch on currency change
+      const shouldFetch = needsFetch(clampedStart, clampedEnd);
+      if (!shouldFetch) {
+        // Range already fetched - ensure loading state is cleared
+        setLoadingAvailabilities(false);
+        setIsFetchingMoreAvailabilities(false);
+        fetchingRef.current = false;
+        return;
+      }
+      
+      const hasPartialCache = cached && cached.availabilities.length > 0;
+      fetchingRef.current = true;
+      if (!hasPartialCache) setLoadingAvailabilities(true);
+      else setIsFetchingMoreAvailabilities(true);
+      
+      try {
+        let startDateStr: string;
+        let endDateStr: string;
+        
+        if (isPrivateShuttle) {
+          // Private Shuttle: use date-only format (YYYY-MM-DD)
+          startDateStr = format(startOfDay(clampedStart), 'yyyy-MM-dd');
+          // Use endOfDay to include the full last day
+          endDateStr = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
+        } else {
+          // Standard products: API expects UTC. Get full first/last days in company TZ, then format as UTC.
+          const startDateInTz = formatInTimeZone(clampedStart, companyTimezone, 'yyyy-MM-dd');
+          const endDateInTz = formatInTimeZone(clampedEnd, companyTimezone, 'yyyy-MM-dd');
+          const startMoment = fromZonedTime(parseISO(`${startDateInTz}T00:00:00.000`), companyTimezone);
+          const endMoment = fromZonedTime(parseISO(`${endDateInTz}T23:59:59.999`), companyTimezone);
+          startDateStr = formatInTimeZone(startMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+          endDateStr = formatInTimeZone(endMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+        }
+        
+        // Fetch availabilities for all product options in parallel (no currency param - we use precomputedPrices for display)
+        const availabilityPromises = activeOptions.map(async (option) => {
+          const result = await getAvailabilities(option.optionId, startDateStr, endDateStr, {
+            promoCode: appliedPromoCode || undefined,
+            ...(pricingProfileIdForAvailabilities
+              ? { pricingProfileId: pricingProfileIdForAvailabilities }
+              : {}),
+            ...(cancellationPolicyProfileIdForAvailabilities
+              ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+              : {}),
+          });
+          // Store pricing config from first response only (all responses have same config)
+          if (result.pricingConfig && !pricingConfigSetRef.current) {
+            setPricingConfig(prev => {
+              if (!prev) {
+                pricingConfigSetRef.current = true;
+                return result.pricingConfig!;
+              }
+              return prev;
+            });
+          }
+          // Tag each availability with its productOptionId and carry precomputedPrices for this option
+          return {
+            optionId: option.optionId,
+            availabilities: result.availabilities.map(avail => ({
+              ...avail,
+              productOptionId: option.optionId
+            })),
+            precomputedPrices: result.precomputedPrices,
+            pricingConfig: result.pricingConfig,
+          };
+        });
+        
+        const results = await Promise.all(availabilityPromises);
+        const allFetchedAvailabilities = results.flatMap(r => r.availabilities);
+        setPrecomputedPricesByOption(prev => {
+          const next = { ...(prev || {}) };
+          results.forEach(r => {
+            if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
+              next[r.optionId] = r.precomputedPrices;
+            }
+          });
+          return Object.keys(next).length > 0 ? next : prev;
+        });
+        
+        // Merge with existing availabilities (avoid duplicates by dateTime + productOptionId)
+        setAvailabilities(prev => {
+          const existingMap = new Map(
+            prev.map(avail => [`${avail.dateTime}-${avail.productOptionId}`, avail])
+          );
+          
+          // Merge new availabilities - update existing ones or add new ones
+          allFetchedAvailabilities.forEach(avail => {
+            const key = `${avail.dateTime}-${avail.productOptionId}`;
+            // Always update to get latest data (vacancies, prices, etc.)
+            existingMap.set(key, avail);
+          });
+          
+          return Array.from(existingMap.values());
+        });
+        
+        // Mark this range as fetched
+        fetchedRangesRef.current.push({ start: new Date(clampedStart), end: new Date(clampedEnd) });
+        // Sort and merge overlapping ranges
+        fetchedRangesRef.current.sort((a, b) => a.start.getTime() - b.start.getTime());
+        const merged: Array<{ start: Date; end: Date }> = [];
+        for (const r of fetchedRangesRef.current) {
+          if (merged.length === 0 || merged[merged.length - 1].end < r.start) {
+            merged.push({ start: r.start, end: r.end });
+          } else {
+            merged[merged.length - 1].end = r.end > merged[merged.length - 1].end 
+              ? r.end 
+              : merged[merged.length - 1].end;
+          }
+        }
+        fetchedRangesRef.current = merged;
+        
+        // Update cache for instant load when reopening same product
+        if (cacheKey && availabilitiesCache) {
+          const existingCache = availabilitiesCache.get(cacheKey);
+          const existingAvailabilities = existingCache?.availabilities ?? [];
+          const mergedAvailabilitiesMap = new Map(
+            existingAvailabilities.map((a) => [`${a.dateTime}-${a.productOptionId}`, a])
+          );
+          allFetchedAvailabilities.forEach((a) => {
+            mergedAvailabilitiesMap.set(`${a.dateTime}-${a.productOptionId}`, a);
+          });
+          const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
+          results.forEach((r) => {
+            if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
+              mergedPrecomputed[r.optionId] = r.precomputedPrices;
+            }
+          });
+          const firstPricingConfig = (results[0] as { pricingConfig?: PricingConfig } | undefined)?.pricingConfig ?? existingCache?.pricingConfig ?? null;
+          availabilitiesCache.merge(cacheKey, {
+            fetchedRanges: merged,
+            availabilities: Array.from(mergedAvailabilitiesMap.values()),
+            pricingConfig: firstPricingConfig,
+            precomputedPricesByOption: Object.keys(mergedPrecomputed).length > 0 ? mergedPrecomputed : null,
+          });
+        }
+        
+        // Initialize quantities based on first availability's categories (only if not already set)
+        // Use functional update to avoid dependency on quantities state
+        const fetchedInitialQuantities = deriveDefaultQuantitiesFromAvailabilities(allFetchedAvailabilities);
+        if (fetchedInitialQuantities) {
+          setQuantities((prev) => (Object.keys(prev).length > 0 ? prev : fetchedInitialQuantities));
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load availabilities');
+        console.error('Error fetching availabilities:', err);
+      } finally {
+        setLoadingAvailabilities(false);
+        setIsFetchingMoreAvailabilities(false);
+        fetchingRef.current = false;
+        // If user navigated during fetch, trigger fetch for the pending range
+        const pending = pendingRangeRef.current;
+        if (pending) {
+          pendingRangeRef.current = null;
+          setVisibleRange({ start: pending.start, end: pending.end });
+        }
+      }
+    }
+    
+    fetchAvailabilities();
+    // Use activeOptionIdsKey only — activeOptions is a new array reference when product.options identity changes and would refetch in a tight loop.
+  }, [
+    isPartialLaunch,
+    visibleRange,
+    activeOptionIdsKey,
+    isPrivateShuttle,
+    companyTimezone,
+    selectedDate,
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+  ]);
+
+  // When promo or partner pricing profile changes, clear fetched ranges so we refetch with new pricing
+  useEffect(() => {
+    fetchedRangesRef.current = [];
+  }, [
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+  ]);
+
+  // Memoized callback for visible range changes
+  // Only update if the range actually changed to avoid unnecessary fetches
+  const lastVisibleRangeRef = useRef<{ start: Date; end: Date } | null>(null);
+  const handleVisibleRangeChange = useCallback((start: Date, end: Date) => {
+    const lastRange = lastVisibleRangeRef.current;
+    // Update if this is the first range or if it changed significantly (more than a day)
+    const rangeChanged = !lastRange || 
+        Math.abs(lastRange.start.getTime() - start.getTime()) > 24 * 60 * 60 * 1000 ||
+        Math.abs(lastRange.end.getTime() - end.getTime()) > 24 * 60 * 60 * 1000;
+    
+    if (rangeChanged) {
+      lastVisibleRangeRef.current = { start, end };
+      // Always update state to trigger fetch, even if needsFetch might return false
+      // The needsFetch check will prevent unnecessary API calls, but we want the state update
+      setVisibleRange({ start, end });
+    }
+  }, []);
+
+  // Group availabilities by date (in company timezone) and sort by time
+  // Memoized to prevent recalculation on every render
+  const availabilitiesByDate = useMemo(() => {
+    const grouped = availabilities.reduce((acc, avail) => {
+      // Parse the dateTime and extract the date in company timezone
+      const dateTime = parseAvailabilityDateTime(avail.dateTime);
+      const dateInCompanyTz = formatInTimeZone(dateTime, companyTimezone, 'yyyy-MM-dd');
+      if (!acc[dateInCompanyTz]) acc[dateInCompanyTz] = [];
+      acc[dateInCompanyTz].push(avail);
+      return acc;
+    }, {} as Record<string, Availability[]>);
+    
+    // Sort availabilities within each date by time (create new sorted arrays, don't mutate)
+    const sorted: Record<string, Availability[]> = {};
+    Object.keys(grouped).forEach(date => {
+      sorted[date] = [...grouped[date]].sort((a, b) => {
+        const timeA = parseAvailabilityDateTime(a.dateTime).getTime();
+        const timeB = parseAvailabilityDateTime(b.dateTime).getTime();
+        return timeA - timeB;
+      });
+    });
+    
+    return sorted;
+  }, [availabilities, companyTimezone]);
+
+  const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
+
+  // Track mobile state
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 640); // sm breakpoint
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  // Close tooltip when clicking outside
+  useEffect(() => {
+    if (!showTooltip) return;
+    
+    const handleClickOutside = (e: MouseEvent | TouchEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('[data-tooltip-icon]')) {
+        setShowTooltip(false);
+      }
+    };
+    
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showTooltip]);
+
+  // Detect when itinerary box becomes sticky
+  // In viavia the scroll usually happens inside the dialog content div, not window.
+  // On full-page partner layouts, we instead listen to window scroll (useWindowScroll = true).
+  const lastStickyChangeRef = useRef<number>(0);
+  useEffect(() => {
+    const el = itineraryRef.current;
+    if (!el) return;
+
+    const findScrollParent = (node: HTMLElement): HTMLElement | null => {
+      let parent = node.parentElement;
+      while (parent) {
+        const { overflowY } = getComputedStyle(parent);
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') return parent;
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    const scrollParent = findScrollParent(el);
+    const scrollTarget =
+      useWindowScroll || !scrollParent
+        ? (typeof window !== 'undefined' ? window : null)
+        : scrollParent;
+
+    let ticking = false;
+    const COOLDOWN_MS = 600; // After a state change, ignore reverse changes for this long (covers 0.25s collapse animation + layout settle)
+    const atTopBand = 48; // px - must scroll back up past this band to expand again (wider = less oscillation at edges)
+
+    const updateStickyState = () => {
+      if (!itineraryRef.current) return;
+
+      const rect = itineraryRef.current.getBoundingClientRect();
+      const currentTop = rect.top;
+      const wasSticky = isItineraryStickyRef.current;
+
+      const containerTop =
+        scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
+      const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
+      const stickLine = containerTop + topInset;
+      const enterStickyThreshold = stickLine + 1;
+      const nextSticky = wasSticky
+        ? currentTop >= stickLine - atTopBand && currentTop <= stickLine + atTopBand
+        : currentTop <= enterStickyThreshold;
+
+      if (nextSticky !== wasSticky) {
+        const now = Date.now();
+        if (now - lastStickyChangeRef.current < COOLDOWN_MS) return; // Cooldown: prevent rapid toggling
+
+        lastStickyChangeRef.current = now;
+        isItineraryStickyRef.current = nextSticky;
+        setIsItinerarySticky(nextSticky);
+      }
+    };
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          updateStickyState();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    if (scrollTarget) {
+      scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+      updateStickyState();
+      return () => scrollTarget.removeEventListener('scroll', handleScroll);
+    }
+    return undefined;
+  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx]); // Re-check when itinerary / scroll mode / host chrome changes
+
+  // Find the earliest availability date - memoize with a stable reference
+  // Only recalculate if we don't have a cached value or if the new earliest is actually earlier
+  // IMPORTANT: Never return null once we have a value, to prevent calendar reset during loading
+  const earliestAvailabilityDateRef = useRef<Date | null>(null);
+  const earliestAvailabilityDate = useMemo(() => {
+    if (dates.length === 0) {
+      // If we have a cached value, keep using it even during loading
+      return earliestAvailabilityDateRef.current || EARLIEST_AVAILABILITY_DATE;
+    }
+    const firstDate = dates[0];
+    const firstAvail = availabilitiesByDate[firstDate]?.[0];
+    let newEarliest: Date;
+    if (firstAvail) {
+      newEarliest = parseISO(firstAvail.dateTime);
+    } else {
+      // Fallback: parse the date string
+      // Use company timezone noon to avoid one-day shifts for users in other timezones.
+      newEarliest = fromZonedTime(parseISO(`${firstDate}T12:00:00`), companyTimezone);
+    }
+    
+    // Only update if we don't have a cached value or if the new one is earlier
+    if (!earliestAvailabilityDateRef.current || newEarliest < earliestAvailabilityDateRef.current) {
+      earliestAvailabilityDateRef.current = newEarliest;
+    }
+    
+    return earliestAvailabilityDateRef.current;
+  }, [dates, availabilitiesByDate]);
+  
+  const timesForSelectedDate = useMemo(() => {
+    return selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
+  }, [selectedDate, availabilitiesByDate]);
+  const timesForSelectedDateSelectionKey = useMemo(
+    () =>
+      timesForSelectedDate
+        .map(
+          (avail) =>
+            `${avail.dateTime}|${avail.productOptionId ?? ''}|${avail.vacancies ?? 0}`,
+        )
+        .join('||'),
+    [timesForSelectedDate],
+  );
+
+  useEffect(() => {
+    if (hasAppliedInitialValuesRef.current || !initialValues) return;
+    const trimmedEmail = initialValues.customer?.email?.trim();
+    const trimmedFirstName = initialValues.customer?.firstName?.trim();
+    const trimmedLastName = initialValues.customer?.lastName?.trim();
+    const trimmedPromo = initialValues.promoCode?.trim().toUpperCase();
+    if (trimmedEmail) setEmail(trimmedEmail);
+    if (trimmedFirstName) setFirstName(trimmedFirstName);
+    if (trimmedLastName) setLastName(trimmedLastName);
+    if (initialValues.pickupLocationId?.trim()) {
+      setPickupLocationId(initialValues.pickupLocationId.trim());
+      setPickupLocationSkipped(false);
+    }
+    if (trimmedPromo) {
+      setPromoCodeInput(trimmedPromo);
+      setAppliedPromoCode(trimmedPromo);
+    }
+    hasAppliedInitialValuesRef.current = true;
+  }, [initialValues]);
+
+  useEffect(() => {
+    if (!lockedPromoCode) return;
+    if (appliedPromoCode !== lockedPromoCode) setAppliedPromoCode(lockedPromoCode);
+    if (promoCodeInput !== lockedPromoCode) setPromoCodeInput(lockedPromoCode);
+  }, [lockedPromoCode, appliedPromoCode, promoCodeInput]);
+
+  useEffect(() => {
+    if (!initialValues?.dateTime || selectedAvailability) return;
+    const target = parseAvailabilityDateTime(initialValues.dateTime);
+    const targetDate = formatInTimeZone(target, companyTimezone, 'yyyy-MM-dd');
+    if (!selectedDate) {
+      setSelectedDate(targetDate);
+      return;
+    }
+    if (selectedDate !== targetDate || timesForSelectedDate.length === 0) return;
+    const { selection, defer } = resolveInitialAvailabilityFromBooking(
+      timesForSelectedDate,
+      target,
+      companyTimezone,
+      initialValues.availabilityId ?? null,
+      initialValues.productOptionId ?? null,
+      initialValues.bookingItems ?? null,
+      precomputedPricesByOption,
+      currency,
+      originalReceipt?.subtotal
+    );
+    if (defer) return;
+    if (selection) {
+      setSelectedAvailability(selection);
+      setError('');
+    }
+  }, [
+    initialValues?.dateTime,
+    initialValues?.availabilityId,
+    initialValues?.productOptionId,
+    initialValues?.bookingItems,
+    selectedAvailability,
+    selectedDate,
+    timesForSelectedDate,
+    companyTimezone,
+    precomputedPricesByOption,
+    currency,
+    originalReceipt?.subtotal,
+  ]);
+
+  useEffect(() => {
+    if (
+      hasAppliedInitialQuantitiesRef.current ||
+      !initialValues?.bookingItems ||
+      initialValues.bookingItems.length === 0 ||
+      !selectedAvailability
+    ) {
+      return;
+    }
+    const next: Record<string, number> = {};
+    for (const item of initialValues.bookingItems) {
+      const key = item.category?.trim();
+      if (!key) continue;
+      next[key] = Math.max(0, Number(item.count) || 0);
+    }
+    if (Object.keys(next).length > 0) {
+      setQuantities((prev) => ({ ...prev, ...next }));
+      hasAppliedInitialQuantitiesRef.current = true;
+    }
+  }, [initialValues, selectedAvailability]);
+
+  useEffect(() => {
+    if (!isChangeFlow) return;
+    if (!initialValues?.addOnSelections?.length) return;
+    setAddOnSelections((prev) => (prev.length > 0 ? prev : normalizeAddOnSelections(initialValues.addOnSelections!)));
+  }, [isChangeFlow, initialValues?.addOnSelections]);
+
+  useEffect(() => {
+    if (!isChangeFlow) return;
+    if (hasHydratedAddOnsFromReceiptRef.current) return;
+    if ((initialValues?.addOnSelections?.length ?? 0) > 0) return;
+    if (addOnSelections.length > 0) return;
+    if (addOns.length === 0) return;
+    const receiptLines = originalReceipt?.lineItems ?? [];
+    if (receiptLines.length === 0) return;
+    const derived = deriveAddOnSelectionsFromReceiptLines(addOns, receiptLines);
+    hasHydratedAddOnsFromReceiptRef.current = true;
+    if (derived.length > 0) {
+      setAddOnSelections(normalizeAddOnSelections(derived));
+    }
+  }, [
+    isChangeFlow,
+    initialValues?.addOnSelections,
+    addOnSelections.length,
+    addOns,
+    originalReceipt?.lineItems,
+  ]);
+
+  const initialAddOnBaselineSelections = useMemo(() => {
+    if (!isChangeFlow) return [] as Array<{ addOnId: string; variantId?: string; quantity?: number }>;
+    if ((initialValues?.addOnSelections?.length ?? 0) > 0) {
+      return normalizeAddOnSelections(initialValues!.addOnSelections!);
+    }
+    if ((originalReceipt?.lineItems?.length ?? 0) > 0 && addOns.length > 0) {
+      return normalizeAddOnSelections(deriveAddOnSelectionsFromReceiptLines(addOns, originalReceipt!.lineItems!));
+    }
+    return [] as Array<{ addOnId: string; variantId?: string; quantity?: number }>;
+  }, [isChangeFlow, initialValues?.addOnSelections, originalReceipt?.lineItems, addOns]);
+
+  const initialAddOnMinQtyByKey = useMemo(() => {
+    const map = new Map<string, number>();
+    if (!isChangeFlow) return map;
+    for (const sel of initialAddOnBaselineSelections) {
+      const key = `${sel.addOnId.trim()}::${sel.variantId?.trim() || ''}`;
+      map.set(key, (map.get(key) ?? 0) + Math.max(1, Number(sel.quantity) || 1));
+    }
+    return map;
+  }, [isChangeFlow, initialAddOnBaselineSelections]);
+
+  const initialAddOnMinTotalByAddOnId = useMemo(() => {
+    const map = new Map<string, number>();
+    if (!isChangeFlow) return map;
+    for (const sel of initialAddOnBaselineSelections) {
+      const addOnId = sel.addOnId.trim();
+      map.set(addOnId, (map.get(addOnId) ?? 0) + Math.max(1, Number(sel.quantity) || 1));
+    }
+    return map;
+  }, [isChangeFlow, initialAddOnBaselineSelections]);
+
+  const applyChangeFlowAddOnFloor = useCallback(
+    (nextSelections: Array<{ addOnId: string; variantId?: string; quantity?: number }>) => {
+      if (!isChangeFlow || initialAddOnMinQtyByKey.size === 0) return nextSelections;
+      const qtyByKey = new Map<string, number>();
+      for (const sel of nextSelections) {
+        const key = `${sel.addOnId.trim()}::${sel.variantId?.trim() || ''}`;
+        qtyByKey.set(key, (qtyByKey.get(key) ?? 0) + Math.max(1, Number(sel.quantity) || 1));
+      }
+
+      const totalByAddOnId = new Map<string, number>();
+      for (const [key, qty] of qtyByKey.entries()) {
+        const addOnId = key.split('::')[0];
+        totalByAddOnId.set(addOnId, (totalByAddOnId.get(addOnId) ?? 0) + qty);
+      }
+
+      for (const [addOnId, minTotal] of initialAddOnMinTotalByAddOnId.entries()) {
+        const currentTotal = totalByAddOnId.get(addOnId) ?? 0;
+        if (currentTotal >= minTotal) continue;
+        const deficit = minTotal - currentTotal;
+        const existingKey = Array.from(qtyByKey.keys()).find((k) => k.startsWith(`${addOnId}::`));
+        const targetKey = existingKey ?? `${addOnId}::`;
+        qtyByKey.set(targetKey, (qtyByKey.get(targetKey) ?? 0) + deficit);
+      }
+      return Array.from(qtyByKey.entries()).map(([key, qty]) => {
+        const [addOnId, variantIdRaw] = key.split('::');
+        const variantId = variantIdRaw?.trim() || undefined;
+        return { addOnId, variantId, quantity: qty };
+      });
+    },
+    [isChangeFlow, initialAddOnMinQtyByKey, initialAddOnMinTotalByAddOnId]
+  );
+
+  const updateAddOnSelections = useCallback(
+    (
+      updater:
+        | Array<{ addOnId: string; variantId?: string; quantity?: number }>
+        | ((prev: Array<{ addOnId: string; variantId?: string; quantity?: number }>) => Array<{ addOnId: string; variantId?: string; quantity?: number }>)
+    ) => {
+      setAddOnSelections((prev) => {
+        const rawNext = typeof updater === 'function' ? updater(prev) : updater;
+        return applyChangeFlowAddOnFloor(rawNext);
+      });
+    },
+    [applyChangeFlowAddOnFloor]
+  );
+  
+  // Get selected pickup location
+  const selectedPickupLocation = useMemo(() => 
+    product.pickupLocations?.find(loc => loc.id === pickupLocationId),
+    [product.pickupLocations, pickupLocationId]
+  );
+  
+  // Calculate maximum time offset from all pickup locations (for range display when location is unknown)
+  const maxTimeOffsetMinutes = useMemo(() => {
+    if (!product.pickupLocations || product.pickupLocations.length === 0) {
+      return 0;
+    }
+    return Math.max(...product.pickupLocations.map(loc => loc.pickupTimeOffsetMinutes ?? 0));
+  }, [product.pickupLocations]);
+  
+  // Calculate pickup times based on availability times + pickup location offset
+  interface PickupTimeInfo extends Availability {
+    pickupTime: string;
+    displayTime: string;
+    originalTime: string;
+    displayTimeRange?: string; // Time range when pickup location is unknown
+  }
+  
+  const pickupTimes = useMemo((): PickupTimeInfo[] => {
+    if (!selectedDate || !timesForSelectedDate.length) {
+      return [];
+    }
+    
+    // Show base availability times (without pickup location offset) when pickup location not selected yet
+    // Once pickup location is selected, we can show adjusted times
+    const offsetMinutes = pickupLocationSkipped 
+      ? 0 
+      : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
+    
+    return timesForSelectedDate.map(avail => {
+      // Parse the dateTime (which should already be in company timezone from backend)
+      const availabilityTime = parseISO(avail.dateTime);
+      
+      // Only apply offset if it's set and > 0 and location is selected
+      const pickupTime = (offsetMinutes > 0 && selectedPickupLocation) 
+        ? new Date(availabilityTime.getTime() + offsetMinutes * 60 * 1000)
+        : availabilityTime;
+      
+      // Format in company timezone (not user's local timezone)
+      const displayTime = formatInTimeZone(pickupTime, companyTimezone, 'h:mm a');
+      const originalTime = formatInTimeZone(availabilityTime, companyTimezone, 'h:mm a');
+      
+      // If pickup location is skipped, calculate and display time range
+      let displayTimeRange: string | undefined;
+      if (pickupLocationSkipped && maxTimeOffsetMinutes > 0) {
+        const latestPickupTime = new Date(availabilityTime.getTime() + maxTimeOffsetMinutes * 60 * 1000);
+        const latestTimeStr = formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a');
+        displayTimeRange = `${originalTime} - ${latestTimeStr}`;
+      }
+      
+      return {
+        ...avail,
+        pickupTime: pickupTime.toISOString(),
+        displayTime,
+        originalTime,
+        displayTimeRange,
+      };
+    });
+  }, [selectedDate, selectedPickupLocation, timesForSelectedDate, pickupLocationSkipped, maxTimeOffsetMinutes, companyTimezone]);
+
+  // Check if any pickup time has "most popular" tag (memoized for performance)
+  const hasAnyMostPopular = useMemo(() => {
+    if (pickupTimes.length <= 1) return false;
+    return pickupTimes.some(t => {
+      if (!t.productOptionId) return false;
+      const opt = optionsMap.get(t.productOptionId);
+      return opt?.mostPopular;
+    });
+  }, [pickupTimes, optionsMap]);
+
+  // Helper function to get effective itinerary based on selected date and overrides
+  const getEffectiveItinerary = useCallback((option: typeof activeOptions[0], date: Date): typeof option.itinerary => {
+    if (!option.itinerary) return undefined;
+    
+    const monthDay = formatInTimeZone(date, companyTimezone, 'MM-dd');
+    
+    // Check for date-specific override
+    if (option.itineraryOverrides && option.itineraryOverrides.length > 0) {
+      for (const override of option.itineraryOverrides) {
+        if (monthDay >= override.startDate && monthDay <= override.endDate) {
+          return override.itinerary;
+        }
+      }
+    }
+    
+    return option.itinerary;
+  }, [companyTimezone]);
+
+  // Helper function to calculate stay summary for a specific return option
+  const calculateStaySummary = useCallback((returnDateTime: Date): string | null => {
+    if (!selectedAvailability) return null;
+    
+    const availabilityProductOptionId = selectedAvailability.productOptionId || activeOptions[0]?.optionId;
+    const selectedOption = activeOptions.find(opt => opt.optionId === availabilityProductOptionId);
+    if (!selectedOption) return null;
+    
+    const tourStartTime = parseISO(selectedAvailability.dateTime);
+    const itinerary = getEffectiveItinerary(selectedOption, tourStartTime);
+    const hasItinerary = itinerary && itinerary.length > 0 && product.destinations && product.destinations.length > 0;
+    
+    if (!hasItinerary || !product.destinations || !itinerary) return null;
+    
+    const destinationMap = new Map(product.destinations.map(d => [d.name, d]));
+    let lastDepartureTime = tourStartTime;
+    
+    const stays: Array<{ destinationName: string; durationHours: number }> = [];
+    
+    itinerary.forEach((itineraryItem, index) => {
+      const destination = destinationMap.get(itineraryItem.destinationName);
+      if (!destination) return;
+      
+      const arrivalTime = new Date(
+        lastDepartureTime.getTime() + (itineraryItem.travelTimeFromPreviousHours * 60 * 60 * 1000)
+      );
+      
+      const isLastDestination = index === itinerary.length - 1;
+      
+      if (isLastDestination) {
+        // For the last destination, calculate time from arrival to return time
+        const timeDiffMs = returnDateTime.getTime() - arrivalTime.getTime();
+        const timeDiffHours = timeDiffMs / (1000 * 60 * 60);
+        
+        if (timeDiffHours > 0) {
+          stays.push({
+            destinationName: destination.name,
+            durationHours: timeDiffHours,
+          });
+        }
+      } else {
+        // For non-last destinations (including first), use durationHours only if there's more than one stop
+        if (itinerary.length > 1 && itineraryItem.durationHours && itineraryItem.durationHours > 0) {
+          stays.push({
+            destinationName: destination.name,
+            durationHours: itineraryItem.durationHours,
+          });
+        }
+      }
+      
+      const departureTime = itineraryItem.durationHours && !isLastDestination
+        ? new Date(arrivalTime.getTime() + (itineraryItem.durationHours * 60 * 60 * 1000))
+        : arrivalTime;
+      
+      lastDepartureTime = departureTime;
+    });
+    
+    if (stays.length === 0) return null;
+    
+    // Build summary string e.g. "2 hours at [destination] + 2 hours at [destination]"
+    return stays.map(stay => {
+      const hours = Math.floor(stay.durationHours);
+      const minutes = Math.round((stay.durationHours - hours) * 60);
+      let timeStr = '';
+      if (hours === 0 && minutes === 0) {
+        timeStr = '0 min';
+      } else if (hours === 0) {
+        timeStr = `${minutes} min`;
+      } else if (minutes === 0) {
+        timeStr = `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+      } else {
+        timeStr = `${hours} ${hours === 1 ? 'hour' : 'hours'} ${minutes} min`;
+      }
+      return `${timeStr} at ${stay.destinationName}`;
+    }).join(' + ');
+  }, [selectedAvailability, activeOptions, product.destinations, getEffectiveItinerary]);
+
+  // Helper function to compute itinerary display for storage (returns same shape as "Your Itinerary" box)
+  const computeItineraryDisplay = useCallback((): ItineraryDisplayStep[] | null => {
+    if (!selectedAvailability) return null;
+    const availabilityProductOptionId = selectedAvailability.productOptionId || activeOptions[0]?.optionId;
+    const selectedOption = activeOptions.find(opt => opt.optionId === availabilityProductOptionId);
+    if (!selectedOption) return null;
+    const tourStartTime = parseISO(selectedAvailability.dateTime);
+    const itinerary = getEffectiveItinerary(selectedOption, tourStartTime);
+    const hasItinerary = itinerary && itinerary.length > 0 && product.destinations && product.destinations.length > 0;
+    if (!hasItinerary || !product.destinations || !itinerary) return null;
+    
+    const itineraryItems: ItineraryDisplayStep[] = [];
+    const destinationMap = new Map(product.destinations.map(d => [d.name, d]));
+    const pickupOffsetMinutes = pickupLocationSkipped ? 0 : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
+    const actualPickupTime = pickupOffsetMinutes > 0
+      ? new Date(tourStartTime.getTime() + pickupOffsetMinutes * 60 * 1000)
+      : tourStartTime;
+    let pickupTimeDisplay: string;
+    if (pickupLocationSkipped && maxTimeOffsetMinutes > 0) {
+      const latestPickupTime = new Date(tourStartTime.getTime() + maxTimeOffsetMinutes * 60 * 1000);
+      pickupTimeDisplay = `${formatInTimeZone(tourStartTime, companyTimezone, 'h:mm a')} - ${formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a')}`;
+    } else {
+      pickupTimeDisplay = formatInTimeZone(actualPickupTime, companyTimezone, 'h:mm a');
+    }
+    const pickupPlace = pickupLocationSkipped || !selectedPickupLocation ? 'your_pickup_location' : selectedPickupLocation.name;
+    itineraryItems.push({ stepType: StepType.pickup, time: pickupTimeDisplay, place: pickupPlace });
+    let lastDepartureTime = tourStartTime;
+    itinerary.forEach((itineraryItem, index) => {
+      const destination = destinationMap.get(itineraryItem.destinationName);
+      if (!destination) return;
+      const arrivalTime = new Date(lastDepartureTime.getTime() + (itineraryItem.travelTimeFromPreviousHours * 60 * 60 * 1000));
+      itineraryItems.push({
+        stepType: StepType.arrive,
+        time: formatInTimeZone(arrivalTime, companyTimezone, 'h:mm a'),
+        place: destination.name
+      });
+      const departureTime = itineraryItem.durationHours
+        ? new Date(arrivalTime.getTime() + (itineraryItem.durationHours * 60 * 60 * 1000))
+        : arrivalTime;
+      const hasMoreDestinations = index < itinerary.length - 1;
+      if (itineraryItem.durationHours && hasMoreDestinations) {
+        itineraryItems.push({
+          stepType: StepType.depart,
+          time: formatInTimeZone(departureTime, companyTimezone, 'h:mm a'),
+          place: destination.name
+        });
+      }
+      lastDepartureTime = departureTime;
+    });
+    // Return time: from selected return option (products with return selection) OR from itinerary's last departure (e.g. Emerald Lake shuttle with fixed multi-stop itinerary)
+    const returnDateTime = selectedReturnOption
+      ? parseISO(selectedReturnOption.dateTime)
+      : lastDepartureTime;
+    const lastDestination = itinerary.length > 0 ? destinationMap.get(itinerary[itinerary.length - 1].destinationName) : null;
+    const lastDestName = itinerary.length > 0 && product.destinations
+      ? (destinationMap.get(itinerary[itinerary.length - 1].destinationName)?.name ?? null)
+      : null;
+    const getDropOffMinutes = (loc: { travelMinutesFromDestination?: Record<string, number> }) => {
+      if (lastDestName && loc.travelMinutesFromDestination?.[lastDestName] != null) return loc.travelMinutesFromDestination[lastDestName];
+      return 0;
+    };
+    const hasDropOffEstimate = (loc: { travelMinutesFromDestination?: Record<string, number> }) =>
+      Boolean(lastDestName && loc.travelMinutesFromDestination?.[lastDestName] != null);
+    const dropOffPlace = pickupLocationSkipped || !selectedPickupLocation ? 'your_pickup_location' : selectedPickupLocation!.name;
+
+    if (selectedReturnOption) {
+      itineraryItems.push({
+        stepType: StepType.depart,
+        time: formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a'),
+        place: lastDestination?.name ?? 'the_destination'
+      });
+    } else if (lastDestination) {
+      // No return options: show depart from last stop (e.g. Vermillion Lakes for Emerald Lake shuttle)
+      itineraryItems.push({
+        stepType: StepType.depart,
+        time: formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a'),
+        place: lastDestination.name
+      });
+    }
+    // Add drop-off step (works for both return-option products and itinerary-only products like Emerald Lake)
+    if (selectedPickupLocation && hasDropOffEstimate(selectedPickupLocation)) {
+      const dropOffOffsetMinutes = getDropOffMinutes(selectedPickupLocation);
+      const dropOffTime = new Date(returnDateTime.getTime() + dropOffOffsetMinutes * 60 * 1000);
+      itineraryItems.push({
+        stepType: StepType.drop_off,
+        time: formatInTimeZone(dropOffTime, companyTimezone, 'h:mm a'),
+        place: dropOffPlace
+      });
+    } else if (pickupLocationSkipped || !selectedPickupLocation) {
+      itineraryItems.push({ stepType: StepType.drop_off, time: 'TBD', place: dropOffPlace });
+    } else if (product.pickupLocations?.length) {
+      const dropOffOffsets = product.pickupLocations.map(getDropOffMinutes);
+      const [minOffset, maxOffset] = [Math.min(...dropOffOffsets), Math.max(...dropOffOffsets)];
+      const earliestDropOff = new Date(returnDateTime.getTime() + minOffset * 60 * 1000);
+      const latestDropOff = new Date(returnDateTime.getTime() + maxOffset * 60 * 1000);
+      itineraryItems.push({
+        stepType: StepType.drop_off,
+        time: minOffset === maxOffset
+          ? formatInTimeZone(earliestDropOff, companyTimezone, 'h:mm a')
+          : `${formatInTimeZone(earliestDropOff, companyTimezone, 'h:mm a')} - ${formatInTimeZone(latestDropOff, companyTimezone, 'h:mm a')}`,
+        place: dropOffPlace
+      });
+    } else {
+      itineraryItems.push({ stepType: StepType.drop_off, time: 'TBD', place: dropOffPlace });
+    }
+    return itineraryItems;
+  }, [selectedAvailability, selectedReturnOption, selectedPickupLocation, pickupLocationSkipped, activeOptions, product, getEffectiveItinerary, companyTimezone, maxTimeOffsetMinutes]);
+
+  /**
+   * Itinerary for storage only (API/DB). When pickup is unknown, pickup step time is always a range
+   * (e.g. "9 AM - 10:00 AM") so /manage and confirmation email show it; drop-off stays TBD.
+   * UI during booking is unchanged (uses computeItineraryDisplay).
+   */
+  const computeItineraryDisplayForStorage = useCallback((): ItineraryDisplayStep[] | null => {
+    const base = computeItineraryDisplay();
+    if (!base || base.length === 0) return base;
+    const pickupUnknown = pickupLocationSkipped || (!selectedPickupLocation && product.pickupLocations && product.pickupLocations.length > 0);
+    if (!pickupUnknown) return base;
+    const tourStartTime = selectedAvailability ? parseISO(selectedAvailability.dateTime) : null;
+    if (!tourStartTime) return base;
+    const rangeMinutes = maxTimeOffsetMinutes > 0 ? maxTimeOffsetMinutes : 60;
+    const latestPickupTime = new Date(tourStartTime.getTime() + rangeMinutes * 60 * 1000);
+    const startStr = formatInTimeZone(tourStartTime, companyTimezone, 'h:mm a');
+    const endStr = formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a');
+    const pickupRangeTime = startStr === endStr ? startStr : `${startStr} - ${endStr}`;
+    return base.map((step, i) =>
+      i === 0 && step.stepType === StepType.pickup && step.place === 'your_pickup_location'
+        ? { ...step, time: pickupRangeTime }
+        : step
+    );
+  }, [computeItineraryDisplay, pickupLocationSkipped, selectedPickupLocation, product.pickupLocations, selectedAvailability, companyTimezone, maxTimeOffsetMinutes]);
+
+  // Product has fees from config (e.g. product-fees.json); API sends these in pricingConfig.fees
+  const hasFees = useMemo(() =>
+    Boolean(pricingConfig?.fees && Object.keys(pricingConfig.fees).length > 0 && Object.values(pricingConfig.fees).some(v => (v?.feePerPerson ?? 0) > 0)),
+    [pricingConfig?.fees]
+  );
+
+  const changeFlowTicketPriceFloorByCategory = useMemo(() => {
+    if (!isChangeFlow || !originalReceipt?.lineItems?.length) return new Map<string, number>();
+    const amountByCategory = new Map<string, number>();
+    const qtyByCategory = new Map<string, number>();
+    for (const line of originalReceipt.lineItems) {
+      const type = (line.type || '').trim().toUpperCase();
+      if (type !== 'TICKET') continue;
+      const category = normalizeTicketCategoryFromReceiptLabel(line.label || '');
+      const amount = Number(line.amount ?? 0);
+      const qty = Number(line.quantity ?? 0);
+      if (!category || !Number.isFinite(amount) || !Number.isFinite(qty) || amount <= 0 || qty <= 0) continue;
+      amountByCategory.set(category, (amountByCategory.get(category) ?? 0) + amount);
+      qtyByCategory.set(category, (qtyByCategory.get(category) ?? 0) + qty);
+    }
+    const floors = new Map<string, number>();
+    for (const [category, qty] of qtyByCategory.entries()) {
+      const totalAmount = amountByCategory.get(category) ?? 0;
+      if (totalAmount > 0 && qty > 0) floors.set(category, totalAmount / qty);
+    }
+    return floors;
+  }, [isChangeFlow, originalReceipt?.lineItems]);
+
+  const changeFlowReturnUnitFloorPerPerson = useMemo(() => {
+    if (!isChangeFlow || !originalReceipt?.lineItems?.length) return null;
+    const fallbackBookedQty =
+      (initialValues?.bookingItems ?? []).reduce((sum, item) => sum + Math.max(0, Number(item.count) || 0), 0);
+    let totalAmount = 0;
+    let totalQty = 0;
+    for (const line of originalReceipt.lineItems) {
+      const type = (line.type || '').trim().toUpperCase();
+      if (type !== 'RETURN_OPTION') continue;
+      const amount = Number(line.amount ?? 0);
+      const qtyRaw = Number(line.quantity ?? 0);
+      const qty = qtyRaw > 0 ? qtyRaw : fallbackBookedQty;
+      if (!Number.isFinite(amount) || !Number.isFinite(qty) || amount <= 0 || qty <= 0) continue;
+      totalAmount += amount;
+      totalQty += qty;
+    }
+    if (totalAmount <= 0 || totalQty <= 0) return null;
+    return totalAmount / totalQty;
+  }, [isChangeFlow, originalReceipt?.lineItems, initialValues?.bookingItems]);
+
+  const returnOptionsWithFloor = useMemo(() => {
+    const options = selectedAvailability?.returnOptions ?? [];
+    if (!isChangeFlow || changeFlowReturnUnitFloorPerPerson == null) return options;
+    return options.map((opt) => {
+      const rawPerPerson = opt.priceAdjustmentByCurrency?.[currency] ?? 0;
+      const flooredPerPerson = Math.max(rawPerPerson, changeFlowReturnUnitFloorPerPerson);
+      if (flooredPerPerson === rawPerPerson) return opt;
+      return {
+        ...opt,
+        priceAdjustmentByCurrency: {
+          ...(opt.priceAdjustmentByCurrency ?? {}),
+          [currency]: flooredPerPerson,
+        },
+      };
+    });
+  }, [selectedAvailability?.returnOptions, isChangeFlow, changeFlowReturnUnitFloorPerPerson, currency]);
+
+  const selectedReturnOptionWithFloor = useMemo(() => {
+    if (!selectedReturnOption || !isChangeFlow || changeFlowReturnUnitFloorPerPerson == null) return selectedReturnOption;
+    const rawPerPerson = selectedReturnOption.priceAdjustmentByCurrency?.[currency] ?? 0;
+    const flooredPerPerson = Math.max(rawPerPerson, changeFlowReturnUnitFloorPerPerson);
+    if (flooredPerPerson === rawPerPerson) return selectedReturnOption;
+    return {
+      ...selectedReturnOption,
+      priceAdjustmentByCurrency: {
+        ...(selectedReturnOption.priceAdjustmentByCurrency ?? {}),
+        [currency]: flooredPerPerson,
+      },
+    };
+  }, [selectedReturnOption, isChangeFlow, changeFlowReturnUnitFloorPerPerson, currency]);
+  
+  // Ticket prices: use breakdown final price so booking flow total matches the price breakdown. All conversion in mid-layer.
+  const pricing = useMemo(() => {
+    if (!selectedAvailability || !pricingConfig) return [];
+    const optionId = selectedAvailability.productOptionId;
+    const selectedOption = activeOptions.find(opt => opt.optionId === optionId);
+    const precomputed = optionId ? precomputedPricesByOption?.[optionId] : undefined;
+    const rateToDisplayPrice = (backendInDisplayCurrency: number) =>
+      getDisplayPriceFromBaseInDisplayCurrency(backendInDisplayCurrency, currency, pricingConfig, hasFees);
+    const getBaseInDisplayCurrency = (category: string) => {
+      const fromPrecomputed = precomputed?.[category]?.[currency];
+      if (fromPrecomputed != null) return fromPrecomputed;
+      return 0;
+    };
+    const buildRate = (
+      category: string,
+      backendPriceCAD: number,
+      backendInDisplayCurrency: number,
+      baseInDisplayCurrency: number,
+      appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }>
+    ) => {
+      const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
+      const isPublicMode = isSimplifiedPricingView;
+      const breakdown = computePriceBreakdown(
+        pricingConfig,
+        currency,
+        backendPriceCAD,
+        basePriceCAD,
+        hasFees,
+        appliedAdjustments,
+        undefined,
+        baseInDisplayCurrency,
+        isPublicMode
+      );
+      const price = breakdown?.finalPrice ?? rateToDisplayPrice(backendInDisplayCurrency);
+      return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: backendPriceCAD };
+    };
+    return selectedAvailability.rates?.map(rate => {
+      const backendPriceCAD = rate.price ?? 0;
+      const backendInDisplayCurrency = rate.priceByCurrency?.[currency] ?? (currency === 'CAD' ? backendPriceCAD : 0);
+      const baseInDisplayCurrency = getBaseInDisplayCurrency(rate.category);
+      const built = buildRate(rate.category, backendPriceCAD, backendInDisplayCurrency, baseInDisplayCurrency, rate.appliedAdjustments ?? rate.applied_adjustments ?? []);
+      const floorUnitPrice = changeFlowTicketPriceFloorByCategory.get(rate.category.toUpperCase());
+      const price = floorUnitPrice != null ? Math.max(built.price, floorUnitPrice) : built.price;
+      return {
+        category: rate.category,
+        rateId: rate.rateId || rate.category,
+        available: rate.available,
+        price,
+        priceCAD: built.priceCAD,
+        baseInDisplayCurrency: built.baseInDisplayCurrency,
+        appliedAdjustments: built.appliedAdjustments,
+      };
+    }) || selectedAvailability.pricesByCategory?.retailPrices?.map(p => {
+      const priceCADFromApi = p.price / 100;
+      const baseInDisplayCurrency = getBaseInDisplayCurrency(p.category);
+      const backendInDisplayCurrency = currency === 'CAD' ? priceCADFromApi : 0;
+      const built = buildRate(p.category, priceCADFromApi, backendInDisplayCurrency, baseInDisplayCurrency, []);
+      const floorUnitPrice = changeFlowTicketPriceFloorByCategory.get(p.category.toUpperCase());
+      const price = floorUnitPrice != null ? Math.max(built.price, floorUnitPrice) : built.price;
+      return {
+        category: p.category,
+        rateId: p.category,
+        available: selectedAvailability.vacancies,
+        price,
+        priceCAD: built.priceCAD,
+        baseInDisplayCurrency: built.baseInDisplayCurrency,
+        appliedAdjustments: built.appliedAdjustments,
+      };
+    }) || [];
+  }, [selectedAvailability, currency, hasFees, pricingConfig, precomputedPricesByOption, activeOptions, isSimplifiedPricingView, changeFlowTicketPriceFloorByCategory]);
+
+  // Price breakdown: mid-layer returns line items (base + one per rule/deal). UI renders each line; rate in brackets when used.
+  const getPriceBreakdown = useCallback((category: string, priceCAD: number, baseInDisplayCurrency: number | undefined, appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }> = []): PriceBreakdownData | null => {
+    if (!pricingConfig) return null;
+    const selectedOption = activeOptions.find(opt => opt.optionId === selectedAvailability?.productOptionId);
+    const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
+    const isPublicMode = isSimplifiedPricingView;
+    return computePriceBreakdown(
+      pricingConfig,
+      currency,
+      priceCAD,
+      basePriceCAD,
+      hasFees,
+      appliedAdjustments,
+      undefined,
+      baseInDisplayCurrency,
+      isPublicMode
+    );
+  }, [pricingConfig, currency, hasFees, activeOptions, selectedAvailability, isSimplifiedPricingView]);
+  
+  // Order summary from mid-layer; UI only displays these values (no calculations).
+  const orderSummary: OrderSummary = useMemo(
+    () =>
+      computeOrderSummary(
+        quantities,
+        pricing,
+        selectedReturnOptionWithFloor,
+        pricingConfig ?? null,
+        currency,
+        hasFees,
+        cancellationPolicyId
+      ),
+    [quantities, pricing, selectedReturnOptionWithFloor, pricingConfig, currency, hasFees, cancellationPolicyId]
+  );
+  const { totalQuantity, subtotal, tax, total: totalFromSummary, feeLineItems, returnPriceAdjustment, cancellationPolicyFee, isTaxIncludedInPrice, ticketLineItems } = orderSummary;
+  /** Round-trip party limit: both legs must fit — use the tighter of outbound vs return vacancies. */
+  const effectivePartySizeCap = useMemo(() => {
+    if (!selectedAvailability) return 0;
+    const outbound = selectedAvailability.vacancies ?? 0;
+    if (selectedReturnOption == null) return outbound;
+    return Math.min(outbound, selectedReturnOption.vacancies ?? 0);
+  }, [selectedAvailability, selectedReturnOption]);
+
+  const selectedCancellationPolicy = pricingConfig?.cancellationPolicies?.find((p) => p.id === cancellationPolicyId);
+  /** Label for display when policy may be forced by promo (not in pricingConfig list). */
+  const effectiveCancellationPolicyLabel = selectedCancellationPolicy?.label ?? forcedCancellationPolicy?.label ?? (t('booking.flexibleCancellation') || 'Flexible cancellation');
+
+  // When return selection (or refreshed availabilities) caps the party below current ticket counts, trim tickets (non-admin).
+  useEffect(() => {
+    if (isAdmin || !selectedAvailability) return;
+    const cap = effectivePartySizeCap;
+    if (totalQuantity <= cap) return;
+    const over = totalQuantity - cap;
+    setQuantities((prev) => {
+      const next = { ...prev };
+      let remaining = over;
+      const cats = Object.keys(next)
+        .filter((c) => (next[c] ?? 0) > 0)
+        .sort((a, b) => (next[b] ?? 0) - (next[a] ?? 0));
+      for (const cat of cats) {
+        if (remaining <= 0) break;
+        const minQ =
+          changeBookingMinimumQuantities != null
+            ? Math.max(0, changeBookingMinimumQuantities[cat] ?? 0)
+            : 0;
+        const q = next[cat] ?? 0;
+        const reducible = Math.max(0, q - minQ);
+        const dec = Math.min(reducible, remaining);
+        next[cat] = q - dec;
+        remaining -= dec;
+      }
+      return next;
+    });
+  }, [
+    effectivePartySizeCap,
+    totalQuantity,
+    selectedAvailability,
+    isAdmin,
+    changeBookingMinimumQuantities,
+  ]);
+
+  // Add-on totals (lunch, animals, etc.)
+  const addOnTotal = useMemo(() => {
+    let sum = 0;
+    for (const sel of addOnSelections) {
+      const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
+      if (!addOn) continue;
+      const basePrice = addOn.price ?? 0;
+      const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
+      const variantAdjustment = hasVariant
+        ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0)
+        : 0;
+      sum += (basePrice + variantAdjustment) * (sel.quantity ?? 1);
+    }
+    return sum;
+  }, [addOnSelections, addOns]);
+
+  // Effective subtotal includes add-ons (for promo discount and total)
+  const effectiveSubtotal = subtotal + addOnTotal;
+
+  /** Stable signature for promo discount API (avoid effect re-fire on object identity churn). */
+  const quantitiesSignature = useMemo(
+    () =>
+      Object.entries(quantities)
+        .filter(([, n]) => (n ?? 0) > 0)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([c, n]) => `${c}:${n}`)
+        .join('|'),
+    [quantities]
+  );
+
+  // Fee line items including add-ons (for PriceSummary and CheckoutModal)
+  const feeLineItemsWithAddOns = useMemo(() => {
+    const addOnLines = addOnSelections
+      .map((sel) => {
+        const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
+        if (!addOn) return null;
+        const base = addOn.price ?? 0;
+        const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
+        const adj = hasVariant ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0) : 0;
+        const qty = sel.quantity ?? 1;
+        const amt = (base + adj) * qty;
+        const variantLabel = hasVariant ? addOn.variants?.find((v) => v.id === sel.variantId)?.label : null;
+        const name = variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name;
+        return { name, totalAmount: amt, description: addOn.description ?? undefined };
+      })
+      .filter((x): x is NonNullable<typeof x> => x != null);
+    return [...feeLineItems, ...addOnLines];
+  }, [feeLineItems, addOnSelections, addOns]);
+
+  const checkoutPriceSummaryLines = useMemo((): PriceSummaryLine[] => {
+    if (!selectedAvailability) return [];
+    return [
+      ...ticketLineItems.map((line): PriceSummaryLine => {
+        const rate = pricing.find((r) => r.category === line.category);
+        const breakdown = getPriceBreakdown(
+          line.category,
+          rate?.priceCAD ?? 0,
+          rate?.baseInDisplayCurrency,
+          rate?.appliedAdjustments ?? [],
+        );
+        return {
+          kind: 'ticket',
+          category: line.category,
+          qty: line.qty,
+          itemTotal: line.itemTotal,
+          breakdown,
+        };
+      }),
+      ...(selectedReturnOption && returnPriceAdjustment !== 0
+        ? [
+            {
+              kind: 'line' as const,
+              label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+              amount: returnPriceAdjustment,
+              type: 'return',
+            },
+          ]
+        : []),
+      ...(cancellationPolicyFee > 0 && (selectedCancellationPolicy || forcedCancellationPolicy)
+        ? [
+            {
+              kind: 'line' as const,
+              label: effectiveCancellationPolicyLabel,
+              amount: cancellationPolicyFee,
+              type: 'cancellation',
+            },
+          ]
+        : []),
+      ...feeLineItemsWithAddOns.map((fee) => {
+        const isMoraineLakeRoadAccessFee =
+          fee.name.toLowerCase().includes('moraine') &&
+          (fee.name.toLowerCase().includes('access') ||
+            fee.name.toLowerCase().includes('road') ||
+            fee.name.toLowerCase().includes('license'));
+        return {
+          kind: 'line' as const,
+          label: feeLineItems.some((f) => f.name === fee.name)
+            ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
+            : fee.name,
+          amount: fee.totalAmount,
+          type: 'fee',
+          tooltip: isMoraineLakeRoadAccessFee
+            ? "Since 2025, Parks Canada charges a per-trip fee for License of Occupation. Based on our capacity, this per-person fee contributes towards Parks Canada's Moraine Lake Road operations."
+            : undefined,
+        };
+      }),
+    ];
+  }, [
+    selectedAvailability,
+    ticketLineItems,
+    pricing,
+    getPriceBreakdown,
+    selectedReturnOption,
+    returnPriceAdjustment,
+    totalQuantity,
+    t,
+    cancellationPolicyFee,
+    selectedCancellationPolicy,
+    forcedCancellationPolicy,
+    effectiveCancellationPolicyLabel,
+    feeLineItemsWithAddOns,
+    feeLineItems,
+  ]);
+
+  // Promo discount from backend (order-level only; rates are pre-promo)
+  const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
+  const [isGiftCard, setIsGiftCard] = useState(false);
+  const [isVoucher, setIsVoucher] = useState(false);
+  /** Monotonic id per discount fetch; stale responses are ignored. */
+  const promoDiscountFetchGenerationRef = useRef(0);
+  /** Latest cart context for get-promo-discount; effect only keys off promoDiscountFetchKey. */
+  const promoDiscountParamsRef = useRef({
+    selectedAvailability: null as Availability | null,
+    ticketLineItems: [] as Array<{ category: string; qty: number }>,
+    effectiveSubtotal: 0,
+    appliedPromoCode: null as string | null,
+  });
+
+  const promoDiscountFetchKey = useMemo(() => {
+    if (!appliedPromoCode || !selectedAvailability || totalQuantity === 0) return '';
+    const companyId = product.companyId ?? ENV.COMPANY_ID;
+    if (!companyId) return '';
+    const optionId = selectedAvailability.productOptionId;
+    if (!optionId || !quantitiesSignature) return '';
+    return [
+      appliedPromoCode,
+      companyId,
+      product.productId,
+      optionId,
+      selectedAvailability.dateTime,
+      selectedAvailability.availabilityId ?? '',
+      currency,
+      quantitiesSignature,
+      String(Math.round(effectiveSubtotal * 100)),
+    ].join('::');
+  }, [
+    appliedPromoCode,
+    selectedAvailability?.dateTime,
+    selectedAvailability?.productOptionId,
+    selectedAvailability?.availabilityId,
+    totalQuantity,
+    product.companyId,
+    product.productId,
+    currency,
+    quantitiesSignature,
+    effectiveSubtotal,
+  ]);
+
+  promoDiscountParamsRef.current = {
+    selectedAvailability,
+    ticketLineItems: ticketLineItems.map((l) => ({ category: l.category, qty: l.qty })),
+    effectiveSubtotal,
+    appliedPromoCode,
+  };
+
+  useEffect(() => {
+    if (!promoDiscountFetchKey) {
+      setPromoDiscountAmount(0);
+      setIsGiftCard(false);
+      setIsVoucher(false);
+      return;
+    }
+
+    let cancelled = false;
+    const debounceMs = 120;
+    const timer = window.setTimeout(() => {
+      if (cancelled) return;
+      const {
+        selectedAvailability: sel,
+        ticketLineItems: lines,
+        effectiveSubtotal: sub,
+        appliedPromoCode: code,
+      } = promoDiscountParamsRef.current;
+      if (!code || !sel) return;
+      const companyId = product.companyId ?? ENV.COMPANY_ID;
+      const optionId = sel.productOptionId;
+      if (!companyId || !optionId) return;
+      const items = lines.map((l) => ({ category: l.category, qty: l.qty }));
+      if (items.length === 0) return;
+
+      const generation = ++promoDiscountFetchGenerationRef.current;
+      getPromoDiscount(
+        code,
+        companyId,
+        product.productId,
+        optionId,
+        currency,
+        items,
+        sel.dateTime,
+        sub
+      )
+        .then((res) => {
+          if (cancelled) return;
+          if (generation !== promoDiscountFetchGenerationRef.current) return;
+          setPromoDiscountAmount(res.discount ?? 0);
+          setIsGiftCard(res.isGiftCard ?? false);
+          setIsVoucher(res.isVoucher ?? false);
+        })
+        .catch(() => {
+          if (cancelled) return;
+          if (generation !== promoDiscountFetchGenerationRef.current) return;
+          setPromoDiscountAmount(0);
+          setIsGiftCard(false);
+          setIsVoucher(false);
+        });
+    }, debounceMs);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [promoDiscountFetchKey, product.companyId, product.productId, currency]);
+
+  // Percentage/fixed promos: tax on discounted amount (promo before GST per CRA guidance).
+  // Vouchers and gift cards: tax on full subtotal (voucher discount includes tax on free portion; gift card is payment).
+  // Change booking: same as normal — discount from get-promo-discount on the new selection (promo code from booking).
+  const lockedPromoFallbackAmount =
+    isChangeFlow && lockedPromoCode
+      ? Math.max(0, originalReceipt?.promoAmount ?? 0)
+      : 0;
+  const effectivePromoDiscountAmount =
+    promoDiscountAmount > 0 ? promoDiscountAmount : lockedPromoFallbackAmount;
+  const taxOnSubtotal = isTaxIncludedInPrice ? 0 : effectiveSubtotal * (pricingConfig?.taxRate ?? 0);
+  const effectiveTax =
+    effectivePromoDiscountAmount > 0 && !isGiftCard && !isVoucher
+      ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
+      : taxOnSubtotal;
+  const totalPrice = effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
+  const changeFlowProposedTotal = isChangeFlow && originalReceipt
+    ? reconcileChangeBookingProposedTotal(totalPrice, originalReceipt.total)
+    : totalPrice;
+  const changeSelectionDetails = useMemo(() => {
+    if (!isChangeFlow || !initialValues) {
+      return { hasChangesFromInitial: true, dateChanged: false, ticketsChanged: false };
+    }
+    if (!selectedAvailability) {
+      return { hasChangesFromInitial: false, dateChanged: false, ticketsChanged: false };
+    }
+    const initialMs = initialValues.dateTime ? parseAvailabilityDateTime(initialValues.dateTime).getTime() : null;
+    const selectedMs = parseAvailabilityDateTime(selectedAvailability.dateTime).getTime();
+    // Only treat as date change when we have an original datetime to compare (otherwise we’d always flag “changed”).
+    const dateChanged = initialMs != null && initialMs !== selectedMs;
+    // productOptionId on the booking is the option id, not productId — compare only when both are known.
+    const initialOpt = initialValues.productOptionId?.trim() || null;
+    const selectedOpt = selectedAvailability.productOptionId?.trim() || null;
+    const optionChanged = Boolean(
+      initialOpt && selectedOpt && initialOpt !== selectedOpt
+    );
+    const pickupChanged = (initialValues.pickupLocationId ?? null) !== (pickupLocationId ?? null);
+    const normalizeCounts = (items: Array<{ category: string; count: number }> | null | undefined) => {
+      const map = new Map<string, number>();
+      for (const item of items ?? []) {
+        const key = item.category?.trim();
+        if (!key) continue;
+        map.set(key, Math.max(0, Number(item.count) || 0));
+      }
+      return map;
+    };
+    const initialCounts = normalizeCounts(initialValues.bookingItems ?? null);
+    const currentCounts = new Map<string, number>();
+    for (const [category, count] of Object.entries(quantities)) {
+      const key = category?.trim();
+      if (!key) continue;
+      currentCounts.set(key, Math.max(0, Number(count) || 0));
+    }
+    const allKeys = new Set([...initialCounts.keys(), ...currentCounts.keys()]);
+    let countsChanged = false;
+    for (const key of allKeys) {
+      if ((initialCounts.get(key) ?? 0) !== (currentCounts.get(key) ?? 0)) {
+        countsChanged = true;
+        break;
+      }
+    }
+    const currentAddOnQtyByKey = new Map<string, number>();
+    for (const sel of addOnSelections) {
+      const key = `${sel.addOnId.trim()}::${sel.variantId?.trim() || ''}`;
+      currentAddOnQtyByKey.set(key, (currentAddOnQtyByKey.get(key) ?? 0) + Math.max(1, Number(sel.quantity) || 1));
+    }
+    const allAddOnKeys = new Set([...initialAddOnMinQtyByKey.keys(), ...currentAddOnQtyByKey.keys()]);
+    let addOnsChanged = false;
+    for (const key of allAddOnKeys) {
+      if ((initialAddOnMinQtyByKey.get(key) ?? 0) !== (currentAddOnQtyByKey.get(key) ?? 0)) {
+        addOnsChanged = true;
+        break;
+      }
+    }
+    const hasReturnOptions = (selectedAvailability?.returnOptions?.length ?? 0) > 0;
+    const initialReturnId = initialValues.returnAvailabilityId?.trim() || null;
+    const initialReturnDt = initialValues.returnDateTime?.trim() || null;
+    const selectedReturnId = selectedReturnOption?.returnAvailabilityId?.trim() || null;
+    const selectedReturnDt = selectedReturnOption?.dateTime?.trim() || null;
+    let returnChanged = false;
+    if (hasReturnOptions && selectedReturnOption) {
+      if (initialReturnId && selectedReturnId) {
+        returnChanged = initialReturnId !== selectedReturnId;
+      } else if (initialReturnDt && selectedReturnDt) {
+        returnChanged =
+          parseAvailabilityDateTime(initialReturnDt).getTime() !==
+          parseAvailabilityDateTime(selectedReturnDt).getTime();
+      } else if (implicitReturnBaselineId != null && selectedReturnId != null) {
+        returnChanged = implicitReturnBaselineId !== selectedReturnId;
+      }
+    }
+    return {
+      hasChangesFromInitial:
+        dateChanged ||
+        optionChanged ||
+        pickupChanged ||
+        countsChanged ||
+        addOnsChanged ||
+        returnChanged,
+      dateChanged,
+      // Tickets line corresponds to "option + ticket counts"; add-ons and pickup changes affect itinerary but not the ticket label.
+      ticketsChanged: Boolean(optionChanged || countsChanged),
+    };
+  }, [
+    isChangeFlow,
+    initialValues,
+    selectedAvailability,
+    selectedReturnOption,
+    implicitReturnBaselineId,
+    pickupLocationId,
+    quantities,
+    addOnSelections,
+    initialAddOnMinQtyByKey,
+  ]);
+  const hasChangeSelection = changeSelectionDetails.hasChangesFromInitial;
+
+  const changeFlowNeedsServerPrice =
+    isChangeFlow &&
+    hasChangeSelection &&
+    !!initialValues?.bookingReference?.trim() &&
+    !!lastName.trim();
+
+  const isChangeQuoteBlocked = isChangeFlow && latestChangeQuote?.canProceed === false;
+  const requiresReturnInChangeFlow = isChangeFlow && !!initialValues?.returnAvailabilityId?.trim();
+  const missingRequiredReturnSelection = requiresReturnInChangeFlow && !selectedReturnOption;
+
+  const changeFlowSubmitDisabled =
+    isChangeFlow &&
+    (missingRequiredReturnSelection ||
+      (changeFlowNeedsServerPrice && (changeQuoteLoading || (!latestChangeQuote && !changeQuoteFetchError))));
+
+  const changeFlowClientEstimateDue = originalReceipt
+    ? Math.max(changeFlowProposedTotal - originalReceipt.total, 0)
+    : totalPrice;
+
+  /**
+   * Amount owed for change flow: same recipe as normal booking — FE `totalPrice` vs original receipt.
+   * Quote is still required before submit (session + canProceed); `clientProposedTotal` on quote keeps BE in sync.
+   */
+  const changeFlowAmountDueRaw = isChangeFlow ? changeFlowClientEstimateDue : totalPrice;
+  const changeFlowAmountDue =
+    isChangeFlow ? Math.round(changeFlowAmountDueRaw * 100) / 100 : changeFlowAmountDueRaw;
+
+  const changeCheckoutButtonLabel = (() => {
+    if (!isChangeFlow) return undefined;
+    if (!hasChangeSelection) return undefined;
+    if (changeFlowNeedsServerPrice) {
+      if (changeQuoteLoading) {
+        const tr = t('booking.updatingPrice');
+        return tr !== 'booking.updatingPrice' ? tr : 'Updating price…';
+      }
+      if (changeQuoteFetchError) {
+        const tr = t('booking.changeBookingRetry');
+        return tr !== 'booking.changeBookingRetry' ? tr : 'Change booking (retry)';
+      }
+      if (isChangeQuoteBlocked) {
+        const tr = t('booking.changeBookingNotAvailable');
+        return tr !== 'booking.changeBookingNotAvailable' ? tr : 'Change not available';
+      }
+      if (latestChangeQuote) {
+        const d = Math.round(changeFlowClientEstimateDue * 100) / 100;
+        return d > 0
+          ? `Change booking (${formatCurrencyAmount(d, currency, locale as 'en' | 'fr')})`
+          : 'Change booking (no charge)';
+      }
+      const tr = t('booking.changeBooking');
+      return tr !== 'booking.changeBooking' ? tr : 'Change booking';
+    }
+    const est = Math.round(changeFlowClientEstimateDue * 100) / 100;
+    return est > 0
+      ? `Change booking (${formatCurrencyAmount(est, currency, locale as 'en' | 'fr')})`
+      : 'Change booking (no charge)';
+  })();
+  const deferredInvoiceSubmitLabel =
+    !isChangeFlow && flowUi?.partnerDeferredInvoice
+      ? flowUi.partnerDeferredInvoiceSubmitLabel || 'Continue to book'
+      : undefined;
+
+  const checkoutFormError =
+    (error || '') ||
+    (missingRequiredReturnSelection ? 'Removing return option in self-serve is not available. Please contact support.' : '') ||
+    (isChangeQuoteBlocked ? (latestChangeQuote?.reasonIfBlocked ?? '') : '') ||
+    (changeQuoteFetchError ?? '');
+
+  const changeFlowSelectionPreview = useMemo((): ChangeFlowSelectionPreview | null => {
+    if (!isChangeFlow) return null;
+    if (!selectedAvailability || totalQuantity <= 0) return null;
+    const ticketsLine = formatTicketLineItemsForSummary(
+      ticketLineItems.map((l) => ({ category: l.category, qty: l.qty }))
+    );
+    const itinerary = computeItineraryDisplay();
+    const itinerarySteps =
+      itinerary?.map((s) => ({
+        time: s.time?.trim() || null,
+        label: getItineraryStepLabel(s),
+      })) ?? [];
+    return {
+      tourName: product.name?.trim() || '',
+      dateTime: selectedAvailability.dateTime,
+      ticketsLine,
+      itinerarySteps,
+      dateChanged: changeSelectionDetails.dateChanged,
+      ticketsChanged: changeSelectionDetails.ticketsChanged,
+      hasChangesFromInitial: changeSelectionDetails.hasChangesFromInitial,
+      selectionTotal: totalPrice,
+      selectionCurrency: currency,
+    };
+  }, [
+    isChangeFlow,
+    selectedAvailability,
+    totalQuantity,
+    ticketLineItems,
+    computeItineraryDisplay,
+    product.name,
+    changeSelectionDetails,
+    totalPrice,
+    currency,
+  ]);
+
+  useEffect(() => {
+    if (!isChangeFlow || !onChangeFlowSelectionPreview) return;
+    onChangeFlowSelectionPreview(changeFlowSelectionPreview);
+  }, [isChangeFlow, changeFlowSelectionPreview, onChangeFlowSelectionPreview]);
+
+  useEffect(() => {
+    if (!onPricePreviewChange) return;
+    if (!selectedAvailability || totalQuantity <= 0) {
+      onPricePreviewChange(null);
+      return;
+    }
+    onPricePreviewChange({
+      subtotal: effectiveSubtotal,
+      tax: !isTaxIncludedInPrice ? effectiveTax : 0,
+      total: totalPrice,
+      currency,
+    });
+  }, [
+    onPricePreviewChange,
+    selectedAvailability,
+    totalQuantity,
+    effectiveSubtotal,
+    effectiveTax,
+    changeFlowProposedTotal,
+    currency,
+    isTaxIncludedInPrice,
+  ]);
+
+  /** Debounced server quote so CTA + “amount owed” match PaymentIntent; avoids free confirm when FE estimate ≠ BE. */
+  useEffect(() => {
+    if (!isChangeFlow) {
+      setChangeQuoteLoading(false);
+      setChangeQuoteFetchError(null);
+      return;
+    }
+
+    if (
+      !hasChangeSelection ||
+      !selectedAvailability ||
+      !initialValues?.bookingReference?.trim() ||
+      !lastName.trim() ||
+      missingRequiredReturnSelection
+    ) {
+      setLatestChangeQuote(null);
+      setChangeQuoteLoading(false);
+      setChangeQuoteFetchError(null);
+      return;
+    }
+
+    const optionId =
+      selectedAvailability.productOptionId?.trim() || activeOptions[0]?.optionId;
+    if (!optionId) {
+      setLatestChangeQuote(null);
+      setChangeQuoteLoading(false);
+      setChangeQuoteFetchError(null);
+      return;
+    }
+
+    setChangeQuoteLoading(true);
+    setChangeQuoteFetchError(null);
+    const seq = ++changeQuoteRequestSeq.current;
+    const bookingReferenceForQuote = initialValues.bookingReference.trim();
+    const timer = window.setTimeout(() => {
+      void (async () => {
+        const bookingItems = Object.entries(quantities)
+          .filter(([, count]) => count > 0)
+          .map(([category, count]) => ({ category, count }));
+        try {
+          const quote = await quoteChangeBooking({
+            bookingReference: bookingReferenceForQuote,
+            lastName: lastName.trim(),
+            newProductId: optionId,
+            newDateTime: selectedAvailability.dateTime,
+            newAvailabilityId: selectedAvailability.availabilityId || null,
+            newPickupLocationId: pickupLocationId || null,
+            newReturnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+            newPassengerCounts: bookingItems,
+            // Omit when empty: backend treats [] as "clear all"; missing = preserve stored selections (BookingChangeIntentService).
+            ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
+            clientProposedTotal: changeFlowProposedTotal,
+          });
+          if (seq !== changeQuoteRequestSeq.current) return;
+          const canProceed = quote.canProceed !== false;
+          const quoteCurrency = (quote.currency || currency) as Currency;
+          const quotedPriceDiff =
+            quote.amountDueCents != null
+              ? quote.amountDueCents / 100
+              : quote.priceDiff ?? 0;
+          setLatestChangeQuote({
+            priceDiff: quotedPriceDiff,
+            currency: quoteCurrency,
+            canProceed,
+            reasonIfBlocked: quote.reasonIfBlocked,
+            changeIntentId: quote.changeIntentId,
+            quotedTotal: quote.proposed?.total ?? quote.newReceipt?.total,
+          });
+        } catch (e) {
+          if (seq !== changeQuoteRequestSeq.current) return;
+          setLatestChangeQuote(null);
+          setChangeQuoteFetchError(e instanceof Error ? e.message : 'Failed to get price for this change');
+        } finally {
+          if (seq === changeQuoteRequestSeq.current) {
+            setChangeQuoteLoading(false);
+          }
+        }
+      })();
+    }, 450);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [
+    isChangeFlow,
+    hasChangeSelection,
+    selectedAvailability,
+    selectedAvailability?.dateTime,
+    selectedAvailability?.productOptionId,
+    initialValues?.bookingReference,
+    lastName,
+    missingRequiredReturnSelection,
+    pickupLocationId,
+    selectedReturnOption?.returnAvailabilityId,
+    quantities,
+    addOnSelections,
+    totalPrice,
+    currency,
+    activeOptions,
+  ]);
+
+  // Auto-select product option when date is selected: most popular if set, otherwise first available.
+  // Change flow after a calendar change: prefer same product option, then closest departure time-of-day.
+  useEffect(() => {
+    if (selectedDate && timesForSelectedDate.length > 0 && !selectedAvailability) {
+      // Change flow on the booking's calendar day: pickup must come from resolveInitialAvailabilityFromBooking
+      // (availabilityId / productOptionId / wall time). If we run "most popular" here too, both effects fire in
+      // the same commit, this still sees selectedAvailability === null, and overwrites the correct slot.
+      if (isChangeFlow && initialValues?.dateTime?.trim()) {
+        try {
+          const bookingDay = formatInTimeZone(
+            parseAvailabilityDateTime(initialValues.dateTime.trim()),
+            companyTimezone,
+            'yyyy-MM-dd'
+          );
+          if (selectedDate === bookingDay) {
+            return;
+          }
+        } catch {
+          /* fall through */
+        }
+      }
+
+      const anchor = changeFlowOutboundAnchorRef.current;
+      if (isChangeFlow && anchor) {
+        const matched = pickOutboundMatchingPreviousSelection(
+          timesForSelectedDate,
+          anchor,
+          companyTimezone,
+          optionsMap,
+          isAdmin
+        );
+        changeFlowOutboundAnchorRef.current = null;
+        if (matched) {
+          setSelectedAvailability(matched);
+          setError('');
+          return;
+        }
+      }
+
+      const mostPopularOption = activeOptions.find(opt => opt.mostPopular);
+      const candidate = mostPopularOption
+        ? timesForSelectedDate.find(avail => avail.productOptionId === mostPopularOption.optionId && avail.vacancies > 0)
+        : null;
+      const fallback = timesForSelectedDate.find(avail => avail.vacancies > 0);
+      const toSelect = candidate ?? fallback;
+      if (toSelect) {
+        setSelectedAvailability(toSelect);
+        setError('');
+      }
+    }
+  }, [
+    selectedDate,
+    timesForSelectedDateSelectionKey,
+    activeOptionIdsKey,
+    selectedAvailability,
+    isChangeFlow,
+    initialValues?.dateTime,
+    companyTimezone,
+  ]);
+
+  // Currency change does NOT trigger a refetch. Backend returns per-currency data (priceByCurrency,
+  // changeByCurrency, feesByCurrency, precomputedPrices, etc.) in one response; we just
+  // re-render with the new currency and pick the right values.
+
+  // Sync selectedAvailability when the availabilities list changes (e.g. after refetch for new date range)
+  useEffect(() => {
+    if (selectedAvailability && availabilities.length > 0) {
+      const updatedAvailability = availabilities.find(
+        avail =>
+          avail.dateTime === selectedAvailability.dateTime &&
+          avail.productOptionId === selectedAvailability.productOptionId
+      );
+      if (updatedAvailability) {
+        setSelectedAvailability(updatedAvailability);
+        
+        // Also update selectedReturnOption if it exists
+        if (selectedReturnOption && updatedAvailability.returnOptions) {
+          const updatedReturnOption = updatedAvailability.returnOptions.find(
+            opt => opt.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
+          );
+          if (updatedReturnOption) {
+            setSelectedReturnOption(updatedReturnOption);
+          }
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [availabilities]); // Update when availabilities change (selectedAvailability/selectedReturnOption intentionally excluded to avoid loops)
+
+  // Reset implicit return baseline when outbound changes or API provides explicit return hints.
+  useEffect(() => {
+    if (!isChangeFlow) {
+      setImplicitReturnBaselineId(null);
+      return;
+    }
+    const hasApiReturnHint =
+      Boolean(initialValues?.returnAvailabilityId?.trim()) ||
+      Boolean(initialValues?.returnDateTime?.trim());
+    if (hasApiReturnHint) {
+      setImplicitReturnBaselineId(null);
+      return;
+    }
+    setImplicitReturnBaselineId(null);
+  }, [
+    isChangeFlow,
+    selectedAvailability?.dateTime,
+    selectedAvailability?.productOptionId,
+    initialValues?.returnAvailabilityId,
+    initialValues?.returnDateTime,
+  ]);
+
+  // Auto-select return option when outbound is selected (prefer booked return in change flow).
+  // After a calendar date change in change flow: prefer same return location, then closest return time-of-day.
+  useEffect(() => {
+    if (selectedAvailability?.returnOptions && selectedAvailability.returnOptions.length > 0 && !selectedReturnOption) {
+      const sorted = [...selectedAvailability.returnOptions].sort(
+        (a, b) => parseISO(a.dateTime).getTime() - parseISO(b.dateTime).getTime()
+      );
+      const initialReturnIdForSelect = initialValues?.returnAvailabilityId?.trim();
+      const initialReturnDtForSelect = initialValues?.returnDateTime?.trim();
+
+      const returnAnchor = changeFlowReturnAnchorRef.current;
+      if (isChangeFlow && returnAnchor) {
+        const fromAnchor = pickReturnMatchingPreviousSelection(
+          sorted,
+          returnAnchor,
+          companyTimezone,
+          isAdmin
+        );
+        changeFlowReturnAnchorRef.current = null;
+        if (fromAnchor) {
+          setSelectedReturnOption(fromAnchor);
+          if (isChangeFlow) {
+            const hasApiReturnHint =
+              Boolean(initialReturnIdForSelect) || Boolean(initialReturnDtForSelect);
+            if (!hasApiReturnHint) {
+              setImplicitReturnBaselineId((prev) => prev ?? fromAnchor.returnAvailabilityId);
+            }
+          }
+          return;
+        }
+      }
+
+      const preferBooked =
+        isChangeFlow && initialReturnIdForSelect
+          ? sorted.find((opt) => opt.returnAvailabilityId === initialReturnIdForSelect && opt.vacancies > 0)
+          : undefined;
+      const preferByDateTime =
+        isChangeFlow && initialReturnDtForSelect && !preferBooked
+          ? sorted.find((opt) => {
+              if (opt.vacancies <= 0) return false;
+              try {
+                return (
+                  parseAvailabilityDateTime(opt.dateTime).getTime() ===
+                  parseAvailabilityDateTime(initialReturnDtForSelect).getTime()
+                );
+              } catch {
+                return false;
+              }
+            })
+          : undefined;
+      const firstAvailable = sorted.find((opt) => opt.vacancies > 0);
+      const toSelect = preferBooked ?? preferByDateTime ?? firstAvailable;
+      if (toSelect) {
+        setSelectedReturnOption(toSelect);
+        if (isChangeFlow) {
+          const hasApiReturnHint =
+            Boolean(initialReturnIdForSelect) || Boolean(initialReturnDtForSelect);
+          if (!hasApiReturnHint) {
+            setImplicitReturnBaselineId((prev) => prev ?? toSelect.returnAvailabilityId);
+          }
+        }
+      }
+    }
+  }, [
+    selectedAvailability,
+    selectedReturnOption,
+    isChangeFlow,
+    companyTimezone,
+    isAdmin,
+    initialValues?.returnAvailabilityId,
+    initialValues?.returnDateTime,
+  ]);
+
+  // Fetch add-ons when availability (product option) is selected; clear selections when option changes
+  const availabilityProductOptionId = selectedAvailability?.productOptionId ?? null;
+  const prevAvailabilityProductOptionIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!availabilityProductOptionId || !product.companyId) {
+      setAddOns([]);
+      if (!isChangeFlow) setAddOnSelections([]);
+      return;
+    }
+    const optionChanged = prevAvailabilityProductOptionIdRef.current !== availabilityProductOptionId;
+    if (optionChanged) {
+      if (!isChangeFlow) setAddOnSelections([]);
+      prevAvailabilityProductOptionIdRef.current = availabilityProductOptionId;
+    }
+    getAddOns(product.companyId, { productOptionId: availabilityProductOptionId, preCheckout: true })
+      .then(setAddOns)
+      .catch(() => setAddOns([]));
+  }, [availabilityProductOptionId, product.companyId, isChangeFlow]);
+
+  // Auto-select cheapest cancellation policy when pricing config loads (not when change flow already has the booked policy)
+  useEffect(() => {
+    if (pricingConfig?.cancellationPolicies && pricingConfig.cancellationPolicies.length > 0 && !cancellationPolicyId) {
+      const sorted = [...pricingConfig.cancellationPolicies].sort((a, b) => {
+        const feeA = a.feeByCurrency[currency] ?? 0;
+        const feeB = b.feeByCurrency[currency] ?? 0;
+        return feeA - feeB;
+      });
+      setCancellationPolicyId(sorted[0].id);
+    }
+  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId, currency]);
+
+  const handleDateSelect = (date: string) => {
+    if (date === selectedDate) return;
+    if (isChangeFlow && selectedAvailability) {
+      changeFlowOutboundAnchorRef.current = {
+        productOptionId: selectedAvailability.productOptionId ?? null,
+        minutesFromMidnight: getMinutesFromMidnightInTimezone(
+          selectedAvailability.dateTime,
+          companyTimezone
+        ),
+      };
+      if (selectedReturnOption) {
+        changeFlowReturnAnchorRef.current = {
+          returnLocation: selectedReturnOption.returnLocation,
+          minutesFromMidnight: getMinutesFromMidnightInTimezone(
+            selectedReturnOption.dateTime,
+            companyTimezone
+          ),
+        };
+      } else {
+        changeFlowReturnAnchorRef.current = null;
+      }
+    }
+    setSelectedAvailability(null);
+    setSelectedReturnOption(null);
+  };
+
+  handleDateSelectRef.current = handleDateSelect;
+
+  useEffect(() => {
+    if (flowUi?.autoSelectFirstAvailableDate !== true) return;
+    if (isChangeFlow || isPartialLaunch) return;
+    if (initialValues?.dateTime?.trim()) return;
+    if (selectedDate !== '') return;
+    if (dates.length === 0) return;
+    if (hasAutoSelectedPartnerDateRef.current) return;
+
+    // Match Calendar: a day is "sold out" only when every slot has 0 vacancies. Admins may still pick sold-out days.
+    const first = isAdmin
+      ? dates[0]
+      : dates.find((d) =>
+          (availabilitiesByDate[d] ?? []).some((a) => (a.vacancies ?? 0) > 0),
+        );
+    if (!first) return;
+
+    hasAutoSelectedPartnerDateRef.current = true;
+    setSelectedDate(first);
+    handleDateSelectRef.current(first);
+    if (!suppressCalendarDateScroll) {
+      setTimeout(() => {
+        const container = contentRef?.current;
+        if (!useWindowScroll && container && container.scrollHeight > container.clientHeight + 16) {
+          container.scrollBy({ top: 400, behavior: 'smooth' });
+        } else if (typeof window !== 'undefined') {
+          window.scrollBy({ top: 400, behavior: 'smooth' });
+        }
+      }, 100);
+    }
+  }, [
+    flowUi?.autoSelectFirstAvailableDate,
+    isChangeFlow,
+    isPartialLaunch,
+    initialValues?.dateTime,
+    selectedDate,
+    dates,
+    availabilitiesByDate,
+    isAdmin,
+    useWindowScroll,
+    contentRef,
+    suppressCalendarDateScroll,
+  ]);
+
+  useEffect(() => {
+    if (flowUi?.autoSelectFirstHighlightedPickup !== true) return;
+    if (hasAutoSelectedPartnerPickupRef.current) return;
+    if (!highlightedPickupLocationIds?.length) return;
+    if (pickupLocationId) return;
+    if (pickupLocationSkipped) return;
+    if (initialValues?.pickupLocationId?.trim()) return;
+    const locs = product.pickupLocations;
+    if (!locs?.length) return;
+    const match = highlightedPickupLocationIds.find((id) => locs.some((l) => l.id === id));
+    if (!match) return;
+    hasAutoSelectedPartnerPickupRef.current = true;
+    setPickupLocationId(match);
+    setPickupLocationSkipped(false);
+  }, [
+    flowUi?.autoSelectFirstHighlightedPickup,
+    highlightedPickupLocationIds,
+    pickupLocationId,
+    pickupLocationSkipped,
+    initialValues?.pickupLocationId,
+    product.pickupLocations,
+  ]);
+
+  const handleTimeSelect = (availability: Availability) => {
+    setSelectedAvailability(availability);
+    setSelectedReturnOption(null); // Clear return selection when changing start time
+    setError('');
+  };
+
+  const handleQuantityChange = (category: string, delta: number) => {
+    const maxAvailable = isAdmin ? Number.MAX_SAFE_INTEGER : effectivePartySizeCap;
+    const currentQty = quantities[category] || 0;
+    const minQ =
+      changeBookingMinimumQuantities != null
+        ? Math.max(0, changeBookingMinimumQuantities[category] ?? 0)
+        : 0;
+    const newQty = Math.max(minQ, currentQty + delta);
+    // Admin can overbook; non-admin cannot exceed vacancies
+    if (delta > 0 && !isAdmin && orderSummary.totalQuantity >= maxAvailable) {
+      return;
+    }
+    setQuantities(prev => ({
+      ...prev,
+      [category]: newQty,
+    }));
+    setError('');
+  };
+
+  // Selected availability has a deal applied (promo codes not allowed with deals; vouchers/gift cards still allowed; dynamic pricing alone is ok)
+  const hasOngoingDiscount = useMemo(
+    () =>
+      selectedAvailability?.rates?.some((r) =>
+        (r.appliedAdjustments ?? r.applied_adjustments ?? []).some((a) => (a.type ?? '').toLowerCase() === 'deal')
+      ) ?? false,
+    [selectedAvailability]
+  );
+  const selectedAvailabilityKey = useMemo(
+    () => `${selectedAvailability?.dateTime ?? ''}::${selectedAvailability?.productOptionId ?? ''}`,
+    [selectedAvailability?.dateTime, selectedAvailability?.productOptionId]
+  );
+  // Remember where promo was successfully applied to avoid self-clearing on same selection.
+  const promoAppliedSelectionKeyRef = useRef<string | null>(null);
+  const promoValidateInFlightRef = useRef(false);
+
+  const handleApplyPromo = useCallback(async () => {
+    const code = promoCodeInput.trim().toUpperCase();
+    if (!code) return;
+    // Promo validation/application requires a concrete booking context.
+    if (!selectedAvailability || totalQuantity <= 0) {
+      return;
+    }
+    if (appliedPromoCode === code) return; // Already applied, skip API call
+    const companyId = product.companyId;
+    if (!companyId) return;
+    if (promoValidateInFlightRef.current) return;
+    promoValidateInFlightRef.current = true;
+    setPromoCodeError('');
+    setPromoCodeValidating(true);
+    try {
+      const result = await validatePromoCode(code, companyId, product.productId, hasOngoingDiscount);
+      if (result.valid) {
+        promoAppliedSelectionKeyRef.current = selectedAvailabilityKey;
+        setAppliedPromoCode(code);
+        fetchedRangesRef.current = [];
+        if (result.forcedCancellationPolicyId && result.forcedCancellationPolicyLabel) {
+          setForcedCancellationPolicy({
+            id: result.forcedCancellationPolicyId,
+            label: result.forcedCancellationPolicyLabel,
+            refundTiers: result.forcedCancellationPolicyRefundTiers,
+            changeWindowHoursBefore: result.forcedChangeWindowHoursBefore ?? undefined,
+          });
+          setCancellationPolicyId(result.forcedCancellationPolicyId);
+          // Scroll to cancellation policy section so user sees the forced policy (after state flush)
+          setTimeout(() => {
+            cancellationPolicyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }, 100);
+        } else {
+          setForcedCancellationPolicy(null);
+        }
+      } else {
+        const errorMsg =
+          result.error === 'Promo codes cannot be stacked with deals'
+            ? (t('booking.promoCodesCannotStackWithDiscounts') || result.error)
+            : (result.error || t('booking.invalidPromoCode') || 'Invalid or expired promo code');
+        setPromoCodeError(errorMsg);
+      }
+    } catch (err) {
+      setPromoCodeError(err instanceof Error ? err.message : 'Failed to validate promo code');
+    } finally {
+      promoValidateInFlightRef.current = false;
+      setPromoCodeValidating(false);
+    }
+  }, [promoCodeInput, appliedPromoCode, product.companyId, product.productId, hasOngoingDiscount, t, selectedAvailabilityKey, selectedAvailability, totalQuantity]);
+
+  // When user selects a time with ongoing discount and has a promo applied, re-validate and clear if promo can't be stacked
+  useEffect(() => {
+    if (isChangeFlow) return;
+    if (!appliedPromoCode || !hasOngoingDiscount) return;
+    // Only run this guard when user moved away from the selection where promo was applied.
+    // On the same selection, "deal" adjustments can be promo-driven and would self-clear incorrectly.
+    if (promoAppliedSelectionKeyRef.current === selectedAvailabilityKey) {
+      return;
+    }
+    let cancelled = false;
+    validatePromoCode(appliedPromoCode, product.companyId ?? '', product.productId, true).then((result) => {
+      if (cancelled) return;
+      if (!result.valid && result.error === 'Promo codes cannot be stacked with deals') {
+        promoAppliedSelectionKeyRef.current = null;
+        setAppliedPromoCode(null);
+        setPromoCodeInput(appliedPromoCode);
+        setPromoCodeError(t('booking.promoCodesCannotStackWithDiscounts') || result.error);
+        setForcedCancellationPolicy(null);
+        setCancellationPolicyId(null);
+        fetchedRangesRef.current = [];
+      }
+    });
+    return () => { cancelled = true; };
+  }, [isChangeFlow, hasOngoingDiscount, appliedPromoCode, product.companyId, product.productId, t, selectedAvailabilityKey]);
+
+  // Ref to avoid effect re-running when handleApplyPromo identity changes (t changes every render)
+  const handleApplyPromoRef = useRef(handleApplyPromo);
+  handleApplyPromoRef.current = handleApplyPromo;
+
+  // Auto-apply promo when user stops typing (mobile-friendly, no Enter key needed).
+  // Do not depend on promoCodeValidating: when it flips false after a failed validate, that would
+  // re-run this effect and schedule another timer → repeated /validate for the same bad code.
+  useEffect(() => {
+    const trimmed = promoCodeInput.trim().toUpperCase();
+    if (!trimmed) return;
+    if (!selectedAvailability || totalQuantity <= 0) return;
+    if (appliedPromoCode === trimmed) return;
+
+    const timer = setTimeout(() => {
+      handleApplyPromoRef.current();
+    }, 600);
+
+    return () => clearTimeout(timer);
+  }, [promoCodeInput, appliedPromoCode, selectedAvailability, totalQuantity]);
+
+  const cancelPendingReservation = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (!pending) return;
+    pendingReservationRef.current = null;
+    cancelReservation(pending.reservationReference).catch(() => {});
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+  }, []);
+
+  const cancelPendingReservationBestEffort = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (!pending) return;
+    pendingReservationRef.current = null;
+    cancelReservationBestEffort(pending.reservationReference);
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+  }, []);
+
+  // Parent surfaces (dialog close / embedded back) emit this when user abandons the booking flow.
+  useEffect(() => {
+    const handleAbandon = () => {
+      cancelPendingReservation();
+    };
+    window.addEventListener(BOOKING_FLOW_ABANDON_EVENT, handleAbandon);
+    return () => window.removeEventListener(BOOKING_FLOW_ABANDON_EVENT, handleAbandon);
+  }, [cancelPendingReservation]);
+
+  useEffect(() => {
+    const handlePageHide = () => {
+      cancelPendingReservationBestEffort();
+    };
+    window.addEventListener('pagehide', handlePageHide);
+    return () => window.removeEventListener('pagehide', handlePageHide);
+  }, [cancelPendingReservationBestEffort]);
+
+  const handleCheckout = async () => {
+    if (!selectedAvailability || totalQuantity === 0) {
+      setError(t('booking.selectTimeAndTickets'));
+      return;
+    }
+    if (isChangeFlow && missingRequiredReturnSelection) {
+      setError('Removing return option in self-serve is not available. Please contact support.');
+      return;
+    }
+    
+    // Validate email (required)
+    if (!email) {
+      setError(t('booking.enterEmail') || 'Please enter your email address');
+      return;
+    }
+    
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError(t('booking.invalidEmail') || 'Please enter a valid email address');
+      return;
+    }
+
+    // Validate first name (required)
+    if (!firstName?.trim()) {
+      setError(t('booking.enterFirstName') || 'Please enter your first name');
+      return;
+    }
+
+    // Validate last name (required for manage booking lookup)
+    if (!lastName?.trim()) {
+      setError(t('booking.enterLastName') || 'Please enter your last name');
+      return;
+    }
+    
+    
+    // Allow checkout if pickup location is selected OR if user chose "I don't know"
+    if (product.pickupLocations && product.pickupLocations.length > 0 && !pickupLocationId && !pickupLocationSkipped) {
+      setError(t('booking.selectPickupLocation'));
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    paymentSubmitInFlightRef.current = false;
+
+    try {
+      const bookingItems = Object.entries(quantities)
+        .filter(([, count]) => count > 0)
+        .map(([category, count]) => ({ category, count }));
+
+      // Get the productOptionId from the selected availability (we tagged it when fetching)
+      const availabilityProductOptionId = selectedAvailability.productOptionId 
+        || activeOptions[0]?.optionId;
+      
+      if (!availabilityProductOptionId) {
+        setError('No product option selected');
+        setLoading(false);
+        return;
+      }
+
+      const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
+        clientChannelSource: inferClientBookingSourceFromProductIds(
+          product.productId,
+          availabilityProductOptionId,
+        ),
+        forcePartnerPortalChannel: partnerPortalBooking,
+        forceDashboardSource: bookingAppMode === 'provider-dashboard',
+      });
+
+      // Get the hotel name if a pickup location was selected
+      const selectedPickupLocation = pickupLocationId 
+        ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
+        : null;
+      let quotedPriceDiff: number | null = null;
+      let changeIntentIdForCheckout: string | undefined;
+      let changeBookingReferenceForPaidFlow: string | undefined;
+
+      if (isChangeFlow) {
+        const changeBookingReference = initialValues?.bookingReference?.trim();
+        const changeLastName = lastName.trim();
+        if (!changeBookingReference || !changeLastName) {
+          throw new Error('Missing booking reference or last name for change quote');
+        }
+        const quote = await quoteChangeBooking({
+          bookingReference: changeBookingReference,
+          lastName: changeLastName,
+          newProductId: availabilityProductOptionId,
+          newDateTime: selectedAvailability.dateTime,
+          newAvailabilityId: selectedAvailability.availabilityId || null,
+          newPickupLocationId: pickupLocationId || null,
+          newReturnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+          newPassengerCounts: bookingItems,
+          ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
+          clientProposedTotal: changeFlowProposedTotal,
+        });
+        const canProceed = quote.canProceed !== false;
+        const quoteCurrency = (quote.currency || currency) as Currency;
+        quotedPriceDiff =
+          quote.amountDueCents != null
+            ? quote.amountDueCents / 100
+            : quote.priceDiff ?? 0;
+        changeBookingReferenceForPaidFlow = changeBookingReference;
+        changeIntentIdForCheckout = quote.changeIntentId ?? undefined;
+        setLatestChangeQuote({
+          priceDiff: quotedPriceDiff,
+          currency: quoteCurrency,
+          canProceed,
+          reasonIfBlocked: quote.reasonIfBlocked,
+          changeIntentId: quote.changeIntentId,
+          quotedTotal: quote.proposed?.total ?? quote.newReceipt?.total,
+        });
+        if (!canProceed) {
+          throw new Error(quote.reasonIfBlocked || 'This booking change cannot be completed right now.');
+        }
+        const feChangeDue = Math.max(0, changeFlowProposedTotal - (originalReceipt?.total ?? 0));
+        const serverAmountDue =
+          quote.amountDueCents != null
+            ? Math.max(0, quote.amountDueCents / 100)
+            : Math.max(0, quote.priceDiff ?? 0);
+        if (feChangeDue > 0.02 && serverAmountDue <= 0.009) {
+          throw new Error(
+            'This change requires payment, but the price could not be confirmed. Please refresh and try again.'
+          );
+        }
+        // No-payment change: FE shows nothing owed — still require server agreement so we never confirm free when a charge is due.
+        if (serverAmountDue <= 0.009) {
+          if (feChangeDue > 0.02) {
+            throw new Error(
+              'This change requires payment, but the price could not be confirmed. Please refresh and try again.'
+            );
+          }
+          const p = quote.proposed?.total ?? quote.newReceipt?.total;
+          const o = quote.original?.total ?? quote.originalReceipt?.total;
+          if (p != null && o != null && p - o > 0.01) {
+            throw new Error(
+              'This change requires payment, but the price could not be confirmed. Please refresh and try again.'
+            );
+          }
+          if (!quote.changeIntentId) {
+            throw new Error('Missing change intent for booking change confirmation.');
+          }
+          const freeConfirm = await confirmFreeChangeBooking(quote.changeIntentId);
+          if (freeConfirm.status && freeConfirm.status !== 'APPLIED') {
+            throw new Error('We could not apply this booking change yet. Please try again.');
+          }
+          onSuccess?.({ reservationReference: changeBookingReference });
+          setLoading(false);
+          return;
+        }
+        if (!changeIntentIdForCheckout) {
+          throw new Error('Missing change intent for payment.');
+        }
+      }
+      
+      let reservation: { reservationReference: string; expiresAt?: string; totalAmount?: number; currency?: string } | null = null;
+      const shouldCreateReservation = !isChangeFlow;
+      if (shouldCreateReservation) {
+        reservation = await createReservation({
+          productId: availabilityProductOptionId, // GetYourGuide passes productOptionId values in productId field
+          dateTime: selectedAvailability.dateTime,
+          availabilityId: selectedAvailability.availabilityId || undefined,
+          bookingItems,
+          pickupLocationId: pickupLocationId || undefined,
+          returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
+          currency: currency,
+          promoCode: (lockedPromoCode || appliedPromoCode) || undefined,
+          cancellationPolicyId: cancellationPolicyId || undefined,
+          addOnSelections: addOnSelections.length > 0 ? addOnSelections : undefined,
+          ...(isAdmin ? { allowOverbook: true } : {}),
+          // Pass hotel name when pickup location is selected (for reference)
+          // Don't set travelerHotel when user selects "I don't know" - leave it undefined
+          // This allows us to distinguish between "unknown" (null) and "unmapped hotel name" (not null)
+          travelerHotel: selectedPickupLocation?.name || undefined,
+          // For standard bookings, backend calculates startTime from availability + pickup location offset
+          // When pickup location is skipped, backend will store null for startTime
+          ...(bookingSourceContext.sourceMetadata
+            ? {
+                source: bookingSourceContext.source,
+                sourceMetadata: bookingSourceContext.sourceMetadata,
+                source_metadata: bookingSourceContext.source_metadata,
+              }
+            : {}),
+        });
+        pendingReservationRef.current = { reservationReference: reservation.reservationReference };
+      } else {
+        pendingReservationRef.current = null;
+      }
+
+      if (shouldCreateReservation && (!reservation || !reservation.reservationReference)) {
+        throw new Error('Invalid reservation response: missing reservationReference');
+      }
+
+      // Note: Do NOT call onSuccess here for paid bookings — we're about to show the Stripe
+      // CheckoutModal. onSuccess (e.g. closing the parent dialog) should only run when we're
+      // actually done (free booking redirect, admin confirm-without-payment). Calling it here
+      // would close the dialog before the payment modal opens.
+
+      // Update stored booking data with reservation reference
+      try {
+        const storedBooking = sessionStorage.getItem('pendingBooking');
+        if (storedBooking) {
+          const booking = JSON.parse(storedBooking);
+          if (reservation?.reservationReference) {
+            booking.reservationReference = reservation.reservationReference;
+          }
+          booking.totalPrice = reservation?.totalAmount || totalPrice;
+          booking.currency = reservation?.currency || currency || selectedAvailability.currency || 'CAD';
+          sessionStorage.setItem('pendingBooking', JSON.stringify(booking));
+        }
+      } catch (e) {
+        console.warn('Failed to update booking data', e);
+      }
+
+      // Create Payment Intent for embedded checkout modal (order summary with strikethrough + green, Payment Element)
+      const datePart = selectedAvailability.dateTime.split('T')[0];
+      const timePart = selectedAvailability.dateTime.split('T')[1]?.substring(0, 5) || '00:00';
+      
+      // Itinerary for storage: when pickup unknown, pickup step is always a range (e.g. "9 AM - 10:00 AM") so /manage and email show it; drop-off stays TBD
+      const itineraryDisplay = computeItineraryDisplayForStorage() ?? computeItineraryDisplay();
+
+      // Build checkout breakdown from the exact same values we show in the UI and Stripe modal.
+      // Backend will charge totalAmount and store this as the receipt so /manage matches.
+      const taxForBreakdown = effectivePromoDiscountAmount > 0 ? effectiveTax : tax;
+      const amountDueForCheckout = isChangeFlow
+        ? Math.max(0, changeFlowProposedTotal - (originalReceipt?.total ?? 0))
+        : totalPrice;
+      const lines = [
+        ...ticketLineItems.map((line) => ({
+          label: line.category,
+          amount: line.itemTotal,
+          type: 'TICKET' as const,
+          quantity: line.qty,
+        })),
+        ...(returnPriceAdjustment !== 0
+          ? [
+              {
+                label: `${t('booking.returnOption') || 'Return option'} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
+                amount: returnPriceAdjustment,
+                type: 'RETURN_OPTION' as const,
+                quantity: totalQuantity,
+              },
+            ]
+          : []),
+        ...(cancellationPolicyFee > 0
+          ? [
+              {
+                label: effectiveCancellationPolicyLabel,
+                amount: cancellationPolicyFee,
+                type: 'CANCELLATION_UPGRADE' as const,
+              },
+            ]
+          : []),
+        ...addOnSelections
+          .map((sel) => {
+            const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
+            if (!addOn) return null;
+            const base = addOn.price ?? 0;
+            const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
+            const adj = hasVariant ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0) : 0;
+            const qty = sel.quantity ?? 1;
+            const amt = (base + adj) * qty;
+            const variantLabel = hasVariant ? addOn.variants?.find((v) => v.id === sel.variantId)?.label : null;
+            return {
+              label: variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name,
+              amount: amt,
+              type: 'FEE' as const,
+              quantity: qty,
+            };
+          })
+          .filter((x): x is NonNullable<typeof x> => x != null),
+        ...feeLineItems.map((fee) => ({
+          label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
+          amount: fee.totalAmount,
+          type: 'FEE' as const,
+          quantity: totalQuantity,
+        })),
+        ...(!isTaxIncludedInPrice && taxForBreakdown > 0
+          ? [
+              {
+                label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees',
+                amount: taxForBreakdown,
+                type: 'TAX' as const,
+              },
+            ]
+          : []),
+        ...(effectivePromoDiscountAmount > 0
+          ? [
+              {
+                label: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (originalReceipt?.promoLabel || (t('booking.discount') || 'Discount')),
+                amount: -effectivePromoDiscountAmount,
+                type: isGiftCard ? 'GIFT_CARD' : 'PROMO_CODE',
+              },
+            ]
+          : []),
+      ];
+      const checkoutBreakdown = buildCheckoutBreakdown({
+        lines,
+        totalAmount: amountDueForCheckout,
+        currency,
+        roundingLabel: t('booking.rounding') || 'Rounding',
+      });
+
+      if (!isChangeFlow && flowUi?.partnerDeferredInvoice) {
+        if (!reservation?.reservationReference) {
+          throw new Error('Missing reservation reference for partner booking confirmation');
+        }
+        const confirmedBooking = await confirmPartnerBookingWithoutPayment({
+          reservationReference: reservation.reservationReference,
+          productId: product.productId,
+          optionId: availabilityProductOptionId,
+          date: datePart,
+          time: timePart,
+          customerEmail: email || undefined,
+          customerFirstName: firstName.trim() || undefined,
+          customerLastName: lastName.trim() || undefined,
+          currency: currency,
+          travelerHotel: selectedPickupLocation?.name || undefined,
+          pickupLocationId: pickupLocationId || undefined,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          termsAcceptedAt: termsAcceptedAt ?? undefined,
+          skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+          disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+          checkoutBreakdown,
+          depositAmount: 0,
+          balanceAmount: amountDueForCheckout,
+          totalAmount: amountDueForCheckout,
+          ...bookingSourceContext,
+        });
+        pendingReservationRef.current = null;
+        const ref = formatBookingRefForDisplay(confirmedBooking.bookingReference);
+        const ln = lastName.trim();
+        onSuccess?.({
+          reservationReference: reservation.reservationReference,
+          bookingReference: confirmedBooking.bookingReference,
+        });
+        if (onShowManage) {
+          onShowManage({ ref, lastName: ln });
+        } else {
+          const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+          window.location.href = `/manage-booking?${params.toString()}`;
+        }
+        setLoading(false);
+        return;
+      }
+
+      const paymentIntent = isChangeFlow
+        ? await createChangeBookingPaymentIntent(
+            (() => {
+              const id = changeIntentIdForCheckout ?? latestChangeQuote?.changeIntentId;
+              if (!id) {
+                throw new Error('Missing change intent for payment.');
+              }
+              return id;
+            })()
+          )
+        : await createPaymentIntent({
+            productId: product.productId,
+            optionId: availabilityProductOptionId,
+            date: datePart,
+            time: timePart,
+            quantity: totalQuantity,
+            customerEmail: email,
+            customerFirstName: firstName.trim() || undefined,
+            customerLastName: lastName.trim() || undefined,
+            currency: currency,
+            reservationReference: reservation?.reservationReference,
+            travelerHotel: selectedPickupLocation?.name || undefined,
+            pickupLocationId: pickupLocationId || undefined,
+            itineraryDisplay: itineraryDisplay ?? undefined,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
+            promoCode: (lockedPromoCode || appliedPromoCode) || undefined,
+            cancellationPolicyId: cancellationPolicyId || undefined,
+            termsAcceptedAt: termsAcceptedAt ?? undefined,
+            checkoutBreakdown,
+            skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+            disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+            ...bookingSourceContext,
+          });
+
+      // Free booking (e.g. voucher covers full total): confirm without payment, then redirect to success
+      if (!isChangeFlow && 'freeBooking' in paymentIntent && paymentIntent.freeBooking) {
+        if (!reservation?.reservationReference) {
+          throw new Error('Missing reservation reference for free booking confirmation');
+        }
+        
+        const freeBookingResult = await confirmFreeBooking({
+          reservationReference: reservation?.reservationReference ?? changeBookingReferenceForPaidFlow ?? '',
+          productId: product.productId,
+          optionId: availabilityProductOptionId,
+          date: datePart,
+          time: timePart,
+          customerEmail: email || undefined,
+          customerFirstName: firstName.trim() || undefined,
+          customerLastName: lastName.trim() || undefined,
+          currency: currency,
+          travelerHotel: selectedPickupLocation?.name || undefined,
+          pickupLocationId: pickupLocationId || undefined,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          termsAcceptedAt: termsAcceptedAt ?? undefined,
+          skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+          disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+          ...bookingSourceContext,
+        });
+        pendingReservationRef.current = null;
+        
+        // Show manage UI: in provider-dashboard use callback (e.g. dialog); otherwise redirect to /manage
+        const ref = formatBookingRefForDisplay(freeBookingResult.bookingReference);
+        const ln = lastName.trim();
+        onSuccess?.({ reservationReference: reservation?.reservationReference ?? changeBookingReferenceForPaidFlow ?? '' });
+        if (onShowManage) {
+          onShowManage({ ref, lastName: ln });
+        } else {
+          const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+          window.location.href = `/manage-booking?${params.toString()}`;
+        }
+        setLoading(false);
+        return;
+      }
+
+      // Admin: show choice to pay now or confirm without payment (customer owes full balance)
+      if (isAdmin) {
+        if (!reservation?.reservationReference) {
+          throw new Error('Missing reservation reference for admin payment flow');
+        }
+        setError('');
+        setAdminChoiceData({
+          reservationReference: reservation.reservationReference,
+          reservationExpiration: reservation.expiresAt,
+          checkoutBreakdown,
+          totalAmount: amountDueForCheckout,
+          datePart,
+          timePart,
+          availabilityProductOptionId,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          clientSecret: paymentIntent.clientSecret ?? '',
+          ticketLinesForModal: ticketLineItems.map((line) => {
+            const rate = pricing.find((r) => r.category === line.category);
+            const breakdown = getPriceBreakdown(
+              line.category,
+              rate?.priceCAD ?? 0,
+              rate?.baseInDisplayCurrency,
+              rate?.appliedAdjustments ?? []
+            );
+            return { line, breakdown };
+          }),
+          feeLineItems: feeLineItemsWithAddOns,
+          returnPriceAdjustment,
+          cancellationPolicyFee,
+          cancellationPolicyLabel: effectiveCancellationPolicyLabel,
+          subtotal: effectiveSubtotal,
+          tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
+          totalQuantity,
+          isTaxIncludedInPrice,
+          taxRate: pricingConfig?.taxRate ?? 0,
+          promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
+          discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (originalReceipt?.promoLabel || undefined),
+        });
+        setShowAdminPaymentChoice(true);
+        setLoading(false);
+        return;
+      }
+
+      const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItems.map((line) => {
+        const rate = pricing.find((r) => r.category === line.category);
+        const breakdown = getPriceBreakdown(
+          line.category,
+          rate?.priceCAD ?? 0,
+          rate?.baseInDisplayCurrency,
+          rate?.appliedAdjustments ?? []
+        );
+        return { line, breakdown };
+      });
+
+      setCheckoutClientSecret(paymentIntent.clientSecret ?? '');
+      setCheckoutModalData({
+        reservationReference: reservation?.reservationReference ?? changeBookingReferenceForPaidFlow ?? '',
+        reservationExpiration: reservation?.expiresAt,
+        customerLastName: lastName.trim(),
+        bookingDate: datePart,
+        // Paid change: always return to stable ref+lastName + explicit intent (not reservationRef).
+        // /manage-booking runs bounded refresh only when `from=change_payment` (see manage-booking page).
+        successUrlOverride:
+          isChangeFlow && changeBookingReferenceForPaidFlow
+            ? (() => {
+                const origin = typeof window !== 'undefined' ? window.location.origin : '';
+                const ref = encodeURIComponent(
+                  formatBookingRefForDisplay(changeBookingReferenceForPaidFlow) || changeBookingReferenceForPaidFlow,
+                );
+                const ln = encodeURIComponent(lastName.trim());
+                const fromQ = `${MANAGE_BOOKING_QUERY_FROM}=${encodeURIComponent(MANAGE_BOOKING_FROM_CHANGE_PAYMENT)}`;
+                const intentQ = changeIntentIdForCheckout
+                  ? `&changeIntentId=${encodeURIComponent(changeIntentIdForCheckout)}`
+                  : '';
+                return `${origin}/manage-booking?ref=${ref}&lastName=${ln}&${fromQ}${intentQ}`;
+              })()
+            : undefined,
+        ticketLines: ticketLinesForModal,
+        feeLineItems: feeLineItemsWithAddOns,
+        returnPriceAdjustment,
+        cancellationPolicyFee,
+        cancellationPolicyLabel: effectiveCancellationPolicyLabel,
+        subtotal: effectiveSubtotal,
+        tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
+        total: amountDueForCheckout,
+        totalQuantity,
+        isTaxIncludedInPrice,
+        taxRate: pricingConfig?.taxRate ?? 0,
+        promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
+        discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (originalReceipt?.promoLabel || undefined),
+        changeTotals:
+          isChangeFlow && originalReceipt
+            ? {
+                previousTotal: originalReceipt.total,
+                newTotal: totalPrice,
+                differenceTotal: amountDueForCheckout,
+              }
+            : undefined,
+      });
+      setShowCheckoutModal(true);
+      setLoading(false);
+    } catch (err) {
+      if (isInsufficientCapacityReserveError(err)) {
+        try {
+          const merged = await reloadAvailabilitiesAfterReserveConflict();
+          const outbound = findMergedAvailabilityForSelection(merged, selectedAvailability);
+          const outboundVacancies = outbound?.vacancies ?? null;
+          const returnVacancies = findMergedReturnVacancies(outbound, selectedReturnOption);
+          setError(
+            describeStandardTourCapacityConflictMessage({
+              partySize: totalQuantity,
+              outboundVacancies,
+              returnVacancies,
+              hasReturnSelection: !!selectedReturnOption,
+            })
+          );
+          reportReserveCapacityConflictClientContext({
+            flow: 'standard_tour',
+            productId: product.productId,
+            selectedDate: selectedDate || null,
+            outboundDateTime: selectedAvailability?.dateTime ?? null,
+            outboundVacanciesAfterRefresh: outboundVacancies,
+            returnVacanciesAfterRefresh: returnVacancies,
+            partySizeOrPassengers: totalQuantity,
+            hasReturnSelection: !!selectedReturnOption,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+            reloadAvailabilitiesSucceeded: true,
+          });
+        } catch (reloadErr) {
+          setError(
+            describeStandardTourCapacityConflictMessage({
+              partySize: totalQuantity,
+              outboundVacancies: null,
+              returnVacancies: null,
+              hasReturnSelection: !!selectedReturnOption,
+            })
+          );
+          reportReserveCapacityConflictClientContext({
+            flow: 'standard_tour',
+            productId: product.productId,
+            selectedDate: selectedDate || null,
+            outboundDateTime: selectedAvailability?.dateTime ?? null,
+            outboundVacanciesAfterRefresh: null,
+            returnVacanciesAfterRefresh: null,
+            partySizeOrPassengers: totalQuantity,
+            hasReturnSelection: !!selectedReturnOption,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+            reloadAvailabilitiesSucceeded: false,
+            reloadErrorMessage:
+              reloadErr instanceof Error ? reloadErr.message : String(reloadErr),
+          });
+        }
+        setLoading(false);
+        return;
+      }
+      setError(err instanceof Error ? err.message : 'Something went wrong');
+      setLoading(false);
+    }
+  };
+
+  const handleConfirmWithoutPayment = async () => {
+    if (!adminChoiceData) return;
+    setLoading(true);
+    setError('');
+    try {
+      const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
+        clientChannelSource: inferClientBookingSourceFromProductIds(
+          product.productId,
+          adminChoiceData.availabilityProductOptionId,
+        ),
+        forcePartnerPortalChannel: partnerPortalBooking,
+        forceDashboardSource: bookingAppMode === 'provider-dashboard',
+      });
+      const result = await confirmBookingWithoutPayment({
+        reservationReference: adminChoiceData.reservationReference,
+        productId: product.productId,
+        optionId: adminChoiceData.availabilityProductOptionId,
+        date: adminChoiceData.datePart,
+        time: adminChoiceData.timePart,
+        customerEmail: email || undefined,
+        customerFirstName: firstName.trim() || undefined,
+        customerLastName: lastName.trim() || undefined,
+        currency: currency,
+        travelerHotel: product.pickupLocations?.find(loc => loc.id === pickupLocationId)?.name || undefined,
+        pickupLocationId: pickupLocationId || undefined,
+        itineraryDisplay: adminChoiceData.itineraryDisplay ?? undefined,
+        termsAcceptedAt: termsAcceptedAt ?? undefined,
+        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
+        disableAutoCommunications: disableAutoCommunications ? true : undefined,
+        checkoutBreakdown: adminChoiceData.checkoutBreakdown,
+        depositAmount: 0,
+        balanceAmount: adminChoiceData.totalAmount,
+        totalAmount: adminChoiceData.totalAmount,
+        ...bookingSourceContext,
+      });
+      pendingReservationRef.current = null;
+      const ref = formatBookingRefForDisplay(result.bookingReference);
+      const ln = lastName.trim();
+      setShowAdminPaymentChoice(false);
+      setAdminChoiceData(null);
+      onSuccess?.({ reservationReference: adminChoiceData.reservationReference });
+      if (onShowManage) {
+        onShowManage({ ref, lastName: ln });
+      } else {
+        const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+        window.location.href = `/manage-booking?${params.toString()}`;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to confirm booking');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePayNow = () => {
+    if (!adminChoiceData) return;
+    setShowAdminPaymentChoice(false);
+    setCheckoutClientSecret(adminChoiceData.clientSecret);
+    setCheckoutModalData({
+      reservationReference: adminChoiceData.reservationReference,
+      reservationExpiration: adminChoiceData.reservationExpiration,
+      customerLastName: lastName.trim(),
+      ticketLines: adminChoiceData.ticketLinesForModal,
+      feeLineItems: adminChoiceData.feeLineItems,
+      returnPriceAdjustment: adminChoiceData.returnPriceAdjustment,
+      cancellationPolicyFee: adminChoiceData.cancellationPolicyFee,
+      cancellationPolicyLabel: adminChoiceData.cancellationPolicyLabel,
+      subtotal: adminChoiceData.subtotal,
+      tax: adminChoiceData.tax,
+      total: adminChoiceData.totalAmount,
+      totalQuantity: adminChoiceData.totalQuantity,
+      isTaxIncludedInPrice: adminChoiceData.isTaxIncludedInPrice,
+      taxRate: adminChoiceData.taxRate,
+      promoDiscountAmount: adminChoiceData.promoDiscountAmount,
+      discountLabel: adminChoiceData.discountLabel,
+    });
+    setShowCheckoutModal(true);
+    setAdminChoiceData(null);
+  };
+
+  if (activeOptions.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-red-600">{t('booking.noActiveOption') || 'No active product options available'}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="booking-flow-root space-y-8">
+      {/* Admin: choose to pay now or confirm without payment (full balance owed) */}
+      <AdminPaymentChoiceModal
+        open={!!(showAdminPaymentChoice && adminChoiceData)}
+        totalAmount={adminChoiceData?.totalAmount ?? 0}
+        currency={currency}
+        loading={loading}
+        error={error}
+        onPayNow={handlePayNow}
+        onConfirmWithoutPayment={handleConfirmWithoutPayment}
+        onCancel={() => { setShowAdminPaymentChoice(false); setAdminChoiceData(null); setError(''); }}
+      />
+      {checkoutModalData && (
+        <CheckoutModal
+          open={showCheckoutModal}
+          onClose={cancelPendingReservation}
+          onPaymentSubmitStart={() => {
+            paymentSubmitInFlightRef.current = true;
+          }}
+          onPaymentSubmitError={() => {
+            paymentSubmitInFlightRef.current = false;
+          }}
+          clientSecret={checkoutClientSecret}
+          reservationReference={checkoutModalData.reservationReference}
+          reservationExpiration={checkoutModalData.reservationExpiration}
+          customerLastName={checkoutModalData.customerLastName}
+          successUrlOverride={
+            checkoutModalData.successUrlOverride ??
+            (getSuccessUrl
+              ? getSuccessUrl({
+                  reservationRef: checkoutModalData.reservationReference,
+                  lastName: checkoutModalData.customerLastName ?? '',
+                  focusDate: checkoutModalData.bookingDate,
+                })
+              : undefined)
+          }
+          ticketLines={checkoutModalData.ticketLines}
+          feeLineItems={checkoutModalData.feeLineItems}
+          returnPriceAdjustment={checkoutModalData.returnPriceAdjustment}
+          cancellationPolicyFee={checkoutModalData.cancellationPolicyFee}
+          cancellationPolicyLabel={checkoutModalData.cancellationPolicyLabel}
+          subtotal={checkoutModalData.subtotal}
+          tax={checkoutModalData.tax}
+          total={checkoutModalData.total}
+          promoDiscountAmount={checkoutModalData.promoDiscountAmount ?? 0}
+          discountLabel={checkoutModalData.discountLabel}
+          totalQuantity={checkoutModalData.totalQuantity}
+          isTaxIncludedInPrice={checkoutModalData.isTaxIncludedInPrice}
+          taxRate={checkoutModalData.taxRate}
+          changeTotals={checkoutModalData.changeTotals}
+          currency={currency}
+          locale={locale}
+          t={t}
+        />
+      )}
+      {/* Image/video collage - vertical video on left, image grid on right */}
+      {productId && !isChangeFlow && flowUi?.showCollage !== false && (() => {
+        const config = getProductByIdOrSlug(productId);
+        const displayProducts = getProducts(defaultStrings);
+        const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
+        const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
+        const hasVideo = !!displayProduct?.videoUrl;
+        const hasImages = collageImageIds.length > 0;
+        if (!hasVideo && !hasImages) return null;
+        return (
+          <div className="booking-collage-wrapper">
+          <BookingFlowCollage
+            video={displayProduct?.videoUrl}
+            videoPosterImageId={config?.display?.imageIds?.[0]}
+            imageIds={hasImages ? collageImageIds : [config?.display?.imageIds?.[0]].filter(Boolean) as string[]}
+            altPrefix={product.name}
+          />
+          </div>
+        );
+      })()}
+
+      {!isChangeFlow && flowUi?.showTourDescription !== false && (
+        <TourDescription productSlug={productId} locale={locale} defaultExpanded={isPartialLaunch} />
+      )}
+
+      {isPartialLaunch ? null : (
+      <div className="booking-calendar-section">
+      {loadingAvailabilities && availabilities.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 gap-4">
+          <div className="booking-loading-spinner" aria-hidden />
+          <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+        </div>
+      ) : availabilities.length === 0 ? (
+        <div className="text-center py-8 text-stone-500">
+          {t('booking.noAvailability')}
+        </div>
+      ) : (
+        <>
+          {/* Date Selection */}
+          <div>
+            <div className="relative">
+              {loadingAvailabilities && (
+                <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
+                  <div className="flex flex-col items-center gap-3">
+                    <div className="booking-loading-spinner" aria-hidden />
+                    <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+                  </div>
+                </div>
+              )}
+              <Calendar
+                availabilitiesByDate={availabilitiesByDate}
+                selectedDate={selectedDate}
+                syncVisibleWeekToSelectedDate={isChangeFlow}
+                isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
+                onDateSelect={(date) => {
+                  setSelectedDate(date);
+                  handleDateSelect(date);
+                  if (suppressCalendarDateScroll) return;
+                  // Scroll so calendar is almost at top and user sees the rest of the booking flow.
+                  // Dialog: scroll inside contentRef. Full-page: fall back to window scroll.
+                  setTimeout(() => {
+                    const container = contentRef?.current;
+                    if (!useWindowScroll && container && container.scrollHeight > container.clientHeight + 16) {
+                      container.scrollBy({ top: 400, behavior: 'smooth' });
+                    } else if (typeof window !== 'undefined') {
+                      window.scrollBy({ top: 400, behavior: 'smooth' });
+                    }
+                  }, 100);
+                }}
+                timezone={companyTimezone}
+                earliestDate={earliestAvailabilityDate}
+                onVisibleRangeChange={handleVisibleRangeChange}
+                currency={currency}
+                showCapacity={isAdmin}
+                extraDiscountPercent={calendarDiscountPercent}
+                capDiscountToSelectedDate={isChangeFlow && changeFlowTicketPriceFloorByCategory.size > 0}
+              />
+            </div>
+          </div>
+
+          {/* Form sections - equal spacing between each */}
+          <div className="mt-6 space-y-6">
+          {/* Your itinerary box - shown after date selection, before pickup/return/tickets/pickup location */}
+          {selectedDate && !hideItineraryBox && (() => {
+            const hasItineraryAny = activeOptions.some(o => o.itinerary?.length) && (product.destinations?.length ?? 0) > 0;
+            if (!hasItineraryAny) return null;
+            const formattedDate = selectedDate ? format(parseISO(selectedDate), 'MMM d') : '';
+            if (!selectedAvailability) {
+              return <ItineraryPlaceholder formattedDate={formattedDate} t={t} />;
+            }
+            const itineraryItems = computeItineraryDisplay();
+            if (!itineraryItems || itineraryItems.length === 0) return null;
+            const isBookingComplete = Boolean(selectedAvailability &&
+              selectedReturnOption &&
+              (pickupLocationId || pickupLocationSkipped || !product.pickupLocations || product.pickupLocations.length === 0) &&
+              Object.values(quantities).some(qty => qty > 0) &&
+              email.trim() !== '' &&
+              firstName.trim() !== '' &&
+              lastName.trim() !== '');
+            return (
+              <ItineraryBox
+                selectedDate={selectedDate}
+                formattedDate={formattedDate}
+                itineraryItems={itineraryItems}
+                isBookingComplete={isBookingComplete}
+                isItinerarySticky={isItinerarySticky}
+                stickyTopPx={flowUi?.itineraryStickyTopOffsetPx}
+                isMobile={isMobile}
+                useWindowScroll={useWindowScroll}
+                showTooltip={showTooltip}
+                selectedPickupLocation={selectedPickupLocation}
+                pickupLocationSkipped={pickupLocationSkipped}
+                pickupLocationsCount={product.pickupLocations?.length ?? 0}
+                itineraryRef={itineraryRef}
+                t={t}
+                onTooltipToggle={() => setShowTooltip(!showTooltip)}
+                onTooltipShow={setShowTooltip}
+              />
+            );
+          })()}
+
+          {/* Select pickup time */}
+          {selectedDate && (
+            <PickupTimeSelector
+              pickupTimes={pickupTimes}
+              selectedDateTime={selectedAvailability?.dateTime ?? null}
+              selectedTicketCount={totalQuantity}
+              optionsMap={optionsMap}
+              hasAnyMostPopular={hasAnyMostPopular}
+              isAdmin={isAdmin}
+              pickupLocationSkipped={pickupLocationSkipped}
+              t={t}
+              onTimeSelect={handleTimeSelect}
+            />
+          )}
+
+          {/* Select return time */}
+          {selectedAvailability && selectedAvailability.returnOptions && selectedAvailability.returnOptions.length > 0 && (
+            <ReturnTimeSelector
+              returnOptions={returnOptionsWithFloor}
+              selectedReturnOption={selectedReturnOptionWithFloor}
+              selectedTicketCount={totalQuantity}
+              companyTimezone={companyTimezone}
+              currency={currency}
+              locale={locale}
+              isAdmin={isAdmin}
+              t={t}
+              onReturnSelect={(option) => {
+                const raw = selectedAvailability.returnOptions?.find(
+                  (opt) => opt.returnAvailabilityId === option.returnAvailabilityId
+                );
+                setSelectedReturnOption(raw ?? option);
+              }}
+              getStaySummary={calculateStaySummary}
+            />
+          )}
+
+          {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
+          {!isChangeFlow && selectedAvailability && ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) && (() => {
+            const sortedPolicies = [...(pricingConfig?.cancellationPolicies ?? [])].sort((a, b) => {
+              const feeA = a.feeByCurrency[currency] ?? 0;
+              const feeB = b.feeByCurrency[currency] ?? 0;
+              return feeA - feeB;
+            });
+            return (
+            <div ref={cancellationPolicyRef}>
+            <CancellationPolicySelector
+              policies={sortedPolicies}
+              selectedPolicyId={cancellationPolicyId}
+              currency={currency}
+              locale={locale}
+              t={t}
+              onPolicySelect={setCancellationPolicyId}
+              forcedPolicy={forcedCancellationPolicy}
+            />
+            </div>
+            );
+          })()}
+
+          {/* Ticket Selection */}
+          {selectedAvailability && (
+            <TicketSelector
+              pricing={pricing}
+              quantities={quantities}
+              totalQuantity={totalQuantity}
+              selectedVacancies={effectivePartySizeCap}
+              companyTimezone={companyTimezone}
+              pickupDateTime={selectedAvailability.dateTime}
+              pickupVacancies={selectedAvailability.vacancies ?? 0}
+              returnDateTime={selectedReturnOption?.dateTime ?? null}
+              returnVacancies={
+                selectedReturnOption != null ? (selectedReturnOption.vacancies ?? 0) : null
+              }
+              resourceCount={selectedReturnOption ? null : (selectedAvailability.resourceCount ?? null)}
+              currency={currency}
+              locale={locale}
+              isAdmin={isAdmin}
+              isSimplifiedPricingView={isSimplifiedPricingView}
+              t={t}
+              onQuantityChange={handleQuantityChange}
+              minimumQuantities={changeBookingMinimumQuantities}
+              ticketUnitFloorByCategory={isChangeFlow ? changeFlowTicketPriceFloorByCategory : undefined}
+            />
+          )}
+
+          {/* Add-ons — optional extras for the selected product option */}
+          {selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
+            <AddOnsSection
+              addOns={addOns}
+              addOnSelections={addOnSelections}
+              currency={currency}
+              locale={locale}
+              onSelectionsChange={updateAddOnSelections}
+              minimumTotalByAddOnId={isChangeFlow ? initialAddOnMinTotalByAddOnId : undefined}
+            />
+          )}
+
+          {/* Total and Checkout — shared PriceSummary component */}
+          {selectedAvailability && (
+            <CheckoutForm
+              priceSummaryLines={checkoutPriceSummaryLines}
+              totalPrice={changeFlowAmountDue}
+              totalSummaryLabel={
+                isChangeFlow
+                  ? (t('booking.totalOwedForBookingChange') &&
+                    t('booking.totalOwedForBookingChange') !== 'booking.totalOwedForBookingChange'
+                      ? t('booking.totalOwedForBookingChange')
+                      : 'Total owed for booking difference')
+                  : undefined
+              }
+              subtotal={subtotal !== totalFromSummary || effectivePromoDiscountAmount > 0 || addOnTotal > 0 ? effectiveSubtotal : undefined}
+              taxAmount={!isTaxIncludedInPrice && (effectivePromoDiscountAmount > 0 ? effectiveTax : tax) > 0 ? (effectivePromoDiscountAmount > 0 ? effectiveTax : tax) : 0}
+              taxRate={pricingConfig?.taxRate}
+              currency={currency}
+              locale={locale}
+              t={t}
+              extraBetweenTaxAndTotal={
+                <>
+                  {isChangeFlow && originalReceipt && lockedPromoCode ? (
+                    <PromoCodeInput
+                      promoCodeInput={promoCodeInput}
+                      appliedPromoCode={appliedPromoCode}
+                      promoCodeError={promoCodeError}
+                      promoCodeValidating={promoCodeValidating}
+                      promoDiscountAmount={effectivePromoDiscountAmount}
+                      currency={currency}
+                      locale={locale}
+                      t={t}
+                      onInputChange={() => {}}
+                      onApply={() => {}}
+                      onRemove={() => {}}
+                      locked
+                    />
+                  ) : (
+                    !isChangeFlow ? (
+                      <PromoCodeInput
+                        promoCodeInput={promoCodeInput}
+                        appliedPromoCode={appliedPromoCode}
+                        promoCodeError={promoCodeError}
+                        promoCodeValidating={promoCodeValidating}
+                        promoDiscountAmount={promoDiscountAmount}
+                        currency={currency}
+                        locale={locale}
+                        t={t}
+                        onInputChange={(v) => {
+                          setPromoCodeInput(v);
+                          setPromoCodeError('');
+                        }}
+                        onApply={handleApplyPromo}
+                        onRemove={() => {
+                          promoAppliedSelectionKeyRef.current = null;
+                          setAppliedPromoCode(null);
+                          setPromoCodeInput('');
+                          setPromoCodeError('');
+                          setForcedCancellationPolicy(null);
+                          setCancellationPolicyId(null); // Reset so auto-select effect picks cheapest
+                          fetchedRangesRef.current = [];
+                        }}
+                      />
+                    ) : null
+                  )}
+                </>
+              }
+              firstName={firstName}
+              lastName={lastName}
+              email={email}
+              onFirstNameChange={(v) => { setFirstName(v); setError(''); }}
+              onLastNameChange={(v) => { setLastName(v); setError(''); }}
+              onEmailChange={(v) => { setEmail(v); setError(''); }}
+              readOnlyContactFields={isChangeFlow}
+              pickupLocations={
+                selectedDate && product.pickupLocations && product.pickupLocations.length > 0
+                  ? product.pickupLocations
+                  : undefined
+              }
+              destinations={product.destinations}
+              pickupLocationId={pickupLocationId}
+              pickupLocationSkipped={pickupLocationSkipped}
+              selectedPickupLocation={selectedPickupLocation}
+              highlightedPickupLocationIds={highlightedPickupLocationIds}
+              onLocationSelect={(locationId) => {
+                setPickupLocationId(locationId);
+                setError('');
+                if (locationId === null && pickupLocationSkipped) {
+                  setPickupLocationSkipped(false);
+                } else if (locationId !== null) {
+                  setPickupLocationSkipped(false);
+                }
+              }}
+              onSkip={() => {
+                setPickupLocationSkipped(true);
+                setPickupLocationId(null);
+                setError('');
+              }}
+              onChangePickup={() => {
+                setPickupLocationId(null);
+                setPickupLocationSkipped(false);
+              }}
+              termsAccepted={termsAccepted}
+              onTermsChange={(checked) => {
+                setTermsAccepted(checked);
+                setTermsAcceptedAt(checked ? new Date().toISOString() : null);
+              }}
+              isAdmin={isAdmin}
+              skipConfirmationCommunications={skipConfirmationCommunications}
+              disableAutoCommunications={disableAutoCommunications}
+              onSkipConfirmationChange={setSkipConfirmationCommunications}
+              onDisableCommunicationsChange={setDisableAutoCommunications}
+              error={checkoutFormError}
+              loading={loading}
+              totalQuantity={totalQuantity}
+              onCheckout={handleCheckout}
+              submitLabel={changeCheckoutButtonLabel ?? deferredInvoiceSubmitLabel}
+              hideSubmitButton={
+                showCheckoutModal ||
+                showAdminPaymentChoice ||
+                (isChangeFlow && (!hasChangeSelection || isChangeQuoteBlocked))
+              }
+              submitDisabled={changeFlowSubmitDisabled}
+              attributionSummary={flowUi?.partnerAttributionSummary}
+              attributionConfirmLabel={flowUi?.partnerAttributionConfirmLabel}
+              attributionConfirmed={partnerAttributionConfirmed}
+              onAttributionConfirmedChange={setPartnerAttributionConfirmed}
+            />
+          )}
+          </div>
+        </>
+      )}
+      </div>
+      )}
+    </div>
+  );
+}
+