@ticketboothapp/booking 1.2.123 → 1.2.125

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -1,76 +1,53 @@
 'use client';
 
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { format, addWeeks, parseISO, isBefore, isAfter, startOfDay, endOfDay } from 'date-fns';
-import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
 import {
-  getAvailabilities,
-  createReservation,
-  cancelReservation,
-  cancelReservationBestEffort,
-  createPaymentIntent,
-  confirmFreeBooking,
-  confirmBookingWithoutPayment,
-  confirmPartnerBookingWithoutPayment,
   getAddOns,
-  validatePromoCode,
-  getPromoDiscount,
   type Product,
   type Availability,
-  type ItineraryDisplayStep,
   type AddOn,
-  ItineraryStepType,
-  isInsufficientCapacityReserveError,
-  describePrivateShuttleCapacityConflictMessage,
-  reportReserveCapacityConflictClientContext,
 } from '../../lib/booking-api';
-import {
-  EARLIEST_AVAILABILITY_DATE,
-  LATEST_AVAILABILITY_DATE,
-  INITIAL_FETCH_WEEKS,
-  VISIBLE_RANGE_BUFFER_WEEKS,
-} from '../../lib/booking-constants';
-import { formatCurrencyAmount } from '../../lib/currency';
-import { formatBookingRefForDisplay } from '../../lib/booking-ref';
-import { buildCheckoutBreakdown } from '../../lib/booking/checkout-breakdown';
-import {
-  isDateAfterPublicBookingCutoff,
-  resolvePublicBookingCutoffMinutes,
-} from '../../lib/booking/booking-cutoffs';
-import type { PricingConfig, PrecomputedPricesByCategory } from '../../lib/booking-api';
 import { Calendar } from './Calendar';
-import { PickupLocationSelector } from './PickupLocationSelector';
 import { useTranslations, useLocale } from '../../lib/booking/i18n';
 import { type Currency } from './CurrencySwitcher';
 import { useCompanyTimezone } from '../../contexts/CompanyContext';
 import { useBookingApp } from '../../contexts/BookingAppContext';
-import { useAvailabilitiesCache, buildAvailabilitiesCacheKey } from '../../contexts/AvailabilitiesCacheContext';
-import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
-import { CancellationPolicySelector } from './CancellationPolicySelector';
-import { PriceSummary } from './PriceSummary';
-import { TermsAcceptance } from './TermsAcceptance';
-import { PromoCodeInput } from './PromoCodeInput';
-import { ItineraryBuilder } from './ItineraryBuilder';
-import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
-import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
-import { BookingFlowCollage } from './BookingFlowCollage';
-import { TourDescription } from './TourDescription';
 import { useBookingHost } from '../../runtime';
 import styles from './PrivateShuttleBookingFlow.module.css';
-import {
-  buildBookingSourceContext,
-  inferClientBookingSourceFromProductIds,
-  type BookingSourceMetadata,
-} from '../../lib/booking/source-metadata';
-import type { VideoSources } from '../../constants/products';
+import type { BookingSourceMetadata } from '../../lib/booking/source-metadata';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
-import { optionalCheckoutContactFields } from '../../lib/booking/checkout-contact';
-import { CheckoutOptionalPhoneFields } from './CheckoutOptionalPhoneFields';
+import {
+  PrivateShuttleAddOnsSection,
+  type PrivateShuttleAddOnSelection,
+} from './PrivateShuttleAddOnsSection';
+import { PrivateShuttleCheckoutSection } from './PrivateShuttleCheckoutSection';
+import { PrivateShuttleCheckoutDialogs } from './PrivateShuttleCheckoutDialogs';
+import { PrivateShuttleItinerarySection } from './PrivateShuttleItinerarySection';
+import { PrivateShuttleMediaIntro } from './PrivateShuttleMediaIntro';
+import { PrivateShuttleOptionSection } from './PrivateShuttleOptionSection';
+import { PrivateShuttlePassengerSection } from './PrivateShuttlePassengerSection';
+import { PrivateShuttlePickupSection } from './PrivateShuttlePickupSection';
+import { PrivateShuttlePreferencesSection } from './PrivateShuttlePreferencesSection';
+import { PrivateShuttleStartTimeSection } from './PrivateShuttleStartTimeSection';
+import {
+  getPrivateShuttleAvailabilityOptionId,
+  privateShuttleBookingCutoffMessage,
+  privateShuttleStartTimeAllowed,
+} from './private-shuttle-availability';
+import { usePrivateShuttleAvailability } from './use-private-shuttle-availability';
 import type {
   ProviderDashboardChangeBookingPayload,
   ProviderDashboardInitialBooking,
 } from './provider-dashboard-change-booking';
