@ticketboothapp/booking 1.2.122 → 1.2.124

package/src/components/booking/NewBookingFlow.tsx

@@ -1,443 +1,51 @@
 'use client';
 
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { parseISO, addWeeks, format, isBefore, isAfter, startOfDay, endOfDay } from 'date-fns';
+import { parseISO } 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,
-  VISIBLE_RANGE_BUFFER_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, GetAvailabilitiesResponse } from '../../lib/booking-api';
-import { ItineraryStepType as StepType } from '../../lib/booking-api';
-import {
-  getDisplayPriceFromBaseInDisplayCurrency,
-  computePriceBreakdown,
-  computeOrderSummary,
-  type PriceBreakdown as PriceBreakdownData,
-  type OrderSummary,
-  type OrderSummaryFeeLine,
-} 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';
-import { optionalCheckoutContactFields } from '../../lib/booking/checkout-contact';
 import {
-  filterAvailabilitiesAfterPublicBookingCutoff,
-  isAvailabilityAfterPublicBookingCutoff,
   isAvailabilityWithinPublicPickupUnknownCutoff,
-  isDateAfterPublicBookingCutoff,
-  parseBookingCutoffDateTime,
 } from '../../lib/booking/booking-cutoffs';
-
-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 = getAvailabilityOptionId(selected) || undefined;
-  const dt = selected.dateTime;
-  const availId = selected.availabilityId?.trim();
-  if (availId && optId) {
-    const exact = merged.find(
-      (a) =>
-        a.availabilityId === availId &&
-        getAvailabilityOptionId(a) === optId
-    );
-    if (exact) return exact;
-  }
-  return merged.find((a) => a.dateTime === dt && getAvailabilityOptionId(a) === optId);
-}
-
-function getAvailabilityOptionId(availability: Availability, fallbackOptionId?: string): string {
-  const productOptionId = availability.productOptionId?.trim();
-  if (productOptionId) return productOptionId;
-  const productId = availability.productId?.trim();
-  if (productId?.startsWith('po_')) return productId;
-  return fallbackOptionId?.trim() ?? '';
-}
-
-function availabilityWithOptionId(availability: Availability, fallbackOptionId?: string): Availability {
-  const productOptionId = getAvailabilityOptionId(availability, fallbackOptionId);
-  return productOptionId ? { ...availability, productOptionId } : availability;
-}
-
-/** Prefer full availability rows over calendar summary rows when merging fetches. */
-function mergeAvailabilityRecord(
-  existing: Availability | undefined,
-  incoming: Availability,
-): Availability {
-  if (!existing) return incoming;
-  const existingIsSummary = existing.isSummary === true;
-  const incomingIsSummary = incoming.isSummary === true;
-  if (existingIsSummary && !incomingIsSummary) return incoming;
-  if (!existingIsSummary && incomingIsSummary) return existing;
-  return incoming;
-}
-
-function mergeAvailabilitiesIntoMap(
-  map: Map<string, Availability>,
-  availabilities: Availability[],
-): void {
-  for (const availability of availabilities) {
-    const key = getAvailabilityCacheKey(availability);
-    map.set(key, mergeAvailabilityRecord(map.get(key), availability));
-  }
-}
-
-function getAvailabilityCacheKey(availability: Availability): string {
-  return `${availability.dateTime}-${getAvailabilityOptionId(availability)}`;
-}
-
-function pickDefaultAvailabilityForTimes(
-  times: Availability[],
-  activeOptions: Product['options'],
-): Availability | null {
-  if (times.length === 0) return null;
-  const mostPopularOption = activeOptions.find((opt) => opt.mostPopular);
-  const candidate = mostPopularOption
-    ? times.find(
-        (avail) => getAvailabilityOptionId(avail) === mostPopularOption.optionId && avail.vacancies > 0,
-      )
-    : null;
-  const fallback = times.find((avail) => avail.vacancies > 0);
-  return candidate ?? fallback ?? null;
-}
-
-function availabilityMatchesSelectedDate(
-  availability: Availability,
-  selectedDate: string,
-  companyTimezone: string,
-): boolean {
-  try {
-    const dateInCompanyTz = formatInTimeZone(
-      parseAvailabilityDateTime(availability.dateTime),
-      companyTimezone,
-      'yyyy-MM-dd',
-    );
-    return dateInCompanyTz === selectedDate;
-  } catch {
-    return false;
-  }
-}
-
-function shouldSyncSelectedAvailability(
-  current: Availability,
-  updated: Availability,
-): boolean {
-  return (
-    current !== updated &&
-    (current.isSummary !== updated.isSummary ||
-      current.vacancies !== updated.vacancies ||
-      current.availabilityId !== updated.availabilityId ||
-      (current.returnOptions?.length ?? 0) !== (updated.returnOptions?.length ?? 0))
-  );
-}
-
-function mergePrecomputedPricesFromAvailabilityResult(
-  next: Record<string, PrecomputedPricesByCategory>,
-  result: GetAvailabilitiesResponse,
-  fallbackOptionId?: string,
-) {
-  if (result.precomputedPricesByOption) {
-    Object.entries(result.precomputedPricesByOption).forEach(([optionId, prices]) => {
-      if (prices && Object.keys(prices).length > 0) next[optionId] = prices;
-    });
-  }
-  if (fallbackOptionId && result.precomputedPrices && Object.keys(result.precomputedPrices).length > 0) {
-    next[fallbackOptionId] = result.precomputedPrices;
-  }
-}
-
-/** 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 = getAvailabilityOptionId(selectedAvailability);
-  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 hasOptionScopedPrice = baseInDisplayCurrency > 0;
-    const priceCADForBreakdown =
-      hasOptionScopedPrice && currency === 'CAD' ? baseInDisplayCurrency : backendPriceCAD;
-    const displayCurrencyPriceForFallback = hasOptionScopedPrice
-      ? baseInDisplayCurrency
-      : backendInDisplayCurrency;
-    const isPublicMode = isSimplifiedPricingView;
-    const breakdown = computePriceBreakdown(
-      pricingConfig,
-      currency,
-      priceCADForBreakdown,
-      basePriceCAD,
-      hasFees,
-      appliedAdjustments,
-      undefined,
-      baseInDisplayCurrency,
-      isPublicMode,
-    );
-    const price = breakdown?.finalPrice ?? rateToDisplayPrice(displayCurrencyPriceForFallback);
-    return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: priceCADForBreakdown };
-  };
-  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 getInitialAvailabilityRangeStart(companyTimezone: string): Date {
-  const todayStr = formatInTimeZone(new Date(), companyTimezone, 'yyyy-MM-dd');
-  const seasonStartStr = formatInTimeZone(EARLIEST_AVAILABILITY_DATE, companyTimezone, 'yyyy-MM-dd');
-  const seasonEndStr = formatInTimeZone(LATEST_AVAILABILITY_DATE, companyTimezone, 'yyyy-MM-dd');
-  const initialDateStr =
-    todayStr < seasonStartStr
-      ? seasonStartStr
-      : todayStr > seasonEndStr
-        ? seasonStartStr
-        : todayStr;
-
-  return fromZonedTime(parseISO(`${initialDateStr}T00:00:00.000`), companyTimezone);
-}
-
-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;
-}
+import {
+  availabilityMatchesSelectedDate,
+  getAvailabilityOptionId,
+  normalizeAddOnSelections,
+  parseAvailabilityDateTime,
+  pickDefaultAvailabilityForTimes,
+} from './standard-booking-availability';
+import { useStandardBookingAvailability } from './use-standard-booking-availability';
+import { useStandardBookingAutoSelections } from './useStandardBookingAutoSelections';
+import {
+  useStandardBookingCheckoutController,
+} from './standard-booking-checkout-controller';
+import { useStandardBookingPriceSummary } from './useStandardBookingPriceSummary';
+import { useStandardBookingPromoController } from './useStandardBookingPromoController';
+import { useStandardBookingPickupItinerary } from './useStandardBookingPickupItinerary';
+import { useChangeBookingItineraryUiState } from './useChangeBookingItineraryUiState';
+import { useBookingAvailabilityAddOns } from './useBookingAvailabilityAddOns';
+import { useBookingQuantityCapTrim } from './useBookingQuantityCapTrim';
+import { useBookingViewItemAnalytics } from './useBookingViewItemAnalytics';
+import { StandardBookingCheckoutSection } from './StandardBookingCheckoutSection';
+import { StandardBookingCheckoutDialogs } from './StandardBookingCheckoutDialogs';
+import { StandardBookingItineraryPanel } from './StandardBookingItineraryPanel';
+import { StandardBookingMediaIntro } from './StandardBookingMediaIntro';
+import { StandardBookingSelectionControlsPanel } from './StandardBookingSelectionControlsPanel';
 
 export function NewBookingFlow({
   product,
   productId,
-  onBack,
   currency,
   contentRef,
   onSuccess,
@@ -461,7 +69,7 @@ export function NewBookingFlow({
   availabilityPricingProfileId,
   availabilityCancellationPolicyProfileId,
 }: NewBookingFlowProps) {
-  const { env, strings: defaultStrings, analytics, catalog } = useBookingHost();
+  const { env, analytics, catalog } = useBookingHost();
   const { t } = useTranslations();
   const { locale } = useLocale();
   const companyTimezone = useCompanyTimezone(); // Get timezone from context
@@ -476,7 +84,6 @@ export function NewBookingFlow({
     suppressCalendarDateScroll,
     mode: bookingAppMode,
   } = useBookingApp();
-  const availabilitiesCache = useAvailabilitiesCache();
   const isAdmin = permissions.viewerRole === 'admin';
   const minimumPaxToRun = useMemo(() => {
     const productConfigKey = productId || product.productId;
@@ -484,10 +91,7 @@ export function NewBookingFlow({
     const config = catalog.getProductByIdOrSlug(productConfigKey) as { minimumPaxToRun?: number | null } | null;
     return config?.minimumPaxToRun ?? null;
   }, [catalog, product.productId, productId]);
-  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
   const [bookingCutoffNowMs, setBookingCutoffNowMs] = useState(() => Date.now());
-  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('');
@@ -495,16 +99,6 @@ export function NewBookingFlow({
   const [phoneNumber, setPhoneNumber] = 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).
@@ -514,118 +108,20 @@ export function NewBookingFlow({
   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 selectedDateHydrationInFlightKeyRef = useRef<string | null>(null);
-  const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
-  const [selectedDate, setSelectedDate] = useState<string>('');
-  const selectedDateRangeExtensionKey = useMemo(() => {
-    if (!visibleRange || !selectedDate) return '';
-    try {
-      return isAfter(parseISO(selectedDate), visibleRange.end) ? selectedDate : '';
-    } catch {
-      return '';
-    }
-  }, [selectedDate, visibleRange]);
-  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);
   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') || [],
@@ -656,895 +152,77 @@ export function NewBookingFlow({
 
   const bookingCutoffNow = useMemo(() => new Date(bookingCutoffNowMs), [bookingCutoffNowMs]);
   const bookingCutoffMinutes = product.bookingCutoffMinutes ?? null;
-
-  const hidePickupSkipOption = useMemo(
-    () =>
-      !isAdmin &&
-      selectedAvailability != null &&
-      isAvailabilityWithinPublicPickupUnknownCutoff(selectedAvailability, bookingCutoffNow),
-    [bookingCutoffNow, isAdmin, selectedAvailability],
-  );
-
-  useEffect(() => {
-    if (!hidePickupSkipOption || !pickupLocationSkipped) return;
-    setPickupLocationSkipped(false);
-  }, [hidePickupSkipOption, pickupLocationSkipped]);
-
-  // 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 result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
-      allOptions: true,
-      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;
-      });
-    }
-    const results = [{
-      optionId: product.productId,
-      availabilities: result.availabilities.map((avail) => availabilityWithOptionId(avail)),
-      precomputedPrices: result.precomputedPrices,
-      precomputedPricesByOption: result.precomputedPricesByOption,
-      pricingConfig: result.pricingConfig,
-    }];
-
-    const allFetchedAvailabilities = results.flatMap((r) => r.availabilities);
-
-    setPrecomputedPricesByOption((prev) => {
-      const next = { ...(prev || {}) };
-      results.forEach((r) => {
-        mergePrecomputedPricesFromAvailabilityResult(next, r);
-      });
-      return Object.keys(next).length > 0 ? next : prev;
-    });
-
-    let mergedOut: Availability[] = [];
-    setAvailabilities((prev) => {
-      const existingMap = new Map(prev.map((avail) => [getAvailabilityCacheKey(avail), avail]));
-      mergeAvailabilitiesIntoMap(existingMap, allFetchedAvailabilities);
-      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,
-          cancellationPolicyProfileIdForAvailabilities,
-        )
-      : null;
-    if (cacheKey && availabilitiesCache) {
-      const existingCache = availabilitiesCache.get(cacheKey);
-      const existingAvailabilities = existingCache?.availabilities ?? [];
-      const mergedAvailabilitiesMap = new Map(
-        existingAvailabilities.map((a) => [getAvailabilityCacheKey(a), a])
-      );
-      mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
-      const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
-      results.forEach((r) => {
-        mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r);
-      });
-      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,
+  const {
+    selectedAvailability,
+    setSelectedAvailability,
+    selectedReturnOption,
+    setSelectedReturnOption,
     selectedDate,
-    isPrivateShuttle,
+    setSelectedDate,
+    loadingAvailabilities,
+    isFetchingMoreAvailabilities,
+    pricingConfig,
+    precomputedPricesByOption,
+    publicVisibleAvailabilities,
+    availabilitiesByDate,
+    dates,
+    handleVisibleRangeChange,
+    reloadAvailabilitiesAfterReserveConflict,
+    refreshSelectedDateDetailsForCheckout,
+    fetchedRangesRef,
+  } = useStandardBookingAvailability({
+    product,
     activeOptions,
-    appliedPromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    product.productId,
     activeOptionIdsKey,
-    availabilitiesCache,
-  ]);
-
-  /** Fresh selected-day check before reserve so stale calendar vacancies are corrected before payment. */
-  const refreshSelectedDateDetailsForCheckout = useCallback(async (): Promise<Availability[]> => {
-    if (!selectedDate || activeOptions.length === 0) return [];
-
-    let startDateStr: string;
-    let endDateStr: string;
-    if (isPrivateShuttle) {
-      startDateStr = selectedDate;
-      endDateStr = selectedDate;
-    } else {
-      const startMoment = fromZonedTime(parseISO(`${selectedDate}T00:00:00.000`), companyTimezone);
-      const endMoment = fromZonedTime(parseISO(`${selectedDate}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 result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
-      allOptions: true,
-      promoCode: appliedPromoCode || undefined,
-      ...(pricingProfileIdForAvailabilities
-        ? { pricingProfileId: pricingProfileIdForAvailabilities }
-        : {}),
-      ...(cancellationPolicyProfileIdForAvailabilities
-        ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-        : {}),
-    });
-    const results = [{
-      optionId: product.productId,
-      availabilities: result.availabilities.map((availability) => availabilityWithOptionId(availability)),
-      precomputedPrices: result.precomputedPrices,
-      precomputedPricesByOption: result.precomputedPricesByOption,
-      pricingConfig: result.pricingConfig,
-    }];
-    const detailedAvailabilities = results.flatMap((r) => r.availabilities);
-    if (detailedAvailabilities.length === 0) return [];
-
-    if (result.pricingConfig && !pricingConfigSetRef.current) {
-      setPricingConfig(result.pricingConfig);
-      pricingConfigSetRef.current = true;
-    }
-
-    setPrecomputedPricesByOption((prev) => {
-      const next = { ...(prev || {}) };
-      results.forEach((r) => mergePrecomputedPricesFromAvailabilityResult(next, r));
-      return Object.keys(next).length > 0 ? next : prev;
-    });
-
-    let mergedOut: Availability[] = [];
-    setAvailabilities((prev) => {
-      const merged = new Map(prev.map((availability) => [getAvailabilityCacheKey(availability), availability]));
-      mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
-      mergedOut = Array.from(merged.values());
-      return mergedOut;
-    });
-
-    const cacheKey = availabilitiesCache
-      ? buildAvailabilitiesCacheKey(
-          product.productId,
-          activeOptionIdsKey,
-          appliedPromoCode,
-          pricingProfileIdForAvailabilities,
-          cancellationPolicyProfileIdForAvailabilities,
-        )
-      : null;
-    if (cacheKey && availabilitiesCache) {
-      const existingCache = availabilitiesCache.get(cacheKey);
-      const mergedAvailabilities = new Map(
-        (existingCache?.availabilities ?? []).map((availability) => [
-          getAvailabilityCacheKey(availability),
-          availability,
-        ])
-      );
-      mergeAvailabilitiesIntoMap(mergedAvailabilities, detailedAvailabilities);
-      const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
-      results.forEach((r) => mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r));
-      availabilitiesCache.merge(cacheKey, {
-        fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
-        availabilities: Array.from(mergedAvailabilities.values()),
-        pricingConfig: result.pricingConfig ?? existingCache?.pricingConfig ?? null,
-        precomputedPricesByOption: Object.keys(mergedPrecomputed).length > 0 ? mergedPrecomputed : null,
-      });
-    }
-
-    return detailedAvailabilities;
-  }, [
-    selectedDate,
-    activeOptions.length,
     isPrivateShuttle,
-    companyTimezone,
-    product.productId,
-    appliedPromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    availabilitiesCache,
-    activeOptionIdsKey,
-  ]);
-
-  // Initialize visible range around today during the season, falling back to season open outside it.
-  useEffect(() => {
-    if (!visibleRange) {
-      const initialStart = getInitialAvailabilityRangeStart(companyTimezone);
-      const initialEnd = addWeeks(initialStart, INITIAL_FETCH_WEEKS + VISIBLE_RANGE_BUFFER_WEEKS);
-      setVisibleRange({ start: initialStart, end: initialEnd });
-    }
-  }, [companyTimezone, 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;
-      
-      // Include an externally seeded selected date only when it falls outside the current calendar window.
-      // Normal date clicks are already inside visibleRange and should not re-fetch the broad calendar summary.
-      if (selectedDateRangeExtensionKey) {
-        try {
-          const selectedDateObj = parseISO(selectedDateRangeExtensionKey);
-          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,
-            cancellationPolicyProfileIdForAvailabilities,
-          )
-        : null;
-      const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
-      let shouldRevalidateCachedRange = false;
-      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) {
-          shouldRevalidateCachedRange = true;
-          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];
-            // Show cached availability instantly, then quietly revalidate the visible range.
-          }
-          // Stale-while-revalidate: show cached data, fetch in background.
-        }
-        // 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 = shouldRevalidateCachedRange || 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 if (!shouldRevalidateCachedRange) 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'");
-        }
-        
-        const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
-          allOptions: true,
-          summary: true,
-          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;
-          });
-        }
-        const results = [{
-          optionId: product.productId,
-          availabilities: result.availabilities.map((avail) => availabilityWithOptionId(avail)),
-          precomputedPrices: result.precomputedPrices,
-          precomputedPricesByOption: result.precomputedPricesByOption,
-          pricingConfig: result.pricingConfig,
-        }];
-        const allFetchedAvailabilities = results.flatMap(r => r.availabilities);
-        if (allFetchedAvailabilities.length > 0) {
-          hasLoadedAvailabilitiesRef.current = true;
-        }
-        setPrecomputedPricesByOption(prev => {
-          const next = { ...(prev || {}) };
-          results.forEach(r => {
-            mergePrecomputedPricesFromAvailabilityResult(next, r);
-          });
-          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 => [getAvailabilityCacheKey(avail), avail])
-          );
-          
-          // Merge new availabilities - update existing ones or add new ones
-          mergeAvailabilitiesIntoMap(existingMap, allFetchedAvailabilities);
-          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) => [getAvailabilityCacheKey(a), a])
-          );
-          mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
-          const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
-          results.forEach((r) => {
-            mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r);
-          });
-          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) {
-        if (shouldRevalidateCachedRange && cached?.availabilities.length) {
-          console.warn('Background availability refresh failed; keeping cached availability visible.', err);
-        } else {
-          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,
+    isAdmin,
     companyTimezone,
-    selectedDateRangeExtensionKey,
-    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 });
-    }
-  }, []);
-
-  const publicVisibleAvailabilities = useMemo(
-    () =>
-      isAdmin
-        ? availabilities
-        : filterAvailabilitiesAfterPublicBookingCutoff(availabilities, bookingCutoffNow, bookingCutoffMinutes),
-    [availabilities, bookingCutoffMinutes, bookingCutoffNow, isAdmin],
-  );
-
-  // Group availabilities by date (in company timezone) and sort by time
-  // Memoized to prevent recalculation on every render
-  const availabilitiesByDate = useMemo(() => {
-    const grouped = publicVisibleAvailabilities.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;
-  }, [publicVisibleAvailabilities, companyTimezone]);
-
-  const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
-
-  useEffect(() => {
-    if (!selectedDate || activeOptions.length === 0) return;
-    if (!selectedAvailability) return;
-    if (!availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone)) return;
-    if (selectedAvailability.isSummary !== true) return;
-    const hydrationKey = [
-      product.productId,
-      selectedDate,
-      activeOptionIdsKey,
-      appliedPromoCode ?? '',
-      pricingProfileIdForAvailabilities ?? '',
-      cancellationPolicyProfileIdForAvailabilities ?? '',
-    ].join('|');
-    if (selectedDateHydrationInFlightKeyRef.current === hydrationKey) return;
-    selectedDateHydrationInFlightKeyRef.current = hydrationKey;
-
-    let cancelled = false;
-    async function hydrateSelectedDateDetails() {
-      setIsFetchingMoreAvailabilities(true);
-      try {
-        let startDateStr: string;
-        let endDateStr: string;
-
-        if (isPrivateShuttle) {
-          startDateStr = selectedDate;
-          endDateStr = selectedDate;
-        } else {
-          const startMoment = fromZonedTime(parseISO(`${selectedDate}T00:00:00.000`), companyTimezone);
-          const endMoment = fromZonedTime(parseISO(`${selectedDate}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 result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
-          allOptions: true,
-          responseMode: 'booking-day',
-          promoCode: appliedPromoCode || undefined,
-          ...(pricingProfileIdForAvailabilities
-            ? { pricingProfileId: pricingProfileIdForAvailabilities }
-            : {}),
-          ...(cancellationPolicyProfileIdForAvailabilities
-            ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-            : {}),
-        });
-        const results = [{
-          optionId: product.productId,
-          availabilities: result.availabilities.map((availability) => availabilityWithOptionId(availability)),
-          precomputedPrices: result.precomputedPrices,
-          precomputedPricesByOption: result.precomputedPricesByOption,
-          pricingConfig: result.pricingConfig,
-        }];
-        if (cancelled) return;
-
-        const detailedAvailabilities = results.flatMap((result) => result.availabilities);
-        if (detailedAvailabilities.length === 0) return;
-
-        const firstPricingConfig = results.find((result) => result.pricingConfig)?.pricingConfig;
-        if (firstPricingConfig && !pricingConfigSetRef.current) {
-          setPricingConfig(firstPricingConfig);
-          pricingConfigSetRef.current = true;
-        }
-
-        setPrecomputedPricesByOption((prev) => {
-          const next = { ...(prev || {}) };
-          results.forEach((result) => {
-            mergePrecomputedPricesFromAvailabilityResult(next, result);
-          });
-          return Object.keys(next).length > 0 ? next : prev;
-        });
-
-        setAvailabilities((prev) => {
-          const merged = new Map(prev.map((availability) => [getAvailabilityCacheKey(availability), availability]));
-          mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
-          return Array.from(merged.values());
-        });
-        const updatedSelection = findMergedAvailabilityForSelection(detailedAvailabilities, selectedAvailability);
-        if (updatedSelection && selectedAvailability && shouldSyncSelectedAvailability(selectedAvailability, updatedSelection)) {
-          setSelectedAvailability(updatedSelection);
-          if (selectedReturnOption && updatedSelection.returnOptions) {
-            const updatedReturnOption = updatedSelection.returnOptions.find(
-              (option) => option.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
-            );
-            if (updatedReturnOption) setSelectedReturnOption(updatedReturnOption);
-          }
-        }
-
-        const cacheKey = availabilitiesCache
-          ? buildAvailabilitiesCacheKey(
-              product.productId,
-              activeOptionIdsKey,
-              appliedPromoCode,
-              pricingProfileIdForAvailabilities,
-              cancellationPolicyProfileIdForAvailabilities,
-            )
-          : null;
-        if (cacheKey && availabilitiesCache) {
-          const existingCache = availabilitiesCache.get(cacheKey);
-          const mergedAvailabilities = new Map(
-            (existingCache?.availabilities ?? []).map((availability) => [
-              getAvailabilityCacheKey(availability),
-              availability,
-            ])
-          );
-          mergeAvailabilitiesIntoMap(mergedAvailabilities, detailedAvailabilities);
-          const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
-          results.forEach((result) => {
-            mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, result);
-          });
-          availabilitiesCache.merge(cacheKey, {
-            fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
-            availabilities: Array.from(mergedAvailabilities.values()),
-            pricingConfig: firstPricingConfig ?? existingCache?.pricingConfig ?? null,
-            precomputedPricesByOption: Object.keys(mergedPrecomputed).length > 0 ? mergedPrecomputed : null,
-          });
-        }
-      } catch (err) {
-        if (!cancelled) {
-          console.error('Error hydrating availability details:', err);
-        }
-      } finally {
-        if (selectedDateHydrationInFlightKeyRef.current === hydrationKey) {
-          selectedDateHydrationInFlightKeyRef.current = null;
-        }
-        if (!cancelled) setIsFetchingMoreAvailabilities(false);
-      }
-    }
-
-    hydrateSelectedDateDetails();
-    return () => {
-      cancelled = true;
-    };
-  }, [
+    bookingCutoffNow,
+    bookingCutoffMinutes,
+    setQuantities,
+    setError,
+  });
+  const {
+    isItinerarySticky,
+    isMobile,
+    showTooltip,
+    setShowTooltip,
+    toggleTooltip,
+    itineraryRef,
+  } = useChangeBookingItineraryUiState({
     selectedDate,
     selectedAvailability,
-    selectedReturnOption,
-    activeOptions.length,
-    activeOptionIdsKey,
-    isPrivateShuttle,
-    companyTimezone,
-    appliedPromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    availabilitiesCache,
-    product.productId,
-  ]);
+    useWindowScroll,
+    stickyTopPx: flowUi?.itineraryStickyTopOffsetPx,
+  });
 
