@ticketboothapp/booking 1.2.61 → 1.2.63

package/src/components/booking/NewBookingFlow.tsx

@@ -0,0 +1,3256 @@
+'use client';
+
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { parseISO, addWeeks, format, isBefore, isAfter, startOfDay, endOfDay } from 'date-fns';
+import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
+import {
+  getAvailabilities,
+  createReservation,
+  cancelReservation,
+  cancelReservationBestEffort,
+  createPaymentIntent,
+  confirmFreeBooking,
+  confirmBookingWithoutPayment,
+  confirmPartnerBookingWithoutPayment,
+  getAddOns,
+  validatePromoCode,
+  getPromoDiscount,
+  type Product,
+  type Availability,
+  type ReturnOption,
+  type AddOn,
+  isInsufficientCapacityReserveError,
+  describeStandardTourCapacityConflictMessage,
+  reportReserveCapacityConflictClientContext,
+} from '../../lib/booking-api';
+import {
+  EARLIEST_AVAILABILITY_DATE,
+  LATEST_AVAILABILITY_DATE,
+  INITIAL_FETCH_WEEKS,
+} from '../../lib/booking-constants';
+import { Calendar } from './Calendar';
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
+import { ItineraryBox } from './ItineraryBox';
+import { ItineraryPlaceholder } from './ItineraryPlaceholder';
+import { PickupTimeSelector } from './PickupTimeSelector';
+import { ReturnTimeSelector } from './ReturnTimeSelector';
+import { CancellationPolicySelector } from './CancellationPolicySelector';
+import { TicketSelector } from './TicketSelector';
+import { AddOnsSection } from './AddOnsSection';
+import { CheckoutForm } from './CheckoutForm';
+import { PromoCodeInput } from './PromoCodeInput';
+import { useTranslations, useLocale } from '../../lib/booking/i18n';
+import { type Currency } from './CurrencySwitcher';
+import { formatBookingRefForDisplay } from '../../lib/booking-ref';
+import { formatCurrencyAmount } from '../../lib/currency';
+import { buildCheckoutBreakdown } from '../../lib/booking/checkout-breakdown';
+import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '../../lib/booking-api';
+import { ItineraryStepType as StepType } from '../../lib/booking-api';
+import {
+  getDisplayPriceFromBaseInDisplayCurrency,
+  computePriceBreakdown,
+  computeOrderSummary,
+  type PriceBreakdown as PriceBreakdownData,
+  type OrderSummary,
+} from '../../lib/booking/pricing';
+import { useCompanyTimezone } from '../../contexts/CompanyContext';
+import { useBookingApp } from '../../contexts/BookingAppContext';
+import { useAvailabilitiesCache, buildAvailabilitiesCacheKey } from '../../contexts/AvailabilitiesCacheContext';
+import { type PriceSummaryLine } from './PriceSummary';
+import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
+import { BookingFlowCollage } from './BookingFlowCollage';
+import { TourDescription } from './TourDescription';
+import {
+  buildBookingSourceContext,
+  inferClientBookingSourceFromProductIds,
+  type BookingSourceMetadata,
+} from '../../lib/booking/source-metadata';
+import { getItineraryStepLabel } from '../../lib/booking/itinerary-display';
+import { useBookingHost } from '../../runtime';
+import type { BookingFlowUiOptions } from './booking-flow-ui';
+import type { NewBookingFlowProps } from './booking-flow-types';
+import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+
+function formatTicketLineItemsForSummary(lines: Array<{ category: string; qty: number }>): string {
+  const labels: Record<string, string> = {
+    ADULT: 'adult',
+    CHILD: 'child',
+    INFANT: 'infant',
+    SENIOR: 'senior',
+    STUDENT: 'student',
+  };
+  const parts = lines
+    .filter((l) => l.qty > 0)
+    .map((l) => {
+      const label = labels[l.category] || l.category.toLowerCase();
+      return `${l.qty} ${label}${l.qty !== 1 ? 's' : ''}`;
+    });
+  return parts.length > 0 ? parts.join(', ') : '—';
+}
+
+function normalizeTicketCategoryFromReceiptLabel(raw: string): string | null {
+  const normalized = raw.trim().toUpperCase();
+  if (!normalized) return null;
+  if (['ADULT', 'CHILD', 'INFANT', 'SENIOR', 'STUDENT'].includes(normalized)) return normalized;
+  const compact = normalized.replace(/[^A-Z]/g, ' ').replace(/\s+/g, ' ').trim();
+  if (/\bADULTS?\b/.test(compact)) return 'ADULT';
+  if (/\bCHILD(REN)?\b/.test(compact)) return 'CHILD';
+  if (/\bINFANTS?\b/.test(compact)) return 'INFANT';
+  if (/\bSENIORS?\b/.test(compact)) return 'SENIOR';
+  if (/\bSTUDENTS?\b/.test(compact)) return 'STUDENT';
+  return null;
+}
+
+function extractTrailingQty(label: string): { baseLabel: string; qty: number } {
+  const trimmed = label.trim();
+  const m = trimmed.match(/^(.*?)(?:\s*[×x]\s*(\d+))$/);
+  if (!m) return { baseLabel: trimmed, qty: 1 };
+  const baseLabel = (m[1] || '').trim();
+  const qty = Math.max(1, Number(m[2]) || 1);
+  return { baseLabel, qty };
+}
+
+function deriveAddOnSelectionsFromReceiptLines(
+  addOns: AddOn[],
+  lines: Array<{ type?: string; label?: string; amount?: number; quantity?: number }>
+): Array<{ addOnId: string; variantId?: string; quantity?: number }> {
+  const selections: Array<{ addOnId: string; variantId?: string; quantity?: number }> = [];
+  for (const line of lines) {
+    const type = (line.type || '').trim().toUpperCase();
+    if (type !== 'FEE') continue;
+    const amount = Number(line.amount ?? 0);
+    if (!Number.isFinite(amount) || amount <= 0) continue;
+    const rawLabel = (line.label || '').trim();
+    if (!rawLabel) continue;
+
+    const { baseLabel, qty } = extractTrailingQty(rawLabel);
+    let matched = false;
+
+    for (const addOn of addOns) {
+      if (matched) break;
+      const addOnName = addOn.name?.trim();
+      if (!addOnName) continue;
+
+      if (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') {
+        for (const variant of addOn.variants ?? []) {
+          const variantLabel = variant.label?.trim();
+          if (!variantLabel) continue;
+          if (baseLabel === `${addOnName} (${variantLabel})`) {
+            selections.push({ addOnId: addOn.addOnId, variantId: variant.id, quantity: qty });
+            matched = true;
+            break;
+          }
+        }
+      } else if (baseLabel === addOnName) {
+        selections.push({ addOnId: addOn.addOnId, quantity: qty });
+        matched = true;
+      }
+    }
+  }
+  return selections;
+}
+
+function findMergedAvailabilityForSelection(
+  merged: Availability[],
+  selected: Availability | null
+): Availability | undefined {
+  if (!selected) return undefined;
+  const optId = selected.productOptionId ?? undefined;
+  const dt = selected.dateTime;
+  const availId = selected.availabilityId?.trim();
+  if (availId && optId) {
+    const exact = merged.find(
+      (a) =>
+        a.availabilityId === availId &&
+        (a.productOptionId === optId || a.productOptionId === undefined)
+    );
+    if (exact) return exact;
+  }
+  return merged.find((a) => a.dateTime === dt && a.productOptionId === optId);
+}
+
+/** 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;
+}
+
+export function NewBookingFlow({
+  product,
+  productId,
+  onBack,
+  currency,
+  contentRef,
+  onSuccess,
+  isPartialLaunch = false,
+  useWindowScroll = false,
+  autoAppliedPromoCode,
+  calendarDiscountPercent,
+  highlightedPickupLocationIds,
+  onPricePreviewChange,
+  initialValues,
+  hideItineraryBox = false,
+  flowUi,
+  bookingSourceAttribution,
+  partnerPortalBooking = false,
+  availabilityPricingProfileId,
+  availabilityCancellationPolicyProfileId,
+}: NewBookingFlowProps) {
+  const { env, strings: defaultStrings, analytics, catalog } = 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 {
+    permissions,
+    isSimplifiedPricingView,
+    onShowManage,
+    getSuccessUrl,
+    suppressCalendarDateScroll,
+    mode: bookingAppMode,
+  } = useBookingApp();
+  const availabilitiesCache = useAvailabilitiesCache();
+  const isAdmin = permissions.viewerRole === 'admin';
+  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
+  const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
+  const [selectedReturnOption, setSelectedReturnOption] = useState<ReturnOption | null>(null);
+  const [quantities, setQuantities] = useState<Record<string, number>>({});
+  const [email, setEmail] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [promoCodeInput, setPromoCodeInput] = useState('');
+  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null);
+  const [promoCodeError, setPromoCodeError] = useState('');
+  /** When set by a promo, this policy is forced and shown as a non-selectable row. */
+  const [forcedCancellationPolicy, setForcedCancellationPolicy] = useState<{
+    id: string;
+    label: string;
+    refundTiers?: Array<{ hoursBefore: number; refundPercent: number }>;
+    changeWindowHoursBefore?: number | null;
+  } | null>(null);
+  const cancellationPolicyRef = useRef<HTMLDivElement>(null);
+  const [promoCodeValidating, setPromoCodeValidating] = useState(false);
+  const [pickupLocationId, setPickupLocationId] = useState<string | null>(null);
+  const [pickupLocationSkipped, setPickupLocationSkipped] = useState(false);
+  // Cancellation: change flow seeds from the booking so totals match the quote (server uses booking.cancellationPolicyId).
+  // Standard flow defaults to cheapest policy when pricing config loads.
+  const [cancellationPolicyId, setCancellationPolicyId] = useState<string | null>(() => null);
+  /** Add-on selections (lunch, animals, etc.) - filtered by selected product option */
+  const [addOnSelections, setAddOnSelections] = useState<Array<{ addOnId: string; variantId?: string; quantity?: number }>>(() =>
+    normalizeAddOnSelections(initialValues?.addOnSelections ?? [])
+  );
+  /** Fetched add-ons for the selected product option */
+  const [addOns, setAddOns] = useState<AddOn[]>([]);
+
+  // Auto-apply promo code when parent page passes one (e.g. partner pages).
+  // Seed input only; validate/apply runs after date/time + tickets exist (debounced + handleApplyPromo).
+  useEffect(() => {
+    if (!autoAppliedPromoCode) return;
+    const normalizedPromo = autoAppliedPromoCode.trim().toUpperCase();
+    if (!normalizedPromo) return;
+    setPromoCodeInput((current) => current || normalizedPromo);
+  }, [autoAppliedPromoCode]);
+  const [loading, setLoading] = useState(false);
+  const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
+  /** True when fetching additional availability (e.g. new month in dropdown) - shows spinner in date picker */
+  const [isFetchingMoreAvailabilities, setIsFetchingMoreAvailabilities] = useState(false);
+  const [error, setError] = useState('');
+  const [pricingConfig, setPricingConfig] = useState<PricingConfig | null>(null);
+  /** Precomputed prices from ticketbooth-product-prices per option (optionId -> category -> currency -> price). Used for display; rates[].price is for GYG only. */
+  const [precomputedPricesByOption, setPrecomputedPricesByOption] = useState<Record<string, PrecomputedPricesByCategory> | null>(null);
+  const pricingConfigSetRef = useRef(false); // Track if pricingConfig has been set (optimize: only set once)
+  const fetchingRef = useRef(false); // Prevent concurrent fetches
+  const 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>('');
+  const [isItinerarySticky, setIsItinerarySticky] = useState(false);
+  const isItineraryStickyRef = useRef(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const itineraryRef = useRef<HTMLDivElement>(null);
+  const [showCheckoutModal, setShowCheckoutModal] = useState(false);
+  /** Pending reservation while user is in checkout (RESERVED until confirmed/cancelled). */
+  const pendingReservationRef = useRef<{ reservationReference: string } | null>(null);
+  /** True while Stripe is confirming payment/redirecting; skip unload cancellation during this window. */
+  const paymentSubmitInFlightRef = useRef(false);
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const [termsAcceptedAt, setTermsAcceptedAt] = useState<string | null>(null);
+  const [partnerAttributionConfirmed, setPartnerAttributionConfirmed] = useState(false);
+  const [checkoutClientSecret, setCheckoutClientSecret] = useState('');
+  const [checkoutModalData, setCheckoutModalData] = useState<{
+    reservationReference: string;
+    reservationExpiration?: string;
+    customerLastName?: string;
+    bookingDate?: string;
+    successUrlOverride?: string;
+    ticketLines: CheckoutModalLineItem[];
+    feeLineItems: OrderSummary['feeLineItems'];
+    returnPriceAdjustment: number;
+    cancellationPolicyFee: number;
+    cancellationPolicyLabel?: string;
+    subtotal: number;
+    tax: number;
+    total: number;
+    promoDiscountAmount?: number;
+    discountLabel?: string | null;
+    totalQuantity: number;
+    isTaxIncludedInPrice: boolean;
+    taxRate: number;
+    changeTotals?: {
+      previousTotal: number;
+      newTotal: number;
+      differenceTotal: number;
+    };
+  } | null>(null);
+  /** Admin only: skip sending confirmation at creation (provider dashboard). */
+  const [skipConfirmationCommunications, setSkipConfirmationCommunications] = useState(false);
+  /** Admin only: disable all auto communications for this booking (provider dashboard). */
+  const [disableAutoCommunications, setDisableAutoCommunications] = useState(false);
+  /** Admin only: show choice to pay now or confirm without payment (full balance owed). */
+  const [showAdminPaymentChoice, setShowAdminPaymentChoice] = useState(false);
+  const hasAppliedInitialValuesRef = useRef(false);
+  const hasAppliedInitialQuantitiesRef = useRef(false);
+  const hasHydratedAddOnsFromReceiptRef = useRef(false);
+  const hasAutoSelectedPartnerDateRef = useRef(false);
+  const hasAutoSelectedPartnerPickupRef = useRef(false);
+  const handleDateSelectRef = useRef<(date: string) => void>(() => {});
+  useEffect(() => {
+    setPartnerAttributionConfirmed(false);
+  }, [flowUi?.partnerAttributionSummary, flowUi?.partnerAttributionConfirmLabel]);
+  const [adminChoiceData, setAdminChoiceData] = useState<{
+    reservationReference: string;
+    reservationExpiration?: string;
+    checkoutBreakdown: { lineItems: Array<{ label: string; amount: number; type?: string; quantity?: number }>; totalAmount: number; currency: string };
+    totalAmount: number;
+    datePart: string;
+    timePart: string;
+    availabilityProductOptionId: string;
+    itineraryDisplay?: ItineraryDisplayStep[] | null;
+    clientSecret: string;
+    ticketLinesForModal: CheckoutModalLineItem[];
+    feeLineItems: OrderSummary['feeLineItems'];
+    returnPriceAdjustment: number;
+    cancellationPolicyFee: number;
+    cancellationPolicyLabel?: string;
+    subtotal: number;
+    tax: number;
+    totalQuantity: number;
+    isTaxIncludedInPrice: boolean;
+    taxRate: number;
+    promoDiscountAmount: number;
+    discountLabel?: string | null;
+  } | null>(null);
+  // 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 (anchor at season open for fast first paint).
+  useEffect(() => {
+    if (!visibleRange) {
+      const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS);
+      setVisibleRange({ start: EARLIEST_AVAILABILITY_DATE, end: initialEnd });
+    }
+  }, [visibleRange]);
+
+  // 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],
+  );
+
+  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]);
+
+  /** Partner/embed: pre-select calendar day from URL/marketing payload; time slot comes from auto-select below. */
+  useEffect(() => {
+    if (!initialValues?.dateTime || selectedAvailability) return;
+    const target = parseAvailabilityDateTime(initialValues.dateTime);
+    const targetDate = formatInTimeZone(target, companyTimezone, 'yyyy-MM-dd');
+    if (!selectedDate) {
+      setSelectedDate(targetDate);
+    }
+  }, [initialValues?.dateTime, selectedAvailability, selectedDate, companyTimezone]);
+
+  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]);
+
+  const applyChangeFlowAddOnFloor = useCallback(
+    (nextSelections: Array<{ addOnId: string; variantId?: string; quantity?: number }>) => nextSelections,
+    []
+  );
+
+  const updateAddOnSelections = useCallback(
+    (
+      updater:
+        | Array<{ addOnId: string; variantId?: string; quantity?: number }>
+        | ((prev: Array<{ addOnId: string; variantId?: string; quantity?: number }>) => Array<{ addOnId: string; variantId?: string; quantity?: number }>)
+    ) => {
+      setAddOnSelections((prev) => {
+        const rawNext = typeof updater === 'function' ? updater(prev) : updater;
+        return applyChangeFlowAddOnFloor(rawNext);
+      });
+    },
+    [applyChangeFlowAddOnFloor]
+  );
+  
+  // Get selected pickup location
+  const selectedPickupLocation = useMemo(() => 
+    product.pickupLocations?.find(loc => loc.id === pickupLocationId),
+    [product.pickupLocations, pickupLocationId]
+  );
+  
+  // Calculate maximum time offset from all pickup locations (for range display when location is unknown)
+  const maxTimeOffsetMinutes = useMemo(() => {
+    if (!product.pickupLocations || product.pickupLocations.length === 0) {
+      return 0;
+    }
+    return Math.max(...product.pickupLocations.map(loc => loc.pickupTimeOffsetMinutes ?? 0));
+  }, [product.pickupLocations]);
+  // Calculate pickup times based on availability times + pickup location offset
+  interface PickupTimeInfo extends Availability {
+    pickupTime: string;
+    displayTime: string;
+    originalTime: string;
+    displayTimeRange?: string; // Time range when pickup location is unknown
+  }
+  
+  const pickupTimes = useMemo((): PickupTimeInfo[] => {
+    if (!selectedDate || !timesForSelectedDate.length) {
+      return [];
+    }
+    
+    // Show base availability times (without pickup location offset) when pickup location not selected yet
+    // Once pickup location is selected, we can show adjusted times
+    const offsetMinutes = pickupLocationSkipped 
+      ? 0 
+      : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
+    
+    return timesForSelectedDate.map(avail => {
+      // Parse the dateTime (which should already be in company timezone from backend)
+      const availabilityTime = parseISO(avail.dateTime);
+      const adjustedVacancies = Math.max(0, avail.vacancies ?? 0);
+      
+      // 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,
+  ]);
+
+  // 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 returnOptionsWithFloor = useMemo(
+    () => selectedAvailability?.returnOptions ?? [],
+    [selectedAvailability?.returnOptions],
+  );
+
+  const selectedReturnOptionWithFloor = selectedReturnOption;
+
+  const returnOptionForOrderSummary = selectedReturnOptionWithFloor;
+  const effectiveSelectedPickupVacancies = useMemo(() => {
+    if (!selectedAvailability) return 0;
+    return Math.max(0, selectedAvailability.vacancies ?? 0);
+  }, [selectedAvailability]);
+  const effectiveSelectedReturnVacancies = useMemo(() => {
+    if (!selectedReturnOption) return null;
+    return Math.max(0, selectedReturnOption.vacancies ?? 0);
+  }, [selectedReturnOption]);
+  
+  // 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],
+  );
+
+  // Price breakdown: mid-layer returns line items (base + one per rule/deal). UI renders each line; rate in brackets when used.
+  const getPriceBreakdown = useCallback((category: string, priceCAD: number, baseInDisplayCurrency: number | undefined, appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }> = []): PriceBreakdownData | null => {
+    if (!pricingConfig) return null;
+    const selectedOption = activeOptions.find(opt => opt.optionId === selectedAvailability?.productOptionId);
+    const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
+    const isPublicMode = isSimplifiedPricingView;
+    return computePriceBreakdown(
+      pricingConfig,
+      currency,
+      priceCAD,
+      basePriceCAD,
+      hasFees,
+      appliedAdjustments,
+      undefined,
+      baseInDisplayCurrency,
+      isPublicMode
+    );
+  }, [pricingConfig, currency, hasFees, activeOptions, selectedAvailability, isSimplifiedPricingView]);
+  
+  // Order summary from mid-layer; UI only displays these values (no calculations).
+  const orderSummary: OrderSummary = useMemo(
+    () =>
+      computeOrderSummary(
+        quantities,
+        pricing,
+        returnOptionForOrderSummary,
+        pricingConfig ?? null,
+        currency,
+        hasFees,
+        cancellationPolicyId
+      ),
+    [quantities, pricing, returnOptionForOrderSummary, pricingConfig, currency, hasFees, cancellationPolicyId]
+  );
+
+  const { totalQuantity, subtotal, tax, total: totalFromSummary, feeLineItems, returnPriceAdjustment, cancellationPolicyFee, isTaxIncludedInPrice, ticketLineItems } = orderSummary;
+  /** Round-trip party limit: both legs must fit — use the tighter of outbound vs return vacancies. */
+  const effectivePartySizeCap = useMemo(() => {
+    if (!selectedAvailability) return 0;
+    const outbound = Math.max(0, selectedAvailability.vacancies ?? 0);
+    if (selectedReturnOption == null) return outbound;
+    const returnCap = Math.max(0, selectedReturnOption.vacancies ?? 0);
+    return Math.min(outbound, returnCap);
+  }, [selectedAvailability, selectedReturnOption]);
+
+  const selectedCancellationPolicy = pricingConfig?.cancellationPolicies?.find((p) => p.id === cancellationPolicyId);
+  /** Label for display when policy may be forced by promo (not in pricingConfig list). */
+  const effectiveCancellationPolicyLabel = selectedCancellationPolicy?.label ?? forcedCancellationPolicy?.label ?? (t('booking.flexibleCancellation') || 'Flexible cancellation');
+
+  // When return selection (or refreshed availabilities) caps the party below current ticket counts, trim tickets (non-admin).
+  useEffect(() => {
+    if (isAdmin || !selectedAvailability) return;
+    const cap = effectivePartySizeCap;
+    if (totalQuantity <= cap) return;
+    const over = totalQuantity - cap;
+    setQuantities((prev) => {
+      const next = { ...prev };
+      let remaining = over;
+      const cats = Object.keys(next)
+        .filter((c) => (next[c] ?? 0) > 0)
+        .sort((a, b) => (next[b] ?? 0) - (next[a] ?? 0));
+      for (const cat of cats) {
+        if (remaining <= 0) break;
+        const minQ = 0;
+        const q = next[cat] ?? 0;
+        const reducible = Math.max(0, q - minQ);
+        const dec = Math.min(reducible, remaining);
+        next[cat] = q - dec;
+        remaining -= dec;
+      }
+      return next;
+    });
+  }, [
+    effectivePartySizeCap,
+    totalQuantity,
+    selectedAvailability,
+    isAdmin,
+  ]);
+
+  // 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]);
+
+  /** Return row amount for PriceSummary, Stripe breakdown, and CheckoutModal. */
+  const checkoutReturnLineAmount = returnPriceAdjustment;
+
+  const effectiveSubtotalBeforeAddOns = 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;
+    const showReturnLine =
+      Boolean(selectedReturnOption) && Math.abs(returnLineAmount) > 0.0005;
+    return [
+      ...ticketLineItems.map((line): PriceSummaryLine => {
+        const rate = pricing.find((r) => r.category === line.category);
+        const breakdown = getPriceBreakdown(
+          line.category,
+          rate?.priceCAD ?? 0,
+          rate?.baseInDisplayCurrency,
+          rate?.appliedAdjustments ?? [],
+        );
+        return {
+          kind: 'ticket',
+          category: line.category,
+          qty: line.qty,
+          itemTotal: line.itemTotal,
+          breakdown,
+        };
+      }),
+      ...(showReturnLine
+        ? [
+            {
+              kind: 'line' as const,
+              label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+              amount: returnLineAmount,
+              type: 'return',
+            },
+          ]
+        : []),
+      ...(cancellationPolicyFee > 0 && (selectedCancellationPolicy || forcedCancellationPolicy)
+        ? [
+            {
+              kind: 'line' as const,
+              label: effectiveCancellationPolicyLabel,
+              amount: cancellationPolicyFee,
+              type: 'cancellation',
+            },
+          ]
+        : []),
+      ...feeLineItemsWithAddOns.map((fee) => {
+        const isMoraineLakeRoadAccessFee =
+          fee.name.toLowerCase().includes('moraine') &&
+          (fee.name.toLowerCase().includes('access') ||
+            fee.name.toLowerCase().includes('road') ||
+            fee.name.toLowerCase().includes('license'));
+        return {
+          kind: 'line' as const,
+          label: feeLineItems.some((f) => f.name === fee.name)
+            ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
+            : fee.name,
+          amount: fee.totalAmount,
+          type: 'fee',
+          tooltip: isMoraineLakeRoadAccessFee
+            ? "Since 2025, Parks Canada charges a per-trip fee for License of Occupation. Based on our capacity, this per-person fee contributes towards Parks Canada's Moraine Lake Road operations."
+            : undefined,
+        };
+      }),
+    ];
+  }, [
+    selectedAvailability,
+    ticketLineItems,
+    pricing,
+    getPriceBreakdown,
+    selectedReturnOption,
+    checkoutReturnLineAmount,
+    totalQuantity,
+    t,
+    cancellationPolicyFee,
+    selectedCancellationPolicy,
+    forcedCancellationPolicy,
+    effectiveCancellationPolicyLabel,
+    feeLineItemsWithAddOns,
+    feeLineItems,
+  ]);
+
+  // Promo discount from backend (order-level only; rates are pre-promo)
+  const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
+  const [isGiftCard, setIsGiftCard] = useState(false);
+  const [isVoucher, setIsVoucher] = useState(false);
+  /** Monotonic id per discount fetch; stale responses are ignored. */
+  const promoDiscountFetchGenerationRef = useRef(0);
+  /** Latest cart context for get-promo-discount; effect only keys off promoDiscountFetchKey. */
+  const promoDiscountParamsRef = useRef({
+    selectedAvailability: null as Availability | null,
+    ticketLineItems: [] as Array<{ category: string; qty: number }>,
+    effectiveSubtotal: 0,
+    appliedPromoCode: null as string | null,
+  });
+
+  const promoDiscountFetchKey = useMemo(() => {
+    if (!appliedPromoCode || !selectedAvailability || totalQuantity === 0) return '';
+    const companyId = product.companyId ?? env.COMPANY_ID;
+    if (!companyId) return '';
+    const optionId = selectedAvailability.productOptionId;
+    if (!optionId || !quantitiesSignature) return '';
+    return [
+      appliedPromoCode,
+      companyId,
+      product.productId,
+      optionId,
+      selectedAvailability.dateTime,
+      selectedAvailability.availabilityId ?? '',
+      currency,
+      quantitiesSignature,
+      String(Math.round(effectiveSubtotal * 100)),
+    ].join('::');
+  }, [
+    appliedPromoCode,
+    selectedAvailability?.dateTime,
+    selectedAvailability?.productOptionId,
+    selectedAvailability?.availabilityId,
+    totalQuantity,
+    product.companyId,
+    product.productId,
+    currency,
+    quantitiesSignature,
+    effectiveSubtotal,
+  ]);
+
+  promoDiscountParamsRef.current = {
+    selectedAvailability,
+    ticketLineItems: ticketLineItems.map((l) => ({ category: l.category, qty: l.qty })),
+    effectiveSubtotal,
+    appliedPromoCode,
+  };
+
+  useEffect(() => {
+    if (!promoDiscountFetchKey) {
+      setPromoDiscountAmount(0);
+      setIsGiftCard(false);
+      setIsVoucher(false);
+      return;
+    }
+
+    let cancelled = false;
+    const debounceMs = 120;
+    const timer = window.setTimeout(() => {
+      if (cancelled) return;
+      const {
+        selectedAvailability: sel,
+        ticketLineItems: lines,
+        effectiveSubtotal: sub,
+        appliedPromoCode: code,
+      } = promoDiscountParamsRef.current;
+      if (!code || !sel) return;
+      const companyId = product.companyId ?? env.COMPANY_ID;
+      const optionId = sel.productOptionId;
+      if (!companyId || !optionId) return;
+      const items = lines.map((l) => ({ category: l.category, qty: l.qty }));
+      if (items.length === 0) return;
+
+      const generation = ++promoDiscountFetchGenerationRef.current;
+      getPromoDiscount(
+        code,
+        companyId,
+        product.productId,
+        optionId,
+        currency,
+        items,
+        sel.dateTime,
+        sub
+      )
+        .then((res) => {
+          if (cancelled) return;
+          if (generation !== promoDiscountFetchGenerationRef.current) return;
+          setPromoDiscountAmount(res.discount ?? 0);
+          setIsGiftCard(res.isGiftCard ?? false);
+          setIsVoucher(res.isVoucher ?? false);
+        })
+        .catch(() => {
+          if (cancelled) return;
+          if (generation !== promoDiscountFetchGenerationRef.current) return;
+          setPromoDiscountAmount(0);
+          setIsGiftCard(false);
+          setIsVoucher(false);
+        });
+    }, debounceMs);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [promoDiscountFetchKey, product.companyId, product.productId, currency]);
+
+  // Percentage/fixed promos: tax on discounted amount (promo before GST per CRA guidance).
+  // Vouchers and gift cards: tax on full subtotal (voucher discount includes tax on free portion; gift card is payment).
+  const effectivePromoDiscountAmount = promoDiscountAmount > 0 ? promoDiscountAmount : 0;
+  const taxOnSubtotal = isTaxIncludedInPrice ? 0 : effectiveSubtotal * (pricingConfig?.taxRate ?? 0);
+  const effectiveTax =
+    effectivePromoDiscountAmount > 0 && !isGiftCard && !isVoucher
+      ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
+      : taxOnSubtotal;
+  const totalPrice = effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
+
+  const changeCheckoutButtonLabel = undefined;
+
+  const deferredInvoiceSubmitLabel = flowUi?.partnerDeferredInvoice
+    ? flowUi.partnerDeferredInvoiceSubmitLabel || 'Continue to book'
+    : undefined;
+
+  const checkoutFormError = error || '';
+
+  useEffect(() => {
+    if (!onPricePreviewChange) return;
+    if (!selectedAvailability || totalQuantity <= 0) {
+      onPricePreviewChange(null);
+      return;
+    }
+    onPricePreviewChange({
+      subtotal: effectiveSubtotal,
+      tax: !isTaxIncludedInPrice ? effectiveTax : 0,
+      total: totalPrice,
+      currency,
+    });
+  }, [
+    onPricePreviewChange,
+    selectedAvailability,
+    totalQuantity,
+    effectiveSubtotal,
+    effectiveTax,
+    currency,
+    isTaxIncludedInPrice,
+    totalPrice,
+  ]);
+
+  // Auto-select product option when date is selected: most popular if set, otherwise first available.
+  useEffect(() => {
+    if (selectedDate && timesForSelectedDate.length > 0 && !selectedAvailability) {
+      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]);
+
+  // 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)
+
+  // Auto-select return option when outbound is selected (partner prefill may hint return id/datetime).
+  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 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);
+      }
+    }
+  }, [
+    selectedAvailability,
+    selectedReturnOption,
+    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([]);
+      setAddOnSelections([]);
+      return;
+    }
+    const optionChanged = prevAvailabilityProductOptionIdRef.current !== availabilityProductOptionId;
+    if (optionChanged) {
+      setAddOnSelections([]);
+      prevAvailabilityProductOptionIdRef.current = availabilityProductOptionId;
+    }
+    getAddOns(product.companyId, { productOptionId: availabilityProductOptionId, preCheckout: true })
+      .then(setAddOns)
+      .catch(() => setAddOns([]));
+  }, [availabilityProductOptionId, product.companyId]);
+
+  // Auto-select cheapest cancellation policy when pricing config loads (not when change flow already has the booked policy)
+  useEffect(() => {
+    if (pricingConfig?.cancellationPolicies && pricingConfig.cancellationPolicies.length > 0 && !cancellationPolicyId) {
+      const sorted = [...pricingConfig.cancellationPolicies].sort((a, b) => {
+        const feeA = a.feeByCurrency[currency] ?? 0;
+        const feeB = b.feeByCurrency[currency] ?? 0;
+        return feeA - feeB;
+      });
+      setCancellationPolicyId(sorted[0].id);
+    }
+  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId, currency]);
+
+  const handleDateSelect = (date: string) => {
+    if (date === selectedDate) return;
+    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: a day is "sold out" only when every slot has 0 vacancies.
+    // Always auto-pick the first day with any inventory; only if the whole range is empty and user is admin, fall back to the first day.
+    const firstWithInventory = dates.find((d) =>
+      (availabilitiesByDate[d] ?? []).some((a) => (a.vacancies ?? 0) > 0),
+    );
+    const first = firstWithInventory ?? (isAdmin && 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,
+    isAdmin,
+    useWindowScroll,
+    contentRef,
+    suppressCalendarDateScroll,
+  ]);
+
+  useEffect(() => {
+    if (flowUi?.autoSelectFirstHighlightedPickup !== true) return;
+    if (hasAutoSelectedPartnerPickupRef.current) return;
+    if (!highlightedPickupLocationIds?.length) return;
+    if (pickupLocationId) return;
+    if (pickupLocationSkipped) return;
+    if (initialValues?.pickupLocationId?.trim()) return;
+    const locs = product.pickupLocations;
+    if (!locs?.length) return;
+    const match = highlightedPickupLocationIds.find((id) => locs.some((l) => l.id === id));
+    if (!match) return;
+    hasAutoSelectedPartnerPickupRef.current = true;
+    setPickupLocationId(match);
+    setPickupLocationSkipped(false);
+  }, [
+    flowUi?.autoSelectFirstHighlightedPickup,
+    highlightedPickupLocationIds,
+    pickupLocationId,
+    pickupLocationSkipped,
+    initialValues?.pickupLocationId,
+    product.pickupLocations,
+  ]);
+
+  const handleTimeSelect = (availability: Availability) => {
+    setSelectedAvailability(availability);
+    setSelectedReturnOption(null); // Clear return selection when changing start time
+    setError('');
+  };
+
+  const handleQuantityChange = (category: string, delta: number) => {
+    const maxAvailable = isAdmin ? Number.MAX_SAFE_INTEGER : effectivePartySizeCap;
+    const currentQty = quantities[category] || 0;
+    const minQ = 0;
+    const newQty = Math.max(minQ, currentQty + delta);
+    // Admin can overbook; non-admin cannot exceed vacancies
+    if (delta > 0 && !isAdmin && orderSummary.totalQuantity >= maxAvailable) {
+      return;
+    }
+    setQuantities(prev => ({
+      ...prev,
+      [category]: newQty,
+    }));
+    setError('');
+  };
+
+  // Selected availability has a deal applied (promo codes not allowed with deals; vouchers/gift cards still allowed; dynamic pricing alone is ok)
+  const hasOngoingDiscount = useMemo(
+    () =>
+      selectedAvailability?.rates?.some((r) =>
+        (r.appliedAdjustments ?? r.applied_adjustments ?? []).some((a) => (a.type ?? '').toLowerCase() === 'deal')
+      ) ?? false,
+    [selectedAvailability]
+  );
+  const selectedAvailabilityKey = useMemo(
+    () => `${selectedAvailability?.dateTime ?? ''}::${selectedAvailability?.productOptionId ?? ''}`,
+    [selectedAvailability?.dateTime, selectedAvailability?.productOptionId]
+  );
+  // Remember where promo was successfully applied to avoid self-clearing on same selection.
+  const promoAppliedSelectionKeyRef = useRef<string | null>(null);
+  const promoValidateInFlightRef = useRef(false);
+
+  const handleApplyPromo = useCallback(async () => {
+    const code = promoCodeInput.trim().toUpperCase();
+    if (!code) return;
+    // Promo validation/application requires a concrete booking context.
+    if (!selectedAvailability || totalQuantity <= 0) {
+      return;
+    }
+    if (appliedPromoCode === code) return; // Already applied, skip API call
+    const companyId = product.companyId;
+    if (!companyId) return;
+    if (promoValidateInFlightRef.current) return;
+    promoValidateInFlightRef.current = true;
+    setPromoCodeError('');
+    setPromoCodeValidating(true);
+    try {
+      const result = await validatePromoCode(code, companyId, product.productId, hasOngoingDiscount);
+      if (result.valid) {
+        promoAppliedSelectionKeyRef.current = selectedAvailabilityKey;
+        setAppliedPromoCode(code);
+        fetchedRangesRef.current = [];
+        if (result.forcedCancellationPolicyId && result.forcedCancellationPolicyLabel) {
+          setForcedCancellationPolicy({
+            id: result.forcedCancellationPolicyId,
+            label: result.forcedCancellationPolicyLabel,
+            refundTiers: result.forcedCancellationPolicyRefundTiers,
+            changeWindowHoursBefore: result.forcedChangeWindowHoursBefore ?? undefined,
+          });
+          setCancellationPolicyId(result.forcedCancellationPolicyId);
+          // Scroll to cancellation policy section so user sees the forced policy (after state flush)
+          setTimeout(() => {
+            cancellationPolicyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }, 100);
+        } else {
+          setForcedCancellationPolicy(null);
+        }
+      } else {
+        const errorMsg =
+          result.error === 'Promo codes cannot be stacked with deals'
+            ? (t('booking.promoCodesCannotStackWithDiscounts') || result.error)
+            : (result.error || t('booking.invalidPromoCode') || 'Invalid or expired promo code');
+        setPromoCodeError(errorMsg);
+      }
+    } catch (err) {
+      setPromoCodeError(err instanceof Error ? err.message : 'Failed to validate promo code');
+    } finally {
+      promoValidateInFlightRef.current = false;
+      setPromoCodeValidating(false);
+    }
+  }, [promoCodeInput, appliedPromoCode, product.companyId, product.productId, hasOngoingDiscount, t, selectedAvailabilityKey, selectedAvailability, totalQuantity]);
+
+  // When user selects a time with ongoing discount and has a promo applied, re-validate and clear if promo can't be stacked
+  useEffect(() => {
+    if (!appliedPromoCode || !hasOngoingDiscount) return;
+    // Only run this guard when user moved away from the selection where promo was applied.
+    // On the same selection, "deal" adjustments can be promo-driven and would self-clear incorrectly.
+    if (promoAppliedSelectionKeyRef.current === selectedAvailabilityKey) {
+      return;
+    }
+    let cancelled = false;
+    validatePromoCode(appliedPromoCode, product.companyId ?? '', product.productId, true).then((result) => {
+      if (cancelled) return;
+      if (!result.valid && result.error === 'Promo codes cannot be stacked with deals') {
+        promoAppliedSelectionKeyRef.current = null;
+        setAppliedPromoCode(null);
+        setPromoCodeInput(appliedPromoCode);
+        setPromoCodeError(t('booking.promoCodesCannotStackWithDiscounts') || result.error);
+        setForcedCancellationPolicy(null);
+        setCancellationPolicyId(null);
+        fetchedRangesRef.current = [];
+      }
+    });
+    return () => { cancelled = true; };
+  }, [hasOngoingDiscount, appliedPromoCode, product.companyId, product.productId, t, selectedAvailabilityKey]);
+
+  // Ref to avoid effect re-running when handleApplyPromo identity changes (t changes every render)
+  const handleApplyPromoRef = useRef(handleApplyPromo);
+  handleApplyPromoRef.current = handleApplyPromo;
+
+  // Auto-apply promo when user stops typing (mobile-friendly, no Enter key needed).
+  // Do not depend on promoCodeValidating: when it flips false after a failed validate, that would
+  // re-run this effect and schedule another timer → repeated /validate for the same bad code.
+  useEffect(() => {
+    const trimmed = promoCodeInput.trim().toUpperCase();
+    if (!trimmed) return;
+    if (!selectedAvailability || totalQuantity <= 0) return;
+    if (appliedPromoCode === trimmed) return;
+
+    const timer = setTimeout(() => {
+      handleApplyPromoRef.current();
+    }, 600);
+
+    return () => clearTimeout(timer);
+  }, [promoCodeInput, appliedPromoCode, selectedAvailability, totalQuantity]);
+
+  const cancelPendingReservation = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (pending) {
+      pendingReservationRef.current = null;
+      cancelReservation(pending.reservationReference).catch(() => {});
+    }
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+  }, []);
+
+  const cancelPendingReservationBestEffort = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (pending) {
+      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 (!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;
+    }
+
+    if (!firstName?.trim()) {
+      setError(t('booking.enterFirstName') || 'Please enter your first name');
+      return;
+    }
+
+    if (!lastName?.trim()) {
+      setError(t('booking.enterLastName') || 'Please enter your last name');
+      return;
+    }
+
+    // Allow checkout if pickup location is selected OR if user chose "I don't know"
+    if (product.pickupLocations && product.pickupLocations.length > 0 && !pickupLocationId && !pickupLocationSkipped) {
+      setError(t('booking.selectPickupLocation'));
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    paymentSubmitInFlightRef.current = false;
+
+    try {
+      const bookingItems = Object.entries(quantities)
+        .filter(([, count]) => count > 0)
+        .map(([category, count]) => ({ category, count }));
+
+      // Get the productOptionId from the selected availability (we tagged it when fetching)
+      const availabilityProductOptionId = selectedAvailability.productOptionId 
+        || activeOptions[0]?.optionId;
+      
+      if (!availabilityProductOptionId) {
+        setError('No product option selected');
+        setLoading(false);
+        return;
+      }
+
+      const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
+        clientChannelSource: inferClientBookingSourceFromProductIds(
+          product.productId,
+          availabilityProductOptionId,
+        ),
+        forcePartnerPortalChannel: partnerPortalBooking,
+        forceDashboardSource: bookingAppMode === 'provider-dashboard',
+      });
+
+      // Get the hotel name if a pickup location was selected
+      const selectedPickupLocation = pickupLocationId 
+        ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
+        : null;
+      const reservation = await createReservation({
+        productId: availabilityProductOptionId, // GetYourGuide passes productOptionId values in productId field
+        dateTime: selectedAvailability.dateTime,
+        availabilityId: selectedAvailability.availabilityId || undefined,
+        bookingItems,
+        pickupLocationId: pickupLocationId || undefined,
+        returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
+        currency: currency,
+        promoCode: appliedPromoCode || undefined,
+        cancellationPolicyId: cancellationPolicyId || undefined,
+        addOnSelections: addOnSelections.length > 0 ? addOnSelections : undefined,
+        ...(isAdmin ? { allowOverbook: true } : {}),
+        // Pass hotel name when pickup location is selected (for reference)
+        // Don't set travelerHotel when user selects "I don't know" - leave it undefined
+        // This allows us to distinguish between "unknown" (null) and "unmapped hotel name" (not null)
+        travelerHotel: selectedPickupLocation?.name || undefined,
+        // For standard bookings, backend calculates startTime from availability + pickup location offset
+        // When pickup location is skipped, backend will store null for startTime
+        ...(bookingSourceContext.sourceMetadata
+          ? {
+              source: bookingSourceContext.source,
+              sourceMetadata: bookingSourceContext.sourceMetadata,
+              source_metadata: bookingSourceContext.source_metadata,
+            }
+          : {}),
+      });
+      pendingReservationRef.current = { reservationReference: reservation.reservationReference };
+
+      if (!reservation.reservationReference) {
+        throw new Error('Invalid reservation response: missing reservationReference');
+      }
+
+      // Note: Do NOT call onSuccess here for paid bookings — we're about to show the Stripe
+      // CheckoutModal. onSuccess (e.g. closing the parent dialog) should only run when we're
+      // actually done (free booking redirect, admin confirm-without-payment). Calling it here
+      // would close the dialog before the payment modal opens.
+
+      // Update stored booking data with reservation reference
+      try {
+        const storedBooking = sessionStorage.getItem('pendingBooking');
+        if (storedBooking) {
+          const booking = JSON.parse(storedBooking);
+          if (reservation?.reservationReference) {
+            booking.reservationReference = reservation.reservationReference;
+          }
+          booking.totalPrice = reservation?.totalAmount || totalPrice;
+          booking.currency = reservation?.currency || currency || selectedAvailability.currency || 'CAD';
+          sessionStorage.setItem('pendingBooking', JSON.stringify(booking));
+        }
+      } catch (e) {
+        console.warn('Failed to update booking data', e);
+      }
+
+      // Create Payment Intent for embedded checkout modal (order summary with strikethrough + green, Payment Element)
+      const datePart = selectedAvailability.dateTime.split('T')[0];
+      const timePart = selectedAvailability.dateTime.split('T')[1]?.substring(0, 5) || '00:00';
+      
+      // Itinerary for storage: when pickup unknown, pickup step is always a range (e.g. "9 AM - 10:00 AM") so /manage and email show it; drop-off stays TBD
+      const itineraryDisplay = computeItineraryDisplayForStorage() ?? computeItineraryDisplay();
+
+      // Build checkout breakdown from the exact same values we show in the UI and Stripe modal.
+      // Backend will charge totalAmount and store this as the receipt so /manage matches.
+      const taxForBreakdown = effectivePromoDiscountAmount > 0 ? effectiveTax : tax;
+      const amountDueForCheckout = totalPrice;
+      const lines = [
+        ...ticketLineItems.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}` : (t('booking.discount') || 'Discount'),
+                amount: -effectivePromoDiscountAmount,
+                type: isGiftCard ? 'GIFT_CARD' : 'PROMO_CODE',
+              },
+            ]
+          : []),
+      ];
+      const checkoutBreakdown = buildCheckoutBreakdown({
+        lines,
+        totalAmount: amountDueForCheckout,
+        currency,
+        roundingLabel: t('booking.rounding') || 'Rounding',
+      });
+
+      if (flowUi?.partnerDeferredInvoice) {
+        if (!reservation?.reservationReference) {
+          throw new Error('Missing reservation reference for partner booking confirmation');
+        }
+        const confirmedBooking = await confirmPartnerBookingWithoutPayment({
+          reservationReference: reservation.reservationReference,
+          productId: product.productId,
+          optionId: availabilityProductOptionId,
+          date: datePart,
+          time: timePart,
+          customerEmail: email || undefined,
+          customerFirstName: firstName.trim() || undefined,
+          customerLastName: lastName.trim() || undefined,
+          currency: currency,
+          travelerHotel: selectedPickupLocation?.name || undefined,
+          pickupLocationId: pickupLocationId || undefined,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          termsAcceptedAt: termsAcceptedAt ?? undefined,
+          skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+          disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+          checkoutBreakdown,
+          depositAmount: 0,
+          balanceAmount: amountDueForCheckout,
+          totalAmount: amountDueForCheckout,
+          ...bookingSourceContext,
+        });
+        pendingReservationRef.current = null;
+        const ref = formatBookingRefForDisplay(confirmedBooking.bookingReference);
+        const ln = lastName.trim();
+        onSuccess?.({
+          reservationReference: reservation.reservationReference,
+          bookingReference: confirmedBooking.bookingReference,
+        });
+        if (onShowManage) {
+          onShowManage({ ref, lastName: ln });
+        } else {
+          const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+          window.location.href = `/manage-booking?${params.toString()}`;
+        }
+        setLoading(false);
+        return;
+      }
+
+      const paymentIntent = await createPaymentIntent({
+            productId: product.productId,
+            optionId: availabilityProductOptionId,
+            date: datePart,
+            time: timePart,
+            quantity: totalQuantity,
+            customerEmail: email,
+            customerFirstName: firstName.trim() || undefined,
+            customerLastName: lastName.trim() || undefined,
+            currency: currency,
+            reservationReference: reservation?.reservationReference,
+            travelerHotel: selectedPickupLocation?.name || undefined,
+            pickupLocationId: pickupLocationId || undefined,
+            itineraryDisplay: itineraryDisplay ?? undefined,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
+            promoCode: appliedPromoCode || undefined,
+            cancellationPolicyId: cancellationPolicyId || undefined,
+            termsAcceptedAt: termsAcceptedAt ?? undefined,
+            checkoutBreakdown,
+            skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+            disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+            ...bookingSourceContext,
+          });
+
+      // Free booking (e.g. voucher covers full total): confirm without payment, then redirect to success
+      if ('freeBooking' in paymentIntent && paymentIntent.freeBooking) {
+        if (!reservation?.reservationReference) {
+          throw new Error('Missing reservation reference for free booking confirmation');
+        }
+        
+        const freeBookingResult = await confirmFreeBooking({
+          reservationReference: reservation?.reservationReference ?? '',
+          productId: product.productId,
+          optionId: availabilityProductOptionId,
+          date: datePart,
+          time: timePart,
+          customerEmail: email || undefined,
+          customerFirstName: firstName.trim() || undefined,
+          customerLastName: lastName.trim() || undefined,
+          currency: currency,
+          travelerHotel: selectedPickupLocation?.name || undefined,
+          pickupLocationId: pickupLocationId || undefined,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          termsAcceptedAt: termsAcceptedAt ?? undefined,
+          skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+          disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+          ...bookingSourceContext,
+        });
+        pendingReservationRef.current = null;
+        
+        // Show manage UI: in provider-dashboard use callback (e.g. dialog); otherwise redirect to /manage
+        const ref = formatBookingRefForDisplay(freeBookingResult.bookingReference);
+        const ln = lastName.trim();
+        onSuccess?.({ reservationReference: reservation?.reservationReference ?? '' });
+        if (onShowManage) {
+          onShowManage({ ref, lastName: ln });
+        } else {
+          const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+          window.location.href = `/manage-booking?${params.toString()}`;
+        }
+        setLoading(false);
+        return;
+      }
+
+      // Admin: show choice to pay now or confirm without payment (customer owes full balance)
+      if (isAdmin) {
+        if (!reservation?.reservationReference) {
+          throw new Error('Missing reservation reference for admin payment flow');
+        }
+        setError('');
+        setAdminChoiceData({
+          reservationReference: reservation.reservationReference,
+          reservationExpiration: reservation.expiresAt,
+          checkoutBreakdown,
+          totalAmount: amountDueForCheckout,
+          datePart,
+          timePart,
+          availabilityProductOptionId,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          clientSecret: paymentIntent.clientSecret ?? '',
+          ticketLinesForModal: ticketLineItems.map((line) => {
+            const rate = pricing.find((r) => r.category === line.category);
+            const breakdown = getPriceBreakdown(
+              line.category,
+              rate?.priceCAD ?? 0,
+              rate?.baseInDisplayCurrency,
+              rate?.appliedAdjustments ?? []
+            );
+            return { line, breakdown };
+          }),
+          feeLineItems: feeLineItemsWithAddOns,
+          returnPriceAdjustment: checkoutReturnLineAmount,
+          cancellationPolicyFee,
+          cancellationPolicyLabel: effectiveCancellationPolicyLabel,
+          subtotal: effectiveSubtotal,
+          tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
+          totalQuantity,
+          isTaxIncludedInPrice,
+          taxRate: pricingConfig?.taxRate ?? 0,
+          promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
+          discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : undefined,
+        });
+        setShowAdminPaymentChoice(true);
+        setLoading(false);
+        return;
+      }
+
+      const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItems.map((line) => {
+        const rate = pricing.find((r) => r.category === line.category);
+        const breakdown = getPriceBreakdown(
+          line.category,
+          rate?.priceCAD ?? 0,
+          rate?.baseInDisplayCurrency,
+          rate?.appliedAdjustments ?? []
+        );
+        return { line, breakdown };
+      });
+
+      setCheckoutClientSecret(paymentIntent.clientSecret ?? '');
+      setCheckoutModalData({
+        reservationReference: reservation?.reservationReference ?? '',
+        reservationExpiration: reservation?.expiresAt,
+        customerLastName: lastName.trim(),
+        bookingDate: datePart,
+        successUrlOverride: 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}` : undefined,
+        changeTotals: undefined,
+      });
+      setShowCheckoutModal(true);
+      setLoading(false);
+    } catch (err) {
+      if (isInsufficientCapacityReserveError(err)) {
+        try {
+          const merged = await reloadAvailabilitiesAfterReserveConflict();
+          const outbound = findMergedAvailabilityForSelection(merged, selectedAvailability);
+          const outboundVacancies = outbound?.vacancies ?? null;
+          const returnVacancies = findMergedReturnVacancies(outbound, selectedReturnOption);
+          setError(
+            describeStandardTourCapacityConflictMessage({
+              partySize: totalQuantity,
+              outboundVacancies,
+              returnVacancies,
+              hasReturnSelection: !!selectedReturnOption,
+            })
+          );
+          reportReserveCapacityConflictClientContext({
+            flow: 'standard_tour',
+            productId: product.productId,
+            selectedDate: selectedDate || null,
+            outboundDateTime: selectedAvailability?.dateTime ?? null,
+            outboundVacanciesAfterRefresh: outboundVacancies,
+            returnVacanciesAfterRefresh: returnVacancies,
+            partySizeOrPassengers: totalQuantity,
+            hasReturnSelection: !!selectedReturnOption,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+            reloadAvailabilitiesSucceeded: true,
+          });
+        } catch (reloadErr) {
+          setError(
+            describeStandardTourCapacityConflictMessage({
+              partySize: totalQuantity,
+              outboundVacancies: null,
+              returnVacancies: null,
+              hasReturnSelection: !!selectedReturnOption,
+            })
+          );
+          reportReserveCapacityConflictClientContext({
+            flow: 'standard_tour',
+            productId: product.productId,
+            selectedDate: selectedDate || null,
+            outboundDateTime: selectedAvailability?.dateTime ?? null,
+            outboundVacanciesAfterRefresh: null,
+            returnVacanciesAfterRefresh: null,
+            partySizeOrPassengers: totalQuantity,
+            hasReturnSelection: !!selectedReturnOption,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+            reloadAvailabilitiesSucceeded: false,
+            reloadErrorMessage:
+              reloadErr instanceof Error ? reloadErr.message : String(reloadErr),
+          });
+        }
+        setLoading(false);
+        return;
+      }
+      setError(err instanceof Error ? err.message : 'Something went wrong');
+      setLoading(false);
+    }
+  };
+
+  const handleConfirmWithoutPayment = async () => {
+    if (!adminChoiceData) return;
+    setLoading(true);
+    setError('');
+    try {
+      const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
+        clientChannelSource: inferClientBookingSourceFromProductIds(
+          product.productId,
+          adminChoiceData.availabilityProductOptionId,
+        ),
+        forcePartnerPortalChannel: partnerPortalBooking,
+        forceDashboardSource: bookingAppMode === 'provider-dashboard',
+      });
+      const result = await confirmBookingWithoutPayment({
+        reservationReference: adminChoiceData.reservationReference,
+        productId: product.productId,
+        optionId: adminChoiceData.availabilityProductOptionId,
+        date: adminChoiceData.datePart,
+        time: adminChoiceData.timePart,
+        customerEmail: email || undefined,
+        customerFirstName: firstName.trim() || undefined,
+        customerLastName: lastName.trim() || undefined,
+        currency: currency,
+        travelerHotel: product.pickupLocations?.find(loc => loc.id === pickupLocationId)?.name || undefined,
+        pickupLocationId: pickupLocationId || undefined,
+        itineraryDisplay: adminChoiceData.itineraryDisplay ?? undefined,
+        termsAcceptedAt: termsAcceptedAt ?? undefined,
+        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
+        disableAutoCommunications: disableAutoCommunications ? true : undefined,
+        checkoutBreakdown: adminChoiceData.checkoutBreakdown,
+        depositAmount: 0,
+        balanceAmount: adminChoiceData.totalAmount,
+        totalAmount: adminChoiceData.totalAmount,
+        ...bookingSourceContext,
+      });
+      pendingReservationRef.current = null;
+      const ref = formatBookingRefForDisplay(result.bookingReference);
+      const ln = lastName.trim();
+      setShowAdminPaymentChoice(false);
+      setAdminChoiceData(null);
+      onSuccess?.({ reservationReference: adminChoiceData.reservationReference });
+      if (onShowManage) {
+        onShowManage({ ref, lastName: ln });
+      } else {
+        const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+        window.location.href = `/manage-booking?${params.toString()}`;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to confirm booking');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePayNow = () => {
+    if (!adminChoiceData) return;
+    setShowAdminPaymentChoice(false);
+    setCheckoutClientSecret(adminChoiceData.clientSecret);
+    setCheckoutModalData({
+      reservationReference: adminChoiceData.reservationReference,
+      reservationExpiration: adminChoiceData.reservationExpiration,
+      customerLastName: lastName.trim(),
+      ticketLines: adminChoiceData.ticketLinesForModal,
+      feeLineItems: adminChoiceData.feeLineItems,
+      returnPriceAdjustment: adminChoiceData.returnPriceAdjustment,
+      cancellationPolicyFee: adminChoiceData.cancellationPolicyFee,
+      cancellationPolicyLabel: adminChoiceData.cancellationPolicyLabel,
+      subtotal: adminChoiceData.subtotal,
+      tax: adminChoiceData.tax,
+      total: adminChoiceData.totalAmount,
+      totalQuantity: adminChoiceData.totalQuantity,
+      isTaxIncludedInPrice: adminChoiceData.isTaxIncludedInPrice,
+      taxRate: adminChoiceData.taxRate,
+      promoDiscountAmount: adminChoiceData.promoDiscountAmount,
+      discountLabel: adminChoiceData.discountLabel,
+    });
+    setShowCheckoutModal(true);
+    setAdminChoiceData(null);
+  };
+
+  if (activeOptions.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-red-600">{t('booking.noActiveOption') || 'No active product options available'}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="booking-flow-root space-y-8">
+      {/* Admin: choose to pay now or confirm without payment (full balance owed) */}
+      <AdminPaymentChoiceModal
+        open={!!(showAdminPaymentChoice && adminChoiceData)}
+        totalAmount={adminChoiceData?.totalAmount ?? 0}
+        currency={currency}
+        loading={loading}
+        error={error}
+        onPayNow={handlePayNow}
+        onConfirmWithoutPayment={handleConfirmWithoutPayment}
+        onCancel={() => { setShowAdminPaymentChoice(false); setAdminChoiceData(null); setError(''); }}
+      />
+      {checkoutModalData && (
+        <CheckoutModal
+          open={showCheckoutModal}
+          onClose={cancelPendingReservation}
+          onPaymentSubmitStart={() => {
+            paymentSubmitInFlightRef.current = true;
+          }}
+          onPaymentSubmitError={() => {
+            paymentSubmitInFlightRef.current = false;
+          }}
+          clientSecret={checkoutClientSecret}
+          reservationReference={checkoutModalData.reservationReference}
+          reservationExpiration={checkoutModalData.reservationExpiration}
+          customerLastName={checkoutModalData.customerLastName}
+          successUrlOverride={
+            checkoutModalData.successUrlOverride ??
+            (getSuccessUrl
+              ? getSuccessUrl({
+                  reservationRef: checkoutModalData.reservationReference,
+                  lastName: checkoutModalData.customerLastName ?? '',
+                  focusDate: checkoutModalData.bookingDate,
+                })
+              : undefined)
+          }
+          ticketLines={checkoutModalData.ticketLines}
+          feeLineItems={checkoutModalData.feeLineItems}
+          returnPriceAdjustment={checkoutModalData.returnPriceAdjustment}
+          cancellationPolicyFee={checkoutModalData.cancellationPolicyFee}
+          cancellationPolicyLabel={checkoutModalData.cancellationPolicyLabel}
+          subtotal={checkoutModalData.subtotal}
+          tax={checkoutModalData.tax}
+          total={checkoutModalData.total}
+          promoDiscountAmount={checkoutModalData.promoDiscountAmount ?? 0}
+          discountLabel={checkoutModalData.discountLabel}
+          totalQuantity={checkoutModalData.totalQuantity}
+          isTaxIncludedInPrice={checkoutModalData.isTaxIncludedInPrice}
+          taxRate={checkoutModalData.taxRate}
+          changeTotals={checkoutModalData.changeTotals}
+          currency={currency}
+          locale={locale}
+          t={t}
+        />
+      )}
+      {/* Image/video collage - vertical video on left, image grid on right */}
+      {productId && flowUi?.showCollage !== false && (() => {
+        const config = catalog.getProductByIdOrSlug(productId) as {
+          display?: {
+            collageImageIds?: string[];
+            imageIds?: string[];
+          };
+        } | null;
+        const displayProducts = catalog.getProducts(defaultStrings) as Record<
+          string,
+          { id: string; videoUrl?: import('../../constants/products').VideoSources }
+        >;
+        const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
+        const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
+        const hasVideo = !!displayProduct?.videoUrl;
+        const hasImages = collageImageIds.length > 0;
+        if (!hasVideo && !hasImages) return null;
+        return (
+          <div className="booking-collage-wrapper">
+          <BookingFlowCollage
+            video={displayProduct?.videoUrl}
+            videoPosterImageId={config?.display?.imageIds?.[0]}
+            imageIds={hasImages ? collageImageIds : [config?.display?.imageIds?.[0]].filter(Boolean) as string[]}
+            altPrefix={product.name}
+          />
+          </div>
+        );
+      })()}
+
+      {flowUi?.showTourDescription !== false && (
+        <TourDescription productSlug={productId} locale={locale} defaultExpanded={isPartialLaunch} />
+      )}
+
+      {isPartialLaunch ? null : (
+      <div className="booking-calendar-section">
+      {loadingAvailabilities && availabilities.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 gap-4">
+          <div className="booking-loading-spinner" aria-hidden />
+          <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+        </div>
+      ) : availabilities.length === 0 ? (
+        <div className="text-center py-8 text-stone-500">
+          {t('booking.noAvailability')}
+        </div>
+      ) : (
+        <>
+          {/* Date Selection */}
+          <div>
+            <div className="relative">
+              {loadingAvailabilities && (
+                <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
+                  <div className="flex flex-col items-center gap-3">
+                    <div className="booking-loading-spinner" aria-hidden />
+                    <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+                  </div>
+                </div>
+              )}
+              <Calendar
+                availabilitiesByDate={availabilitiesByDate}
+                selectedDate={selectedDate}
+                syncVisibleWeekToSelectedDate={false}
+                selectableSoldOutDate={null}
+                isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
+                onDateSelect={(date) => {
+                  setSelectedDate(date);
+                  handleDateSelect(date);
+                  if (suppressCalendarDateScroll) return;
+                  // Scroll so calendar is almost at top and user sees the rest of the booking flow.
+                  // Dialog: scroll inside contentRef. Full-page: fall back to window scroll.
+                  setTimeout(() => {
+                    const container = contentRef?.current;
+                    if (!useWindowScroll && container && container.scrollHeight > container.clientHeight + 16) {
+                      container.scrollBy({ top: 400, behavior: 'smooth' });
+                    } else if (typeof window !== 'undefined') {
+                      window.scrollBy({ top: 400, behavior: 'smooth' });
+                    }
+                  }, 100);
+                }}
+                timezone={companyTimezone}
+                earliestDate={earliestAvailabilityDate}
+                onVisibleRangeChange={handleVisibleRangeChange}
+                currency={currency}
+                showCapacity={isAdmin}
+                extraDiscountPercent={calendarDiscountPercent}
+                capDiscountBadgesToBookingDate={null}
+              />
+            </div>
+          </div>
+
+          {/* Form sections - equal spacing between each */}
+          <div className="mt-6 space-y-6">
+          {/* Your itinerary box - shown after date selection, before pickup/return/tickets/pickup location */}
+          {selectedDate && !hideItineraryBox && (() => {
+            const hasItineraryAny = activeOptions.some(o => o.itinerary?.length) && (product.destinations?.length ?? 0) > 0;
+            if (!hasItineraryAny) return null;
+            const formattedDate = selectedDate ? format(parseISO(selectedDate), 'MMM d') : '';
+            if (!selectedAvailability) {
+              return <ItineraryPlaceholder formattedDate={formattedDate} t={t} />;
+            }
+            const itineraryItems = computeItineraryDisplay();
+            if (!itineraryItems || itineraryItems.length === 0) return null;
+            const isBookingComplete = Boolean(selectedAvailability &&
+              selectedReturnOption &&
+              (pickupLocationId || pickupLocationSkipped || !product.pickupLocations || product.pickupLocations.length === 0) &&
+              Object.values(quantities).some(qty => qty > 0) &&
+              email.trim() !== '' &&
+              firstName.trim() !== '' &&
+              lastName.trim() !== '');
+            return (
+              <ItineraryBox
+                selectedDate={selectedDate}
+                formattedDate={formattedDate}
+                itineraryItems={itineraryItems}
+                isBookingComplete={isBookingComplete}
+                isItinerarySticky={isItinerarySticky}
+                stickyTopPx={flowUi?.itineraryStickyTopOffsetPx}
+                isMobile={isMobile}
+                useWindowScroll={useWindowScroll}
+                showTooltip={showTooltip}
+                selectedPickupLocation={selectedPickupLocation}
+                pickupLocationSkipped={pickupLocationSkipped}
+                pickupLocationsCount={product.pickupLocations?.length ?? 0}
+                itineraryRef={itineraryRef}
+                t={t}
+                onTooltipToggle={() => setShowTooltip(!showTooltip)}
+                onTooltipShow={setShowTooltip}
+              />
+            );
+          })()}
+
+          {/* Select pickup time */}
+          {selectedDate && (
+            <PickupTimeSelector
+              pickupTimes={pickupTimes}
+              selectedDateTime={selectedAvailability?.dateTime ?? null}
+              selectedTicketCount={totalQuantity}
+              optionsMap={optionsMap}
+              hasAnyMostPopular={hasAnyMostPopular}
+              isAdmin={isAdmin}
+              pickupLocationSkipped={pickupLocationSkipped}
+              t={t}
+              onTimeSelect={handleTimeSelect}
+            />
+          )}
+
+          {/* Select return time */}
+          {selectedAvailability && selectedAvailability.returnOptions && selectedAvailability.returnOptions.length > 0 && (
+            <ReturnTimeSelector
+              returnOptions={returnOptionsWithFloor}
+              selectedReturnOption={selectedReturnOptionWithFloor}
+              selectedTicketCount={totalQuantity}
+              companyTimezone={companyTimezone}
+              currency={currency}
+              locale={locale}
+              isAdmin={isAdmin}
+              t={t}
+              onReturnSelect={(option) => {
+                const raw = selectedAvailability.returnOptions?.find(
+                  (opt) => opt.returnAvailabilityId === option.returnAvailabilityId
+                );
+                setSelectedReturnOption(raw ?? option);
+              }}
+              getStaySummary={calculateStaySummary}
+            />
+          )}
+
+          {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
+          {selectedAvailability && ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) && (() => {
+            const sortedPolicies = [...(pricingConfig?.cancellationPolicies ?? [])].sort((a, b) => {
+              const feeA = a.feeByCurrency[currency] ?? 0;
+              const feeB = b.feeByCurrency[currency] ?? 0;
+              return feeA - feeB;
+            });
+            return (
+            <div ref={cancellationPolicyRef}>
+            <CancellationPolicySelector
+              policies={sortedPolicies}
+              selectedPolicyId={cancellationPolicyId}
+              currency={currency}
+              locale={locale}
+              t={t}
+              onPolicySelect={setCancellationPolicyId}
+              forcedPolicy={forcedCancellationPolicy}
+            />
+            </div>
+            );
+          })()}
+
+          {/* Ticket Selection */}
+          {selectedAvailability && (
+            <TicketSelector
+              pricing={pricing}
+              quantities={quantities}
+              totalQuantity={totalQuantity}
+              selectedVacancies={effectivePartySizeCap}
+              companyTimezone={companyTimezone}
+              pickupDateTime={selectedAvailability.dateTime}
+              pickupVacancies={effectiveSelectedPickupVacancies}
+              returnDateTime={selectedReturnOption?.dateTime ?? null}
+              returnVacancies={effectiveSelectedReturnVacancies}
+              resourceCount={selectedReturnOption ? null : (selectedAvailability.resourceCount ?? null)}
+              currency={currency}
+              locale={locale}
+              isAdmin={isAdmin}
+              isSimplifiedPricingView={isSimplifiedPricingView}
+              t={t}
+              onQuantityChange={handleQuantityChange}
+              minimumQuantities={undefined}
+              ticketUnitFloorByCategory={undefined}
+            />
+          )}
+
+          {/* Add-ons — optional extras for the selected product option */}
+          {selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
+            <AddOnsSection
+              addOns={addOns}
+              addOnSelections={addOnSelections}
+              currency={currency}
+              locale={locale}
+              onSelectionsChange={updateAddOnSelections}
+              minimumTotalByAddOnId={undefined}
+            />
+          )}
+
+          {/* Total and Checkout — shared PriceSummary component */}
+          {selectedAvailability && (
+            <>
+            <CheckoutForm
+                priceSummaryLines={checkoutPriceSummaryLines}
+                totalPrice={totalPrice}
+                totalSummaryLabel={undefined}
+                subtotal={
+                  subtotal !== totalFromSummary || effectivePromoDiscountAmount > 0 || addOnTotal > 0
+                    ? effectiveSubtotal
+                    : undefined
+                }
+                taxAmount={
+                  !isTaxIncludedInPrice &&
+                  (effectivePromoDiscountAmount > 0 ? effectiveTax : tax) > 0
+                    ? (effectivePromoDiscountAmount > 0 ? effectiveTax : tax)
+                    : 0
+                }
+                taxRate={pricingConfig?.taxRate}
+                currency={currency}
+                locale={locale}
+                t={t}
+                extraBetweenTaxAndTotal={
+                  <PromoCodeInput
+                    promoCodeInput={promoCodeInput}
+                    appliedPromoCode={appliedPromoCode}
+                    promoCodeError={promoCodeError}
+                    promoCodeValidating={promoCodeValidating}
+                    promoDiscountAmount={promoDiscountAmount}
+                    currency={currency}
+                    locale={locale}
+                    t={t}
+                    onInputChange={(v) => {
+                      setPromoCodeInput(v);
+                      setPromoCodeError('');
+                    }}
+                    onApply={handleApplyPromo}
+                    onRemove={() => {
+                      promoAppliedSelectionKeyRef.current = null;
+                      setAppliedPromoCode(null);
+                      setPromoCodeInput('');
+                      setPromoCodeError('');
+                      setForcedCancellationPolicy(null);
+                      setCancellationPolicyId(null); // Reset so auto-select effect picks cheapest
+                      fetchedRangesRef.current = [];
+                    }}
+                  />
+                }
+                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={isAdmin}
+                showCommunicationAdminSection
+                skipConfirmationCommunications={skipConfirmationCommunications}
+                disableAutoCommunications={disableAutoCommunications}
+                onSkipConfirmationChange={setSkipConfirmationCommunications}
+                onDisableCommunicationsChange={setDisableAutoCommunications}
+                error={checkoutFormError}
+                loading={loading}
+                totalQuantity={totalQuantity}
+                onCheckout={handleCheckout}
+                submitLabel={changeCheckoutButtonLabel ?? deferredInvoiceSubmitLabel}
+                hideSubmitButton={showCheckoutModal || showAdminPaymentChoice}
+                submitDisabled={false}
+                attributionSummary={flowUi?.partnerAttributionSummary}
+                attributionConfirmLabel={flowUi?.partnerAttributionConfirmLabel}
+                attributionConfirmed={partnerAttributionConfirmed}
+                onAttributionConfirmedChange={setPartnerAttributionConfirmed}
+              />
+            </>
+          )}
+          </div>
+        </>
+      )}
+      </div>
+      )}
+    </div>
+  );
+}
+