-import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+import {
+  usePrivateShuttleCheckoutController,
+} from './private-shuttle-checkout-controller';
+import {
+  PRIVATE_SHUTTLE_RESOURCE_CAPACITY,
+  usePrivateShuttlePriceSummary,
+} from './usePrivateShuttlePriceSummary';
+import { usePrivateShuttlePromoController } from './usePrivateShuttlePromoController';
+import { useBookingViewItemAnalytics } from './useBookingViewItemAnalytics';
 
 interface PrivateShuttleBookingFlowProps {
   product: Product;
@@ -116,125 +93,9 @@ interface PrivateShuttleBookingFlowProps {
   onChangeBooking?: (data: ProviderDashboardChangeBookingPayload) => Promise<void>;
 }
 
-const RESOURCE_CAPACITY = 13;
-const ADDITIONAL_HOUR_PRICE = 170;
-const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/;
-const MORAINE_LAKE_ROAD_ACCESS_FEE_TOOLTIP =
-  "Since 2025, Parks Canada charges a per-trip fee for License of Occupation at Moraine Lake. This fee contributes towards Parks Canada's Moraine Lake Road operations.";
-
-function isMoraineLakeRoadAccessFeeName(name: string): boolean {
-  const normalized = name.toLowerCase();
-  return (
-    normalized.includes('moraine') &&
-    (normalized.includes('access') ||
-      normalized.includes('road') ||
-      normalized.includes('license'))
-  );
-}
-
-function isMoraineLakeLocationText(value: string): boolean {
-  const normalized = value.toLowerCase().replace(/[_-]+/g, ' ');
-  return normalized.includes('moraine') && normalized.includes('lake');
-}
-
-function roundMoney(amount: number): number {
-  return Math.round(amount * 100) / 100;
-}
-
-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 privateShuttleStartDateTime(dateStr: string, timeStr: string, timezone: string): Date {
-  return fromZonedTime(parseISO(`${dateStr}T${timeStr}:00`), timezone);
-}
-
-function privateShuttleStartTimeAllowed(
-  dateStr: string,
-  timeStr: string,
-  timezone: string,
-  now: Date,
-  cutoffMinutes?: number | null,
-): boolean {
-  return isDateAfterPublicBookingCutoff(
-    privateShuttleStartDateTime(dateStr, timeStr, timezone),
-    now,
-    cutoffMinutes,
-  );
-}
-
-function privateShuttleBookingCutoffMessage(cutoffMinutes?: number | null): string {
-  const resolvedCutoffMinutes = resolvePublicBookingCutoffMinutes(cutoffMinutes);
-  if (resolvedCutoffMinutes % 60 === 0) {
-    return `Private shuttles must be booked at least ${resolvedCutoffMinutes / 60} hours before departure.`;
-  }
-  return `Private shuttles must be booked at least ${resolvedCutoffMinutes} minutes before departure.`;
-}
-
-function findMergedPrivateShuttleAvailability(
-  merged: Availability[],
-  sel: Availability | null,
-  optionId: string | null,
-  selectedDateStr: string | null,
-  tz: string
-): Availability | undefined {
-  if (!sel || !optionId || !selectedDateStr) return undefined;
-  const oidMatches = (a: Availability) => getPrivateShuttleAvailabilityOptionId(a) === optionId;
-  const availId = sel.availabilityId?.trim();
-  if (availId) {
-    const hit = merged.find((a) => a.availabilityId === availId && oidMatches(a));
-    if (hit) return hit;
-  }
-  const onDay = merged.filter((a) => {
-    if (!oidMatches(a)) return false;
-    const day = DATE_ONLY_REGEX.test(a.dateTime)
-      ? a.dateTime
-      : formatInTimeZone(parseAvailabilityDateTime(a.dateTime), tz, 'yyyy-MM-dd');
-    return day === selectedDateStr;
-  });
-  return onDay[0];
-}
-
-function getPrivateShuttleAvailabilityOptionId(availability: Availability): string {
-  const productOptionId = availability.productOptionId?.trim();
-  if (productOptionId) return productOptionId;
-  const productId = availability.productId?.trim();
-  return productId?.startsWith('po_') ? productId : '';
-}
-
-function getPrivateShuttleAvailabilityCacheKey(availability: Availability): string {
-  return `${availability.dateTime}-${getPrivateShuttleAvailabilityOptionId(availability)}`;
-}
-
-function getResourceRate(availability: Availability | undefined | null) {
-  return availability?.rates?.find((r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE');
-}
-
-function applyResourceAdjustments(
-  basePrice: number,
-  availability: Availability | undefined | null,
-  currency: Currency
-): number {
-  const resourceRate = getResourceRate(availability);
-  const adjustmentTotal =
-    resourceRate?.appliedAdjustments?.reduce(
-      (sum, adjustment) => sum + (adjustment.changeByCurrency?.[currency] ?? 0),
-      0
-    ) ??
-    resourceRate?.applied_adjustments?.reduce(
-      (sum, adjustment) => sum + (adjustment.changeByCurrency?.[currency] ?? 0),
-      0
-    ) ??
-    0;
-  return basePrice + adjustmentTotal;
-}
-
 export function PrivateShuttleBookingFlow({
   product,
   productId,
-  onBack: _onBack,
   currency,
   contentRef,
   onSuccess,
@@ -250,7 +111,7 @@ export function PrivateShuttleBookingFlow({
   initialBooking,
   onChangeBooking,
 }: PrivateShuttleBookingFlowProps) {
-  const { strings: defaultStrings, analytics, catalog } = useBookingHost();
+  const { analytics } = useBookingHost();
   const { t } = useTranslations();
   const { locale } = useLocale();
   const companyTimezone = useCompanyTimezone();
@@ -264,11 +125,9 @@ export function PrivateShuttleBookingFlow({
     suppressCalendarDateScroll,
     mode: bookingAppMode,
   } = useBookingApp();
-  const availabilitiesCache = useAvailabilitiesCache();
   const isAdmin = permissions.viewerRole === 'admin';
   const isProviderChangeMode = Boolean(initialBooking && onChangeBooking);
 
-  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
   const [selectedDate, setSelectedDate] = useState<string>('');
   const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
   const [selectedOption, setSelectedOption] = useState<string>('');
@@ -293,9 +152,7 @@ export function PrivateShuttleBookingFlow({
   const [draftItineraryPlanningNotes, setDraftItineraryPlanningNotes] = useState('');
   const [childSafetySeatsCount, setChildSafetySeatsCount] = useState(0);
   const [foodRestrictions, setFoodRestrictions] = useState('');
-  const [addOnSelections, setAddOnSelections] = useState<
-    Array<{ addOnId: string; variantId?: string; quantity?: number }>
-  >(() =>
+  const [addOnSelections, setAddOnSelections] = useState<PrivateShuttleAddOnSelection[]>(() =>
     initialBooking?.addOnSelections?.length
       ? initialBooking.addOnSelections.map((s) => ({
           addOnId: s.addOnId,
@@ -306,98 +163,43 @@ export function PrivateShuttleBookingFlow({
   );
   const [addOns, setAddOns] = useState<AddOn[]>([]);
   const [loading, setLoading] = useState(false);
-  const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
-  const [isFetchingMoreAvailabilities, setIsFetchingMoreAvailabilities] = useState(false);
   const [bookingCutoffNowMs, setBookingCutoffNowMs] = useState(() => Date.now());
   const [error, setError] = useState('');
-  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;
-    ticketLines: CheckoutModalLineItem[];
-    feeLineItems: { name: string; totalAmount: number; description?: string }[];
-    returnPriceAdjustment: number;
-    subtotal: number;
-    tax: number;
-    total: number;
-    totalQuantity: number;
-    isTaxIncludedInPrice: boolean;
-    taxRate: number;
-    cancellationPolicyFee?: number;
-    cancellationPolicyLabel?: string;
-    promoDiscountAmount?: number;
-    discountLabel?: string | null;
-    isDepositPayment?: boolean;
-    balanceChargeDaysBefore?: number;
-  } | null>(null);
   const [skipConfirmationCommunications, setSkipConfirmationCommunications] = useState(false);
   const [disableAutoCommunications, setDisableAutoCommunications] = useState(false);
-  const [showAdminPaymentChoice, setShowAdminPaymentChoice] = useState(false);
-  const [promoCodeInput, setPromoCodeInput] = useState(() => initialBooking?.promoCode?.trim() ?? '');
-  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(
-    () => initialBooking?.promoCode?.trim() || null
-  );
-  const [promoCodeError, setPromoCodeError] = useState('');
-  const [promoCodeValidating, setPromoCodeValidating] = useState(false);
-  const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
-  const [isGiftCard, setIsGiftCard] = useState(false);
-  const [isVoucher, setIsVoucher] = useState(false);
-  const activePromoCode = isAdmin ? appliedPromoCode : null;
   const [additionalHoursCount, setAdditionalHoursCount] = useState(
     () => initialBooking?.additionalHoursCount ?? initialValues?.additionalHoursCount ?? 0
   );
   const [isSpecialRequestMode, setIsSpecialRequestMode] = useState(false);
   const [specialRequestInputValue, setSpecialRequestInputValue] = useState('');
-  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: { name: string; totalAmount: number; description?: string }[];
-    cancellationPolicyFee: number;
-    cancellationPolicyLabel?: string;
-    subtotal: number;
-    tax: number;
-    totalQuantity: number;
-    isTaxIncludedInPrice: boolean;
-    taxRate: number;
-    promoDiscountAmount: number;
-    discountLabel?: string | null;
-  } | null>(null);
-  const [pricingConfig, setPricingConfig] = useState<PricingConfig | null>(null);
   const [cancellationPolicyId, setCancellationPolicyId] = useState<string | null>(
     () => initialBooking?.cancellationPolicyId ?? null
   );
-  const [precomputedPrices, setPrecomputedPrices] = useState<PrecomputedPricesByCategory | null>(null);
-  const [resourcePriceByCurrency, setResourcePriceByCurrency] = useState<Record<string, number> | null>(null);
-  const [resourcePriceByOption, setResourcePriceByOption] = useState<
-    Record<string, Record<string, number>> | null
-  >(null);
-  const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
-  const lastValidatedInputRef = useRef<string | null>(null);
-  const fetchingRef = useRef(false);
-  const fetchedRangesRef = useRef<Array<{ start: Date; end: Date }>>([]);
-  const pricingConfigSetRef = useRef(false);
+  const clearFetchedAvailabilityRangesRef = useRef<() => void>(() => {});
+  const {
+    promoCodeInput,
+    appliedPromoCode,
+    activePromoCode,
+    promoCodeError,
+    promoCodeValidating,
+    handlePromoInputChange,
+    handleApplyPromo,
+    handleRemovePromo,
+  } = usePrivateShuttlePromoController({
+    initialPromoCode: initialBooking?.promoCode,
+    isAdmin,
+    selectedAvailability,
+    selectedOption,
+    selectedStartTime,
+    resourceCount: Math.ceil(passengerCount / PRIVATE_SHUTTLE_RESOURCE_CAPACITY),
+    productCompanyId: product.companyId,
+    productId: product.productId,
+    onPromoChangesAvailability: () => clearFetchedAvailabilityRangesRef.current(),
+    t,
+  });
 
   useEffect(() => {
     setPartnerAttributionConfirmed(false);
@@ -416,21 +218,47 @@ export function PrivateShuttleBookingFlow({
     return () => window.clearInterval(interval);
   }, [isAdmin]);
 
-  // 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]);
+  useBookingViewItemAnalytics({ analytics, product, productId, currency });
 
   const activeOptionIdsKey = useMemo(
     () => activeOptions.map((opt) => opt.optionId).sort().join(','),
     [activeOptions]
   );
+  const {
+    availabilities,
+    loadingAvailabilities,
+    isFetchingMoreAvailabilities,
+    pricingConfig,
+    precomputedPrices,
+    resourcePriceByCurrency,
+    resourcePriceByOption,
+    availabilitiesByDate,
+    optionsAvailableForSelectedDate,
+    dates,
+    earliestAvailabilityDate,
+    handleVisibleRangeChange,
+    reloadAvailabilitiesAfterReserveConflict,
+    refreshSelectedDateDetailsForCheckout,
+    fetchedRangesRef,
+  } = usePrivateShuttleAvailability({
+    product,
+    activeOptions,
+    activeOptionIdsKey,
+    selectedDate,
+    activePromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    companyTimezone,
+    isAdmin,
+    bookingCutoffNow,
+    bookingCutoffMinutes,
+    passengerCount,
+    setPassengerCount,
+    setError,
+  });
+  clearFetchedAvailabilityRangesRef.current = () => {
+    fetchedRangesRef.current = [];
+  };
   const selectedOptionConfig = activeOptions.find((opt) => opt.optionId === selectedOption);
   const privateShuttleConfig = selectedOptionConfig?.privateShuttleConfig;
   const selectedPickupLocation = useMemo(
@@ -439,192 +267,6 @@ export function PrivateShuttleBookingFlow({
     [pickupLocationId, product.pickupLocations]
   );
 
-  const needsFetch = useCallback((start: Date, end: Date) => {
-    if (fetchedRangesRef.current.length === 0) return true;
-    return !fetchedRangesRef.current.some(
-      (range) =>
-        range.start.getTime() <= start.getTime() && range.end.getTime() >= end.getTime()
-    );
-  }, []);
-
-  const reloadAvailabilitiesAfterReserveConflict = useCallback(async (): Promise<Availability[]> => {
-    if (!visibleRange || !product.productId) 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 */
-      }
-    }
-
-    const startDate = format(startOfDay(clampedStart), 'yyyy-MM-dd');
-    const endDate = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
-    const result = await getAvailabilities(product.productId, startDate, endDate, {
-      allOptions: true,
-      promoCode: activePromoCode || undefined,
-      ...(pricingProfileIdForAvailabilities
-        ? { pricingProfileId: pricingProfileIdForAvailabilities }
-        : {}),
-      ...(cancellationPolicyProfileIdForAvailabilities
-        ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-        : {}),
-    });
-
-    if (result.pricingConfig && !pricingConfigSetRef.current) {
-      setPricingConfig(result.pricingConfig);
-      pricingConfigSetRef.current = true;
-    }
-    if (result.precomputedPrices) setPrecomputedPrices(result.precomputedPrices);
-    if (result.resourcePriceByCurrency) setResourcePriceByCurrency(result.resourcePriceByCurrency);
-    if (result.resourcePriceByOption) setResourcePriceByOption(result.resourcePriceByOption);
-
-    let mergedAvailabilities: Availability[] = [];
-    setAvailabilities((prev) => {
-      const existingMap = new Map(prev.map((avail) => [getPrivateShuttleAvailabilityCacheKey(avail), avail]));
-      result.availabilities.forEach((avail) => {
-        existingMap.set(getPrivateShuttleAvailabilityCacheKey(avail), avail);
-      });
-      mergedAvailabilities = Array.from(existingMap.values());
-      return mergedAvailabilities;
-    });
-
-    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,
-          activePromoCode,
-          pricingProfileIdForAvailabilities,
-        )
-      : null;
-    if (cacheKey && availabilitiesCache) {
-      availabilitiesCache.merge(cacheKey, {
-        fetchedRanges: mergedRanges,
-        availabilities: mergedAvailabilities,
-        pricingConfig: result.pricingConfig ?? null,
-        precomputedPrices: result.precomputedPrices ?? null,
-        resourcePriceByCurrency: result.resourcePriceByCurrency ?? null,
-        resourcePriceByOption: result.resourcePriceByOption ?? null,
-      });
-    }
-
-    return mergedAvailabilities;
-  }, [
-    visibleRange,
-    product.productId,
-    selectedDate,
-    companyTimezone,
-    activePromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    activeOptionIdsKey,
-    availabilitiesCache,
-  ]);
-
-  /** Fresh selected-day check before reserve so stale private shuttle vacancies are corrected before payment. */
-  const refreshSelectedDateDetailsForCheckout = useCallback(async (): Promise<Availability[]> => {
-    if (!selectedDate || !product.productId) return [];
-
-    const result = await getAvailabilities(product.productId, selectedDate, selectedDate, {
-      allOptions: true,
-      promoCode: activePromoCode || undefined,
-      ...(pricingProfileIdForAvailabilities
-        ? { pricingProfileId: pricingProfileIdForAvailabilities }
-        : {}),
-      ...(cancellationPolicyProfileIdForAvailabilities
-        ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-        : {}),
-    });
-
-    if (result.pricingConfig && !pricingConfigSetRef.current) {
-      setPricingConfig(result.pricingConfig);
-      pricingConfigSetRef.current = true;
-    }
-    if (result.precomputedPrices) setPrecomputedPrices(result.precomputedPrices);
-    if (result.resourcePriceByCurrency) setResourcePriceByCurrency(result.resourcePriceByCurrency);
-    if (result.resourcePriceByOption) setResourcePriceByOption(result.resourcePriceByOption);
-
-    let mergedAvailabilities: Availability[] = [];
-    setAvailabilities((prev) => {
-      const existingMap = new Map(prev.map((avail) => [getPrivateShuttleAvailabilityCacheKey(avail), avail]));
-      result.availabilities.forEach((avail) => {
-        existingMap.set(getPrivateShuttleAvailabilityCacheKey(avail), avail);
-      });
-      mergedAvailabilities = Array.from(existingMap.values());
-      return mergedAvailabilities;
-    });
-
-    const cacheKey = availabilitiesCache
-      ? buildAvailabilitiesCacheKey(
-          product.productId,
-          activeOptionIdsKey,
-          activePromoCode,
-          pricingProfileIdForAvailabilities,
-        )
-      : null;
-    if (cacheKey && availabilitiesCache) {
-      const existingCache = availabilitiesCache.get(cacheKey);
-      const mergedAvailabilitiesMap = new Map(
-        (existingCache?.availabilities ?? []).map((availability) => [
-          getPrivateShuttleAvailabilityCacheKey(availability),
-          availability,
-        ])
-      );
-      result.availabilities.forEach((availability) => {
-        mergedAvailabilitiesMap.set(getPrivateShuttleAvailabilityCacheKey(availability), availability);
-      });
-      availabilitiesCache.merge(cacheKey, {
-        fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
-        availabilities: Array.from(mergedAvailabilitiesMap.values()),
-        pricingConfig: result.pricingConfig ?? existingCache?.pricingConfig ?? null,
-        precomputedPrices: result.precomputedPrices ?? existingCache?.precomputedPrices ?? null,
-        resourcePriceByCurrency: result.resourcePriceByCurrency ?? existingCache?.resourcePriceByCurrency ?? null,
-        resourcePriceByOption: result.resourcePriceByOption ?? existingCache?.resourcePriceByOption ?? null,
-      });
-    }
-
-    return result.availabilities;
-  }, [
-    selectedDate,
-    product.productId,
-    activePromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    availabilitiesCache,
-    activeOptionIdsKey,
-  ]);
-
-  useEffect(() => {
-    if (!visibleRange) {
-      setVisibleRange({
-        start: EARLIEST_AVAILABILITY_DATE,
-        end: addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS + VISIBLE_RANGE_BUFFER_WEEKS),
-      });
-    }
-  }, [visibleRange]);
-
   useEffect(() => {
     if (selectedOption && !product.companyId) return;
     if (!selectedOption) {
@@ -645,369 +287,6 @@ export function PrivateShuttleBookingFlow({
     }
   }, [draftItineraryDestinations]);
 
-  useEffect(() => {
-    fetchedRangesRef.current = [];
-  }, [
-    activePromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-  ]);
-
-  // Memoized callback for visible range changes - only update if range changed significantly (match BookingFlow)
-  const lastVisibleRangeRef = useRef<{ start: Date; end: Date } | null>(null);
-  const handleVisibleRangeChange = useCallback((start: Date, end: Date) => {
-    const lastRange = lastVisibleRangeRef.current;
-    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 };
-      setVisibleRange({ start, end });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (activeOptions.length === 0) {
-      setError('No active product options available');
-      setLoadingAvailabilities(false);
-      return;
-    }
-    if (!visibleRange) return;
-
-    async function fetchAvailabilities() {
-      if (fetchingRef.current) 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 */
-        }
-      }
-      // Check cache first - avoid refetch when reopening same product (match BookingFlow)
-      const cacheKey = availabilitiesCache
-        ? buildAvailabilitiesCacheKey(
-            product.productId,
-            activeOptionIdsKey,
-            activePromoCode,
-            pricingProfileIdForAvailabilities,
-          )
-        : null;
-      const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
-      let shouldRevalidateCachedRange = false;
-      if (cached && cached.availabilities.length > 0) {
-        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.pricingConfig) {
-            setPricingConfig(cached.pricingConfig);
-            pricingConfigSetRef.current = true;
-          }
-          if (cached.precomputedPrices) setPrecomputedPrices(cached.precomputedPrices);
-          if (cached.resourcePriceByCurrency) setResourcePriceByCurrency(cached.resourcePriceByCurrency);
-          if (cached.resourcePriceByOption) setResourcePriceByOption(cached.resourcePriceByOption);
-          setLoadingAvailabilities(false);
-          setIsFetchingMoreAvailabilities(false);
-          if (!isStale) {
-            fetchedRangesRef.current = [...cached.fetchedRanges];
-            // Show cached availability instantly, then quietly revalidate the visible range.
-          }
-        }
-        // Partial cache: show cached data immediately, then fetch missing range below
-        setAvailabilities(cached.availabilities);
-        if (cached.pricingConfig) {
-          setPricingConfig(cached.pricingConfig);
-          pricingConfigSetRef.current = true;
-        }
-        if (cached.precomputedPrices) setPrecomputedPrices(cached.precomputedPrices);
-        if (cached.resourcePriceByCurrency) setResourcePriceByCurrency(cached.resourcePriceByCurrency);
-        if (cached.resourcePriceByOption) setResourcePriceByOption(cached.resourcePriceByOption);
-        fetchedRangesRef.current = [...cached.fetchedRanges];
-        setLoadingAvailabilities(false);
-      }
-
-      if (!shouldRevalidateCachedRange && !needsFetch(clampedStart, clampedEnd)) {
-        setLoadingAvailabilities(false);
-        setIsFetchingMoreAvailabilities(false);
-        fetchingRef.current = false;
-        return;
-      }
-      const hasPartialCache = cached && cached.availabilities.length > 0;
-      fetchingRef.current = true;
-      if (!hasPartialCache) setLoadingAvailabilities(true);
-      else if (!shouldRevalidateCachedRange) setIsFetchingMoreAvailabilities(true);
-      try {
-        const startDate = format(startOfDay(clampedStart), 'yyyy-MM-dd');
-        const endDate = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
-        const result = await getAvailabilities(product.productId, startDate, endDate, {
-          allOptions: true,
-          summary: true,
-          promoCode: activePromoCode || undefined,
-          ...(pricingProfileIdForAvailabilities
-            ? { pricingProfileId: pricingProfileIdForAvailabilities }
-            : {}),
-          ...(cancellationPolicyProfileIdForAvailabilities
-            ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-            : {}),
-        });
-        if (result.pricingConfig && !pricingConfigSetRef.current) {
-          setPricingConfig(result.pricingConfig);
-          pricingConfigSetRef.current = true;
-        }
-        if (result.precomputedPrices) setPrecomputedPrices(result.precomputedPrices);
-        if (result.resourcePriceByCurrency) setResourcePriceByCurrency(result.resourcePriceByCurrency);
-        if (result.resourcePriceByOption) setResourcePriceByOption(result.resourcePriceByOption);
-        // Merge with existing when we had partial cache (match BookingFlow)
-        const mergedAvailabilities = (() => {
-          const existing = hasPartialCache && cached ? cached.availabilities : [];
-          if (existing.length === 0) return result.availabilities;
-          const existingMap = new Map(
-            existing.map((avail) => [
-              getPrivateShuttleAvailabilityCacheKey(avail),
-              avail,
-            ])
-          );
-          result.availabilities.forEach((avail) => {
-            existingMap.set(getPrivateShuttleAvailabilityCacheKey(avail), avail);
-          });
-          return Array.from(existingMap.values());
-        })();
-        setAvailabilities(mergedAvailabilities);
-        fetchedRangesRef.current.push({ start: new Date(clampedStart), end: new Date(clampedEnd) });
-        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;
-        if (passengerCount === 0) setPassengerCount(1);
-
-        // Update cache for instant load when reopening same product (match BookingFlow)
-        if (cacheKey && availabilitiesCache) {
-          availabilitiesCache.merge(cacheKey, {
-            fetchedRanges: fetchedRangesRef.current,
-            availabilities: mergedAvailabilities,
-            pricingConfig: result.pricingConfig ?? null,
-            precomputedPrices: result.precomputedPrices ?? null,
-            resourcePriceByCurrency: result.resourcePriceByCurrency ?? null,
-            resourcePriceByOption: result.resourcePriceByOption ?? null,
-          });
-        }
-      } catch (err) {
-        if (shouldRevalidateCachedRange && cached?.availabilities.length) {
-          console.warn('Background private shuttle availability refresh failed; keeping cached availability visible.', err);
-        } else {
-          setError(err instanceof Error ? err.message : 'Failed to load availabilities');
-        }
-      } finally {
-        setLoadingAvailabilities(false);
-        setIsFetchingMoreAvailabilities(false);
-        fetchingRef.current = false;
-      }
-    }
-    fetchAvailabilities();
-    // passengerCount intentionally excluded - we only use it for init (setPassengerCount(1)), not for fetch
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    visibleRange,
-    activeOptions,
-    activeOptionIdsKey,
-    selectedDate,
-    product.productId,
-    activePromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    needsFetch,
-    availabilitiesCache,
-  ]);
-
-  const isPrivateShuttleAvailabilityBookable = useCallback(
-    (availability: Availability): boolean => {
-      if (isAdmin) return true;
-      const dateInCompanyTz = DATE_ONLY_REGEX.test(availability.dateTime)
-        ? availability.dateTime
-        : formatInTimeZone(parseAvailabilityDateTime(availability.dateTime), companyTimezone, 'yyyy-MM-dd');
-      const optionId = getPrivateShuttleAvailabilityOptionId(availability);
-      const option = activeOptions.find((opt) => opt.optionId === optionId);
-      const startTimes = availability.suggestedStartTimes || option?.privateShuttleConfig?.suggestedStartTimes || [];
-      if (startTimes.length === 0) {
-        return isDateAfterPublicBookingCutoff(
-          fromZonedTime(parseISO(`${dateInCompanyTz}T23:59:59`), companyTimezone),
-          bookingCutoffNow,
-          bookingCutoffMinutes,
-        );
-      }
-      return startTimes.some((time) =>
-        privateShuttleStartTimeAllowed(
-          dateInCompanyTz,
-          time,
-          companyTimezone,
-          bookingCutoffNow,
-          bookingCutoffMinutes,
-        ),
-      );
-    },
-    [activeOptions, bookingCutoffMinutes, bookingCutoffNow, companyTimezone, isAdmin],
-  );
-
-  const publicVisibleAvailabilities = useMemo(
-    () => (isAdmin ? availabilities : availabilities.filter(isPrivateShuttleAvailabilityBookable)),
-    [availabilities, isAdmin, isPrivateShuttleAvailabilityBookable],
-  );
-
-  // Group availabilities by date (in company timezone - MDT). Availabilities from API are in UTC.
-  const availabilitiesByDate = useMemo(() => {
-    const grouped = publicVisibleAvailabilities.reduce(
-      (acc, avail) => {
-        const dateInCompanyTz = DATE_ONLY_REGEX.test(avail.dateTime)
-          ? avail.dateTime
-          : formatInTimeZone(parseAvailabilityDateTime(avail.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 (match BookingFlow)
-    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 optionsAvailableForSelectedDate = useMemo(() => {
-    if (!selectedDate) return [];
-    const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
-    const optionIds = new Set(dateAvailabilities.map(getPrivateShuttleAvailabilityOptionId).filter(Boolean));
-    return activeOptions.filter((opt) => optionIds.has(opt.optionId));
-  }, [selectedDate, availabilitiesByDate, activeOptions]);
-
-  const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
-
-  useEffect(() => {
-    if (!selectedDate || !product.productId) return;
-    const selectedDateAvailabilities = availabilitiesByDate[selectedDate] ?? [];
-    if (!selectedDateAvailabilities.some((availability) => availability.isSummary)) return;
-
-    let cancelled = false;
-    async function hydrateSelectedDateDetails() {
-      setIsFetchingMoreAvailabilities(true);
-      try {
-        const result = await getAvailabilities(product.productId, selectedDate, selectedDate, {
-          allOptions: true,
-          promoCode: activePromoCode || undefined,
-          ...(pricingProfileIdForAvailabilities
-            ? { pricingProfileId: pricingProfileIdForAvailabilities }
-            : {}),
-          ...(cancellationPolicyProfileIdForAvailabilities
-            ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-            : {}),
-        });
-        if (cancelled) return;
-
-        if (result.pricingConfig && !pricingConfigSetRef.current) {
-          setPricingConfig(result.pricingConfig);
-          pricingConfigSetRef.current = true;
-        }
-        if (result.precomputedPrices) setPrecomputedPrices(result.precomputedPrices);
-        if (result.resourcePriceByCurrency) setResourcePriceByCurrency(result.resourcePriceByCurrency);
-        if (result.resourcePriceByOption) setResourcePriceByOption(result.resourcePriceByOption);
-
-        setAvailabilities((prev) => {
-          const merged = new Map(
-            prev.map((availability) => [
-              getPrivateShuttleAvailabilityCacheKey(availability),
-              availability,
-            ])
-          );
-          result.availabilities.forEach((availability) => {
-            merged.set(getPrivateShuttleAvailabilityCacheKey(availability), availability);
-          });
-          return Array.from(merged.values());
-        });
-
-        const cacheKey = availabilitiesCache
-          ? buildAvailabilitiesCacheKey(
-              product.productId,
-              activeOptionIdsKey,
-              activePromoCode,
-              pricingProfileIdForAvailabilities,
-            )
-          : null;
-        if (cacheKey && availabilitiesCache) {
-          const existingCache = availabilitiesCache.get(cacheKey);
-          const mergedAvailabilities = new Map(
-            (existingCache?.availabilities ?? []).map((availability) => [
-              getPrivateShuttleAvailabilityCacheKey(availability),
-              availability,
-            ])
-          );
-          result.availabilities.forEach((availability) => {
-            mergedAvailabilities.set(getPrivateShuttleAvailabilityCacheKey(availability), availability);
-          });
-          availabilitiesCache.merge(cacheKey, {
-            fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
-            availabilities: Array.from(mergedAvailabilities.values()),
-            pricingConfig: result.pricingConfig ?? existingCache?.pricingConfig ?? null,
-            precomputedPrices: result.precomputedPrices ?? existingCache?.precomputedPrices ?? null,
-            resourcePriceByCurrency: result.resourcePriceByCurrency ?? existingCache?.resourcePriceByCurrency ?? null,
-            resourcePriceByOption: result.resourcePriceByOption ?? existingCache?.resourcePriceByOption ?? null,
-          });
-        }
-      } catch (err) {
-        if (!cancelled) {
-          console.error('Error hydrating private shuttle availability details:', err);
-        }
-      } finally {
-        if (!cancelled) setIsFetchingMoreAvailabilities(false);
-      }
-    }
-
-    hydrateSelectedDateDetails();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    selectedDate,
-    availabilitiesByDate,
-    product.productId,
-    activeOptionIdsKey,
-    activePromoCode,
-    pricingProfileIdForAvailabilities,
-    cancellationPolicyProfileIdForAvailabilities,
-    availabilitiesCache,
-  ]);
-
-  const earliestAvailabilityDate = useMemo(() => {
-    if (dates.length === 0) return EARLIEST_AVAILABILITY_DATE;
-    // Build date in company timezone at noon to avoid cross-timezone day shifts.
-    return fromZonedTime(parseISO(`${dates[0]}T12:00:00`), companyTimezone);
-  }, [dates, companyTimezone]);
-
   const suggestedStartTimes = useMemo(() => {
     const times = selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
     if (isAdmin || !selectedDate) return times;
@@ -1029,263 +308,57 @@ export function PrivateShuttleBookingFlow({
     selectedAvailability?.suggestedStartTimes,
     selectedDate,
   ]);
-  const resourceCount = Math.ceil(passengerCount / RESOURCE_CAPACITY);
-  const maxVacancies = selectedAvailability?.vacancies || 0;
-  const isSpecialRequest = passengerCount > maxVacancies;
-  const billableResourceCount = isSpecialRequest
-    ? Math.max(1, Math.ceil(maxVacancies / RESOURCE_CAPACITY))
-    : resourceCount;
-
-  const getOptionPrice = useCallback(
-    (optionId: string) => {
-      const opt = activeOptions.find((o) => o.optionId === optionId);
-      const dateAvailabilities = selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
-      const avail = dateAvailabilities.find(
-        (a) => getPrivateShuttleAvailabilityOptionId(a) === optionId
-      );
-      const profileOptionPrice = resourcePriceByOption?.[optionId]?.[currency];
-      if (profileOptionPrice != null) {
-        return applyResourceAdjustments(profileOptionPrice, avail, currency);
-      }
-      if (currency === 'CAD' && opt?.pricing?.['RESOURCE'] != null) {
-        return applyResourceAdjustments(opt.pricing['RESOURCE'], avail, currency);
-      }
-      if (avail?.rates) {
-        const resourceRate = getResourceRate(avail);
-        if (resourceRate?.priceByCurrency?.[currency] != null)
-          return resourceRate.priceByCurrency[currency];
-        if (currency === 'CAD' && resourceRate?.price != null) return resourceRate.price;
-      }
-      if (currency === 'CAD' && resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
-      return opt?.pricing?.['RESOURCE'] ?? 0;
-    },
-    [
-      selectedDate,
-      availabilitiesByDate,
-      resourcePriceByOption,
-      resourcePriceByCurrency,
-      currency,
-      activeOptions,
-    ]
-  );
-
-  const resourcePrice = useMemo(() => {
-    const selectedProfileOptionPrice = selectedOption
-      ? resourcePriceByOption?.[selectedOption]?.[currency]
-      : undefined;
-    if (selectedProfileOptionPrice != null) {
-      return applyResourceAdjustments(selectedProfileOptionPrice, selectedAvailability, currency);
-    }
-    if (currency === 'CAD' && selectedOptionConfig?.pricing?.['RESOURCE'] != null)
-      return applyResourceAdjustments(
-        selectedOptionConfig.pricing['RESOURCE'],
-        selectedAvailability,
-        currency
-      );
-    if (selectedAvailability?.rates) {
-      const resourceRate = getResourceRate(selectedAvailability);
-      if (resourceRate) {
-        const fromRate =
-          resourceRate.priceByCurrency?.[currency] ??
-          (currency === 'CAD' ? resourceRate.price : undefined);
-        if (fromRate != null) return fromRate;
-      }
-    }
-    if (currency === 'CAD' && resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
-    if (precomputedPrices?.['RESOURCE']?.[currency] != null)
-      return precomputedPrices['RESOURCE'][currency];
-    if (selectedOptionConfig?.pricing?.['RESOURCE'] != null)
-      return selectedOptionConfig.pricing['RESOURCE'];
-    return 0;
-  }, [
+  const {
+    resourceCount,
+    maxVacancies,
+    isSpecialRequest,
+    billableResourceCount,
+    getOptionPrice,
+    resourcePrice,
+    basePrice,
+    isTaxIncludedInPrice,
+    taxRate,
+    selectedCancellationPolicy,
+    cancellationPolicyFee,
+    additionalHoursAmount,
+    perBookingFeeLineItems,
+    subtotal,
+    promoDiscountAmount,
+    isGiftCard,
+    effectivePromoDiscountAmount,
+    effectiveTaxAmount,
+    totalPrice,
+    providerChangeAuthoritativeReceipt,
+    depositInfo,
+    priceSummaryLines,
+    resetPromoDiscount,
+  } = usePrivateShuttlePriceSummary({
+    selectedOption,
+    selectedDate,
+    selectedStartTime,
     selectedAvailability,
+    selectedOptionConfig,
+    activeOptions,
+    availabilitiesByDate,
     resourcePriceByOption,
     resourcePriceByCurrency,
     precomputedPrices,
-    selectedOption,
-    selectedOptionConfig,
+    passengerCount,
     currency,
-  ]);
-
-  const basePrice = resourcePrice * resourceCount;
-  const isTaxIncludedInPrice = (pricingConfig?.currenciesWithTaxIncluded ?? []).includes(currency);
-  const taxRate = pricingConfig?.taxRate ?? 0.05;
-  const selectedCancellationPolicy = pricingConfig?.cancellationPolicies?.find(
-    (p) => p.id === cancellationPolicyId
-  );
-  const cancellationPolicyFee = selectedCancellationPolicy
-    ? (selectedCancellationPolicy.feeByCurrency[currency] ?? 0)
-    : 0;
-  const draftItineraryIncludesMoraineLake = useMemo(() => {
-    if (draftItineraryDestinations.length === 0) return false;
-    const destinationLabelsById = new Map(
-      (product.itineraryBuilder?.destinations ?? []).map((destination) => [
-        destination.id,
-        destination.label,
-      ])
-    );
-    return draftItineraryDestinations.some((destinationId) => {
-      const label = destinationLabelsById.get(destinationId);
-      return (
-        isMoraineLakeLocationText(destinationId) ||
-        (label ? isMoraineLakeLocationText(label) : false)
-      );
-    });
-  }, [draftItineraryDestinations, product.itineraryBuilder?.destinations]);
-  const perBookingFeeLineItems = useMemo(() => {
-    if (isTaxIncludedInPrice) return [];
-    const amountsByName = pricingConfig?.perBookingFeesByCurrency?.[currency];
-    if (!amountsByName) return [];
-    const feeMetadata = pricingConfig?.perBookingFees ?? {};
-    return Object.entries(amountsByName)
-      .filter(
-        ([name]) =>
-          draftItineraryIncludesMoraineLake || !isMoraineLakeRoadAccessFeeName(name)
-      )
-      .map(([name, amount]) => ({
-        name,
-        totalAmount: amount,
-        description: feeMetadata[name]?.description,
-      }));
-  }, [currency, draftItineraryIncludesMoraineLake, isTaxIncludedInPrice, pricingConfig]);
-
-  const addOnTotal = useMemo(() => {
-    let sum = 0;
-    for (const sel of addOnSelections) {
-      const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-      if (!addOn) continue;
-      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;
-      sum += (base + adj) * (sel.quantity ?? 1);
-    }
-    return sum;
-  }, [addOnSelections, addOns]);
-
-  const additionalHoursAmount = (isAdmin ? additionalHoursCount : 0) * ADDITIONAL_HOUR_PRICE;
-  const perBookingFeeTotal = perBookingFeeLineItems.reduce((sum, fee) => sum + fee.totalAmount, 0);
-  const subtotal = basePrice + addOnTotal + additionalHoursAmount + perBookingFeeTotal;
-  const effectivePromoDiscountAmount = promoDiscountAmount > 0 ? promoDiscountAmount : 0;
-  const taxAmount = isTaxIncludedInPrice ? 0 : subtotal * taxRate;
-  const effectiveTaxAmount =
-    effectivePromoDiscountAmount > 0 && !isGiftCard && !isVoucher
-      ? (isTaxIncludedInPrice ? 0 : (subtotal - effectivePromoDiscountAmount) * taxRate)
-      : taxAmount;
-  const totalPrice = subtotal + effectiveTaxAmount - effectivePromoDiscountAmount;
-  const providerChangeAuthoritativeReceipt = useMemo<
-    ProviderDashboardChangeBookingPayload['authoritativeReceipt']
-  >(() => {
-    const lineItems: NonNullable<
-      ProviderDashboardChangeBookingPayload['authoritativeReceipt']
-    >['lineItems'] = [
-      {
-        type: 'TICKET',
-        label: resourceCount > 1 ? 'Shuttles' : 'Shuttle',
-        amount: roundMoney(basePrice),
-        quantity: resourceCount,
-      },
-    ];
-
-    for (const sel of addOnSelections) {
-      const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-      if (!addOn) continue;
-      const hasVariant =
-        (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') &&
-        sel.variantId;
-      const variant = hasVariant
-        ? addOn.variants?.find((v) => v.id === sel.variantId)
-        : null;
-      const amount = ((addOn.price ?? 0) + (variant?.priceAdjustment ?? 0)) * (sel.quantity ?? 1);
-      lineItems.push({
-        type: 'FEE',
-        label: variant?.label ? `${addOn.name} (${variant.label})` : addOn.name,
-        amount: roundMoney(amount),
-      });
-    }
-
-    if (additionalHoursAmount > 0) {
-      lineItems.push({
-        type: 'FEE',
-        label:
-          additionalHoursCount === 1
-            ? 'Additional hour'
-            : `Additional hours (${additionalHoursCount})`,
-        amount: roundMoney(additionalHoursAmount),
-      });
-    }
-
-    for (const fee of perBookingFeeLineItems) {
-      lineItems.push({
-        type: 'FEE',
-        label: fee.name,
-        amount: roundMoney(fee.totalAmount),
-      });
-    }
-
-    if (cancellationPolicyFee > 0 && selectedCancellationPolicy) {
-      lineItems.push({
-        type: 'CANCELLATION_UPGRADE',
-        label: selectedCancellationPolicy.label,
-        amount: roundMoney(cancellationPolicyFee),
-      });
-    }
-
-    if (effectiveTaxAmount > 0) {
-      lineItems.push({
-        type: 'TAX',
-        label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees',
-        amount: roundMoney(effectiveTaxAmount),
-      });
-    }
-
-    if (effectivePromoDiscountAmount > 0) {
-      lineItems.push({
-        type: isGiftCard ? 'GIFT_CARD' : 'PROMO_CODE',
-        label: activePromoCode ? `Promo: ${activePromoCode}` : (t('booking.discount') || 'Discount'),
-        amount: roundMoney(-effectivePromoDiscountAmount),
-      });
-    }
-
-    const expectedTotal = roundMoney(totalPrice);
-    const lineTotal = roundMoney(lineItems.reduce((sum, line) => sum + line.amount, 0));
-    const roundingDelta = roundMoney(expectedTotal - lineTotal);
-    if (Math.abs(roundingDelta) >= 0.01) {
-      lineItems.push({
-        type: 'ROUNDING',
-        label: t('booking.rounding') || 'Rounding',
-        amount: roundingDelta,
-      });
-    }
-
-    return {
-      currency,
-      lineItems,
-      subtotalBeforeTax: roundMoney(expectedTotal - roundMoney(effectiveTaxAmount)),
-      taxAmount: roundMoney(effectiveTaxAmount),
-      totalAmount: expectedTotal,
-    };
-  }, [
-    activePromoCode,
+    pricingConfig,
+    cancellationPolicyId,
+    draftItineraryDestinations,
+    itineraryDestinations: product.itineraryBuilder?.destinations,
     addOnSelections,
     addOns,
-    additionalHoursAmount,
+    isAdmin,
     additionalHoursCount,
-    basePrice,
-    cancellationPolicyFee,
-    currency,
-    effectivePromoDiscountAmount,
-    effectiveTaxAmount,
-    isGiftCard,
-    perBookingFeeLineItems,
-    resourceCount,
-    selectedCancellationPolicy,
+    activePromoCode,
+    productCompanyId: product.companyId,
+    productId: product.productId,
+    depositConfig: privateShuttleConfig?.depositConfig,
     t,
-    totalPrice,
-  ]);
+  });
 
   useEffect(() => {
     if (!onPricePreviewChange) return;
@@ -1310,90 +383,6 @@ export function PrivateShuttleBookingFlow({
     currency,
   ]);
 
-  const depositInfo = useMemo(() => {
-    if (!privateShuttleConfig?.depositConfig || totalPrice <= 0) return null;
-    const { depositConfig } = privateShuttleConfig;
-    let depositAmount = 0;
-    if (depositConfig.percentage != null) {
-      // Support both: 30 = 30%, or 0.3 = 30% (decimal from API)
-      const pct = depositConfig.percentage;
-      depositAmount = pct <= 1 ? totalPrice * pct : (totalPrice * pct) / 100;
-    } else if (depositConfig.fixedAmount != null) {
-      depositAmount = depositConfig.fixedAmount;
-    }
-    if (depositAmount <= 0) return null;
-    return {
-      depositAmount,
-      balanceAmount: totalPrice - depositAmount,
-      totalPrice,
-    };
-  }, [privateShuttleConfig, totalPrice]);
-
-  const hasOngoingDiscount = useMemo(
-    () =>
-      selectedAvailability?.rates?.some((r) =>
-        (r.appliedAdjustments ?? r.applied_adjustments ?? []).some(
-          (a) => (a.type ?? '').toLowerCase() === 'deal'
-        )
-      ) ?? false,
-    [selectedAvailability]
-  );
-
-  useEffect(() => {
-    if (
-      !activePromoCode ||
-      !selectedOption ||
-      !selectedDate ||
-      !selectedStartTime ||
-      resourceCount === 0
-    ) {
-      setPromoDiscountAmount(0);
-      setIsGiftCard(false);
-      setIsVoucher(false);
-      return;
-    }
-    const companyId = product.companyId;
-    if (!companyId) return;
-    let cancelled = false;
-    getPromoDiscount(
-      activePromoCode,
-      companyId,
-      product.productId,
-      selectedOption,
-      currency,
-      [{ category: 'RESOURCE', qty: resourceCount }],
-      selectedDate,
-      subtotal
-    )
-      .then((res) => {
-        if (!cancelled) {
-          setPromoDiscountAmount(res.discount ?? 0);
-          setIsGiftCard(res.isGiftCard ?? false);
-          setIsVoucher(res.isVoucher ?? false);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setPromoDiscountAmount(0);
-          setIsGiftCard(false);
-          setIsVoucher(false);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    activePromoCode,
-    selectedOption,
-    selectedDate,
-    selectedStartTime,
-    resourceCount,
-    product.companyId,
-    product.productId,
-    currency,
-    subtotal,
-  ]);
-
   const handleDateSelect = (date: string) => {
     setSelectedDate(date);
     setSelectedOption('');
@@ -1576,71 +565,15 @@ export function PrivateShuttleBookingFlow({
     setError('');
   };
 
-  const handleApplyPromo = useCallback(async () => {
-    const code = promoCodeInput.trim().toUpperCase();
-    if (!isAdmin) return;
-    if (!code || appliedPromoCode === code) return;
-    if (!product.companyId) return;
-    lastValidatedInputRef.current = code;
-    setPromoCodeError('');
-    setPromoCodeValidating(true);
-    try {
-      const result = await validatePromoCode(
-        code,
-        product.companyId,
-        product.productId,
-        hasOngoingDiscount
-      );
-      if (result.valid) {
-        setAppliedPromoCode(code);
-        fetchedRangesRef.current = [];
-      } else {
-        setPromoCodeError(
-          result.error === 'Promo codes cannot be stacked with deals'
-            ? (t('booking.promoCodesCannotStackWithDiscounts') || result.error)
-            : (result.error || t('booking.invalidPromoCode') || 'Invalid or expired promo code')
-        );
-      }
-    } catch (err) {
-      setPromoCodeError(err instanceof Error ? err.message : 'Failed to validate promo code');
-    } finally {
-      setPromoCodeValidating(false);
-    }
-  }, [
-    promoCodeInput,
-    appliedPromoCode,
-    isAdmin,
-    product.companyId,
-    product.productId,
-    hasOngoingDiscount,
-    t,
-  ]);
-
-  const handleApplyPromoRef = useRef(handleApplyPromo);
-  handleApplyPromoRef.current = handleApplyPromo;
-
-  useEffect(() => {
-    if (!isAdmin) return;
-    const trimmed = promoCodeInput.trim().toUpperCase();
-    if (!trimmed) return;
-    if (!selectedOption || !selectedStartTime || resourceCount === 0) return;
-    if (appliedPromoCode === trimmed) return;
-    if (lastValidatedInputRef.current === trimmed && promoCodeError) return;
-
-    const timer = setTimeout(() => {
-      handleApplyPromoRef.current();
-    }, 600);
+  const handleRemovePromoAndDiscount = useCallback(() => {
+    handleRemovePromo();
+    resetPromoDiscount();
+  }, [handleRemovePromo, resetPromoDiscount]);
 
-    return () => clearTimeout(timer);
-  }, [
-    isAdmin,
-    promoCodeInput,
-    appliedPromoCode,
-    promoCodeError,
-    selectedOption,
-    selectedStartTime,
-    resourceCount,
-  ]);
+  const handleTermsAcceptedChange = useCallback((checked: boolean) => {
+    setTermsAccepted(checked);
+    setTermsAcceptedAt(checked ? new Date().toISOString() : null);
+  }, []);
 
   const itineraryDisplayItems = useMemo(() => {
     if (!selectedOption || !selectedStartTime) return [];
@@ -1690,706 +623,90 @@ export function PrivateShuttleBookingFlow({
     t,
   ]);
 
-  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 (!selectedDate || !selectedStartTime || passengerCount < 1) {
-      setError('Please select a date, start time, and passenger count');
-      return;
-    }
-    if (
-      !isAdmin &&
-      !privateShuttleStartTimeAllowed(
-        selectedDate,
-        selectedStartTime,
-        companyTimezone,
-        bookingCutoffNow,
-        bookingCutoffMinutes,
-      )
-    ) {
-      setError(privateShuttleBookingCutoffMessage(bookingCutoffMinutes));
-      return;
-    }
-    if (
-      product.pickupLocations &&
-      product.pickupLocations.length > 0 &&
-      !pickupLocationId &&
-      !customPickupAddress &&
-      !pickupLocationSkipped
-    ) {
-      setError(t('booking.selectPickupLocation'));
-      return;
-    }
-    if (!isProviderChangeMode) {
-      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;
-      }
-    }
-
-    setLoading(true);
-    setError('');
-    paymentSubmitInFlightRef.current = false;
-
-    try {
-      if (!selectedOption) {
-        setError('No product option selected');
-        setLoading(false);
-        return;
-      }
-      if (isProviderChangeMode && onChangeBooking) {
-        const bookingItems = [{ category: 'RESOURCE' as const, count: billableResourceCount }];
-        const [hours, minutes] = selectedStartTime.split(':').map(Number);
-        const startTimeISO = `${selectedDate}T${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00-06:00`;
-        await onChangeBooking({
-          productId: selectedOption,
-          dateTime: selectedDate,
-          bookingItems,
-          returnAvailabilityId: null,
-          pickupLocationId: pickupLocationId ?? null,
-          travelerHotel:
-            selectedPickupLocation?.name ?? customPickupAddress ?? initialBooking?.travelerHotel ?? null,
-          startTime: startTimeISO,
-          passengerCount,
-          childSafetySeatsCount: childSafetySeatsCount > 0 ? childSafetySeatsCount : null,
-          foodRestrictions: foodRestrictions.trim() || null,
-          addOnSelections: addOnSelections.length > 0 ? addOnSelections : null,
-          cancellationPolicyId: cancellationPolicyId ?? initialBooking?.cancellationPolicyId ?? null,
-          promoCode: activePromoCode ?? null,
-          newTotalAmount: totalPrice,
-          additionalHoursCount: isAdmin ? additionalHoursCount : null,
-          authoritativeReceipt: providerChangeAuthoritativeReceipt,
-        });
-        setLoading(false);
-        return;
-      }
-      const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
-        clientChannelSource: inferClientBookingSourceFromProductIds(product.productId, selectedOption),
-        forcePartnerPortalChannel: partnerPortalBooking,
-        forceDashboardSource: bookingAppMode === 'provider-dashboard',
-      });
-      const bookingItems = [{ category: 'RESOURCE' as const, count: billableResourceCount }];
-      const [hours, minutes] = selectedStartTime.split(':').map(Number);
-      const startTimeISO = `${selectedDate}T${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00-06:00`;
-
-      try {
-        const refreshed = await refreshSelectedDateDetailsForCheckout();
-        const slot = findMergedPrivateShuttleAvailability(
-          refreshed,
-          selectedAvailability,
-          selectedOption || null,
-          selectedDate || null,
-          companyTimezone
-        );
-        const passengersToReserve = isSpecialRequest
-          ? Math.min(passengerCount, maxVacancies)
-          : passengerCount;
-        if (!isAdmin && slot?.vacancies != null && (slot.vacancies === 0 || slot.vacancies < passengersToReserve)) {
-          setError(
-            describePrivateShuttleCapacityConflictMessage({
-              passengersRequested: passengerCount,
-              vacancies: slot.vacancies,
-            })
-          );
-          setLoading(false);
-          return;
-        }
-      } catch (refreshErr) {
-        console.warn('Fresh private shuttle availability check failed before reserve; falling back to reserve validation.', refreshErr);
-      }
-
-      const specialRequestNote = isSpecialRequest
-        ? `Special request: Customer requested ${passengerCount} passengers (${resourceCount} shuttles needed). We reserved ${billableResourceCount} at standard capacity. Team to add ${resourceCount - billableResourceCount} more shuttle(s) and verify fleet availability.`
-        : '';
-      const userPlanningNotes = draftItineraryPlanningNotes.trim();
-      const planningNotes = [specialRequestNote, userPlanningNotes].filter(Boolean).join('\n\n');
-
-      let reservation: { reservationReference: string; expiresAt?: string; totalAmount?: number; currency?: string };
-      reservation = await createReservation({
-        productId: selectedOption,
-        dateTime: selectedDate,
-        availabilityId: selectedAvailability?.availabilityId || undefined,
-        bookingItems,
-        currency,
-        startTime: startTimeISO,
-        passengerCount: isSpecialRequest ? Math.min(passengerCount, maxVacancies) : passengerCount,
-        requestedPassengerCount: isSpecialRequest ? passengerCount : undefined,
-        pickupLocationId: pickupLocationId || undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        promoCode: activePromoCode || undefined,
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-        draftItinerary:
-          draftItineraryDestinations.length > 0 || planningNotes
-            ? {
-                destinations: draftItineraryDestinations,
-                planningNotes: planningNotes || undefined,
-              }
-            : undefined,
-        childSafetySeatsCount: childSafetySeatsCount > 0 ? childSafetySeatsCount : undefined,
-        foodRestrictions: foodRestrictions.trim() || undefined,
-        addOnSelections: addOnSelections.length > 0 ? addOnSelections : undefined,
-        additionalHoursCount: isAdmin && additionalHoursCount > 0 ? additionalHoursCount : undefined,
-        ...(isAdmin ? { allowOverbook: true } : {}),
-        ...(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');
-      }
-
-      const itineraryDisplayForStorage: ItineraryDisplayStep[] = itineraryDisplayItems.map(
-        (item, i) => {
-          if (item.isProposedStops) {
-            return {
-              stepType: ItineraryStepType.draft,
-              time: 'Proposed stops',
-              place: item.label,
-            };
-          }
-          const isPickup = i === 0;
-          return {
-            stepType: isPickup ? ItineraryStepType.pickup : ItineraryStepType.drop_off,
-            time: item.time ?? 'TBD',
-            place: item.clickableLabel ?? item.label,
-          };
-        }
-      );
-
-      const lines = [
-        {
-          label: resourceCount > 1 ? 'Shuttles' : 'Shuttle',
-          amount: basePrice,
-          type: 'TICKET' as const,
-          quantity: resourceCount,
-        },
-        ...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 amt = (base + adj) * (sel.quantity ?? 1);
-            const variantLabel = hasVariant
-              ? addOn.variants?.find((v) => v.id === sel.variantId)?.label
-              : null;
-            const qty = sel.quantity ?? 1;
-            return {
-              label: variantLabel
-                ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}`
-                : addOn.name,
-              amount: amt,
-              type: 'FEE' as const,
-            };
-          })
-          .filter(Boolean) as Array<{ label: string; amount: number; type: 'FEE' }>,
-        ...(additionalHoursAmount > 0
-          ? [
-              {
-                label:
-                  additionalHoursCount === 1
-                    ? 'Additional hour'
-                    : `Additional hours (${additionalHoursCount})`,
-                amount: additionalHoursAmount,
-                type: 'ADDITIONAL_HOURS' as const,
-              },
-            ]
-          : []),
-        ...perBookingFeeLineItems.map((fee) => ({
-          label: fee.name,
-          amount: fee.totalAmount,
-          type: 'FEE' as const,
-        })),
-        ...(cancellationPolicyFee > 0 && selectedCancellationPolicy
-          ? [
-              {
-                label: selectedCancellationPolicy.label,
-                amount: cancellationPolicyFee,
-                type: 'CANCELLATION_UPGRADE' as const,
-              },
-            ]
-          : []),
-        ...(effectiveTaxAmount > 0
-          ? [
-              {
-                label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees',
-                amount: effectiveTaxAmount,
-                type: 'TAX' as const,
-              },
-            ]
-          : []),
-      ];
-      const receiptTotal = depositInfo ? depositInfo.totalPrice : totalPrice;
-      const linesWithPromo = [
-        ...lines,
-        ...(effectivePromoDiscountAmount > 0
-          ? [
-              {
-                label:
-                  activePromoCode
-                    ? `Promo: ${activePromoCode}`
-                    : (t('booking.discount') || 'Discount'),
-                amount: -effectivePromoDiscountAmount,
-                type: isGiftCard ? 'GIFT_CARD' : 'PROMO_CODE',
-              },
-            ]
-          : []),
-      ];
-      const checkoutBreakdown = buildCheckoutBreakdown({
-        lines: linesWithPromo,
-        totalAmount: receiptTotal,
-        currency,
-        roundingLabel: t('booking.rounding') || 'Rounding',
-      });
-
-      if (flowUi?.partnerDeferredInvoice) {
-        const depositAmount = depositInfo ? depositInfo.depositAmount : 0;
-        const balanceAmount = depositInfo ? depositInfo.balanceAmount : receiptTotal;
-        const confirmedBooking = await confirmPartnerBookingWithoutPayment({
-          reservationReference: reservation.reservationReference,
-          productId: product.productId,
-          optionId: selectedOption,
-          date: selectedDate,
-          time: selectedStartTime,
-          customerEmail: email || undefined,
-          customerFirstName: firstName.trim() || undefined,
-          customerLastName: lastName.trim() || undefined,
-        ...optionalCheckoutContactFields(phoneNumber),
-          ...optionalCheckoutContactFields(phoneNumber),
-          currency,
-          travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-          pickupLocationId: pickupLocationId || undefined,
-          itineraryDisplay: itineraryDisplayForStorage,
-          termsAcceptedAt: termsAcceptedAt ?? undefined,
-          skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-          disableAutoCommunications: disableAutoCommunications ? true : undefined,
-          checkoutBreakdown,
-          depositAmount,
-          balanceAmount,
-          totalAmount: receiptTotal,
-          balanceChargeDaysBefore: depositInfo ? (privateShuttleConfig?.balanceChargeDaysBefore ?? 7) : undefined,
-          ...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 {
-          window.location.href = `/manage-booking?ref=${ref}&lastName=${encodeURIComponent(ln)}&booking_complete=1`;
-        }
-        setLoading(false);
-        return;
-      }
-
-      if (isAdmin && depositInfo) {
-        const paymentIntent = await createPaymentIntent({
-          productId: product.productId,
-          optionId: selectedOption,
-          date: selectedDate,
-          time: selectedStartTime,
-          quantity: resourceCount,
-          customerEmail: email,
-          customerFirstName: firstName.trim() || undefined,
-          customerLastName: lastName.trim() || undefined,
-        ...optionalCheckoutContactFields(phoneNumber),
-          ...optionalCheckoutContactFields(phoneNumber),
-          currency,
-          reservationReference: reservation.reservationReference,
-          travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-          pickupLocationId: pickupLocationId || undefined,
-          itineraryDisplay: itineraryDisplayForStorage,
-          termsAcceptedAt: termsAcceptedAt ?? undefined,
-          cancellationPolicyId: cancellationPolicyId || undefined,
-          promoCode: activePromoCode || undefined,
-          checkoutBreakdown,
-          paymentPlanType: 'DEPOSIT',
-          depositAmount: depositInfo.depositAmount,
-          balanceAmount: depositInfo.balanceAmount,
-          totalAmount: depositInfo.totalPrice,
-          balanceChargeDaysBefore: privateShuttleConfig?.balanceChargeDaysBefore ?? 7,
-          skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-          disableAutoCommunications: disableAutoCommunications ? true : undefined,
-          ...bookingSourceContext,
-        });
-        setAdminChoiceData({
-          reservationReference: reservation.reservationReference,
-          reservationExpiration: reservation.expiresAt,
-          checkoutBreakdown,
-          totalAmount: depositInfo.totalPrice,
-          datePart: selectedDate,
-          timePart: selectedStartTime,
-          availabilityProductOptionId: selectedOption,
-          itineraryDisplay: itineraryDisplayForStorage,
-          clientSecret: paymentIntent.clientSecret ?? '',
-          ticketLinesForModal: [
-            {
-              line: {
-                category: 'Shuttle',
-                qty: resourceCount,
-                pricePerUnit: resourcePrice,
-                itemTotal: basePrice,
-              },
-              breakdown: null,
-            },
-          ],
-          feeLineItems: [
-            ...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;
-                return {
-                  name: addOn.name,
-                  totalAmount: (base + adj) * (sel.quantity ?? 1),
-                };
-              })
-              .filter(Boolean) as { name: string; totalAmount: number }[],
-            ...perBookingFeeLineItems,
-          ],
-          cancellationPolicyFee,
-          cancellationPolicyLabel: selectedCancellationPolicy?.label,
-          subtotal,
-          tax: effectiveTaxAmount,
-          totalQuantity: resourceCount,
-          isTaxIncludedInPrice,
-          taxRate,
-          promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
-          discountLabel: activePromoCode ? `Promo: ${activePromoCode}` : undefined,
-        });
-        setShowAdminPaymentChoice(true);
-        setLoading(false);
-        return;
-      }
-
-      const paymentIntent = await createPaymentIntent({
-        productId: product.productId,
-        optionId: selectedOption,
-        date: selectedDate,
-        time: selectedStartTime,
-        quantity: resourceCount,
-        customerEmail: email,
-        customerFirstName: firstName.trim() || undefined,
-        customerLastName: lastName.trim() || undefined,
-        ...optionalCheckoutContactFields(phoneNumber),
-        currency,
-        reservationReference: reservation.reservationReference,
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-        pickupLocationId: pickupLocationId || undefined,
-        itineraryDisplay: itineraryDisplayForStorage,
-        termsAcceptedAt: termsAcceptedAt ?? undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        promoCode: activePromoCode || undefined,
-        checkoutBreakdown,
-        ...(depositInfo && {
-          paymentPlanType: 'DEPOSIT' as const,
-          depositAmount: depositInfo.depositAmount,
-          balanceAmount: depositInfo.balanceAmount,
-          totalAmount: depositInfo.totalPrice,
-          balanceChargeDaysBefore: privateShuttleConfig?.balanceChargeDaysBefore ?? 7,
-        }),
-        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-        disableAutoCommunications: disableAutoCommunications ? true : undefined,
-        ...bookingSourceContext,
-      });
-
-      if (paymentIntent.freeBooking) {
-        const freeResult = await confirmFreeBooking({
-          reservationReference: reservation.reservationReference,
-          productId: product.productId,
-          optionId: selectedOption,
-          date: selectedDate,
-          time: selectedStartTime,
-          customerEmail: email || undefined,
-          customerFirstName: firstName.trim() || undefined,
-          customerLastName: lastName.trim() || undefined,
-        ...optionalCheckoutContactFields(phoneNumber),
-          ...optionalCheckoutContactFields(phoneNumber),
-          currency,
-          travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-          pickupLocationId: pickupLocationId || undefined,
-          itineraryDisplay: itineraryDisplayForStorage,
-          termsAcceptedAt: termsAcceptedAt ?? undefined,
-          skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-          disableAutoCommunications: disableAutoCommunications ? true : undefined,
-          ...bookingSourceContext,
-        });
-        pendingReservationRef.current = null;
-        const ref = formatBookingRefForDisplay(freeResult.bookingReference);
-        onSuccess?.({ reservationReference: reservation.reservationReference });
-        if (onShowManage) {
-          onShowManage({ ref, lastName: lastName.trim() });
-        } else {
-          window.location.href = `/manage-booking?ref=${ref}&lastName=${encodeURIComponent(lastName.trim())}&booking_complete=1`;
-        }
-        setLoading(false);
-        return;
-      }
-
-      const ticketLinesForModal: CheckoutModalLineItem[] = [
-        {
-          line: {
-            category: 'Shuttle',
-            qty: resourceCount,
-            pricePerUnit: resourcePrice,
-            itemTotal: basePrice,
-          },
-          breakdown: null,
-        },
-      ];
-      const addOnFeeLineItemsForModal = 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;
-          return {
-            name: addOn.name,
-            totalAmount: (base + adj) * (sel.quantity ?? 1),
-          };
-        })
-        .filter(Boolean) as { name: string; totalAmount: number }[];
-      const feeLineItemsForModal = [...addOnFeeLineItemsForModal, ...perBookingFeeLineItems];
-
-      setCheckoutClientSecret(paymentIntent.clientSecret ?? '');
-      setCheckoutModalData({
-        reservationReference: reservation.reservationReference,
-        reservationExpiration: reservation.expiresAt,
-        customerLastName: lastName.trim(),
-        bookingDate: selectedDate,
-        ticketLines: ticketLinesForModal,
-        feeLineItems: feeLineItemsForModal,
-        returnPriceAdjustment: 0,
-        subtotal: depositInfo ? depositInfo.totalPrice : totalPrice,
-        tax: effectiveTaxAmount,
-        total: depositInfo ? depositInfo.depositAmount : totalPrice,
-        totalQuantity: resourceCount,
-        isTaxIncludedInPrice,
-        taxRate,
-        cancellationPolicyFee,
-        cancellationPolicyLabel: selectedCancellationPolicy?.label,
-        promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
-        discountLabel: activePromoCode ? `Promo: ${activePromoCode}` : undefined,
-        isDepositPayment: !!depositInfo,
-        balanceChargeDaysBefore: depositInfo ? (privateShuttleConfig?.balanceChargeDaysBefore ?? 7) : undefined,
-      });
-      setShowCheckoutModal(true);
-      setLoading(false);
-    } catch (err) {
-      if (isInsufficientCapacityReserveError(err)) {
-        try {
-          const merged = await reloadAvailabilitiesAfterReserveConflict();
-          const slot = findMergedPrivateShuttleAvailability(
-            merged,
-            selectedAvailability,
-            selectedOption || null,
-            selectedDate || null,
-            companyTimezone
-          );
-          setError(
-            describePrivateShuttleCapacityConflictMessage({
-              passengersRequested: passengerCount,
-              vacancies: slot?.vacancies ?? null,
-            })
-          );
-          reportReserveCapacityConflictClientContext({
-            flow: 'private_shuttle',
-            productId: product.productId,
-            selectedDate: selectedDate || null,
-            outboundDateTime: selectedAvailability?.dateTime ?? null,
-            outboundVacanciesAfterRefresh: slot?.vacancies ?? null,
-            returnVacanciesAfterRefresh: null,
-            partySizeOrPassengers: passengerCount,
-            hasReturnSelection: false,
-            returnAvailabilityId: null,
-            reloadAvailabilitiesSucceeded: true,
-          });
-        } catch (reloadErr) {
-          setError(
-            describePrivateShuttleCapacityConflictMessage({
-              passengersRequested: passengerCount,
-              vacancies: null,
-            })
-          );
-          reportReserveCapacityConflictClientContext({
-            flow: 'private_shuttle',
-            productId: product.productId,
-            selectedDate: selectedDate || null,
-            outboundDateTime: selectedAvailability?.dateTime ?? null,
-            outboundVacanciesAfterRefresh: null,
-            returnVacanciesAfterRefresh: null,
-            partySizeOrPassengers: passengerCount,
-            hasReturnSelection: false,
-            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',
-      });
-      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,
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || 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(adminChoiceData.reservationReference);
-      setShowAdminPaymentChoice(false);
-      setAdminChoiceData(null);
-      onSuccess?.({ reservationReference: adminChoiceData.reservationReference });
-      if (onShowManage) {
-        onShowManage({ ref, lastName: lastName.trim() });
-      } else {
-        window.location.href = `/manage-booking?ref=${ref}&lastName=${encodeURIComponent(lastName.trim())}&booking_complete=1`;
-      }
-    } 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(),
-      bookingDate: adminChoiceData.datePart,
-      ticketLines: adminChoiceData.ticketLinesForModal,
-      feeLineItems: adminChoiceData.feeLineItems,
-      returnPriceAdjustment: 0,
-      subtotal: adminChoiceData.subtotal,
-      tax: adminChoiceData.tax,
-      total: adminChoiceData.totalAmount,
-      totalQuantity: adminChoiceData.totalQuantity,
-      isTaxIncludedInPrice: adminChoiceData.isTaxIncludedInPrice,
-      taxRate: adminChoiceData.taxRate,
-      cancellationPolicyFee: adminChoiceData.cancellationPolicyFee,
-      cancellationPolicyLabel: adminChoiceData.cancellationPolicyLabel,
-      promoDiscountAmount: adminChoiceData.promoDiscountAmount,
-      discountLabel: adminChoiceData.discountLabel,
-    });
-    setShowCheckoutModal(true);
-    setAdminChoiceData(null);
-  };
+  const {
+    showCheckoutModal,
+    checkoutClientSecret,
+    checkoutModalData,
+    showAdminPaymentChoice,
+    adminChoiceData,
+    cancelPendingReservation,
+    handleCheckout,
+    handleConfirmWithoutPayment,
+    handlePayNow,
+    handlePaymentSubmitStart,
+    handlePaymentSubmitError,
+    handleAdminPaymentChoiceCancel,
+  } = usePrivateShuttleCheckoutController({
+    selectedOption,
+    selectedDate,
+    selectedStartTime,
+    selectedAvailability,
+    companyTimezone,
+    bookingCutoffNow,
+    bookingCutoffMinutes,
+    productId: product.productId,
+    currency,
+    bookingSourceAttribution,
+    partnerPortalBooking,
+    forceDashboardSource: bookingAppMode === 'provider-dashboard',
+    isAdmin,
+    isProviderChangeMode,
+    onChangeBooking,
+    initialBooking,
+    email,
+    firstName,
+    lastName,
+    phoneNumber,
+    passengerCount,
+    maxVacancies,
+    isSpecialRequest,
+    billableResourceCount,
+    resourceCount,
+    resourcePrice,
+    basePrice,
+    pricingConfig,
+    refreshSelectedDateDetailsForCheckout,
+    reloadAvailabilitiesAfterReserveConflict,
+    totalPrice,
+    subtotal,
+    activePromoCode,
+    cancellationPolicyId,
+    selectedCancellationPolicyLabel: selectedCancellationPolicy?.label,
+    cancellationPolicyFee,
+    addOnSelections,
+    addOns,
+    additionalHoursCount,
+    additionalHoursAmount,
+    perBookingFeeLineItems,
+    effectiveTaxAmount,
+    taxRate,
+    effectivePromoDiscountAmount,
+    isGiftCard,
+    isTaxIncludedInPrice,
+    depositInfo,
+    depositConfig: privateShuttleConfig?.depositConfig,
+    balanceChargeDaysBefore: privateShuttleConfig?.balanceChargeDaysBefore,
+    selectedPickupLocationName: selectedPickupLocation?.name ?? null,
+    customPickupAddress,
+    pickupLocationId,
+    pickupLocationSkipped,
+    hasPickupLocations: Boolean(product.pickupLocations?.length),
+    draftItineraryDestinations,
+    draftItineraryPlanningNotes,
+    childSafetySeatsCount,
+    foodRestrictions,
+    itineraryDisplayItems,
+    providerChangeAuthoritativeReceipt,
+    partnerDeferredInvoice: Boolean(flowUi?.partnerDeferredInvoice),
+    termsAcceptedAt,
+    skipConfirmationCommunications,
+    disableAutoCommunications,
+    setLoading,
+    setError,
+    onSuccess,
+    onShowManage,
+    t,
+  });
 
   if (activeOptions.length === 0) {
     return (
@@ -2401,101 +718,35 @@ export function PrivateShuttleBookingFlow({
     );
   }
 
-  const config = productId
-    ? (catalog.getProductByIdOrSlug(productId) as {
-        display?: {
-          collageImageIds?: string[];
-          imageIds?: string[];
-        };
-      } | null)
-    : null;
-  const displayProducts = catalog.getProducts(defaultStrings) as Record<
-    string,
-    { id: string; videoUrl?: 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;
-
   return (
     <div className={`booking-flow-root private-shuttle-booking-flow ${styles.root} space-y-8`}>
-      <AdminPaymentChoiceModal
-        open={!!(showAdminPaymentChoice && adminChoiceData)}
-        totalAmount={adminChoiceData?.totalAmount ?? 0}
+      <PrivateShuttleCheckoutDialogs
+        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={
-            getSuccessUrl
-              ? getSuccessUrl({
-                  reservationRef: checkoutModalData.reservationReference,
-                  lastName: checkoutModalData.customerLastName ?? '',
-                  focusDate: checkoutModalData.bookingDate,
-                })
-              : undefined
-          }
-          ticketLines={checkoutModalData.ticketLines}
-          feeLineItems={checkoutModalData.feeLineItems}
-          returnPriceAdjustment={checkoutModalData.returnPriceAdjustment}
-          cancellationPolicyFee={checkoutModalData.cancellationPolicyFee ?? 0}
-          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}
-          currency={currency}
-          locale={locale}
-          t={t}
-          isDepositPayment={checkoutModalData.isDepositPayment}
-          balanceChargeDaysBefore={checkoutModalData.balanceChargeDaysBefore}
-        />
-      )}
-
-      {productId && flowUi?.showCollage !== false && (hasVideo || hasImages) && (
-        <div className="booking-collage-wrapper">
-          <BookingFlowCollage
-            video={displayProduct?.videoUrl}
-            videoPosterImageId={config?.display?.imageIds?.[0]}
-            imageIds={
-              hasImages
-                ? collageImageIds
-                : (config?.display?.imageIds?.[0] ? [config.display.imageIds[0]] : [])
-            }
-            altPrefix={product.name}
-          />
-        </div>
-      )}
 
-      {flowUi?.showTourDescription !== false && (
-        <TourDescription productSlug={productId} locale={locale} />
-      )}
+      <PrivateShuttleMediaIntro
+        productId={productId}
+        productName={product.name}
+        locale={locale}
+        showCollage={flowUi?.showCollage !== false}
+        showTourDescription={flowUi?.showTourDescription !== false}
+      />
 
       {loadingAvailabilities && availabilities.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-12 gap-4">
@@ -2528,820 +779,188 @@ export function PrivateShuttleBookingFlow({
             />
           </div>
 
-          {selectedDate && optionsAvailableForSelectedDate.length > 0 && (
-            <div className={styles.section}>
-              <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                {t('booking.selectTourOption')}
-              </label>
-              <div className={styles.optionGrid}>
-                {[...optionsAvailableForSelectedDate]
-                  .sort((a, b) => (b.mostPopular ? 1 : 0) - (a.mostPopular ? 1 : 0))
-                  .map((option) => {
-                    const isSelected = selectedOption === option.optionId;
-                    const baseDurationMinutes =
-                      option.privateShuttleConfig?.baseDurationMinutes ?? 0;
-                    const hours = baseDurationMinutes / 60;
-                    const price = getOptionPrice(option.optionId);
-                    const formattedPrice = formatCurrencyAmount(
-                      price,
-                      currency,
-                      locale as 'en' | 'fr'
-                    );
-                    const hoursRounded = Math.round(hours);
-                    const isMostPopular =
-                      optionsAvailableForSelectedDate.length > 1 && option.mostPopular;
-                    return (
-                      <button
-                        key={option.optionId}
-                        type="button"
-                        onClick={() => handleOptionSelect(option.optionId)}
-                        className={`${styles.btnOption} private-shuttle-btn-option ${
-                          isMostPopular ? styles.btnOptionWithBadge : ''
-                        } ${
-                          isSelected ? styles.btnOptionSelected : styles.btnOptionDefault
-                        }`}
-                      >
-                        <div className="font-semibold">{option.name}</div>
-                        {price > 0 && hours >= 1 && (
-                          <div
-                            className={`mt-1 text-xs ${
-                              isSelected ? 'text-emerald-100' : 'text-stone-500'
-                            }`}
-                          >
-                            {(t('booking.startingAtForHours') ?? 'Starting at {price} per shuttle for {hours}.')
-                              .replace('{price}', formattedPrice)
-                              .replace('{hours}', `${hoursRounded} ${t('booking.hoursUnit') || 'hours'}`)}
-                          </div>
-                        )}
-                        {isMostPopular && (
-                          <span className={styles.badge}>
-                            {t('booking.mostPopular')}
-                          </span>
-                        )}
-                      </button>
-                    );
-                  })}
-              </div>
-            </div>
-          )}
+          <PrivateShuttleOptionSection
+            selectedDate={selectedDate}
+            options={optionsAvailableForSelectedDate}
+            selectedOption={selectedOption}
+            currency={currency}
+            locale={locale}
+            t={t}
+            getOptionPrice={getOptionPrice}
+            onOptionSelect={handleOptionSelect}
+          />
 
           {selectedOption && selectedAvailability && (
-            <div className={styles.section}>
-              <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                Number of Passengers
-              </label>
-              <div className={styles.passengerBox}>
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                  <div>
-                    <div className="font-medium text-stone-900">Passengers</div>
-                    <div className="text-sm text-stone-600">
-                      {resourceCount} {resourceCount === 1 ? 'shuttle' : 'shuttles'} needed
-                    </div>
-                  </div>
-                  {(() => {
-                    const maxVacancies = selectedAvailability?.vacancies || 0;
-                    const passengerSelectMin = 1;
-                    const specialRequestMin = maxVacancies + 1;
-                    const showSpecialRequestInput = isSpecialRequestMode;
-                    const canLeaveSpecialRequest = true;
-                    return (
-                      <>
-                        {showSpecialRequestInput ? (
-                          <div className="flex flex-col sm:flex-row sm:items-center gap-2">
-                            <input
-                              type="number"
-                              min={specialRequestMin}
-                              max={100}
-                              value={specialRequestInputValue || String(passengerCount)}
-                              onChange={(e) => {
-                                const raw = e.target.value;
-                                setSpecialRequestInputValue(raw);
-                                const val = parseInt(raw, 10);
-                                if (!Number.isNaN(val) && val >= specialRequestMin && val <= 100) {
-                                  setPassengerCount(val);
-                                }
-                              }}
-                              onBlur={() => {
-                                const val = parseInt(specialRequestInputValue, 10);
-                                const clamped = Math.max(
-                                  specialRequestMin,
-                                  Math.min(100, Number.isNaN(val) ? specialRequestMin : val)
-                                );
-                                setPassengerCount(clamped);
-                                setSpecialRequestInputValue(String(clamped));
-                              }}
-                              className={`${styles.input} ${styles.passengerInput}`}
-                              style={{ minWidth: '4.5rem', textAlign: 'center' }}
-                            />
-                            {canLeaveSpecialRequest && (
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  setIsSpecialRequestMode(false);
-                                  setSpecialRequestInputValue('');
-                                  setPassengerCount(Math.max(1, maxVacancies));
-                                }}
-                                className="text-sm text-stone-600 underline hover:text-stone-800"
-                              >
-                                Back to standard ({maxVacancies} max)
-                              </button>
-                            )}
-                          </div>
-                        ) : passengerSelectMin <= maxVacancies ? (
-                          <select
-                            value={passengerCount}
-                            onChange={(e) =>
-                              handlePassengerCountChange(Number(e.target.value))
-                            }
-                            className={`${styles.input} ${styles.passengerSelect}`}
-                            style={{ minWidth: '4.5rem', textAlign: 'center' }}
-                          >
-                            {Array.from(
-                              {
-                                length: Math.max(1, maxVacancies - passengerSelectMin + 1),
-                              },
-                              (_, i) => i + passengerSelectMin
-                            ).map((n) => (
-                              <option key={n} value={n}>
-                                {n}
-                              </option>
-                            ))}
-                          </select>
-                        ) : null}
-                      </>
-                    );
-                  })()}
-                </div>
-                <div className="text-xs text-stone-500 mt-2">
-                  Each shuttle can accommodate up to {RESOURCE_CAPACITY} passengers.
-                  {resourceCount > 1 && (
-                    <span>
-                      {' '}
-                      You&apos;ll need {resourceCount} shuttles for {passengerCount}{' '}
-                      passengers.
-                    </span>
-                  )}
-                </div>
-                {(() => {
-                  const maxVacancies = selectedAvailability?.vacancies || 0;
-                  if (maxVacancies > 0 && !isSpecialRequestMode) {
-                    return (
-                      <div className="mt-3 pt-3 border-t border-stone-200 text-right">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const initial = maxVacancies + 1;
-                            setIsSpecialRequestMode(true);
-                            setPassengerCount(initial);
-                            setSpecialRequestInputValue(String(initial));
-                          }}
-                          className={`${styles.specialRequestLink} text-emerald-600 hover:text-emerald-700 underline`}
-                        >
-                          Special request for more than {maxVacancies} passengers
-                        </button>
-                      </div>
-                    );
-                  }
-                  if (isSpecialRequestMode && passengerCount > maxVacancies) {
-                    return (
-                      <div className="mt-3 pt-3 border-t border-stone-200">
-                        <p className="text-sm text-amber-700 bg-amber-50 p-3 rounded-lg">
-                          The team will review your request to ensure we can pull{' '}
-                          {resourceCount} {resourceCount === 1 ? 'shuttle' : 'shuttles'}{' '}
-                          from our fleet. You&apos;ll pay the full amount for {resourceCount}{' '}
-                          {resourceCount === 1 ? 'shuttle' : 'shuttles'}; we&apos;ve reserved{' '}
-                          {billableResourceCount} at standard capacity and the team will add the rest.
-                        </p>
-                      </div>
-                    );
-                  }
-                  return null;
-                })()}
-              </div>
-            </div>
+            <PrivateShuttlePassengerSection
+              passengerCount={passengerCount}
+              resourceCount={resourceCount}
+              billableResourceCount={billableResourceCount}
+              maxVacancies={selectedAvailability.vacancies || 0}
+              isSpecialRequestMode={isSpecialRequestMode}
+              specialRequestInputValue={specialRequestInputValue}
+              onPassengerCountChange={handlePassengerCountChange}
+              onPassengerCountOverride={setPassengerCount}
+              onSpecialRequestModeChange={setIsSpecialRequestMode}
+              onSpecialRequestInputValueChange={setSpecialRequestInputValue}
+            />
           )}
 
           {selectedOption && selectedAvailability && passengerCount > 0 && (
-            <div className={styles.section}>
-              <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                {t('booking.selectPickupTime')}
-              </label>
-              {(suggestedStartTimes.length > 0 || isCustomTimeMode) && (
-                <div className="flex flex-wrap gap-2">
-                  {suggestedStartTimes.map((time) => {
-                    const isSelected = !isCustomTimeMode && selectedStartTime === time;
-                    const [hours, minutes] = time.split(':').map(Number);
-                    const timeInTz = fromZonedTime(new Date(2000, 0, 1, hours, minutes, 0), companyTimezone);
-                    const displayTime = formatInTimeZone(timeInTz, companyTimezone, 'h:mm a');
-                    return (
-                      <button
-                        key={time}
-                        type="button"
-                        onClick={() => handleStartTimeSelect(time)}
-                        className={`${styles.btnTime} private-shuttle-btn-time ${
-                          isSelected ? styles.btnTimeSelected : styles.btnTimeDefault
-                        }`}
-                      >
-                        {displayTime}
-                      </button>
-                    );
-                  })}
-                  {suggestedStartTimes.length > 0 && (
-                    <button
-                      type="button"
-                      onClick={handleCustomTimeRequest}
-                      className={`${styles.btnTime} private-shuttle-btn-time ${
-                        isCustomTimeMode ? styles.btnTimeSelected : styles.btnTimeDefault
-                      }`}
-                    >
-                      {t('booking.requestDifferentTime')}
-                    </button>
-                  )}
-                </div>
-              )}
-              {(isCustomTimeMode || suggestedStartTimes.length === 0) && (
-                <div className="mt-3">
-                  <label
-                    htmlFor="custom-pickup-time"
-                    className={styles.labelSecondary}
-                  >
-                    {suggestedStartTimes.length === 0
-                      ? t('booking.preferredPickupTime')
-                      : t('booking.requestDifferentTime')}
-                  </label>
-                  <input
-                    id="custom-pickup-time"
-                    type="time"
-                    value={selectedStartTime}
-                    onChange={(e) => handleCustomTimeChange(e.target.value)}
-                    className={styles.inputTime}
-                  />
-                </div>
-              )}
-            </div>
-          )}
-
-          {selectedOption && passengerCount > 0 && product.itineraryBuilder && (
-            <div className={`${styles.section} itinerary-builder-section`}>
-              <ItineraryBuilder
-                destinations={product.itineraryBuilder.destinations}
-                optionBlacklist={
-                  privateShuttleConfig?.itineraryBuilderConfig?.optionBlacklist || []
-                }
-                selectedDestinationIds={draftItineraryDestinations}
-                planningNotes={draftItineraryPlanningNotes}
-                onDestinationsChange={setDraftItineraryDestinations}
-                onPlanningNotesChange={setDraftItineraryPlanningNotes}
-              />
-              {isAdmin && (
-                <div className={styles.adminBox}>
-                  <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                    Add on hours (admin)
-                  </label>
-                  <p className="text-sm text-stone-600 mb-3">
-                    Each additional hour adds{' '}
-                    {formatCurrencyAmount(ADDITIONAL_HOUR_PRICE, currency, locale as 'en' | 'fr')}{' '}
-                    and extends the tour duration.
-                  </p>
-                  <div className="flex items-center gap-3">
-                    <button
-                      type="button"
-                      onClick={() => setAdditionalHoursCount((c) => Math.max(0, c - 1))}
-                      disabled={additionalHoursCount <= 0}
-                      className={styles.qtyBtn}
-                    >
-                      −
-                    </button>
-                    <span className="w-8 text-center font-medium tabular-nums">
-                      {additionalHoursCount}
-                    </span>
-                    <button
-                      type="button"
-                      onClick={() => setAdditionalHoursCount((c) => c + 1)}
-                      className={styles.qtyBtn}
-                    >
-                      +
-                    </button>
-                    <span className="text-sm text-stone-600">
-                      {additionalHoursCount === 0
-                        ? 'No extra hours'
-                        : additionalHoursCount === 1
-                          ? `+1 hour • ${formatCurrencyAmount(ADDITIONAL_HOUR_PRICE, currency, locale as 'en' | 'fr')}`
-                          : `+${additionalHoursCount} hours • ${formatCurrencyAmount(additionalHoursAmount, currency, locale as 'en' | 'fr')}`}
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
+            <PrivateShuttleStartTimeSection
+              suggestedStartTimes={suggestedStartTimes}
+              selectedStartTime={selectedStartTime}
+              isCustomTimeMode={isCustomTimeMode}
+              companyTimezone={companyTimezone}
+              t={t}
+              onStartTimeSelect={handleStartTimeSelect}
+              onCustomTimeRequest={handleCustomTimeRequest}
+              onCustomTimeChange={handleCustomTimeChange}
+            />
           )}
 
           {selectedOption && passengerCount > 0 && (
-            <div className={styles.section}>
-              <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                Safety seats for kids
-              </label>
-              <p className="text-sm text-stone-500 mb-2">
-                How many child safety seats do you need?
-              </p>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => setChildSafetySeatsCount((c) => Math.max(0, c - 1))}
-                  disabled={childSafetySeatsCount <= 0}
-                  className={styles.qtyBtn}
-                >
-                  −
-                </button>
-                <span className="w-8 text-center font-medium tabular-nums">
-                  {childSafetySeatsCount}
-                </span>
-                <button
-                  type="button"
-                  onClick={() =>
-                    setChildSafetySeatsCount((c) =>
-                      Math.min(passengerCount, c + 1)
-                    )
-                  }
-                  disabled={childSafetySeatsCount >= passengerCount}
-                  className={styles.qtyBtn}
-                >
-                  +
-                </button>
-              </div>
-            </div>
+            <PrivateShuttleItinerarySection
+              itineraryBuilder={product.itineraryBuilder}
+              optionBlacklist={
+                privateShuttleConfig?.itineraryBuilderConfig?.optionBlacklist || []
+              }
+              selectedDestinationIds={draftItineraryDestinations}
+              planningNotes={draftItineraryPlanningNotes}
+              isAdmin={isAdmin}
+              additionalHoursCount={additionalHoursCount}
+              additionalHoursAmount={additionalHoursAmount}
+              currency={currency}
+              locale={locale}
+              onDestinationsChange={setDraftItineraryDestinations}
+              onPlanningNotesChange={setDraftItineraryPlanningNotes}
+              onAdditionalHoursChange={setAdditionalHoursCount}
+            />
           )}
 
-          {selectedOption && passengerCount > 0 && (
-            <div className={styles.section}>
-              <label
-                htmlFor="food-restrictions"
-                className={`${styles.sectionLabel} private-shuttle-section-label`}
-              >
-                Food restrictions
-              </label>
-              <p className="text-sm text-stone-500 mb-2">
-                Shuttle includes croissants, coffee, tea, hot chocolate, trail snacks.
-              </p>
-              <textarea
-                id="food-restrictions"
-                value={foodRestrictions}
-                onChange={(e) => setFoodRestrictions(e.target.value)}
-                placeholder="Any dietary restrictions or allergies?"
-                rows={2}
-                className={styles.input}
-              />
-            </div>
+          {selectedOption && (
+            <PrivateShuttlePreferencesSection
+              passengerCount={passengerCount}
+              childSafetySeatsCount={childSafetySeatsCount}
+              foodRestrictions={foodRestrictions}
+              onChildSafetySeatsCountChange={setChildSafetySeatsCount}
+              onFoodRestrictionsChange={setFoodRestrictions}
+            />
           )}
 
-          {selectedOption && passengerCount > 0 && addOns.length > 0 && (
-            <div className={styles.section}>
-              {draftItineraryDestinations.includes('emerald_lake') && (() => {
-                const lunchAddOn = addOns.find((a) => a.addOnId === 'addon_el_lunch');
-                if (!lunchAddOn || !canUseMealDrinkSelector(lunchAddOn)) return null;
-                return (
-                  <MealDrinkAddOnSelector
-                    addOn={lunchAddOn}
-                    selections={addOnSelections}
-                    onSelectionsChange={setAddOnSelections}
-                    currency={currency}
-                    locale={locale}
-                  />
-                );
-              })()}
-              {(() => {
-                const animalsAddOn = addOns.find((a) => a.addOnId === 'addon_animals');
-                if (!animalsAddOn) return null;
-                const isAnimalsSelected = addOnSelections.some(
-                  (s) => s.addOnId === 'addon_animals'
-                );
-                return (
-                  <div>
-                    <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                      Traveling with animals?
-                    </label>
-                    <p className="text-sm text-stone-500 mb-2">
-                      {animalsAddOn.description ||
-                        'Cleaning fee for traveling with animals'}
-                    </p>
-                    <div className="flex flex-wrap gap-2">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setAddOnSelections((prev) =>
-                            prev.filter((s) => s.addOnId !== 'addon_animals')
-                          );
-                        }}
-                        className={`${styles.btnTime} private-shuttle-btn-time ${
-                          !isAnimalsSelected ? styles.btnTimeSelected : styles.btnTimeDefault
-                        }`}
-                      >
-                        No animals
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setAddOnSelections((prev) => {
-                            if (isAnimalsSelected) return prev;
-                            return [...prev, { addOnId: 'addon_animals', quantity: 1 }];
-                          });
-                        }}
-                        className={`${styles.btnTime} private-shuttle-btn-time flex items-center gap-2 ${
-                          isAnimalsSelected ? styles.btnTimeSelected : styles.btnTimeDefault
-                        }`}
-                      >
-                        <span>Yes, traveling with animals</span>
-                        <span className="text-sm font-semibold opacity-90">
-                          +
-                          {formatCurrencyAmount(
-                            animalsAddOn.price || 0,
-                            currency,
-                            locale as 'en' | 'fr'
-                          )}
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                );
-              })()}
-            </div>
+          {selectedOption && (
+            <PrivateShuttleAddOnsSection
+              passengerCount={passengerCount}
+              addOns={addOns}
+              addOnSelections={addOnSelections}
+              selectedDestinationIds={draftItineraryDestinations}
+              currency={currency}
+              locale={locale}
+              onAddOnSelectionsChange={setAddOnSelections}
+            />
           )}
 
-          {selectedOption &&
-            passengerCount > 0 &&
-            product.pickupLocations &&
-            product.pickupLocations.length > 0 && (
-              <div id="pickup-location-section" className={styles.section}>
-                {pickupLocationId || customPickupAddress || pickupLocationSkipped ? (
-                  <div className="space-y-4">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-                          {t('pickup.pickupLocation') || 'Pickup Location'}
-                        </label>
-                        {pickupLocationSkipped ? (
-                          <p className="text-sm text-stone-900">
-                            {t('booking.pickupLocationUnknown')}
-                          </p>
-                        ) : customPickupAddress ? (
-                          <p className="text-sm text-stone-900">{customPickupAddress}</p>
-                        ) : (
-                          <>
-                            <p className="text-sm text-stone-900">
-                              {selectedPickupLocation?.name}
-                            </p>
-                            <p className="text-xs text-stone-500">
-                              {selectedPickupLocation?.address}
-                            </p>
-                          </>
-                        )}
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setPickupLocationId(null);
-                          setCustomPickupAddress(null);
-                          setPickupLocationSkipped(false);
-                          setSelectedStartTime('');
-                          setIsCustomTimeMode(false);
-                        }}
-                        className={styles.changeBtn}
-                      >
-                        {t('common.change') || 'Change'}
-                      </button>
-                    </div>
-                  </div>
-                ) : (
-                  <PickupLocationSelector
-                    pickupLocations={product.pickupLocations}
-                    selectedLocationId={pickupLocationId}
-                    selectedCustomAddress={customPickupAddress}
-                    highlightedPickupLocationIds={highlightedPickupLocationIds}
-                    allowCustomLocation
-                    restrictCustomLocationToServiceArea
-                    isSkipped={pickupLocationSkipped}
-                    destinations={product.destinations}
-                    onLocationSelect={(locationId, customLocation) => {
-                      setError('');
-                      if (customLocation) {
-                        setPickupLocationId(null);
-                        setCustomPickupAddress(customLocation.address);
-                        setPickupLocationSkipped(false);
-                      } else {
-                        setPickupLocationId(locationId);
-                        setCustomPickupAddress(null);
-                        setPickupLocationSkipped(false);
-                      }
-                    }}
-                    onSkip={() => {
-                      setPickupLocationSkipped(true);
-                      setPickupLocationId(null);
-                      setCustomPickupAddress(null);
-                      setError('');
-                    }}
-                  />
-                )}
-              </div>
-            )}
-
-          {selectedStartTime && passengerCount > 0 && (
-            <div className={`${styles.section} mt-6`}>
-              <PriceSummary
-                lines={[
-                  {
-                    kind: 'line',
-                    label: resourceCount > 1 ? `Shuttle x ${resourceCount}` : 'Shuttle',
-                    amount: basePrice,
-                    type: 'ticket',
-                  },
-                  ...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;
-                      return {
-                        kind: 'line' as const,
-                        label: addOn.name,
-                        amount: (base + adj) * (sel.quantity ?? 1),
-                        type: 'fee' as const,
-                      };
-                    })
-                    .filter(Boolean) as Array<{ kind: 'line'; label: string; amount: number; type: 'fee' }>,
-                  ...(additionalHoursAmount > 0
-                    ? [
-                        {
-                          kind: 'line' as const,
-                          label:
-                            additionalHoursCount === 1
-                              ? 'Additional hour'
-                              : `Additional hours (${additionalHoursCount})`,
-                          amount: additionalHoursAmount,
-                          type: 'fee' as const,
-                        },
-                      ]
-                    : []),
-                  ...perBookingFeeLineItems.map((fee) => ({
-                    kind: 'line' as const,
-                    label: fee.name,
-                    amount: fee.totalAmount,
-                    type: 'fee' as const,
-                    tooltip: isMoraineLakeRoadAccessFeeName(fee.name)
-                      ? MORAINE_LAKE_ROAD_ACCESS_FEE_TOOLTIP
-                      : undefined,
-                  })),
-                  ...(cancellationPolicyFee > 0
-                    ? [
-                        {
-                          kind: 'line' as const,
-                          label: selectedCancellationPolicy?.label ?? 'Cancellation',
-                          amount: cancellationPolicyFee,
-                          type: 'cancellation' as const,
-                        },
-                      ]
-                    : []),
-                ]}
-                total={depositInfo ? depositInfo.depositAmount : totalPrice}
-                currency={currency}
-                locale={locale as 'en' | 'fr'}
-                taxAmount={effectiveTaxAmount}
-                taxRate={taxRate}
-                discountAmount={effectivePromoDiscountAmount}
-                discountLabel={activePromoCode ? `Promo: ${activePromoCode}` : undefined}
-                extraBetweenTaxAndTotal={
-                  isAdmin ? (
-                    <PromoCodeInput
-                      promoCodeInput={promoCodeInput}
-                      appliedPromoCode={appliedPromoCode}
-                      promoCodeError={promoCodeError}
-                      promoCodeValidating={promoCodeValidating}
-                      promoDiscountAmount={promoDiscountAmount}
-                      currency={currency}
-                      locale={locale}
-                      t={t}
-                      onInputChange={(value) => {
-                        setPromoCodeInput(value);
-                        setPromoCodeError('');
-                      }}
-                      onApply={handleApplyPromo}
-                      onRemove={() => {
-                        lastValidatedInputRef.current = null;
-                        setAppliedPromoCode(null);
-                        setPromoCodeInput('');
-                        setPromoCodeError('');
-                        setPromoDiscountAmount(0);
-                        setIsGiftCard(false);
-                        setIsVoucher(false);
-                        fetchedRangesRef.current = [];
-                      }}
-                    />
-                  ) : null
-                }
-                size="sm"
-                t={t}
-                depositMode={
-                  depositInfo
-                    ? {
-                        totalLabel: t('booking.deposit') || 'Deposit',
-                        balanceAmount: depositInfo.balanceAmount,
-                        fullTotalAmount: depositInfo.totalPrice,
-                      }
-                    : undefined
+          {selectedOption && (
+            <PrivateShuttlePickupSection
+              passengerCount={passengerCount}
+              pickupLocations={product.pickupLocations}
+              destinations={product.destinations}
+              pickupLocationId={pickupLocationId}
+              customPickupAddress={customPickupAddress}
+              pickupLocationSkipped={pickupLocationSkipped}
+              selectedPickupLocation={selectedPickupLocation}
+              highlightedPickupLocationIds={highlightedPickupLocationIds}
+              t={t}
+              onLocationSelect={(locationId, customAddress) => {
+                setError('');
+                if (customAddress) {
+                  setPickupLocationId(null);
+                  setCustomPickupAddress(customAddress);
+                  setPickupLocationSkipped(false);
+                } else {
+                  setPickupLocationId(locationId);
+                  setCustomPickupAddress(null);
+                  setPickupLocationSkipped(false);
                 }
-                hideSubtotal={!!depositInfo}
-              />
-              {depositInfo && (
-                <div className="deposit-notice mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
-                  <p className="text-xs font-medium">
-                    {(t('booking.depositPaymentNotice') !== 'booking.depositPaymentNotice'
-                      ? t('booking.depositPaymentNotice')
-                      : null) ?? "You're paying the deposit today."}
-                  </p>
-                  <p className="mt-1 text-xs text-amber-700/90">
-                    {privateShuttleConfig?.balanceChargeDaysBefore && privateShuttleConfig.balanceChargeDaysBefore > 0
-                      ? (t('booking.balanceChargeNotice', { days: privateShuttleConfig.balanceChargeDaysBefore }) !== 'booking.balanceChargeNotice'
-                          ? t('booking.balanceChargeNotice', { days: privateShuttleConfig.balanceChargeDaysBefore })
-                          : `The remaining balance will be charged ${privateShuttleConfig.balanceChargeDaysBefore} days before your booking. You can also pay it earlier from your Manage Booking page.`)
-                      : (t('booking.balancePayEarlier') !== 'booking.balancePayEarlier'
-                          ? t('booking.balancePayEarlier')
-                          : 'You can pay the remaining balance anytime from your Manage Booking page.')}
-                  </p>
-                </div>
-              )}
-            </div>
+              }}
+              onSkip={() => {
+                setPickupLocationSkipped(true);
+                setPickupLocationId(null);
+                setCustomPickupAddress(null);
+                setError('');
+              }}
+              onReset={() => {
+                setPickupLocationId(null);
+                setCustomPickupAddress(null);
+                setPickupLocationSkipped(false);
+                setSelectedStartTime('');
+                setIsCustomTimeMode(false);
+              }}
+            />
           )}
 
           {selectedStartTime && passengerCount > 0 && (
-            <div className="border-t border-stone-200 pt-6 space-y-4">
-              <div className="space-y-4">
-                <>
-                    <div className={styles.contactGrid}>
-                      <div>
-                        <label className={styles.sectionLabel}>
-                          {t('booking.firstName')} <span className={styles.required}>*</span>
-                        </label>
-                        <input
-                          type="text"
-                          value={firstName}
-                          onChange={(e) => {
-                            setFirstName(e.target.value);
-                            setError('');
-                          }}
-                          placeholder={t('booking.firstNamePlaceholder')}
-                          className={styles.input}
-                        />
-                      </div>
-                      <div>
-                        <label className={styles.sectionLabel}>
-                          {t('booking.lastName')} <span className={styles.required}>*</span>
-                        </label>
-                        <input
-                          type="text"
-                          value={lastName}
-                          onChange={(e) => {
-                            setLastName(e.target.value);
-                            setError('');
-                          }}
-                          placeholder={t('booking.lastNamePlaceholder')}
-                          className={styles.input}
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <label className={styles.sectionLabel}>
-                        {t('common.emailForConfirmation')} <span className={styles.required}>*</span>
-                      </label>
-                      <input
-                        type="email"
-                        value={email}
-                        onChange={(e) => {
-                          setEmail(e.target.value);
-                          setError('');
-                        }}
-                        placeholder={t('common.emailPlaceholder')}
-                        className={styles.input}
-                      />
-                    </div>
-                    <CheckoutOptionalPhoneFields
-                      idPrefix="shuttle"
-                      labelClassName={styles.sectionLabel}
-                      phoneNumber={phoneNumber}
-                      onPhoneNumberChange={(v) => {
-                        setPhoneNumber(v);
-                        setError('');
-                      }}
-                      t={t}
-                    />
-                  </>
-                {pricingConfig?.cancellationPolicies &&
-                  pricingConfig.cancellationPolicies.length > 0 && (
-                  <div>
-                    <CancellationPolicySelector
-                      policies={[...pricingConfig.cancellationPolicies].sort((a, b) => {
-                        const feeA = a.feeByCurrency[currency] ?? 0;
-                        const feeB = b.feeByCurrency[currency] ?? 0;
-                        return feeA - feeB;
-                      })}
-                      selectedPolicyId={cancellationPolicyId}
-                      currency={currency}
-                      locale={locale}
-                      t={t}
-                      onPolicySelect={setCancellationPolicyId}
-                      rowSubtitle={
-                        <>
-                          <b>Your deposit today is 100% refundable</b> — only once we align on an itinerary that you approve, will your deposit be locked in.
-                        </>
-                      }
-                    />
-                  </div>
-                )}
-                {isAdmin && (
-                  <div className="space-y-2 p-4 bg-amber-50/50 rounded-lg">
-                    <label className="flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        checked={skipConfirmationCommunications}
-                        onChange={(e) => setSkipConfirmationCommunications(e.target.checked)}
-                      />
-                      <span className="text-sm">
-                        Don&apos;t send confirmation for this booking
-                      </span>
-                    </label>
-                    <label className="flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        checked={disableAutoCommunications}
-                        onChange={(e) => setDisableAutoCommunications(e.target.checked)}
-                      />
-                      <span className="text-sm">Disable all auto communications</span>
-                    </label>
-                  </div>
-                )}
-                <div className="mt-4 p-4 bg-stone-50 rounded-lg border-2 border-stone-300">
-                  <TermsAcceptance
-                    checked={termsAccepted}
-                    onChange={(checked) => {
-                      setTermsAccepted(checked);
-                      setTermsAcceptedAt(checked ? new Date().toISOString() : null);
-                    }}
-                    t={t}
-                  />
-                </div>
-              </div>
-              {error && (
-                <div className={styles.errorBox}>
-                  {error}
-                </div>
-              )}
-              {flowUi?.partnerAttributionSummary ? (
-                <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-                  <p className="m-0 text-sm text-blue-900">{flowUi.partnerAttributionSummary}</p>
-                  {flowUi.partnerAttributionConfirmLabel ? (
-                    <label className="mt-2 flex cursor-pointer items-start gap-2">
-                      <input
-                        type="checkbox"
-                        checked={partnerAttributionConfirmed}
-                        onChange={(e) => setPartnerAttributionConfirmed(e.target.checked)}
-                      />
-                      <span className="text-xs font-medium leading-5 text-blue-800">
-                        {flowUi.partnerAttributionConfirmLabel}
-                      </span>
-                    </label>
-                  ) : null}
-                </div>
-              ) : null}
-              {!showCheckoutModal && !showAdminPaymentChoice ? (
-                <>
-                  <button
-                    type="button"
-                    onClick={handleCheckout}
-                    disabled={
-                      loading ||
-                      !termsAccepted ||
-                      Boolean(flowUi?.partnerAttributionConfirmLabel && !partnerAttributionConfirmed)
-                    }
-                    className={styles.submitBtn}
-                  >
-                    {loading
-                      ? isProviderChangeMode
-                        ? 'Processing…'
-                        : (t('booking.creatingReservation') || 'Creating reservation...')
-                      : isProviderChangeMode
-                        ? `Change booking (${formatCurrencyAmount(depositInfo ? depositInfo.depositAmount : totalPrice, currency, locale as 'en' | 'fr')})`
-                        : `${flowUi?.partnerDeferredInvoiceSubmitLabel || t('booking.continueToPayment') || 'Continue to Payment'} (${formatCurrencyAmount(depositInfo ? depositInfo.depositAmount : totalPrice, currency, locale as 'en' | 'fr')})`}
-                  </button>
-                  <p className={styles.secureNote}>
-                    {t('booking.securePayment') || 'Secure payment powered by Stripe'}
-                  </p>
-                </>
-              ) : null}
-            </div>
+            <PrivateShuttleCheckoutSection
+              currency={currency}
+              locale={locale}
+              t={t}
+              isAdmin={isAdmin}
+              isProviderChangeMode={isProviderChangeMode}
+              priceSummaryLines={priceSummaryLines}
+              depositInfo={depositInfo}
+              balanceChargeDaysBefore={privateShuttleConfig?.balanceChargeDaysBefore}
+              totalPrice={totalPrice}
+              effectiveTaxAmount={effectiveTaxAmount}
+              taxRate={taxRate}
+              effectivePromoDiscountAmount={effectivePromoDiscountAmount}
+              activePromoCode={activePromoCode}
+              promoCodeInput={promoCodeInput}
+              appliedPromoCode={appliedPromoCode}
+              promoCodeError={promoCodeError}
+              promoCodeValidating={promoCodeValidating}
+              promoDiscountAmount={promoDiscountAmount}
+              onPromoInputChange={handlePromoInputChange}
+              onPromoApply={handleApplyPromo}
+              onPromoRemove={handleRemovePromoAndDiscount}
+              firstName={firstName}
+              lastName={lastName}
+              email={email}
+              phoneNumber={phoneNumber}
+              onFirstNameChange={(value) => {
+                setFirstName(value);
+                setError('');
+              }}
+              onLastNameChange={(value) => {
+                setLastName(value);
+                setError('');
+              }}
+              onEmailChange={(value) => {
+                setEmail(value);
+                setError('');
+              }}
+              onPhoneNumberChange={(value) => {
+                setPhoneNumber(value);
+                setError('');
+              }}
+              cancellationPolicies={pricingConfig?.cancellationPolicies}
+              cancellationPolicyId={cancellationPolicyId}
+              onCancellationPolicySelect={setCancellationPolicyId}
+              skipConfirmationCommunications={skipConfirmationCommunications}
+              disableAutoCommunications={disableAutoCommunications}
+              onSkipConfirmationChange={setSkipConfirmationCommunications}
+              onDisableCommunicationsChange={setDisableAutoCommunications}
+              termsAccepted={termsAccepted}
+              onTermsAcceptedChange={handleTermsAcceptedChange}
+              error={error}
+              partnerAttributionSummary={flowUi?.partnerAttributionSummary}
+              partnerAttributionConfirmLabel={flowUi?.partnerAttributionConfirmLabel}
+              partnerAttributionConfirmed={partnerAttributionConfirmed}
+              onPartnerAttributionConfirmedChange={setPartnerAttributionConfirmed}
+              showCheckoutModal={showCheckoutModal}
+              showAdminPaymentChoice={showAdminPaymentChoice}
+              loading={loading}
+              onCheckout={handleCheckout}
+              partnerDeferredInvoiceSubmitLabel={flowUi?.partnerDeferredInvoiceSubmitLabel}
+            />
           )}
           </div>
         </>