-  // Track mobile state
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 640); // sm breakpoint
-    };
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
+  const clearAddOnSelections = useCallback(() => {
+    setAddOnSelections([]);
   }, []);
+  const { addOns } = useBookingAvailabilityAddOns({
+    selectedAvailability,
+    companyId: product.companyId,
+    onProductOptionChange: clearAddOnSelections,
+  });
 
-  // 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]);
+  const hidePickupSkipOption = useMemo(
+    () =>
+      !isAdmin &&
+      selectedAvailability != null &&
+      isAvailabilityWithinPublicPickupUnknownCutoff(selectedAvailability, bookingCutoffNow),
+    [bookingCutoffNow, isAdmin, selectedAvailability],
+  );
 
-  // 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 (!hidePickupSkipOption || !pickupLocationSkipped) return;
+    setPickupLocationSkipped(false);
+  }, [hidePickupSkipOption, pickupLocationSkipped]);
 
-    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
+  useBookingViewItemAnalytics({ analytics, product, productId, currency });
 
   // 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
@@ -1572,7 +250,7 @@ export function NewBookingFlow({
     }
     
     return earliestAvailabilityDateRef.current;
-  }, [dates, availabilitiesByDate]);
+  }, [dates, availabilitiesByDate, companyTimezone]);
   
   const timesForSelectedDate = useMemo(() => {
     return selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
@@ -1600,7 +278,6 @@ export function NewBookingFlow({
     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);
@@ -1608,10 +285,6 @@ export function NewBookingFlow({
       setPickupLocationId(initialValues.pickupLocationId.trim());
       setPickupLocationSkipped(false);
     }
-    if (trimmedPromo) {
-      setPromoCodeInput(trimmedPromo);
-      setAppliedPromoCode(trimmedPromo);
-    }
     hasAppliedInitialValuesRef.current = true;
   }, [initialValues]);
 
@@ -1623,7 +296,7 @@ export function NewBookingFlow({
     if (!selectedDate) {
       setSelectedDate(targetDate);
     }
-  }, [initialValues?.dateTime, selectedAvailability, selectedDate, companyTimezone]);
+  }, [initialValues?.dateTime, selectedAvailability, selectedDate, companyTimezone, setSelectedDate]);
 
   useEffect(() => {
     if (
@@ -1665,842 +338,163 @@ export function NewBookingFlow({
     [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
-      .filter((avail) => {
-        if (isAdmin) return true;
-        const availabilityTime = parseBookingCutoffDateTime(avail.dateTime);
-        const pickupTime = (offsetMinutes > 0 && selectedPickupLocation)
-          ? new Date(availabilityTime.getTime() + offsetMinutes * 60 * 1000)
-          : availabilityTime;
-        return isDateAfterPublicBookingCutoff(pickupTime, bookingCutoffNow, bookingCutoffMinutes);
-      })
-      .map(avail => {
-      // Parse the dateTime (which should already be in company timezone from backend)
-      const availabilityTime = parseBookingCutoffDateTime(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,
-      };
-    });
-  }, [
-    bookingCutoffNow,
-    bookingCutoffMinutes,
-    isAdmin,
-    selectedDate,
+  const handleSelectedAvailabilityExpired = useCallback(() => {
+    setSelectedAvailability(null);
+    setSelectedReturnOption(null);
+  }, [setSelectedAvailability, setSelectedReturnOption]);
+
+  const {
     selectedPickupLocation,
+    pickupTimes,
+    hasAnyMostPopular,
+    getPickupCutoffEligibleTimesForDate,
+    isPublicSelectableAvailability,
+    calculateStaySummary,
+    computeItineraryDisplay,
+    computeItineraryDisplayForStorage,
+  } = useStandardBookingPickupItinerary({
+    product,
+    activeOptions,
+    optionsMap,
+    selectedDate,
     timesForSelectedDate,
+    availabilitiesByDate,
+    selectedAvailability,
+    selectedReturnOption,
+    pickupLocationId,
     pickupLocationSkipped,
-    maxTimeOffsetMinutes,
     companyTimezone,
-  ]);
-
-  const isAvailabilityPickupAfterPublicBookingCutoff = useCallback(
-    (availability: Availability, now: Date = bookingCutoffNow): boolean => {
-      if (isAdmin) return true;
-      const offsetMinutes = pickupLocationSkipped
-        ? 0
-        : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
-      const availabilityTime = parseBookingCutoffDateTime(availability.dateTime);
-      const pickupTime = (offsetMinutes > 0 && selectedPickupLocation)
-        ? new Date(availabilityTime.getTime() + offsetMinutes * 60 * 1000)
-        : availabilityTime;
-      return isDateAfterPublicBookingCutoff(pickupTime, now, bookingCutoffMinutes);
-    },
-    [
-      bookingCutoffNow,
-      bookingCutoffMinutes,
-      isAdmin,
-      pickupLocationSkipped,
-      selectedPickupLocation,
-    ],
-  );
-
-  const getPickupCutoffEligibleTimesForDate = useCallback(
-    (date: string): Availability[] => {
-      const times = availabilitiesByDate[date] ?? [];
-      return times.filter((avail) =>
-        isAvailabilityPickupAfterPublicBookingCutoff(avail),
-      );
-    },
-    [
-      availabilitiesByDate,
-      isAvailabilityPickupAfterPublicBookingCutoff,
-    ],
-  );
-
-  const isPublicSelectableAvailability = useCallback(
-    (availability: Availability, now: Date = bookingCutoffNow): boolean => {
-      if (isAdmin) return true;
-      if (!isAvailabilityAfterPublicBookingCutoff(availability, now, bookingCutoffMinutes)) return false;
-      if (!isAvailabilityPickupAfterPublicBookingCutoff(availability, now)) return false;
-      const availabilityDate = formatInTimeZone(
-        parseBookingCutoffDateTime(availability.dateTime),
-        companyTimezone,
-        'yyyy-MM-dd',
-      );
-      const optionId = getAvailabilityOptionId(availability);
-      return getPickupCutoffEligibleTimesForDate(availabilityDate).some(
-        (candidate) =>
-          candidate.dateTime === availability.dateTime &&
-          getAvailabilityOptionId(candidate) === optionId,
-      );
-    },
-    [
-      bookingCutoffMinutes,
-      bookingCutoffNow,
-      companyTimezone,
-      getPickupCutoffEligibleTimesForDate,
-      isAvailabilityPickupAfterPublicBookingCutoff,
-      isAdmin,
-    ],
-  );
-
-  useEffect(() => {
-    if (isAdmin || !selectedAvailability) return;
-    const optionId = getAvailabilityOptionId(selectedAvailability);
-    const stillSelectable = getPickupCutoffEligibleTimesForDate(selectedDate).some(
-      (avail) =>
-        avail.dateTime === selectedAvailability.dateTime &&
-        getAvailabilityOptionId(avail) === optionId,
-    );
-    if (!stillSelectable) {
-      setSelectedAvailability(null);
-      setSelectedReturnOption(null);
-    }
-  }, [
-    getPickupCutoffEligibleTimesForDate,
     isAdmin,
-    selectedAvailability,
-    selectedDate,
-  ]);
-
-  // 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 =
-      getAvailabilityOptionId(selectedAvailability) ||
-      (activeOptions.length === 1 ? activeOptions[0]?.optionId : undefined);
-    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 =
-      getAvailabilityOptionId(selectedAvailability) ||
-      (activeOptions.length === 1 ? activeOptions[0]?.optionId : undefined);
-    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 ? getAvailabilityOptionId(selectedAvailability) : ''));
-    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');
+    bookingCutoffNow,
+    bookingCutoffMinutes,
+    onSelectedAvailabilityExpired: handleSelectedAvailabilityExpired,
+  });
 
-  // 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,
+  useStandardBookingAutoSelections({
+    selectedDate,
     selectedAvailability,
+    selectedReturnOption,
+    timesForSelectedDateLength: timesForSelectedDate.length,
+    timesForSelectedDateSelectionKey,
+    activeOptions,
+    companyTimezone,
+    getPickupCutoffEligibleTimesForDate,
+    setSelectedAvailability,
+    setSelectedReturnOption,
+    setSelectedDate,
+    setError,
+    initialReturnAvailabilityId: initialValues?.returnAvailabilityId,
+    initialReturnDateTime: initialValues?.returnDateTime,
+    autoSelectFirstAvailableDate: flowUi?.autoSelectFirstAvailableDate === true,
+    isPartialLaunch,
+    initialDateTime: initialValues?.dateTime,
+    dates,
     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;
+    suppressCalendarDateScroll,
+    contentRef,
+    useWindowScroll,
+    autoSelectFirstHighlightedPickup: flowUi?.autoSelectFirstHighlightedPickup === true,
+    highlightedPickupLocationIds,
+    pickupLocationId,
+    pickupLocationSkipped,
+    initialPickupLocationId: initialValues?.pickupLocationId,
+    pickupLocations: product.pickupLocations,
+    setPickupLocationId,
+    setPickupLocationSkipped,
+  });
 
-  /** 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]
+  const promoValidationQuantity = useMemo(
+    () => Object.values(quantities).reduce((total, quantity) => total + quantity, 0),
+    [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,
-        };
-      }),
-    ];
-  }, [
+  const clearFetchedAvailabilityRanges = useCallback(() => {
+    fetchedRangesRef.current = [];
+  }, [fetchedRangesRef]);
+  const {
+    promoCodeError,
+    promoCodeValidating,
+    forcedCancellationPolicy,
+    cancellationPolicyRef,
+    handlePromoInputChange,
+    handleApplyPromo,
+    handleRemovePromo,
+  } = useStandardBookingPromoController({
+    autoAppliedPromoCode,
+    initialPromoCode: initialValues?.promoCode,
+    promoCodeInput,
+    setPromoCodeInput,
+    appliedPromoCode,
+    setAppliedPromoCode,
     selectedAvailability,
-    ticketLineItems,
-    pricing,
-    getPriceBreakdown,
-    selectedReturnOption,
-    checkoutReturnLineAmount,
-    totalQuantity,
+    totalQuantity: promoValidationQuantity,
+    productCompanyId: product.companyId,
+    productId: product.productId,
+    clearFetchedAvailabilityRanges,
+    setCancellationPolicyId,
     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; itemTotal: number }>,
-    effectiveSubtotal: 0,
-    displayedProductFeeTotal: 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 = getAvailabilityOptionId(selectedAvailability);
-    if (!optionId || !quantitiesSignature) return '';
-    return [
-      appliedPromoCode,
-      companyId,
-      product.productId,
-      optionId,
-      selectedAvailability.dateTime,
-      selectedAvailability.availabilityId ?? '',
-      currency,
-      quantitiesSignature,
-      ticketLineItems
-        .map((line) => `${line.category}:${line.qty}:${Math.round(line.itemTotal * 100)}`)
-        .sort()
-        .join('|'),
-      String(Math.round(feeLineItems.reduce((sum, fee) => sum + fee.totalAmount, 0) * 100)),
-      String(Math.round(effectiveSubtotal * 100)),
-    ].join('::');
-  }, [
-    appliedPromoCode,
-    selectedAvailability?.dateTime,
-    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
-    selectedAvailability?.availabilityId,
+  const {
+    returnOptionsWithFloor,
+    selectedReturnOptionWithFloor,
+    effectiveSelectedPickupVacancies,
+    effectiveSelectedReturnVacancies,
+    pricing,
+    getPriceBreakdown,
     totalQuantity,
-    product.companyId,
-    product.productId,
-    currency,
-    quantitiesSignature,
-    ticketLineItems,
+    subtotal,
+    tax,
+    totalFromSummary,
     feeLineItems,
+    cancellationPolicyFee,
+    isTaxIncludedInPrice,
+    ticketLineItems,
+    effectivePartySizeCap,
+    effectiveCancellationPolicyLabel,
+    addOnTotal,
+    checkoutReturnLineAmount,
     effectiveSubtotal,
-  ]);
-
-  promoDiscountParamsRef.current = {
-    selectedAvailability,
-    ticketLineItems: ticketLineItems.map((l) => ({ category: l.category, qty: l.qty, itemTotal: l.itemTotal })),
-    effectiveSubtotal,
-    displayedProductFeeTotal: feeLineItems.reduce((sum, fee) => sum + fee.totalAmount, 0),
+    feeLineItemsWithAddOns,
+    checkoutPriceSummaryLines,
+    promoDiscountAmount,
+    isGiftCard,
+    effectivePromoDiscountAmount,
+    effectiveTax,
+    totalPrice,
+    priceSummaryAugmentation,
+    displayCheckoutPriceSummaryLines,
+    displaySubtotal,
+    displayTotalPrice,
+  } = useStandardBookingPriceSummary({
+    selectedAvailability,
+    selectedReturnOption,
+    activeOptions,
+    precomputedPricesByOption,
+    currency,
+    pricingConfig,
+    isSimplifiedPricingView,
+    quantities,
+    cancellationPolicyId,
+    forcedCancellationPolicy,
+    addOnSelections,
+    addOns,
+    t,
     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,
-        displayedProductFeeTotal,
-        appliedPromoCode: code,
-      } = promoDiscountParamsRef.current;
-      if (!code || !sel) return;
-      const companyId = product.companyId ?? env.COMPANY_ID;
-      const optionId = getAvailabilityOptionId(sel);
-      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,
-        {
-          availabilityCount: sel.vacancies,
-          totalCapacity: sel.totalCapacity,
-          displayedTicketLines: lines,
-          displayedProductFeeTotal,
-        }
-      )
-        .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 priceSummaryAugmentation = useMemo(
-    () =>
-      augmentPriceSummary
-        ? augmentPriceSummary({
-            selectedDate: selectedDate || null,
-            selectedAvailability,
-            itineraryItems: computeItineraryDisplay(),
-            priceSummaryLines: checkoutPriceSummaryLines,
-            subtotal: effectiveSubtotal,
-            tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
-            total: totalPrice,
-            currency,
-          })
-        : null,
-    [
-      augmentPriceSummary,
-      selectedDate,
-      selectedAvailability,
-      checkoutPriceSummaryLines,
-      effectiveSubtotal,
-      effectivePromoDiscountAmount,
-      effectiveTax,
-      tax,
-      totalPrice,
-      currency,
-    ]
-  );
-  const displayCheckoutPriceSummaryLines =
-    priceSummaryAugmentation?.lines ?? checkoutPriceSummaryLines;
-  const displaySubtotal =
-    effectiveSubtotal + (priceSummaryAugmentation?.subtotalAdjustment ?? 0);
-  const displayTotalPrice =
-    totalPrice + (priceSummaryAugmentation?.totalAdjustment ?? 0);
-  const augmentedModalFeeLineItems = useMemo((): OrderSummaryFeeLine[] => {
-    const externalLines =
-      priceSummaryAugmentation?.lines
-        ?.slice(checkoutPriceSummaryLines.length)
-        .flatMap((line) =>
-          line.kind === 'line'
-            ? [
-                {
-                  name: line.label,
-                  totalAmount: line.amount,
-                  showQuantityLabel: false,
-                },
-              ]
-            : []
-        ) ?? [];
-    return [...feeLineItemsWithAddOns, ...externalLines];
-  }, [checkoutPriceSummaryLines.length, feeLineItemsWithAddOns, priceSummaryAugmentation?.lines]);
+    productCompanyId: product.companyId,
+    envCompanyId: env.COMPANY_ID,
+    productId: product.productId,
+    selectedDate,
+    computeItineraryDisplay,
+    augmentPriceSummary,
+  });
 
+  useBookingQuantityCapTrim({
+    isAdmin,
+    selectedAvailability,
+    effectivePartySizeCap,
+    totalQuantity,
+    setQuantities,
+  });
   const changeCheckoutButtonLabel = undefined;
 
   const deferredInvoiceSubmitLabel = flowUi?.partnerDeferredInvoice
@@ -2508,6 +502,45 @@ export function NewBookingFlow({
     : undefined;
 
   const checkoutFormError = error || '';
+  const checkoutFormSubtotal =
+    subtotal !== totalFromSummary ||
+    effectivePromoDiscountAmount > 0 ||
+    addOnTotal > 0 ||
+    (priceSummaryAugmentation?.subtotalAdjustment ?? 0) !== 0
+      ? displaySubtotal
+      : undefined;
+  const checkoutFormTaxAmount =
+    !isTaxIncludedInPrice &&
+    (effectivePromoDiscountAmount > 0 ? effectiveTax : tax) > 0
+      ? (effectivePromoDiscountAmount > 0 ? effectiveTax : tax)
+      : 0;
+
+  const handleCheckoutPickupLocationSelect = useCallback((locationId: string | null) => {
+    setPickupLocationId(locationId);
+    setError('');
+    if (locationId === null && pickupLocationSkipped) {
+      setPickupLocationSkipped(false);
+    } else if (locationId !== null) {
+      setPickupLocationSkipped(false);
+    }
+  }, [pickupLocationSkipped]);
+
+  const handleCheckoutPickupSkip = useCallback(() => {
+    if (hidePickupSkipOption) return;
+    setPickupLocationSkipped(true);
+    setPickupLocationId(null);
+    setError('');
+  }, [hidePickupSkipOption]);
+
+  const handleCheckoutPickupChange = useCallback(() => {
+    setPickupLocationId(null);
+    setPickupLocationSkipped(false);
+  }, []);
+
+  const handleTermsChange = useCallback((checked: boolean) => {
+    setTermsAccepted(checked);
+    setTermsAcceptedAt(checked ? new Date().toISOString() : null);
+  }, []);
 
   useEffect(() => {
     if (!onPricePreviewChange) return;
@@ -2532,118 +565,10 @@ export function NewBookingFlow({
     totalPrice,
   ]);
 
-  // Auto-select pickup when date is selected (or when slots load after date pick).
-  useEffect(() => {
-    if (!selectedDate || timesForSelectedDate.length === 0) return;
-    if (
-      selectedAvailability &&
-      availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone)
-    ) {
-      return;
-    }
-    const toSelect = pickDefaultAvailabilityForTimes(
-      getPickupCutoffEligibleTimesForDate(selectedDate),
-      activeOptions,
-    );
-    if (toSelect) {
-      setSelectedAvailability(toSelect);
-      setError('');
-    }
-  }, [
-    selectedDate,
-    timesForSelectedDateSelectionKey,
-    activeOptions,
-    selectedAvailability,
-    companyTimezone,
-    getPickupCutoffEligibleTimesForDate,
-  ]);
-
   // 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 &&
-          getAvailabilityOptionId(avail) === getAvailabilityOptionId(selectedAvailability)
-      );
-      if (updatedAvailability && shouldSyncSelectedAvailability(selectedAvailability, 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 ? getAvailabilityOptionId(selectedAvailability) || null : 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) {
@@ -2656,74 +581,6 @@ export function NewBookingFlow({
     }
   }, [pricingConfig?.cancellationPolicies, cancellationPolicyId, currency]);
 
-  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) =>
-      getPickupCutoffEligibleTimesForDate(d).some((a) => (a.vacancies ?? 0) > 0),
-    );
-    const first = firstWithInventory ?? (isAdmin && dates[0] ? dates[0] : undefined);
-    if (!first) return;
-
-    hasAutoSelectedPartnerDateRef.current = true;
-    setSelectedDate(first);
-    setSelectedReturnOption(null);
-    setSelectedAvailability(
-      pickDefaultAvailabilityForTimes(getPickupCutoffEligibleTimesForDate(first), activeOptions),
-    );
-    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,
-    getPickupCutoffEligibleTimesForDate,
-    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) => {
     if (!isPublicSelectableAvailability(availability, new Date())) return;
     setSelectedAvailability(availability);
@@ -2737,7 +594,7 @@ export function NewBookingFlow({
     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) {
+    if (delta > 0 && !isAdmin && totalQuantity >= maxAvailable) {
       return;
     }
     setQuantities(prev => ({
@@ -2747,755 +604,80 @@ export function NewBookingFlow({
     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 ? getAvailabilityOptionId(selectedAvailability) : ''}`,
-    [selectedAvailability]
-  );
-  // 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, selectedAvailability.dateTime);
-      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 changes selected booking context, re-validate the applied promo against the new date/deal context.
-  useEffect(() => {
-    if (!appliedPromoCode || !selectedAvailability) 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, hasOngoingDiscount, selectedAvailability.dateTime).then((result) => {
-      if (cancelled) return;
-      if (!result.valid) {
-        promoAppliedSelectionKeyRef.current = null;
-        setAppliedPromoCode(null);
-        setPromoCodeInput(appliedPromoCode);
-        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);
-        setForcedCancellationPolicy(null);
-        setCancellationPolicyId(null);
-        fetchedRangesRef.current = [];
-      }
-    });
-    return () => { cancelled = true; };
-  }, [hasOngoingDiscount, appliedPromoCode, product.companyId, product.productId, t, selectedAvailabilityKey, selectedAvailability]);
-
-  // 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 (!isPublicSelectableAvailability(selectedAvailability, new Date())) {
-      setSelectedAvailability(null);
-      setSelectedReturnOption(null);
-      setError('This departure is no longer available online because it starts too soon. Please choose a later time.');
-      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 || hidePickupSkipOption)
-    ) {
-      setError(t('booking.selectPickupLocation'));
-      return;
-    }
-    const externalValidationError = validateBeforeCheckout?.({
-      selectedDate: selectedDate || null,
-      selectedAvailability,
-      itineraryItems: computeItineraryDisplay(),
-    });
-    if (externalValidationError) {
-      setError(externalValidationError);
-      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 = getAvailabilityOptionId(selectedAvailability);
-      
-      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;
-
-      try {
-        const refreshed = await refreshSelectedDateDetailsForCheckout();
-        const outbound = findMergedAvailabilityForSelection(refreshed, selectedAvailability);
-        const outboundVacancies = outbound?.vacancies ?? null;
-        const returnVacancies = findMergedReturnVacancies(outbound, selectedReturnOption);
-        if (
-          !isAdmin &&
-          ((outboundVacancies != null && outboundVacancies < totalQuantity) ||
-            (selectedReturnOption && returnVacancies != null && returnVacancies < totalQuantity))
-        ) {
-          setError(
-            describeStandardTourCapacityConflictMessage({
-              partySize: totalQuantity,
-              outboundVacancies,
-              returnVacancies,
-              hasReturnSelection: !!selectedReturnOption,
-            })
-          );
-          setLoading(false);
-          return;
-        }
-      } catch (refreshErr) {
-        console.warn('Fresh availability check failed before reserve; falling back to reserve validation.', refreshErr);
-      }
-
-      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 = displayTotalPrice;
-      const augmentedCheckoutLines =
-        priceSummaryAugmentation?.lines
-          ?.slice(checkoutPriceSummaryLines.length)
-          .flatMap((line) =>
-            line.kind === 'line'
-              ? [
-                  {
-                    label: line.label,
-                    amount: line.amount,
-                    type: line.type ?? 'FEE',
-                    quantity: line.quantity ?? undefined,
-                  },
-                ]
-              : []
-          ) ?? [];
-      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),
-        ...augmentedCheckoutLines,
-        ...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,
-          ...optionalCheckoutContactFields(phoneNumber),
-          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,
-          dependentAddOnSelection: dependentAddOnSelection || undefined,
-          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,
-            ...optionalCheckoutContactFields(phoneNumber),
-            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,
-            dependentAddOnSelection: dependentAddOnSelection || undefined,
-            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,
-          ...optionalCheckoutContactFields(phoneNumber),
-          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,
-          dependentAddOnSelection: dependentAddOnSelection || 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: augmentedModalFeeLineItems,
-          returnPriceAdjustment: checkoutReturnLineAmount,
-          cancellationPolicyFee,
-          cancellationPolicyLabel: effectiveCancellationPolicyLabel,
-          subtotal: displaySubtotal,
-          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: augmentedModalFeeLineItems,
-        returnPriceAdjustment: checkoutReturnLineAmount,
-        cancellationPolicyFee,
-        cancellationPolicyLabel: effectiveCancellationPolicyLabel,
-        subtotal: displaySubtotal,
-        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,
-        ...optionalCheckoutContactFields(phoneNumber),
-        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);
-  };
+  const {
+    showCheckoutModal,
+    checkoutClientSecret,
+    checkoutModalData,
+    showAdminPaymentChoice,
+    adminChoiceData,
+    cancelPendingReservation,
+    handleCheckout,
+    handleConfirmWithoutPayment,
+    handlePayNow,
+    handlePaymentSubmitStart,
+    handlePaymentSubmitError,
+    handleAdminPaymentChoiceCancel,
+  } = useStandardBookingCheckoutController({
+    selectedAvailability,
+    setSelectedAvailability,
+    selectedReturnOption,
+    setSelectedReturnOption,
+    isPublicSelectableAvailability,
+    totalQuantity,
+    t,
+    email,
+    firstName,
+    lastName,
+    phoneNumber,
+    product,
+    pickupLocationId,
+    pickupLocationSkipped,
+    hidePickupSkipOption,
+    validateBeforeCheckout,
+    selectedDate,
+    computeItineraryDisplay,
+    computeItineraryDisplayForStorage,
+    quantities,
+    bookingSourceAttribution,
+    partnerPortalBooking,
+    forceDashboardSource: bookingAppMode === 'provider-dashboard',
+    isAdmin,
+    pricingConfig,
+    refreshSelectedDateDetailsForCheckout,
+    displayTotalPrice,
+    displaySubtotal,
+    totalPrice,
+    currency,
+    appliedPromoCode,
+    cancellationPolicyId,
+    addOnSelections,
+    dependentAddOnSelection,
+    ticketLineItems,
+    pricing,
+    getPriceBreakdown,
+    checkoutReturnLineAmount,
+    cancellationPolicyFee,
+    effectiveCancellationPolicyLabel,
+    addOns,
+    feeLineItems,
+    feeLineItemsWithAddOns,
+    priceSummaryAugmentation,
+    checkoutPriceSummaryLines,
+    isTaxIncludedInPrice,
+    tax,
+    effectiveTax,
+    effectivePromoDiscountAmount,
+    isGiftCard,
+    partnerDeferredInvoice: Boolean(flowUi?.partnerDeferredInvoice),
+    termsAcceptedAt,
+    skipConfirmationCommunications,
+    disableAutoCommunications,
+    reloadAvailabilitiesAfterReserveConflict,
+    setLoading,
+    setError,
+    onSuccess,
+    onShowManage,
+  });
 
   if (activeOptions.length === 0) {
     return (
@@ -3507,92 +689,34 @@ export function NewBookingFlow({
 
   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}
+      <StandardBookingCheckoutDialogs
+        showAdminPaymentChoice={showAdminPaymentChoice}
+        adminChoiceData={adminChoiceData}
+        checkoutModalData={checkoutModalData}
+        showCheckoutModal={showCheckoutModal}
+        checkoutClientSecret={checkoutClientSecret}
         currency={currency}
+        locale={locale}
         loading={loading}
         error={error}
         onPayNow={handlePayNow}
         onConfirmWithoutPayment={handleConfirmWithoutPayment}
-        onCancel={() => { setShowAdminPaymentChoice(false); setAdminChoiceData(null); setError(''); }}
+        onAdminPaymentChoiceCancel={handleAdminPaymentChoiceCancel}
+        onCheckoutClose={cancelPendingReservation}
+        onPaymentSubmitStart={handlePaymentSubmitStart}
+        onPaymentSubmitError={handlePaymentSubmitError}
+        getSuccessUrl={getSuccessUrl}
+        t={t}
       />
-      {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} />
-      )}
+      <StandardBookingMediaIntro
+        productId={productId}
+        productName={product.name}
+        locale={locale}
+        showCollage={flowUi?.showCollage !== false}
+        showTourDescription={flowUi?.showTourDescription !== false}
+        tourDescriptionDefaultExpanded={isPartialLaunch}
+      />
 
       {isPartialLaunch ? null : (
       <div className="booking-calendar-section">
@@ -3665,289 +789,145 @@ export function NewBookingFlow({
 
           {/* 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 baseItineraryItems = computeItineraryDisplay();
-            const itineraryItems = augmentItineraryItems
-              ? augmentItineraryItems({
-                  selectedDate,
-                  selectedAvailability,
-                  itineraryItems: baseItineraryItems,
-                })
-              : baseItineraryItems;
-            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}
-            />
-          )}
+          <StandardBookingItineraryPanel
+            selectedDate={selectedDate}
+            hideItineraryBox={hideItineraryBox}
+            activeOptions={activeOptions}
+            destinationsCount={product.destinations?.length ?? 0}
+            selectedAvailability={selectedAvailability}
+            selectedReturnOption={selectedReturnOption}
+            pickupLocationId={pickupLocationId}
+            pickupLocationSkipped={pickupLocationSkipped}
+            pickupLocationsCount={product.pickupLocations?.length ?? 0}
+            quantities={quantities}
+            email={email}
+            firstName={firstName}
+            lastName={lastName}
+            getBaseItineraryItems={computeItineraryDisplay}
+            augmentItineraryItems={augmentItineraryItems}
+            isItinerarySticky={isItinerarySticky}
+            stickyTopPx={flowUi?.itineraryStickyTopOffsetPx}
+            isMobile={isMobile}
+            useWindowScroll={useWindowScroll}
+            showTooltip={showTooltip}
+            selectedPickupLocation={selectedPickupLocation}
+            itineraryRef={itineraryRef}
+            t={t}
+            onTooltipToggle={toggleTooltip}
+            onTooltipShow={setShowTooltip}
+          />
 
-          {/* Select return time — wait for hydrated day details so summary refetches do not flash this block */}
-          {selectedBookingOptionsHydrating && (
-            <div className="flex items-center justify-center gap-3 rounded-lg border border-stone-200 bg-white p-4 text-stone-600">
-              <div className="booking-loading-spinner" aria-hidden />
-              <div>{t('booking.loadingTimes')}</div>
-            </div>
-          )}
+          <StandardBookingSelectionControlsPanel
+            selectedBookingOptionsHydrating={selectedBookingOptionsHydrating}
+            selectedDate={selectedDate}
+            selectedAvailabilityMatchesDate={selectedAvailabilityMatchesDate}
+            selectedAvailability={selectedAvailability}
+            selectedReturnOption={selectedReturnOption}
+            pickupTimes={pickupTimes}
+            optionsMap={optionsMap}
+            hasAnyMostPopular={hasAnyMostPopular}
+            isAdmin={isAdmin}
+            pickupLocationSkipped={pickupLocationSkipped}
+            t={t}
+            onTimeSelect={handleTimeSelect}
+            returnOptions={returnOptionsWithFloor}
+            selectedReturnOptionForDisplay={selectedReturnOptionWithFloor}
+            onSelectedReturnOptionChange={setSelectedReturnOption}
+            getStaySummary={calculateStaySummary}
+            companyTimezone={companyTimezone}
+            currency={currency}
+            locale={locale}
+            afterItinerary={afterItinerary}
+            getItineraryItems={computeItineraryDisplay}
+            beforeCancellationPolicy={beforeCancellationPolicy}
+            cancellationPolicies={pricingConfig?.cancellationPolicies}
+            forcedCancellationPolicy={forcedCancellationPolicy}
+            cancellationPolicyId={cancellationPolicyId}
+            cancellationPolicyRef={cancellationPolicyRef}
+            cancellationPolicySectionLabel={flowUi?.cancellationPolicySectionLabel}
+            onCancellationPolicySelect={setCancellationPolicyId}
+            pricing={pricing}
+            quantities={quantities}
+            totalQuantity={totalQuantity}
+            selectedVacancies={effectivePartySizeCap}
+            pickupVacancies={effectiveSelectedPickupVacancies}
+            returnVacancies={effectiveSelectedReturnVacancies}
+            isSimplifiedPricingView={isSimplifiedPricingView}
+            onQuantityChange={handleQuantityChange}
+            addOns={addOns}
+            addOnSelections={addOnSelections}
+            onAddOnSelectionsChange={updateAddOnSelections}
+          />
 
-          {!selectedBookingOptionsHydrating &&
-            selectedAvailabilityMatchesDate &&
-            selectedAvailability &&
-            !selectedAvailability.isSummary &&
-            selectedAvailability.returnOptions &&
-            selectedAvailability.returnOptions.length > 0 && (
-            <ReturnTimeSelector
-              returnOptions={returnOptionsWithFloor}
-              selectedReturnOption={selectedReturnOptionWithFloor}
-              selectedTicketCount={totalQuantity}
-              companyTimezone={companyTimezone}
+          {/* Total and Checkout — shared PriceSummary component */}
+          {!selectedBookingOptionsHydrating && selectedAvailability && (
+            <StandardBookingCheckoutSection
+              priceSummaryLines={displayCheckoutPriceSummaryLines}
+              totalPrice={displayTotalPrice}
+              subtotal={checkoutFormSubtotal}
+              taxAmount={checkoutFormTaxAmount}
+              taxRate={pricingConfig?.taxRate}
               currency={currency}
               locale={locale}
-              isAdmin={isAdmin}
               t={t}
-              onReturnSelect={(option) => {
-                const raw = selectedAvailability.returnOptions?.find(
-                  (opt) => opt.returnAvailabilityId === option.returnAvailabilityId
-                );
-                setSelectedReturnOption(raw ?? option);
+              promoCodeInput={promoCodeInput}
+              appliedPromoCode={appliedPromoCode}
+              promoCodeError={promoCodeError}
+              promoCodeValidating={promoCodeValidating}
+              promoDiscountAmount={promoDiscountAmount}
+              onPromoInputChange={handlePromoInputChange}
+              onPromoApply={handleApplyPromo}
+              onPromoRemove={handleRemovePromo}
+              firstName={firstName}
+              lastName={lastName}
+              email={email}
+              phoneNumber={phoneNumber}
+              onFirstNameChange={(value) => {
+                setFirstName(value);
+                setError('');
               }}
-              getStaySummary={calculateStaySummary}
-            />
-          )}
-
-          {!selectedBookingOptionsHydrating && selectedDate && selectedAvailability && afterItinerary
-            ? typeof afterItinerary === 'function'
-              ? afterItinerary({
-                  selectedDate,
-                  selectedAvailability,
-                  itineraryItems: computeItineraryDisplay(),
-                })
-              : afterItinerary
-            : null}
-
-          {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
-          {!selectedBookingOptionsHydrating &&
-            selectedAvailabilityMatchesDate &&
-            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}>
-            {beforeCancellationPolicy}
-            <CancellationPolicySelector
-              policies={sortedPolicies}
-              selectedPolicyId={cancellationPolicyId}
-              currency={currency}
-              locale={locale}
-              t={t}
-              onPolicySelect={setCancellationPolicyId}
-              forcedPolicy={forcedCancellationPolicy}
-              sectionLabel={flowUi?.cancellationPolicySectionLabel}
-            />
-            </div>
-            );
-          })()}
-
-          {/* Ticket Selection */}
-          {!selectedBookingOptionsHydrating && 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}
+              onLastNameChange={(value) => {
+                setLastName(value);
+                setError('');
+              }}
+              onEmailChange={(value) => {
+                setEmail(value);
+                setError('');
+              }}
+              onPhoneNumberChange={(value) => {
+                setPhoneNumber(value);
+                setError('');
+              }}
+              selectedDate={selectedDate}
+              pickupLocations={product.pickupLocations}
+              destinations={product.destinations}
+              pickupLocationId={pickupLocationId}
+              pickupLocationSkipped={pickupLocationSkipped}
+              selectedPickupLocation={selectedPickupLocation}
+              highlightedPickupLocationIds={highlightedPickupLocationIds}
+              hidePickupSkipOption={hidePickupSkipOption}
+              onLocationSelect={handleCheckoutPickupLocationSelect}
+              onSkipPickup={handleCheckoutPickupSkip}
+              onChangePickup={handleCheckoutPickupChange}
+              termsAccepted={termsAccepted}
+              onTermsChange={handleTermsChange}
               isAdmin={isAdmin}
-              isSimplifiedPricingView={isSimplifiedPricingView}
-              t={t}
-              onQuantityChange={handleQuantityChange}
-              minimumQuantities={undefined}
-              ticketUnitFloorByCategory={undefined}
-            />
-          )}
-
-          {/* Add-ons — optional extras for the selected product option */}
-          {!selectedBookingOptionsHydrating && selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
-            <AddOnsSection
-              addOns={addOns}
-              addOnSelections={addOnSelections}
-              currency={currency}
-              locale={locale}
-              onSelectionsChange={updateAddOnSelections}
-              minimumTotalByAddOnId={undefined}
+              skipConfirmationCommunications={skipConfirmationCommunications}
+              disableAutoCommunications={disableAutoCommunications}
+              onSkipConfirmationChange={setSkipConfirmationCommunications}
+              onDisableCommunicationsChange={setDisableAutoCommunications}
+              error={checkoutFormError}
+              loading={loading}
+              totalQuantity={totalQuantity}
+              onCheckout={handleCheckout}
+              submitLabel={changeCheckoutButtonLabel ?? deferredInvoiceSubmitLabel}
+              hideSubmitButton={showCheckoutModal || showAdminPaymentChoice}
+              attributionSummary={flowUi?.partnerAttributionSummary}
+              attributionConfirmLabel={flowUi?.partnerAttributionConfirmLabel}
+              attributionConfirmed={partnerAttributionConfirmed}
+              onAttributionConfirmedChange={setPartnerAttributionConfirmed}
             />
           )}
-
-          {/* Total and Checkout — shared PriceSummary component */}
-          {!selectedBookingOptionsHydrating && selectedAvailability && (
-            <>
-            <CheckoutForm
-                priceSummaryLines={displayCheckoutPriceSummaryLines}
-                totalPrice={displayTotalPrice}
-                totalSummaryLabel={undefined}
-                subtotal={
-                  subtotal !== totalFromSummary ||
-                  effectivePromoDiscountAmount > 0 ||
-                  addOnTotal > 0 ||
-                  (priceSummaryAugmentation?.subtotalAdjustment ?? 0) !== 0
-                    ? displaySubtotal
-                    : 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(''); }}
-                phoneNumber={phoneNumber}
-                onPhoneNumberChange={(v) => { setPhoneNumber(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}
-                hidePickupSkipOption={hidePickupSkipOption}
-                onLocationSelect={(locationId) => {
-                  setPickupLocationId(locationId);
-                  setError('');
-                  if (locationId === null && pickupLocationSkipped) {
-                    setPickupLocationSkipped(false);
-                  } else if (locationId !== null) {
-                    setPickupLocationSkipped(false);
-                  }
-                }}
-                onSkip={() => {
-                  if (hidePickupSkipOption) return;
-                  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>
         </>
       )}