@ticketboothapp/booking 1.2.61 → 1.2.63

package/src/components/booking/ChangeBookingFlow.tsx

@@ -0,0 +1,4915 @@
+'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,
+  cancelReservation,
+  cancelReservationBestEffort,
+  createPaymentIntent,
+  quoteChangeBooking,
+  confirmFreeChangeBooking,
+  createChangeBookingPaymentIntent,
+  getAddOns,
+  validatePromoCode,
+  getPromoDiscount,
+  type ChangeBookingQuoteResponse,
+  type ChangeBookingQuoteTicketPricingTrace,
+  type ChangeBookingQuotePricingDriftDetail,
+  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 { ItineraryBox } from './ItineraryBox';
+import { ItineraryPlaceholder } from './ItineraryPlaceholder';
+import { PickupTimeSelector } from './PickupTimeSelector';
+import { ReturnTimeSelector } from './ReturnTimeSelector';
+import { TicketSelector } from './TicketSelector';
+import { AddOnsSection } from './AddOnsSection';
+import { CheckoutForm } from './CheckoutForm';
+import { useTranslations, useLocale } from '../../lib/booking/i18n';
+import { CURRENCIES, DEFAULT_CURRENCY, type Currency } from './CurrencySwitcher';
+import { formatBookingRefForDisplay } from '../../lib/booking-ref';
+import {
+  effectiveProductOptionIdForChangeFlow,
+  isParentProductId,
+  normalizeProductOptionIdForChangeFlow,
+} from '../../lib/booking/product-option-id';
+import { formatCurrencyAmount } from '../../lib/currency';
+import {
+  resolveChangeFlowNewBookingTotal,
+  changeFlowBalanceVsOriginal,
+  resolveChangeFlowDisplayedAmounts,
+  normalizeNearZeroOwed,
+  sliceChangeQuoteForUi,
+  changeFlowTicketLineTotalWithReceiptFloor,
+  changeFlowFeeLineTotalWithReceiptFloor,
+  changeFlowReturnLineTotalWithReceiptFloor,
+  type ChangeFlowProtectedReceiptPricing,
+  roundMoney,
+} from '../../lib/booking/change-flow-pricing';
+import {
+  mergePriceSummaryLinesForDrift,
+  normalizePricingDriftDetailFromQuote,
+  normalizeTicketPricingTraceFromQuote,
+  sumPriceSummaryLinesMajorUnits,
+  enrichLineComparisonsWithMergedRows,
+} from '../../lib/booking/change-booking-pricing-drift';
+import { ChangeBookingPricingDriftPanel } from './ChangeBookingPricingDriftPanel';
+import {
+  buildChangeBookingServerPreview,
+  mapQuoteLineItemsToPriceSummaryLines,
+} from '../../lib/booking/change-booking-server-preview';
+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 {
+  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 { useBookingHost } from '../../runtime';
+import type { BookingFlowUiOptions } from './booking-flow-ui';
+import type { ChangeBookingFlowProps, ChangeFlowSelectionPreview } from './booking-flow-types';
+import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+
+export type { ChangeBookingFlowProps } from './booking-flow-types';
+
+/**
+ * ## Pricing contract (customer self-serve)
+ *
+ * Written **as if** `quoteChangeBooking` already returns the full contract (totals + optional maps + line items).
+ * Pickers show catalog/server-backed amounts (no `suppress*` gates tied to “waiting for BE”). Checkout prefers
+ * `serverPreview.priceSummaryLines` when the quote includes rows; otherwise falls back to FE-built lines after totals confirm.
+ *
+ * Until the first successful quote, `selfServeCheckoutPlaceholder` still avoids showing unchecked totals.
+ *
+ */
+function mergeQuoteSliceWithServerPreview(
+  slice: ReturnType<typeof sliceChangeQuoteForUi>,
+  quote: ChangeBookingQuoteResponse,
+  fallbackCart: { total: number; subtotal: number; tax: number },
+  currency: Currency,
+) {
+  return {
+    ...slice,
+    currency: (slice.currency || currency) as Currency,
+    serverPreview: buildChangeBookingServerPreview(quote, fallbackCart, currency),
+    pricingDriftDetail: normalizePricingDriftDetailFromQuote(quote),
+    ticketPricingTrace: normalizeTicketPricingTraceFromQuote(quote),
+  };
+}
+
+const ZERO_PRICE_SUMMARY_LINE = 0.005;
+
+/** Change-quote receipt lines may include a $0 promo/discount row — omit from sidebar summary only. */
+function omitZeroAmountPromoDiscountSummaryLines(lines: PriceSummaryLine[]): PriceSummaryLine[] {
+  return lines.filter((line) => {
+    if (line.kind !== 'line') return true;
+    if (Math.abs(line.amount) >= ZERO_PRICE_SUMMARY_LINE) return true;
+    const t = String(line.type ?? '').toUpperCase();
+    if (t === 'PROMO_CODE' || t === 'DISCOUNT' || t === 'GIFT_CARD' || t === 'VOUCHER') return false;
+    const lab = line.label.toLowerCase();
+    if (lab.includes('promo')) return false;
+    if (lab.includes('voucher') || lab.includes('gift card')) return false;
+    return true;
+  });
+}
+
+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 normalizeLineLabelForCompare(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/\([^)]*\)/g, '')
+    .replace(/[^a-z0-9]+/g, '')
+    .trim();
+}
+
+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);
+}
+
+/** Ticket rates for one availability row — mirrors main cart [pricing] useMemo so baseline slots match BE. */
+function buildPricingFromAvailability(
+  selectedAvailability: Availability | null,
+  activeOptions: Product['options'],
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null | undefined,
+  currency: Currency,
+  pricingConfig: PricingConfig | null,
+  hasFees: boolean,
+  isSimplifiedPricingView: boolean,
+) {
+  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 ?? [],
+      );
+      return {
+        category: rate.category,
+        rateId: rate.rateId || rate.category,
+        available: rate.available,
+        price: built.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, []);
+      return {
+        category: p.category,
+        rateId: p.category,
+        available: selectedAvailability.vacancies,
+        price: built.price,
+        priceCAD: built.priceCAD,
+        baseInDisplayCurrency: built.baseInDisplayCurrency,
+        appliedAdjustments: built.appliedAdjustments,
+      };
+    }) ||
+    []
+  );
+}
+
+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 };
+  });
+}
+
+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 }>,
+): Availability | null {
+  const selectable = timesForSelectedDate.filter((a) => (a.vacancies ?? 0) > 0);
+  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,
+): ReturnOption | null {
+  const eligible = sortedReturnOptions.filter((o) => (o.vacancies ?? 0) > 0);
+  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 };
+}
+
+/**
+ * Customer self-serve **change booking** only (no standard new-booking paths).
+ * Duplicated from {@link NewBookingFlow} intentionally so each flow can evolve independently.
+ */
+export function ChangeBookingFlow({
+  product,
+  productId,
+  onBack,
+  currency: currencyFromParent,
+  contentRef,
+  onSuccess,
+  isPartialLaunch = false,
+  useWindowScroll = false,
+  autoAppliedPromoCode,
+  calendarDiscountPercent,
+  highlightedPickupLocationIds,
+  onPricePreviewChange,
+  onChangeFlowSelectionPreview,
+  originalReceipt = null,
+  initialValues,
+  hideItineraryBox = false,
+  flowUi,
+  bookingSourceAttribution,
+  partnerPortalBooking = false,
+  availabilityPricingProfileId,
+  availabilityCancellationPolicyProfileId,
+}: ChangeBookingFlowProps) {
+  /** Always the booking’s sold currency — not the site currency switcher / parent default. */
+  const currency = useMemo((): Currency => {
+    const fromReceipt = originalReceipt?.currency;
+    if (fromReceipt && CURRENCIES.includes(fromReceipt)) return fromReceipt;
+    const fromInitial = initialValues?.currency;
+    if (fromInitial && CURRENCIES.includes(fromInitial)) return fromInitial;
+    if (currencyFromParent && CURRENCIES.includes(currencyFromParent)) return currencyFromParent;
+    return DEFAULT_CURRENCY;
+  }, [originalReceipt?.currency, initialValues?.currency, currencyFromParent]);
+
+  const { env, analytics } = useBookingHost();
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const companyTimezone = useCompanyTimezone(); // Get timezone from context
+  const pricingProfileIdForAvailabilities = (availabilityPricingProfileId ?? '').trim() || null;
+  const cancellationPolicyProfileIdForAvailabilities =
+    (availabilityCancellationPolicyProfileId ?? '').trim() || null;
+  const {
+    isSimplifiedPricingView,
+    onShowManage,
+    getSuccessUrl,
+    suppressCalendarDateScroll,
+  } = useBookingApp();
+  const availabilitiesCache = useAvailabilitiesCache();
+  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('');
+  /** Dedupe parent updates from `onChangeFlowSelectionPreview` when serialized preview is unchanged. */
+  const lastChangeFlowPreviewKeyRef = useRef<string | null>(null);
+  const [promoCodeValidating, setPromoCodeValidating] = useState(false);
+  const [pickupLocationId, setPickupLocationId] = useState<string | null>(null);
+  const [pickupLocationSkipped, setPickupLocationSkipped] = useState(false);
+  /** Cancellation policy is fixed to the existing booking snapshot — not user-editable in change flow. */
+  const cancellationPolicyId = useMemo(
+    () => initialValues?.cancellationPolicyId?.trim() ?? null,
+    [initialValues?.cancellationPolicyId],
+  );
+  /** 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 hasLoadedAvailabilitiesRef = useRef(false); // First successful availability paint completed
+  const inFlightRangeRef = useRef<{ start: Date; end: Date } | null>(null); // Range currently being fetched
+  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 (!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);
+  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 changeFlowOriginalDate = useMemo(() => {
+    if (!initialValues?.dateTime?.trim()) return null;
+    try {
+      return formatInTimeZone(
+        parseAvailabilityDateTime(initialValues.dateTime.trim()),
+        companyTimezone,
+        'yyyy-MM-dd',
+      );
+    } catch {
+      return null;
+    }
+  }, [initialValues?.dateTime, companyTimezone]);
+  /** Do not render catalog-/FE-derived dollar amounts in UI until `quoteChangeBooking` returns `serverDisplay`. */
+  const suppressSelfServeCurrencyUi = true;
+
+  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);
+  /** Promo from booking is fixed — show read-only, never add new. */
+  const lockedPromoCode = initialValues?.promoCode?.trim()
+    ? initialValues.promoCode.trim().toUpperCase()
+    : null;
+  /** Public self-serve only: cannot reduce tickets below original counts. */
+  const changeBookingMinimumQuantities = useMemo(() => {
+    if (!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;
+  }, [initialValues?.bookingItems]);
+  const [latestChangeQuote, setLatestChangeQuote] = useState<{
+    priceDiff: number;
+    currency: Currency;
+    canProceed: boolean;
+    reasonIfBlocked?: string;
+    changeIntentId?: string;
+    quotedTotal?: number;
+    /** From `quoteChangeBooking` receipt fields — drives PriceSummary when self-serve. */
+    serverDisplay?: { total: number; subtotal: number; tax: number };
+    /** Parsed from last quote — unified server-owned preview for lines + picker overrides. */
+    serverPreview: ReturnType<typeof buildChangeBookingServerPreview>;
+    pricingDriftDetail?: ChangeBookingQuotePricingDriftDetail;
+    ticketPricingTrace?: ChangeBookingQuoteTicketPricingTrace | null;
+  } | null>(null);
+  const [changeQuoteLoading, setChangeQuoteLoading] = useState(false);
+  const [changeQuoteFetchError, setChangeQuoteFetchError] = useState<string | null>(null);
+  const selfServePricingConfirmed =
+    suppressSelfServeCurrencyUi &&
+    latestChangeQuote != null &&
+    changeQuoteFetchError == null &&
+    latestChangeQuote.canProceed !== false &&
+    latestChangeQuote.serverDisplay != 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;
+      analytics.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 (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, 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) {
+        const inFlight = inFlightRangeRef.current;
+        if (
+          inFlight &&
+          inFlight.start.getTime() === visibleRange.start.getTime() &&
+          inFlight.end.getTime() === visibleRange.end.getTime()
+        ) {
+          return;
+        }
+        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.availabilities.length > 0) {
+            hasLoadedAvailabilitiesRef.current = true;
+          }
+          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.availabilities.length > 0) {
+          hasLoadedAvailabilitiesRef.current = true;
+        }
+        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;
+      const shouldUsePrimaryLoader =
+        !hasPartialCache && !hasLoadedAvailabilitiesRef.current;
+      fetchingRef.current = true;
+      inFlightRangeRef.current = {
+        start: new Date(clampedStart),
+        end: new Date(clampedEnd),
+      };
+      if (shouldUsePrimaryLoader) 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);
+        if (allFetchedAvailabilities.length > 0) {
+          hasLoadedAvailabilitiesRef.current = true;
+        }
+        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;
+        inFlightRangeRef.current = null;
+        // 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],
+  );
+
+  /**
+   * Bookings often store only parent `p_…` (no `po_…`). Resolve the booked option id from inventory rows,
+   * wall-clock match, or single active option — must be defined before effects that seed selection / seat credit.
+   */
+  const changeFlowResolvedInitialProductOptionId = useMemo((): string | null => {
+    const fromFields = effectiveProductOptionIdForChangeFlow({
+      productId: initialValues?.productId,
+      productOptionId: initialValues?.productOptionId,
+    });
+    if (fromFields) return fromFields;
+
+    const aid = initialValues?.availabilityId?.trim();
+    if (aid) {
+      for (const a of availabilities) {
+        if (a.availabilityId === aid) {
+          const po = normalizeProductOptionIdForChangeFlow(a.productOptionId);
+          if (po) return po;
+        }
+      }
+    }
+
+    if (initialValues?.dateTime?.trim()) {
+      try {
+        const initialDt = parseAvailabilityDateTime(initialValues.dateTime.trim());
+        const initialMs = initialDt.getTime();
+        const initialDay = formatInTimeZone(initialDt, companyTimezone, 'yyyy-MM-dd');
+        for (const a of availabilities) {
+          const avDt = parseAvailabilityDateTime(a.dateTime);
+          if (formatInTimeZone(avDt, companyTimezone, 'yyyy-MM-dd') !== initialDay) continue;
+          if (avDt.getTime() !== initialMs) continue;
+          const po = normalizeProductOptionIdForChangeFlow(a.productOptionId);
+          if (po) return po;
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+
+    if (activeOptions.length === 1) {
+      return normalizeProductOptionIdForChangeFlow(activeOptions[0].optionId);
+    }
+
+    return null;
+  }, [
+    initialValues?.productId,
+    initialValues?.productOptionId,
+    initialValues?.availabilityId,
+    initialValues?.dateTime,
+    availabilities,
+    activeOptions,
+    companyTimezone,
+  ]);
+
+  /**
+   * Parent catalog product id (`p_…`) for minimum-paid receipt floors: explicit parent on the booking,
+   * otherwise the product loaded for this change session (booking payload may only carry `po_…`).
+   */
+  const changeFlowBookingParentProductIdForFloors = useMemo(() => {
+    const pid = initialValues?.productId?.trim();
+    if (pid && isParentProductId(pid)) return pid;
+    return product.productId.trim();
+  }, [initialValues?.productId, product.productId]);
+
+  /**
+   * Receipt pricing on protected seats/fees: Rule A (exact receipt unit when same calendar day
+   * + same product option) vs Rule B (`max(receipt, live)` when date or option changes).
+   */
+  const changeFlowApplyReceiptPaidFloors = useMemo(
+    () => changeFlowBookingParentProductIdForFloors === product.productId.trim(),
+    [changeFlowBookingParentProductIdForFloors, product.productId],
+  );
+
+  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,
+      changeFlowResolvedInitialProductOptionId ?? 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,
+    changeFlowResolvedInitialProductOptionId,
+    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 (!initialValues?.addOnSelections?.length) return;
+    setAddOnSelections((prev) => (prev.length > 0 ? prev : normalizeAddOnSelections(initialValues.addOnSelections!)));
+  }, [initialValues?.addOnSelections]);
+
+  useEffect(() => {
+    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));
+    }
+  }, [
+    initialValues?.addOnSelections,
+    addOnSelections.length,
+    addOns,
+    originalReceipt?.lineItems,
+  ]);
+
+  const initialAddOnBaselineSelections = useMemo(() => {
+    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 }>;
+  }, [initialValues?.addOnSelections, originalReceipt?.lineItems, addOns]);
+
+  const initialAddOnMinQtyByKey = useMemo(() => {
+    const map = new Map<string, number>();
+    if (false) 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;
+  }, [true, initialAddOnBaselineSelections]);
+
+  const initialAddOnMinTotalByAddOnId = useMemo(() => {
+    const map = new Map<string, number>();
+    if (false) 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;
+  }, [true, initialAddOnBaselineSelections]);
+
+  const applyChangeFlowAddOnFloor = useCallback(
+    (nextSelections: Array<{ addOnId: string; variantId?: string; quantity?: number }>) => {
+      if (false || 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 };
+      });
+    },
+    [true, 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]);
+  const changeFlowInitialTicketCountForSeatCredit = useMemo(() => {
+    if (!initialValues?.bookingItems?.length) return 0;
+    return initialValues.bookingItems.reduce(
+      (sum, item) => sum + Math.max(0, Number(item.count) || 0),
+      0,
+    );
+  }, [initialValues?.bookingItems]);
+  
+  const changeFlowSeatCreditForOutboundAvailability = useCallback(
+    (availability: Availability): number => {
+      if (changeFlowInitialTicketCountForSeatCredit <= 0) return 0;
+      const initialAvailabilityId = initialValues?.availabilityId?.trim();
+      const availabilityId = availability.availabilityId?.trim();
+      if (initialAvailabilityId && availabilityId) {
+        return initialAvailabilityId === availabilityId ? changeFlowInitialTicketCountForSeatCredit : 0;
+      }
+      if (!initialValues?.dateTime) return 0;
+      const selectedMs = parseAvailabilityDateTime(availability.dateTime).getTime();
+      const initialMs = parseAvailabilityDateTime(initialValues.dateTime).getTime();
+      if (selectedMs !== initialMs) return 0;
+      const selectedOpt = normalizeProductOptionIdForChangeFlow(availability.productOptionId);
+      const initialOpt = changeFlowResolvedInitialProductOptionId;
+      if (selectedOpt != null && initialOpt != null) {
+        return selectedOpt === initialOpt ? changeFlowInitialTicketCountForSeatCredit : 0;
+      }
+      const legacyInitial = initialValues.productOptionId?.trim() || null;
+      const legacySelected = availability.productOptionId?.trim() || null;
+      if (!legacySelected || !legacyInitial) return changeFlowInitialTicketCountForSeatCredit;
+      return legacySelected === legacyInitial ? changeFlowInitialTicketCountForSeatCredit : 0;
+    },
+    [
+      changeFlowInitialTicketCountForSeatCredit,
+      changeFlowResolvedInitialProductOptionId,
+      initialValues?.availabilityId,
+      initialValues?.dateTime,
+      initialValues?.productOptionId,
+    ],
+  );
+  const changeFlowSeatCreditForReturnAvailabilityId = useCallback(
+    (returnAvailabilityId: string | null | undefined): number => {
+      if (changeFlowInitialTicketCountForSeatCredit <= 0) return 0;
+      const initialReturnAvailabilityId = initialValues?.returnAvailabilityId?.trim() || null;
+      const selectedReturnAvailabilityId = returnAvailabilityId?.trim() || null;
+      if (!selectedReturnAvailabilityId) {
+        return initialReturnAvailabilityId == null ? changeFlowInitialTicketCountForSeatCredit : 0;
+      }
+      if (!initialReturnAvailabilityId) return 0;
+      return selectedReturnAvailabilityId === initialReturnAvailabilityId
+        ? changeFlowInitialTicketCountForSeatCredit
+        : 0;
+    },
+    [changeFlowInitialTicketCountForSeatCredit, initialValues?.returnAvailabilityId],
+  );
+
+  /** Calendar sold-out / time pills: same effective outbound vacancies as pickup tiles (seat credit on original slot). */
+  const getCalendarEffectiveOutboundVacancies = useCallback(
+    (avail: Availability) =>
+      Math.max(0, avail.vacancies ?? 0) + changeFlowSeatCreditForOutboundAvailability(avail),
+    [changeFlowSeatCreditForOutboundAvailability],
+  );
+
+  // 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);
+      const vacancyCredit = changeFlowSeatCreditForOutboundAvailability(avail);
+      const adjustedVacancies = Math.max(0, avail.vacancies ?? 0) + vacancyCredit;
+      
+      // 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,
+        vacancies: adjustedVacancies,
+        pickupTime: pickupTime.toISOString(),
+        displayTime,
+        originalTime,
+        displayTimeRange,
+      };
+    });
+  }, [
+    selectedDate,
+    selectedPickupLocation,
+    timesForSelectedDate,
+    pickupLocationSkipped,
+    maxTimeOffsetMinutes,
+    companyTimezone,
+    changeFlowSeatCreditForOutboundAvailability,
+  ]);
+
+  // 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 changeFlowTicketBookedUnitPriceByCategory = useMemo(() => {
+    if (!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;
+  }, [originalReceipt?.lineItems]);
+
+  /**
+   * When the API omits `returnUnitFloorPerPerson`, derive per-person paid return from the stored receipt
+   * so catalog "free" return slots still show and price at the original return value in change flow.
+   */
+  const changeFlowReturnUnitFloorFromReceipt = useMemo(() => {
+    if (!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' && type !== 'RETURN') 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;
+  }, [originalReceipt?.lineItems, initialValues?.bookingItems]);
+
+  /**
+   * Per-person minimum for return add-on display & totals whenever the booking paid for return on the receipt.
+   * **Does not depend on** changing date vs staying on the original day, or switching product option — only on receipt/API.
+   */
+  const effectiveChangeFlowReturnUnitFloorPerPerson = useMemo(() => {
+    const fromApi = Number(initialValues?.returnUnitFloorPerPerson ?? 0);
+    if (Number.isFinite(fromApi) && fromApi > 0) return fromApi;
+    const fromReceipt = changeFlowReturnUnitFloorFromReceipt;
+    if (fromReceipt != null && fromReceipt > 0) return fromReceipt;
+    return null;
+  }, [initialValues?.returnUnitFloorPerPerson, changeFlowReturnUnitFloorFromReceipt]);
+  const changeFlowBookedFeeUnitByNormalizedLabel = useMemo(() => {
+    const feeUnitByLabel = new Map<string, number>();
+    if (!originalReceipt?.lineItems?.length) return feeUnitByLabel;
+    const fallbackBookedQty =
+      (initialValues?.bookingItems ?? []).reduce((sum, item) => sum + Math.max(0, Number(item.count) || 0), 0);
+    for (const line of originalReceipt.lineItems) {
+      const type = (line.type || '').trim().toUpperCase();
+      if (!line.label || type === 'TICKET' || type === 'RETURN_OPTION' || type === 'TAX') continue;
+      if (type.includes('PROMO') || type.includes('VOUCHER') || type.includes('GIFT')) 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;
+      const key = normalizeLineLabelForCompare(line.label);
+      if (!key) continue;
+      feeUnitByLabel.set(key, amount / qty);
+    }
+    return feeUnitByLabel;
+  }, [originalReceipt?.lineItems, initialValues?.bookingItems]);
+
+  const changeFlowInitialTicketQtyByCategory = useMemo(() => {
+    const qtyByCategory = new Map<string, number>();
+    if (!initialValues?.bookingItems?.length) return qtyByCategory;
+    for (const item of initialValues.bookingItems) {
+      const category = item.category?.trim().toUpperCase();
+      if (!category) continue;
+      qtyByCategory.set(category, Math.max(0, Number(item.count) || 0));
+    }
+    return qtyByCategory;
+  }, [initialValues?.bookingItems]);
+  const changeFlowInitialTicketCount = useMemo(() => {
+    let sum = 0;
+    for (const qty of changeFlowInitialTicketQtyByCategory.values()) sum += qty;
+    return sum;
+  }, [changeFlowInitialTicketQtyByCategory]);
+  const changeFlowOutboundMatchesOriginalSelection = useMemo(() => {
+    if (!selectedAvailability || !initialValues?.dateTime) return false;
+    const initialAvailabilityId = initialValues.availabilityId?.trim();
+    const selectedAvailabilityId = selectedAvailability.availabilityId?.trim();
+    const idsMatch =
+      Boolean(initialAvailabilityId && selectedAvailabilityId) &&
+      initialAvailabilityId === selectedAvailabilityId;
+    if (idsMatch) return true;
+    // Same wall time + same product option (ids may rotate on refresh).
+    const selectedMs = parseAvailabilityDateTime(selectedAvailability.dateTime).getTime();
+    const initialMs = parseAvailabilityDateTime(initialValues.dateTime).getTime();
+    if (selectedMs !== initialMs) return false;
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const initialOpt = changeFlowResolvedInitialProductOptionId;
+    if (selectedOpt != null && initialOpt != null) {
+      return selectedOpt === initialOpt;
+    }
+    const legacyInitial = initialValues.productOptionId?.trim() || null;
+    const legacySelected = selectedAvailability.productOptionId?.trim() || null;
+    return !legacySelected || !legacyInitial || legacySelected === legacyInitial;
+  }, [
+    selectedAvailability,
+    initialValues?.availabilityId,
+    initialValues?.dateTime,
+    initialValues?.productOptionId,
+    changeFlowResolvedInitialProductOptionId,
+  ]);
+
+  /**
+   * Rule A (exact locked ticket/fee units): same **calendar** departure day and same **product option** as the booking.
+   * A different departure time on that day with the same PO still counts as unchanged (not tied to matching availability id).
+   */
+  const changeFlowTicketPricingUnchangedItinerary = useMemo(() => {
+    if (!selectedAvailability || !initialValues?.dateTime?.trim()) return false;
+    let initialDay: string;
+    try {
+      initialDay = formatInTimeZone(
+        parseAvailabilityDateTime(initialValues.dateTime.trim()),
+        companyTimezone,
+        'yyyy-MM-dd',
+      );
+    } catch {
+      return false;
+    }
+    if (!selectedDate || selectedDate !== initialDay) return false;
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const initialOpt = changeFlowResolvedInitialProductOptionId;
+    if (selectedOpt != null && initialOpt != null) {
+      return selectedOpt === initialOpt;
+    }
+    const legacyInitial = initialValues.productOptionId?.trim() || null;
+    const legacySelected = selectedAvailability.productOptionId?.trim() || null;
+    return Boolean(legacySelected && legacyInitial && legacySelected === legacyInitial);
+  }, [
+    selectedDate,
+    selectedAvailability,
+    initialValues?.dateTime,
+    initialValues?.productOptionId,
+    companyTimezone,
+    changeFlowResolvedInitialProductOptionId,
+  ]);
+
+  const changeFlowProtectedReceiptPricing = useMemo((): ChangeFlowProtectedReceiptPricing => {
+    return changeFlowTicketPricingUnchangedItinerary ? 'exact_from_receipt' : 'max_with_catalog';
+  }, [changeFlowTicketPricingUnchangedItinerary]);
+
+  const changeFlowReturnMatchesOriginalSelection = useMemo(() => {
+    const initialReturnAvailabilityId = initialValues?.returnAvailabilityId?.trim() || null;
+    const selectedReturnAvailabilityId = selectedReturnOption?.returnAvailabilityId?.trim() || null;
+    const initialReturnDt = initialValues?.returnDateTime?.trim() || null;
+    const selectedReturnDt = selectedReturnOption?.dateTime?.trim() || null;
+
+    if (!selectedReturnAvailabilityId) {
+      return initialReturnAvailabilityId == null;
+    }
+    if (initialReturnAvailabilityId && selectedReturnAvailabilityId) {
+      if (initialReturnAvailabilityId === selectedReturnAvailabilityId) return true;
+      if (initialReturnDt && selectedReturnDt) {
+        return (
+          parseAvailabilityDateTime(initialReturnDt).getTime() ===
+          parseAvailabilityDateTime(selectedReturnDt).getTime()
+        );
+      }
+      return false;
+    }
+    // Bookings often store returnDateTime without returnAvailabilityId; still the same return if wall times match.
+    if (!initialReturnAvailabilityId && initialReturnDt && selectedReturnDt) {
+      return (
+        parseAvailabilityDateTime(initialReturnDt).getTime() ===
+        parseAvailabilityDateTime(selectedReturnDt).getTime()
+      );
+    }
+    return false;
+  }, [
+    initialValues?.returnAvailabilityId,
+    initialValues?.returnDateTime,
+    selectedReturnOption?.returnAvailabilityId,
+    selectedReturnOption?.dateTime,
+  ]);
+
+  /**
+   * Mirrors BE `returnPricingRuleA` for the return row: receipt floor exists, unchanged outbound itinerary, and selected
+   * return **`returnAvailabilityId` equals the booking’s** (strict id match; no wall-time fallback).
+   */
+  const changeFlowReturnPricingRuleA = useMemo(() => {
+    if (!changeFlowApplyReceiptPaidFloors) return false;
+    if (effectiveChangeFlowReturnUnitFloorPerPerson == null) return false;
+    if (!changeFlowTicketPricingUnchangedItinerary) return false;
+    const booked = initialValues?.returnAvailabilityId?.trim() || null;
+    const selected = selectedReturnOption?.returnAvailabilityId?.trim() || null;
+    return Boolean(booked && selected && booked === selected);
+  }, [
+    changeFlowApplyReceiptPaidFloors,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+    changeFlowTicketPricingUnchangedItinerary,
+    initialValues?.returnAvailabilityId,
+    selectedReturnOption?.returnAvailabilityId,
+  ]);
+
+  /**
+   * Self-serve: every return slot shows ≥ per-person paid on the receipt (quote overrides cannot undercut).
+   * Same floor whether the guest changes calendar date, product option, or return time — not tied to “same slot as booking”.
+   */
+  const returnOptionsWithFloor = useMemo(() => {
+    const options = selectedAvailability?.returnOptions ?? [];
+    const serverReturnMap = latestChangeQuote?.serverPreview?.returnOptionPriceByReturnAvailabilityId;
+    const floor = effectiveChangeFlowReturnUnitFloorPerPerson;
+    const applyReturnFloor = floor != null && true;
+    return options.map((opt) => {
+      const vacancyCredit = changeFlowSeatCreditForReturnAvailabilityId(opt.returnAvailabilityId);
+      const adjustedVacancies = Math.max(0, opt.vacancies ?? 0) + vacancyCredit;
+      const rawPerPerson = opt.priceAdjustmentByCurrency?.[currency] ?? 0;
+      const flooredPerPerson = applyReturnFloor ? Math.max(rawPerPerson, floor) : rawPerPerson;
+      let perPerson = flooredPerPerson;
+      if (true && serverReturnMap && opt.returnAvailabilityId) {
+        const sid = opt.returnAvailabilityId.trim();
+        const sp = serverReturnMap[sid];
+        if (sp != null && Number.isFinite(sp)) {
+          perPerson = sp;
+        }
+      }
+      if (applyReturnFloor && floor != null) {
+        perPerson = Math.max(perPerson, floor);
+      }
+      if (perPerson === rawPerPerson && adjustedVacancies === (opt.vacancies ?? 0)) return opt;
+      return {
+        ...opt,
+        vacancies: adjustedVacancies,
+        priceAdjustmentByCurrency: {
+          ...(opt.priceAdjustmentByCurrency ?? {}),
+          [currency]: perPerson,
+        },
+      };
+    });
+  }, [
+    selectedAvailability?.returnOptions,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+    true,
+    currency,
+    changeFlowSeatCreditForReturnAvailabilityId,
+    latestChangeQuote?.serverPreview?.returnOptionPriceByReturnAvailabilityId,
+  ]);
+
+  const selectedReturnOptionWithFloor = useMemo(() => {
+    if (!selectedReturnOption) return selectedReturnOption;
+    const floor = effectiveChangeFlowReturnUnitFloorPerPerson;
+    const applyReturnFloor = floor != null && true;
+    const rawPerPerson = selectedReturnOption.priceAdjustmentByCurrency?.[currency] ?? 0;
+    let perPerson = rawPerPerson;
+    const serverReturnMap = latestChangeQuote?.serverPreview?.returnOptionPriceByReturnAvailabilityId;
+    if (true && serverReturnMap && selectedReturnOption.returnAvailabilityId) {
+      const sid = selectedReturnOption.returnAvailabilityId.trim();
+      const sp = serverReturnMap[sid];
+      if (sp != null && Number.isFinite(sp)) {
+        perPerson = sp;
+      }
+    }
+    if (applyReturnFloor && floor != null) {
+      perPerson = Math.max(perPerson, floor);
+    }
+    if (perPerson === rawPerPerson) return selectedReturnOption;
+    return {
+      ...selectedReturnOption,
+      priceAdjustmentByCurrency: {
+        ...(selectedReturnOption.priceAdjustmentByCurrency ?? {}),
+        [currency]: perPerson,
+      },
+    };
+  }, [
+    selectedReturnOption,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+    true,
+    currency,
+    latestChangeQuote?.serverPreview?.returnOptionPriceByReturnAvailabilityId,
+  ]);
+
+  /** Order-summary return row uses self-serve floors via [selectedReturnOptionWithFloor]; provider stays catalog-only. */
+  const returnOptionForOrderSummary = useMemo(
+    () => selectedReturnOptionWithFloor,
+    [selectedReturnOptionWithFloor],
+  );
+  const effectiveSelectedPickupVacancies = useMemo(() => {
+    if (!selectedAvailability) return 0;
+    const seatCredit = changeFlowSeatCreditForOutboundAvailability(selectedAvailability);
+    return Math.max(0, selectedAvailability.vacancies ?? 0) + seatCredit;
+  }, [selectedAvailability, changeFlowSeatCreditForOutboundAvailability]);
+  const effectiveSelectedReturnVacancies = useMemo(() => {
+    if (!selectedReturnOption) return null;
+    const seatCredit = changeFlowSeatCreditForReturnAvailabilityId(
+      selectedReturnOption.returnAvailabilityId
+    );
+    return Math.max(0, selectedReturnOption.vacancies ?? 0) + seatCredit;
+  }, [selectedReturnOption, changeFlowSeatCreditForReturnAvailabilityId]);
+  
+  // Ticket prices: use breakdown final price so booking flow total matches the price breakdown. All conversion in mid-layer.
+  const pricing = useMemo(
+    () =>
+      buildPricingFromAvailability(
+        selectedAvailability,
+        activeOptions,
+        precomputedPricesByOption,
+        currency,
+        pricingConfig,
+        hasFees,
+        isSimplifiedPricingView,
+      ),
+    [selectedAvailability, currency, hasFees, pricingConfig, precomputedPricesByOption, activeOptions, isSimplifiedPricingView],
+  );
+
+  /** Quote `ticketUnitPriceByCategory` overrides catalog units for ticket rows (customer self-serve only). */
+  const pricingForTicketSelector = useMemo(() => {
+    const m = latestChangeQuote?.serverPreview?.ticketUnitPriceByCategory;
+    if (false || !m) return pricing;
+    return pricing.map((r) => {
+      const u = m[r.category.toUpperCase()];
+      if (u == null || !Number.isFinite(u)) return r;
+      return {
+        ...r,
+        price: u,
+        priceCAD: u,
+        baseInDisplayCurrency: u,
+      };
+    });
+  }, [pricing, latestChangeQuote?.serverPreview?.ticketUnitPriceByCategory, true]);
+
+  // 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).
+  // Self-serve change: use quote ticket units (pricingForTicketSelector) so Rule B `liveUnit` matches BE `calculatePrice`,
+  // not only the availability tile — avoids drift vs ticketUnitPriceByCategory / list column.
+  const orderSummary: OrderSummary = useMemo(
+    () =>
+      computeOrderSummary(
+        quantities,
+        pricingForTicketSelector,
+        returnOptionForOrderSummary,
+        pricingConfig ?? null,
+        currency,
+        hasFees,
+        cancellationPolicyId
+      ),
+    [
+      quantities,
+      pricingForTicketSelector,
+      returnOptionForOrderSummary,
+      pricingConfig,
+      currency,
+      hasFees,
+      cancellationPolicyId,
+    ]
+  );
+
+  const { totalQuantity, subtotal, tax, total: totalFromSummary, feeLineItems, returnPriceAdjustment, cancellationPolicyFee, isTaxIncludedInPrice, ticketLineItems } = orderSummary;
+  const changeFlowProtectedTicketSubtotal = useMemo(() => {
+    const currentTicketSubtotal = ticketLineItems.reduce(
+      (sum, line) => sum + Math.max(0, Number(line.itemTotal) || 0),
+      0,
+    );
+    if (!changeFlowApplyReceiptPaidFloors) return currentTicketSubtotal;
+    return ticketLineItems.reduce((sum, line) => {
+      const category = line.category?.trim().toUpperCase();
+      const qty = Math.max(0, Number(line.qty) || 0);
+      if (!category || qty <= 0) return sum;
+      return (
+        sum +
+        changeFlowTicketLineTotalWithReceiptFloor({
+          qty,
+          baselineQtyForCategory: changeFlowInitialTicketQtyByCategory.get(category) ?? 0,
+          receiptUnitFloor: changeFlowTicketBookedUnitPriceByCategory.get(category),
+          liveLineTotal: Number(line.itemTotal) || 0,
+          protectedReceiptPricing: changeFlowProtectedReceiptPricing,
+        })
+      );
+    }, 0);
+  }, [
+    changeFlowApplyReceiptPaidFloors,
+    ticketLineItems,
+    changeFlowTicketBookedUnitPriceByCategory,
+    changeFlowInitialTicketQtyByCategory,
+    changeFlowProtectedReceiptPricing,
+  ]);
+  /** Round-trip party limit: both legs must fit — use the tighter of outbound vs return vacancies. */
+  const effectivePartySizeCap = useMemo(() => {
+    if (!selectedAvailability) return 0;
+    const outboundSeatCredit =
+      changeFlowOutboundMatchesOriginalSelection && changeFlowInitialTicketCount > 0
+        ? changeFlowInitialTicketCount
+        : 0;
+    const outbound = Math.max(0, selectedAvailability.vacancies ?? 0) + outboundSeatCredit;
+    if (selectedReturnOption == null) return outbound;
+    const returnSeatCredit =
+      changeFlowReturnMatchesOriginalSelection && changeFlowInitialTicketCount > 0
+        ? changeFlowInitialTicketCount
+        : 0;
+    const returnCap = Math.max(0, selectedReturnOption.vacancies ?? 0) + returnSeatCredit;
+    return Math.min(outbound, returnCap);
+  }, [
+    selectedAvailability,
+    selectedReturnOption,
+    changeFlowInitialTicketCount,
+    changeFlowOutboundMatchesOriginalSelection,
+    changeFlowReturnMatchesOriginalSelection,
+  ]);
+
+  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 ?? (t('booking.flexibleCancellation') || 'Flexible cancellation');
+
+  // When return selection (or refreshed availabilities) caps the party below current ticket counts, trim tickets (non-admin).
+  useEffect(() => {
+    if (false || !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,
+    false,
+    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 currentTicketSubtotal = useMemo(
+    () => ticketLineItems.reduce((sum, line) => sum + Math.max(0, Number(line.itemTotal) || 0), 0),
+    [ticketLineItems],
+  );
+  const changeFlowInitialTotalTicketQty = changeFlowInitialTicketCount;
+  const currentFeeSubtotal = useMemo(
+    () => feeLineItems.reduce((sum, line) => sum + Math.max(0, Number(line.totalAmount) || 0), 0),
+    [feeLineItems],
+  );
+  const changeFlowProtectedFeeSubtotal = useMemo(() => {
+    if (!changeFlowApplyReceiptPaidFloors || totalQuantity <= 0) return currentFeeSubtotal;
+    const initialParty = changeFlowInitialTicketCount;
+    return feeLineItems.reduce((sum, line) => {
+      const key = normalizeLineLabelForCompare(line.name || '');
+      const bookedFeePerPerson = key ? changeFlowBookedFeeUnitByNormalizedLabel.get(key) : undefined;
+      return (
+        sum +
+        changeFlowFeeLineTotalWithReceiptFloor({
+          totalQuantity,
+          initialTicketCount: initialParty,
+          bookedFeePerPerson,
+          liveFeeLineTotal: Number(line.totalAmount) || 0,
+          protectedReceiptPricing: changeFlowProtectedReceiptPricing,
+        })
+      );
+    }, 0);
+  }, [
+    changeFlowApplyReceiptPaidFloors,
+    totalQuantity,
+    currentFeeSubtotal,
+    feeLineItems,
+    changeFlowBookedFeeUnitByNormalizedLabel,
+    changeFlowInitialTicketCount,
+    changeFlowProtectedReceiptPricing,
+  ]);
+  /** Catalog (unfloored) return price per person — same slot as [selectedReturnOption] on the raw availability list. */
+  const returnOptionCatalogPerPerson = useMemo(() => {
+    if (!selectedReturnOption?.returnAvailabilityId || !selectedAvailability?.returnOptions?.length) {
+      return null;
+    }
+    const raw = selectedAvailability.returnOptions.find(
+      (o) => o.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
+    );
+    const v = raw?.priceAdjustmentByCurrency?.[currency];
+    return typeof v === 'number' && Number.isFinite(v) ? v : null;
+  }, [selectedReturnOption?.returnAvailabilityId, selectedAvailability?.returnOptions, currency]);
+
+  /**
+   * Customer self-serve: return row total matches BE protected vs incremental headcount when a receipt return floor exists
+   * (`changeFlowReturnLineTotalWithReceiptFloor`). Catalog-only return uses `returnPriceAdjustment` from order summary.
+   */
+  const changeFlowProtectedReturnAdjustment = useMemo(() => {
+    if (totalQuantity <= 0) return returnPriceAdjustment;
+    if (false) return returnPriceAdjustment;
+    if (effectiveChangeFlowReturnUnitFloorPerPerson == null) return returnPriceAdjustment;
+    const livePerPerson =
+      returnOptionCatalogPerPerson ?? (selectedReturnOption?.priceAdjustmentByCurrency?.[currency] ?? 0);
+    return changeFlowReturnLineTotalWithReceiptFloor({
+      totalPersons: totalQuantity,
+      baselineParty: changeFlowInitialTicketCount,
+      livePerPerson,
+      receiptFloorPerPerson: effectiveChangeFlowReturnUnitFloorPerPerson,
+      returnRuleA: changeFlowReturnPricingRuleA,
+    });
+  }, [
+    totalQuantity,
+    returnPriceAdjustment,
+    false,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+    selectedReturnOption,
+    returnOptionCatalogPerPerson,
+    currency,
+    changeFlowInitialTicketCount,
+    changeFlowReturnPricingRuleA,
+  ]);
+
+  /** Return row amount for PriceSummary, Stripe breakdown, and CheckoutModal (catalog vs protected same-product-option). */
+  const checkoutReturnLineAmount = useMemo(() => {
+    if (true) {
+      return changeFlowProtectedReturnAdjustment;
+    }
+    if (changeFlowApplyReceiptPaidFloors) {
+      return changeFlowProtectedReturnAdjustment;
+    }
+    return returnPriceAdjustment;
+  }, [
+    true,
+    changeFlowApplyReceiptPaidFloors,
+    changeFlowProtectedReturnAdjustment,
+    returnPriceAdjustment,
+  ]);
+
+  /** Ticket lines with receipt floors applied for breakdown/modal (matches protected ticket subtotal). */
+  const ticketLineItemsForChangeFlowDisplay = useMemo(() => {
+    if (!changeFlowApplyReceiptPaidFloors) return ticketLineItems;
+    return ticketLineItems.map((line) => {
+      const category = line.category?.trim().toUpperCase();
+      const qty = Math.max(0, Number(line.qty) || 0);
+      if (!category || qty <= 0) return line;
+      const newTotal = changeFlowTicketLineTotalWithReceiptFloor({
+        qty,
+        baselineQtyForCategory: changeFlowInitialTicketQtyByCategory.get(category) ?? 0,
+        receiptUnitFloor: changeFlowTicketBookedUnitPriceByCategory.get(category),
+        liveLineTotal: Number(line.itemTotal) || 0,
+        protectedReceiptPricing: changeFlowProtectedReceiptPricing,
+      });
+      return { ...line, itemTotal: newTotal };
+    });
+  }, [
+    changeFlowApplyReceiptPaidFloors,
+    ticketLineItems,
+    changeFlowTicketBookedUnitPriceByCategory,
+    changeFlowInitialTicketQtyByCategory,
+    changeFlowProtectedReceiptPricing,
+  ]);
+
+  const effectiveSubtotalBeforeAddOns =
+    changeFlowApplyReceiptPaidFloors
+      ? subtotal -
+        currentTicketSubtotal -
+        currentFeeSubtotal -
+        returnPriceAdjustment +
+        changeFlowProtectedTicketSubtotal +
+        changeFlowProtectedFeeSubtotal +
+        changeFlowProtectedReturnAdjustment
+      : subtotal;
+  const effectiveSubtotal = effectiveSubtotalBeforeAddOns + 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 [];
+    const returnLineAmount = checkoutReturnLineAmount;
+    /** Show row when a return is selected and either the priced amount is non-zero or a receipt return floor exists (catalog slot can be $0 while floored total is not). */
+    const showReturnLine =
+      Boolean(selectedReturnOption) &&
+      (Math.abs(returnLineAmount) > 0.0005 || effectiveChangeFlowReturnUnitFloorPerPerson != null);
+    return [
+      ...ticketLineItemsForChangeFlowDisplay.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',
+          lineKey: undefined,
+          editable: false,
+          category: line.category,
+          qty: line.qty,
+          itemTotal: line.itemTotal,
+          breakdown,
+        };
+      }),
+      ...(showReturnLine
+        ? [
+            {
+              kind: 'line' as const,
+              label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+              amount: returnLineAmount,
+              type: 'return',
+            },
+          ]
+        : []),
+      ...(cancellationPolicyFee > 0 && selectedCancellationPolicy
+        ? [
+            {
+              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,
+          lineKey: undefined,
+          editable: false,
+          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,
+    ticketLineItemsForChangeFlowDisplay,
+    pricing,
+    getPriceBreakdown,
+    selectedReturnOption,
+    checkoutReturnLineAmount,
+    totalQuantity,
+    t,
+    cancellationPolicyFee,
+    selectedCancellationPolicy,
+    effectiveCancellationPolicyLabel,
+    feeLineItemsWithAddOns,
+    feeLineItems,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+  ]);
+
+  const checkoutPriceSummaryLinesForCheckout = useMemo(() => {
+    let raw: PriceSummaryLine[];
+    if (suppressSelfServeCurrencyUi && selfServePricingConfirmed) {
+      const serverLines = latestChangeQuote?.serverPreview?.priceSummaryLines;
+      raw = serverLines && serverLines.length > 0 ? serverLines : checkoutPriceSummaryLines;
+    } else {
+      raw = checkoutPriceSummaryLines;
+    }
+    return omitZeroAmountPromoDiscountSummaryLines(raw);
+  }, [
+    suppressSelfServeCurrencyUi,
+    selfServePricingConfirmed,
+    checkoutPriceSummaryLines,
+    latestChangeQuote?.serverPreview?.priceSummaryLines,
+  ]);
+
+  /** Receipt/server lines already include {@link PriceSummary}'s TAX row — do not also pass `taxAmount` or it duplicates. */
+  const priceSummaryLinesIncludeTaxRow = useMemo(
+    () =>
+      checkoutPriceSummaryLinesForCheckout.some(
+        (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX',
+      ),
+    [checkoutPriceSummaryLinesForCheckout],
+  );
+
+  // 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 =
+    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;
+  /**
+   * FE cart rollup for line math, breakdowns, and `clientProposedTotal` hint to the API. Self-serve **footer** totals
+   * prefer `latestChangeQuote` once quote succeeds — this value is not an alternate source of truth for checkout.
+   */
+  const changeFlowNewBookingTotal = resolveChangeFlowNewBookingTotal({
+    cartTotal: totalPrice,
+    originalReceiptTotal: originalReceipt?.total,
+  });
+
+  /** When quote blocks checkout, compare FE vs server lines for debugging (prefers `pricingDriftDetail` from API when sent). */
+  const quoteBlockedPricingDrift = useMemo(() => {
+    if (!suppressSelfServeCurrencyUi || latestChangeQuote?.canProceed !== false) return null;
+    if (!selectedAvailability || totalQuantity <= 0) return null;
+
+    const api = latestChangeQuote.pricingDriftDetail;
+    const currencyForFmt = (latestChangeQuote.currency ?? currency) as Currency;
+
+    const clientMappedFromApi = mapQuoteLineItemsToPriceSummaryLines(api?.clientLineItems);
+    const useBeClientLines = clientMappedFromApi.length > 0;
+    const clientLinesForMerge = useBeClientLines ? clientMappedFromApi : checkoutPriceSummaryLines;
+
+    const serverMappedFromApi = mapQuoteLineItemsToPriceSummaryLines(api?.serverLineItems);
+    const useBeServerLines = serverMappedFromApi.length > 0;
+    const serverLinesForMerge = useBeServerLines
+      ? serverMappedFromApi
+      : (latestChangeQuote.serverPreview?.priceSummaryLines ?? []);
+
+    const clientTotalForDrift =
+      api?.clientTotalMajorUnits != null && Number.isFinite(api.clientTotalMajorUnits)
+        ? api.clientTotalMajorUnits
+        : useBeClientLines
+          ? sumPriceSummaryLinesMajorUnits(clientMappedFromApi)
+          : changeFlowNewBookingTotal;
+
+    let totalDelta: number | null = null;
+    if (api?.deltaMajorUnits != null && Number.isFinite(api.deltaMajorUnits)) {
+      totalDelta = roundMoney(api.deltaMajorUnits);
+    }
+
+    /**
+     * Server “price check” total: explicit API fields → sum of BE server lines → derive from delta → receipt preview totals.
+     */
+    let serverTotalFromQuote: number | undefined =
+      api?.serverTotalMajorUnits != null && Number.isFinite(api.serverTotalMajorUnits)
+        ? api.serverTotalMajorUnits
+        : undefined;
+    if (serverTotalFromQuote == null && useBeServerLines) {
+      serverTotalFromQuote = sumPriceSummaryLinesMajorUnits(serverMappedFromApi);
+    }
+    if (serverTotalFromQuote == null && totalDelta != null) {
+      serverTotalFromQuote = roundMoney(clientTotalForDrift - totalDelta);
+    }
+    if (serverTotalFromQuote == null) {
+      serverTotalFromQuote =
+        latestChangeQuote.serverDisplay?.total ??
+        latestChangeQuote.serverPreview?.totalNewBooking ??
+        undefined;
+    }
+    if (totalDelta == null && serverTotalFromQuote != null && Number.isFinite(serverTotalFromQuote)) {
+      totalDelta = roundMoney(clientTotalForDrift - serverTotalFromQuote);
+    }
+
+    const mergedForDrift = mergePriceSummaryLinesForDrift(clientLinesForMerge, serverLinesForMerge);
+    let rows =
+      api?.lineComparisons && api.lineComparisons.length > 0
+        ? enrichLineComparisonsWithMergedRows(api.lineComparisons, mergedForDrift)
+        : mergedForDrift;
+
+    const hasTotalDelta = totalDelta != null && Math.abs(totalDelta) >= 0.005;
+
+    if (rows.length === 0 && !hasTotalDelta) {
+      return null;
+    }
+
+    const usesBeLinePayload = useBeClientLines || useBeServerLines;
+
+    const ticketCartDetail = ticketLineItemsForChangeFlowDisplay
+      .filter((l) => (l.qty ?? 0) > 0)
+      .map((line) => {
+        const cat = line.category?.trim().toUpperCase() ?? '';
+        const rate = pricingForTicketSelector.find((r) => r.category.toUpperCase() === cat);
+        const rawList = rate?.baseInDisplayCurrency ?? rate?.priceCAD;
+        const listUnit =
+          rawList != null && Number.isFinite(Number(rawList))
+            ? Number(rawList)
+            : line.qty > 0
+              ? line.itemTotal / line.qty
+              : 0;
+        return {
+          category: cat,
+          qty: line.qty,
+          listUnitMajor: roundMoney(listUnit),
+          effectiveUnitMajor: roundMoney(line.qty > 0 ? line.itemTotal / line.qty : 0),
+          lineTotalMajor: line.itemTotal,
+        };
+      });
+
+    return (
+      <ChangeBookingPricingDriftPanel
+        rows={rows}
+        clientTotal={clientTotalForDrift}
+        serverTotal={serverTotalFromQuote}
+        totalDelta={totalDelta}
+        currency={currencyForFmt}
+        locale={locale}
+        ticketCartDetail={ticketCartDetail.length > 0 ? ticketCartDetail : undefined}
+        serverTicketPricingTrace={latestChangeQuote.ticketPricingTrace ?? undefined}
+        footnote={
+          usesBeLinePayload
+            ? 'Lines use pricingDriftDetail.clientLineItems / serverLineItems when the quote includes them; totals prefer explicit major-unit fields, then sums of those lines, then the live cart / receipt preview.'
+            : undefined
+        }
+      />
+    );
+  }, [
+    suppressSelfServeCurrencyUi,
+    latestChangeQuote,
+    selectedAvailability,
+    totalQuantity,
+    checkoutPriceSummaryLines,
+    changeFlowNewBookingTotal,
+    currency,
+    locale,
+    ticketLineItemsForChangeFlowDisplay,
+    pricingForTicketSelector,
+  ]);
+
+  /** Replaces PriceSummary with non-numeric status until quote returns authoritative totals (no FE dollar amounts). */
+  const selfServeCheckoutPlaceholder = useMemo(() => {
+    if (!suppressSelfServeCurrencyUi || !selectedAvailability || totalQuantity <= 0) return undefined;
+    if (selfServePricingConfirmed) return undefined;
+    if (changeQuoteLoading) {
+      return (
+        <div className="rounded-lg border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-600">
+          {t('booking.updatingPrice') !== 'booking.updatingPrice' ? t('booking.updatingPrice') : 'Getting confirmed price…'}
+        </div>
+      );
+    }
+    if (changeQuoteFetchError) {
+      return (
+        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
+          {changeQuoteFetchError}
+        </div>
+      );
+    }
+    if (latestChangeQuote?.canProceed === false) {
+      return (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
+          <div>{latestChangeQuote.reasonIfBlocked ?? 'This booking change is not available.'}</div>
+          {quoteBlockedPricingDrift}
+        </div>
+      );
+    }
+    return (
+      <div className="rounded-lg border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-600">
+        Prices update once your selection is confirmed with our booking system.
+      </div>
+    );
+  }, [
+    suppressSelfServeCurrencyUi,
+    selectedAvailability,
+    totalQuantity,
+    selfServePricingConfirmed,
+    changeQuoteLoading,
+    changeQuoteFetchError,
+    latestChangeQuote,
+    quoteBlockedPricingDrift,
+    t,
+  ]);
+
+  const changeSelectionDetails = useMemo(() => {
+    if (!initialValues) {
+      return {
+        hasChangesFromInitial: false,
+        hasOperationalChangesFromInitial: false,
+        dateChanged: false,
+        ticketsChanged: false,
+        optionChanged: false,
+        pickupChanged: false,
+        countsChanged: false,
+        addOnsChanged: false,
+        returnChanged: false,
+      };
+    }
+    if (!selectedAvailability) {
+      return {
+        hasChangesFromInitial: false,
+        hasOperationalChangesFromInitial: false,
+        dateChanged: false,
+        ticketsChanged: false,
+        optionChanged: false,
+        pickupChanged: false,
+        countsChanged: false,
+        addOnsChanged: false,
+        returnChanged: 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;
+    const initialOpt =
+      changeFlowResolvedInitialProductOptionId ??
+      (initialValues.productOptionId?.trim() || null);
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const optionChanged = Boolean(
+      selectedOpt != null && initialOpt != null && initialOpt !== selectedOpt
+    );
+    const normalizePickupId = (value: string | null | undefined) => {
+      const trimmed = value?.trim();
+      return trimmed ? trimmed : null;
+    };
+    const pickupChanged =
+      normalizePickupId(initialValues.pickupLocationId ?? null) !==
+      normalizePickupId(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) {
+        if (initialReturnId === selectedReturnId) {
+          returnChanged = false;
+        } else if (initialReturnDt && selectedReturnDt) {
+          // Some refreshes can rotate return availability IDs for the same departure time.
+          returnChanged =
+            parseAvailabilityDateTime(initialReturnDt).getTime() !==
+            parseAvailabilityDateTime(selectedReturnDt).getTime();
+        } else {
+          returnChanged = true;
+        }
+      } 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,
+      // Authoritative for "real user change" gating in provider dashboard:
+      // ignore option-id noise and only consider user-visible booking deltas.
+      hasOperationalChangesFromInitial:
+        dateChanged ||
+        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),
+      optionChanged,
+      pickupChanged,
+      countsChanged,
+      addOnsChanged,
+      returnChanged,
+    };
+  }, [
+    initialValues,
+    changeFlowResolvedInitialProductOptionId,
+    selectedAvailability,
+    selectedReturnOption,
+    implicitReturnBaselineId,
+    pickupLocationId,
+    quantities,
+    addOnSelections,
+    initialAddOnMinQtyByKey,
+  ]);
+  const hasChangeSelection = changeSelectionDetails.hasChangesFromInitial;
+
+  const changeFlowNeedsServerPrice =
+    true &&
+    hasChangeSelection &&
+    !!initialValues?.bookingReference?.trim() &&
+    !!lastName.trim();
+
+  const isChangeQuoteBlocked = true && latestChangeQuote?.canProceed === false;
+  const requiresReturnInChangeFlow = true && !!initialValues?.returnAvailabilityId?.trim();
+  const missingRequiredReturnSelection = requiresReturnInChangeFlow && !selectedReturnOption;
+
+  const changeFlowSubmitDisabled =
+    missingRequiredReturnSelection ||
+    (true &&
+      changeFlowNeedsServerPrice &&
+      (changeQuoteLoading || (!latestChangeQuote && !changeQuoteFetchError)));
+
+  const providerTotalsPreview = null;
+  const hasEffectiveChangeSelection = hasChangeSelection;
+
+  const displayedChangeAmounts = resolveChangeFlowDisplayedAmounts({
+    providerPreview: providerTotalsPreview,
+    serverQuotePreview:
+      true && latestChangeQuote?.serverDisplay
+        ? latestChangeQuote.serverDisplay
+        : null,
+    fromCart: {
+      total: changeFlowNewBookingTotal,
+      subtotal: effectiveSubtotal,
+      tax: effectiveTax,
+    },
+  });
+  const displayChangeFlowProposedTotal = displayedChangeAmounts.total;
+  const displayChangeFlowSubtotal = displayedChangeAmounts.subtotal;
+  const displayChangeFlowTax = displayedChangeAmounts.tax;
+
+  const changeFlowClientEstimateDue = (() => {
+    if (!originalReceipt) return totalPrice;
+    // Customer self-serve: amount due comes from POST .../change/quote (`amountDueCents` / priceDiff), not FE delta math.
+    if (true && latestChangeQuote != null && !changeQuoteFetchError) {
+      return normalizeNearZeroOwed(latestChangeQuote.priceDiff);
+    }
+    return changeFlowBalanceVsOriginal({
+      newTotal: displayChangeFlowProposedTotal,
+      originalReceiptTotal: originalReceipt.total,
+      audience: 'customer',
+    });
+  })();
+
+  const changeFlowAmountDueRaw = changeFlowClientEstimateDue;
+  const changeFlowAmountDue = normalizeNearZeroOwed(changeFlowAmountDueRaw);
+
+  const changeCheckoutButtonLabel = (() => {
+    if (!hasEffectiveChangeSelection) 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)';
+  })();
+  /** Partner deferred-invoice path applies to {@link NewBookingFlow} only. */
+  const deferredInvoiceSubmitLabel = undefined;
+
+  const checkoutFormError =
+    (error || '') ||
+    (missingRequiredReturnSelection ? 'Removing return option in self-serve is not available. Please contact support.' : '') ||
+    (true && isChangeQuoteBlocked ? (latestChangeQuote?.reasonIfBlocked ?? '') : '') ||
+    (true ? changeQuoteFetchError ?? '' : '');
+
+  const changeFlowSelectionPreview = useMemo((): ChangeFlowSelectionPreview | 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:
+        originalReceipt
+          ? suppressSelfServeCurrencyUi && !selfServePricingConfirmed
+            ? null
+            : displayChangeFlowProposedTotal
+          : totalPrice,
+      selectionCurrency: currency,
+    };
+  }, [
+    selectedAvailability,
+    totalQuantity,
+    ticketLineItems,
+    computeItineraryDisplay,
+    product.name,
+    changeSelectionDetails,
+    totalPrice,
+    currency,
+    originalReceipt,
+    displayChangeFlowProposedTotal,
+    suppressSelfServeCurrencyUi,
+    selfServePricingConfirmed,
+  ]);
+
+  useEffect(() => {
+    if (!onChangeFlowSelectionPreview) return;
+    const next = changeFlowSelectionPreview;
+    const key =
+      next === null
+        ? 'null'
+        : JSON.stringify({
+            tourName: next.tourName,
+            dateTime: next.dateTime,
+            ticketsLine: next.ticketsLine,
+            itinerarySteps: next.itinerarySteps,
+            dateChanged: next.dateChanged,
+            ticketsChanged: next.ticketsChanged,
+            hasChangesFromInitial: next.hasChangesFromInitial,
+            selectionTotal: next.selectionTotal,
+            selectionCurrency: next.selectionCurrency,
+          });
+    if (key === lastChangeFlowPreviewKeyRef.current) return;
+    lastChangeFlowPreviewKeyRef.current = key;
+    onChangeFlowSelectionPreview(next);
+  }, [changeFlowSelectionPreview, onChangeFlowSelectionPreview]);
+
+  useEffect(() => {
+    if (!onPricePreviewChange) return;
+    if (!selectedAvailability || totalQuantity <= 0) {
+      onPricePreviewChange(null);
+      return;
+    }
+    if (suppressSelfServeCurrencyUi && !selfServePricingConfirmed) {
+      onPricePreviewChange(null);
+      return;
+    }
+    onPricePreviewChange({
+      subtotal: originalReceipt ? displayChangeFlowSubtotal : effectiveSubtotal,
+      tax:
+        !isTaxIncludedInPrice
+          ? originalReceipt
+            ? displayChangeFlowTax
+            : effectiveTax
+          : 0,
+      total: originalReceipt ? displayChangeFlowProposedTotal : totalPrice,
+      currency,
+    });
+  }, [
+    onPricePreviewChange,
+    selectedAvailability,
+    totalQuantity,
+    effectiveSubtotal,
+    effectiveTax,
+    displayChangeFlowProposedTotal,
+    displayChangeFlowSubtotal,
+    displayChangeFlowTax,
+    currency,
+    isTaxIncludedInPrice,
+    originalReceipt,
+    totalPrice,
+    suppressSelfServeCurrencyUi,
+    selfServePricingConfirmed,
+  ]);
+
+  /** Debounced server quote so CTA + “amount owed” match PaymentIntent; avoids free confirm when FE estimate ≠ BE. */
+  useEffect(() => {
+    if (false) {
+      setChangeQuoteLoading(false);
+      setChangeQuoteFetchError(null);
+      setLatestChangeQuote(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: changeFlowNewBookingTotal,
+            capacitySeatCredit: {
+              enabled: true,
+              previousPassengerCount: changeFlowInitialTicketCount,
+              previousAvailabilityId: initialValues.availabilityId ?? null,
+              previousReturnAvailabilityId: initialValues.returnAvailabilityId ?? null,
+            },
+          });
+          if (seq !== changeQuoteRequestSeq.current) return;
+          const slice = sliceChangeQuoteForUi(
+            quote,
+            {
+              total: changeFlowNewBookingTotal,
+              subtotal: effectiveSubtotal,
+              tax: effectiveTax,
+            },
+            currency
+          );
+          setLatestChangeQuote(
+            mergeQuoteSliceWithServerPreview(slice, quote, {
+              total: changeFlowNewBookingTotal,
+              subtotal: effectiveSubtotal,
+              tax: effectiveTax,
+            }, currency),
+          );
+        } 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);
+    };
+  }, [
+    true,
+    hasChangeSelection,
+    selectedAvailability,
+    selectedAvailability?.dateTime,
+    selectedAvailability?.productOptionId,
+    initialValues?.bookingReference,
+    lastName,
+    missingRequiredReturnSelection,
+    pickupLocationId,
+    selectedReturnOption?.returnAvailabilityId,
+    quantities,
+    addOnSelections,
+    changeFlowInitialTicketCount,
+    changeFlowNewBookingTotal,
+    effectiveSubtotal,
+    effectiveTax,
+    totalPrice,
+    currency,
+    activeOptions,
+    initialValues?.availabilityId,
+    initialValues?.returnAvailabilityId,
+  ]);
+
+  // 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 (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 (anchor) {
+        const matched = pickOutboundMatchingPreviousSelection(
+          timesForSelectedDate,
+          anchor,
+          companyTimezone,
+          optionsMap
+        );
+        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,
+    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(() => {
+    const hasApiReturnHint =
+      Boolean(initialValues?.returnAvailabilityId?.trim()) ||
+      Boolean(initialValues?.returnDateTime?.trim());
+    if (hasApiReturnHint) {
+      setImplicitReturnBaselineId(null);
+      return;
+    }
+    setImplicitReturnBaselineId(null);
+  }, [
+    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 (returnAnchor) {
+        const fromAnchor = pickReturnMatchingPreviousSelection(
+          sorted,
+          returnAnchor,
+          companyTimezone
+        );
+        changeFlowReturnAnchorRef.current = null;
+        if (fromAnchor) {
+          setSelectedReturnOption(fromAnchor);
+          const hasApiReturnHintFromAnchor =
+            Boolean(initialReturnIdForSelect) || Boolean(initialReturnDtForSelect);
+          if (!hasApiReturnHintFromAnchor) {
+            setImplicitReturnBaselineId((prev) => prev ?? fromAnchor.returnAvailabilityId);
+          }
+          return;
+        }
+      }
+
+      const preferBooked =
+        initialReturnIdForSelect
+          ? sorted.find((opt) => opt.returnAvailabilityId === initialReturnIdForSelect)
+          : undefined;
+      const preferByDateTime =
+        initialReturnDtForSelect && !preferBooked
+          ? sorted.find((opt) => {
+              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);
+        const hasApiReturnHintToSelect =
+          Boolean(initialReturnIdForSelect) || Boolean(initialReturnDtForSelect);
+        if (!hasApiReturnHintToSelect) {
+          setImplicitReturnBaselineId((prev) => prev ?? toSelect.returnAvailabilityId);
+        }
+      }
+    }
+  }, [
+    selectedAvailability,
+    selectedReturnOption,
+    companyTimezone,
+    false,
+    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([]);
+      return;
+    }
+    const optionChanged = prevAvailabilityProductOptionIdRef.current !== availabilityProductOptionId;
+    if (optionChanged) {
+      prevAvailabilityProductOptionIdRef.current = availabilityProductOptionId;
+    }
+    getAddOns(product.companyId, { productOptionId: availabilityProductOptionId, preCheckout: true })
+      .then(setAddOns)
+      .catch(() => setAddOns([]));
+  }, [availabilityProductOptionId, product.companyId]);
+
+  const handleDateSelect = (date: string) => {
+    if (date === selectedDate) return;
+    if (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 (isPartialLaunch) return;
+    if (initialValues?.dateTime?.trim()) return;
+    if (selectedDate !== '') return;
+    if (dates.length === 0) return;
+    if (hasAutoSelectedPartnerDateRef.current) return;
+
+    // Match Calendar: first day where at least one departure can fit the party (self-serve change),
+    // else first day with any inventory; admin fallback unchanged.
+    const firstWithInventory = dates.find((d) => {
+      const rows = availabilitiesByDate[d] ?? [];
+      if (rows.length === 0) return false;
+      if (false) return rows.some((a) => (a.vacancies ?? 0) > 0);
+      if (
+        true &&
+        changeFlowInitialTicketCount > 0
+      ) {
+        return rows.some(
+          (a) => getCalendarEffectiveOutboundVacancies(a) >= changeFlowInitialTicketCount,
+        );
+      }
+      return rows.some((a) => (a.vacancies ?? 0) > 0);
+    });
+    const first = firstWithInventory ?? (false && dates[0] ? dates[0] : undefined);
+    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,
+    isPartialLaunch,
+    initialValues?.dateTime,
+    selectedDate,
+    dates,
+    availabilitiesByDate,
+    false,
+    true,
+    changeFlowInitialTicketCount,
+    getCalendarEffectiveOutboundVacancies,
+    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 = false ? 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 && !false && 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 = [];
+      } 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]);
+
+  // 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) {
+      pendingReservationRef.current = null;
+      cancelReservation(pending.reservationReference).catch(() => {});
+    }
+    // Paid change booking opens checkout without a reservation hold — still must dismiss the modal.
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+  }, []);
+
+  const cancelPendingReservationBestEffort = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (pending) {
+      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 (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: false,
+      });
+
+      // Get the hotel name if a pickup location was selected
+      const selectedPickupLocation = pickupLocationId 
+        ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
+        : null;
+      let changeIntentIdForCheckout: string | undefined;
+      let changeBookingReferenceForPaidFlow: string | undefined;
+
+      {
+        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:
+            latestChangeQuote?.serverDisplay?.total ?? changeFlowNewBookingTotal,
+        });
+        const quoteSlice = sliceChangeQuoteForUi(
+          quote,
+          {
+            total: changeFlowNewBookingTotal,
+            subtotal: effectiveSubtotal,
+            tax: effectiveTax,
+          },
+          currency
+        );
+        changeBookingReferenceForPaidFlow = changeBookingReference;
+        changeIntentIdForCheckout = quoteSlice.changeIntentId ?? undefined;
+        setLatestChangeQuote(
+          mergeQuoteSliceWithServerPreview(quoteSlice, quote, {
+            total: changeFlowNewBookingTotal,
+            subtotal: effectiveSubtotal,
+            tax: effectiveTax,
+          }, currency),
+        );
+        if (!quoteSlice.canProceed) {
+          throw new Error(quote.reasonIfBlocked || 'This booking change cannot be completed right now.');
+        }
+        const serverNewTotalForGuard =
+          quoteSlice.serverDisplay?.total ??
+          quote.proposed?.total ??
+          quote.newReceipt?.total ??
+          changeFlowNewBookingTotal;
+        const feChangeDue = changeFlowBalanceVsOriginal({
+          newTotal: serverNewTotalForGuard,
+          originalReceiptTotal: originalReceipt?.total ?? 0,
+          audience: 'customer',
+        });
+        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.');
+        }
+      }
+      
+      pendingReservationRef.current = null;
+
+      // 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 (no holds reservation — change flow keys off booking reference elsewhere).
+      try {
+        const storedBooking = sessionStorage.getItem('pendingBooking');
+        if (storedBooking) {
+          const booking = JSON.parse(storedBooking);
+          booking.totalPrice = totalPrice;
+          booking.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 = changeFlowBalanceVsOriginal({
+        newTotal: changeFlowNewBookingTotal,
+        originalReceiptTotal: originalReceipt?.total ?? 0,
+        audience: 'customer',
+      });
+      const lines = [
+        ...ticketLineItemsForChangeFlowDisplay.map((line) => ({
+          label: line.category,
+          amount: line.itemTotal,
+          type: 'TICKET' as const,
+          quantity: line.qty,
+        })),
+        ...(checkoutReturnLineAmount !== 0
+          ? [
+              {
+                label: `${t('booking.returnOption') || 'Return option'} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
+                amount: checkoutReturnLineAmount,
+                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',
+      });
+
+      const paymentIntent = await createChangeBookingPaymentIntent(
+            (() => {
+              const id = changeIntentIdForCheckout ?? latestChangeQuote?.changeIntentId;
+              if (!id) {
+                throw new Error('Missing change intent for payment.');
+              }
+              return id;
+            })()
+          );
+
+
+      const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItemsForChangeFlowDisplay.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: changeBookingReferenceForPaidFlow ?? '',
+        reservationExpiration: undefined,
+        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:
+          true && 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: checkoutReturnLineAmount,
+        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:
+          true && originalReceipt
+            ? {
+                previousTotal: originalReceipt.total,
+                newTotal: displayChangeFlowProposedTotal,
+                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);
+    }
+  };
+
+
+
+  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">
+      {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}
+        />
+      )}
+      {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={true}
+                selectableSoldOutDate={changeFlowOriginalDate}
+                partySizeRequiredForCalendarSelection={
+                  true && !false && changeFlowInitialTicketCount > 0
+                    ? changeFlowInitialTicketCount
+                    : undefined
+                }
+                getEffectiveVacancies={
+                  true && !false && changeFlowInitialTicketCount > 0
+                    ? getCalendarEffectiveOutboundVacancies
+                    : undefined
+                }
+                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={false}
+                extraDiscountPercent={calendarDiscountPercent}
+                capDiscountBadgesToBookingDate={changeFlowOriginalDate}
+              />
+            </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={false}
+              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={false}
+              t={t}
+              onReturnSelect={(option) => {
+                const raw = selectedAvailability.returnOptions?.find(
+                  (opt) => opt.returnAvailabilityId === option.returnAvailabilityId
+                );
+                setSelectedReturnOption(raw ?? option);
+              }}
+              getStaySummary={calculateStaySummary}
+              suppressPerPersonPrices={false}
+            />
+          )}
+
+          {/* Ticket Selection */}
+          {selectedAvailability && (
+            <TicketSelector
+              pricing={pricingForTicketSelector}
+              quantities={quantities}
+              totalQuantity={totalQuantity}
+              selectedVacancies={effectivePartySizeCap}
+              companyTimezone={companyTimezone}
+              pickupDateTime={selectedAvailability.dateTime}
+              pickupVacancies={effectiveSelectedPickupVacancies}
+              returnDateTime={selectedReturnOption?.dateTime ?? null}
+              returnVacancies={effectiveSelectedReturnVacancies}
+              resourceCount={selectedReturnOption ? null : (selectedAvailability.resourceCount ?? null)}
+              currency={currency}
+              locale={locale}
+              isAdmin={false}
+              isSimplifiedPricingView={isSimplifiedPricingView}
+              t={t}
+              onQuantityChange={handleQuantityChange}
+              minimumQuantities={changeBookingMinimumQuantities}
+              ticketUnitFloorByCategory={
+                changeFlowApplyReceiptPaidFloors
+                  ? changeFlowTicketBookedUnitPriceByCategory
+                  : undefined
+              }
+              suppressUnitPrices={false}
+            />
+          )}
+
+          {/* 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={initialAddOnMinTotalByAddOnId}
+              suppressPrices={false}
+            />
+          )}
+
+          {/* Total and Checkout — shared PriceSummary component */}
+          {selectedAvailability && (
+            <>
+            <CheckoutForm
+                priceSummaryLines={checkoutPriceSummaryLinesForCheckout}
+                replacePriceSummary={selfServeCheckoutPlaceholder}
+                totalPrice={changeFlowAmountDue}
+                totalSummaryLabel={
+                  t('booking.totalOwedForBookingChange') &&
+                  t('booking.totalOwedForBookingChange') !== 'booking.totalOwedForBookingChange'
+                    ? t('booking.totalOwedForBookingChange')
+                    : 'Total owed for booking difference'
+                }
+                subtotal={displayChangeFlowSubtotal}
+                taxAmount={
+                  !isTaxIncludedInPrice &&
+                  displayChangeFlowTax > 0 &&
+                  !priceSummaryLinesIncludeTaxRow
+                    ? displayChangeFlowTax
+                    : 0
+                }
+                taxRate={pricingConfig?.taxRate}
+                currency={currency}
+                locale={locale}
+                t={t}
+                extraBetweenTaxAndTotal={undefined}
+                extraBeforeSubtotal={undefined}
+                firstName={firstName}
+                lastName={lastName}
+                email={email}
+                onFirstNameChange={(v) => { setFirstName(v); setError(''); }}
+                onLastNameChange={(v) => { setLastName(v); setError(''); }}
+                onEmailChange={(v) => { setEmail(v); setError(''); }}
+                readOnlyContactFields={false}
+                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={false}
+                showCommunicationAdminSection={false}
+                skipConfirmationCommunications={false}
+                disableAutoCommunications={false}
+                onSkipConfirmationChange={() => {}}
+                onDisableCommunicationsChange={() => {}}
+                error={checkoutFormError}
+                loading={loading}
+                totalQuantity={totalQuantity}
+                onCheckout={handleCheckout}
+                submitLabel={changeCheckoutButtonLabel ?? deferredInvoiceSubmitLabel}
+                hideSubmitButton={
+                  showCheckoutModal || !hasEffectiveChangeSelection || isChangeQuoteBlocked
+                }
+                submitDisabled={changeFlowSubmitDisabled}
+                attributionSummary={flowUi?.partnerAttributionSummary}
+                attributionConfirmLabel={flowUi?.partnerAttributionConfirmLabel}
+                attributionConfirmed={partnerAttributionConfirmed}
+                onAttributionConfirmedChange={setPartnerAttributionConfirmed}
+                lineAmountInputs={undefined}
+                onLineAmountInputChange={undefined}
+                onLineAmountInputBlur={undefined}
+                onLineAmountReset={undefined}
+              />
+            </>
+          )}
+          </div>
+        </>
+      )}
+      </div>
+      )}
+    </div>
+  );
+}
+