@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -0,0 +1,2662 @@
+'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,
+} from '@/lib/booking-constants';
+import { formatCurrencyAmount } from '@/lib/currency';
+import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import { buildCheckoutBreakdown } from '@/lib/booking/checkout-breakdown';
+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 { ItineraryBuilder } from './ItineraryBuilder';
+import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
+import { BookingFlowCollage } from './BookingFlowCollage';
+import { TourDescription } from './TourDescription';
+import { getProductByIdOrSlug } from '@/lib/products-config';
+import { getProducts } from '@/constants/products';
+import defaultStrings from '@/strings';
+import { trackViewItem } from '@/lib/analytics';
+import styles from './PrivateShuttleBookingFlow.module.css';
+import {
+  buildBookingSourceContext,
+  inferClientBookingSourceFromProductIds,
+  type BookingSourceMetadata,
+} from '@/lib/booking/source-metadata';
+import type { BookingFlowUiOptions } from './booking-flow-ui';
+import { BOOKING_FLOW_ABANDON_EVENT } from '@/providers/booking-dialog-provider';
+
+interface PrivateShuttleBookingFlowProps {
+  product: Product;
+  productId?: string;
+  onBack: () => void;
+  currency: Currency;
+  /** Scroll container ref (e.g. from BookingDialog) - scroll happens inside this element, not window */
+  contentRef?: React.RefObject<HTMLDivElement | null>;
+  onSuccess?: (data: { reservationReference: string; bookingReference?: string }) => void;
+  /** Optional pickup location IDs to prioritize/highlight in selector (e.g. partner-preferred). */
+  highlightedPickupLocationIds?: string[];
+  mode?: 'standard' | 'change';
+  onPricePreviewChange?: (preview: {
+    subtotal: number;
+    tax: number;
+    total: number;
+    currency: Currency;
+  } | null) => void;
+  /** Partner / embed-only tweaks; omit for default website behavior. */
+  flowUi?: BookingFlowUiOptions;
+  /** Explicit reserve/checkout source metadata (compose at call site, e.g. URL + portal). */
+  bookingSourceAttribution: Partial<BookingSourceMetadata>;
+  /** Dedicated partner portal app (`booking.*`): persist reserve `source` as PARTNER_PORTAL. */
+  partnerPortalBooking?: boolean;
+  /** When set (e.g. partner portal), get-availabilities requests this pricing profile from the API. */
+  availabilityPricingProfileId?: string | null;
+  /** When set (e.g. partner portal), get-availabilities filters cancellation policies by this profile. */
+  availabilityCancellationPolicyProfileId?: string | null;
+  initialValues?: {
+    bookingReference?: string | null;
+    dateTime?: string | null;
+    pickupLocationId?: string | null;
+    customPickupAddress?: string | null;
+    passengers?: number | null;
+    childSafetySeatsCount?: number | null;
+    foodRestrictions?: string | null;
+    additionalHoursCount?: number | null;
+    specialRequest?: string | null;
+    notes?: string | null;
+  };
+}
+
+const RESOURCE_CAPACITY = 13;
+const ADDITIONAL_HOUR_PRICE = 170;
+const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/;
+
+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 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) => (a.productOptionId ?? a.productId) === 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];
+}
+
+export function PrivateShuttleBookingFlow({
+  product,
+  productId,
+  onBack: _onBack,
+  currency,
+  contentRef,
+  onSuccess,
+  highlightedPickupLocationIds,
+  mode = 'standard',
+  onPricePreviewChange,
+  flowUi,
+  bookingSourceAttribution,
+  partnerPortalBooking = false,
+  availabilityPricingProfileId,
+  availabilityCancellationPolicyProfileId,
+  initialValues,
+}: PrivateShuttleBookingFlowProps) {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const companyTimezone = useCompanyTimezone();
+  const pricingProfileIdForAvailabilities = (availabilityPricingProfileId ?? '').trim() || null;
+  const cancellationPolicyProfileIdForAvailabilities =
+    (availabilityCancellationPolicyProfileId ?? '').trim() || null;
+  const {
+    permissions,
+    onShowManage,
+    getSuccessUrl,
+    suppressCalendarDateScroll,
+    mode: bookingAppMode,
+  } = useBookingApp();
+  const availabilitiesCache = useAvailabilitiesCache();
+  const isAdmin = permissions.viewerRole === 'admin';
+
+  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
+  const [selectedDate, setSelectedDate] = useState<string>('');
+  const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [selectedStartTime, setSelectedStartTime] = useState<string>('');
+  const [isCustomTimeMode, setIsCustomTimeMode] = useState(false);
+  const [passengerCount, setPassengerCount] = useState<number>(1);
+  const [email, setEmail] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [pickupLocationId, setPickupLocationId] = useState<string | null>(null);
+  const hasAutoSelectedPartnerDateRef = useRef(false);
+  const hasAutoSelectedPartnerPickupRef = useRef(false);
+  const handleDateSelectRef = useRef<(date: string) => void>(() => {});
+  const [customPickupAddress, setCustomPickupAddress] = useState<string | null>(null);
+  const [pickupLocationSkipped, setPickupLocationSkipped] = useState(false);
+  const [draftItineraryDestinations, setDraftItineraryDestinations] = useState<string[]>([]);
+  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 [addOns, setAddOns] = useState<AddOn[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
+  const [isFetchingMoreAvailabilities, setIsFetchingMoreAvailabilities] = useState(false);
+  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('');
+  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(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 [additionalHoursCount, setAdditionalHoursCount] = useState(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 }[];
+    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>(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);
+
+  useEffect(() => {
+    setPartnerAttributionConfirmed(false);
+  }, [flowUi?.partnerAttributionSummary, flowUi?.partnerAttributionConfirmLabel]);
+
+  const activeOptions = useMemo(
+    () => product.options?.filter((opt) => opt.status === 'ACTIVE') || [],
+    [product.options]
+  );
+
+  // Fire view_item when product is first displayed
+  const hasFiredViewItem = useRef(false);
+  useEffect(() => {
+    if (!hasFiredViewItem.current && product) {
+      hasFiredViewItem.current = true;
+      const id = productId || product.productId;
+      const price = product.minPriceByCurrency?.[currency] ?? 0;
+      trackViewItem(id, product.name, price, currency);
+    }
+  }, [product, productId, currency]);
+
+  const activeOptionIdsKey = useMemo(
+    () => activeOptions.map((opt) => opt.optionId).sort().join(','),
+    [activeOptions]
+  );
+  const selectedOptionConfig = activeOptions.find((opt) => opt.optionId === selectedOption);
+  const privateShuttleConfig = selectedOptionConfig?.privateShuttleConfig;
+  const selectedPickupLocation = useMemo(
+    () =>
+      pickupLocationId ? product.pickupLocations?.find((loc) => loc.id === pickupLocationId) : null,
+    [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: appliedPromoCode || 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) => [`${avail.dateTime}-${avail.productId || avail.productOptionId}`, avail])
+      );
+      result.availabilities.forEach((avail) => {
+        existingMap.set(`${avail.dateTime}-${avail.productId || avail.productOptionId}`, 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,
+          appliedPromoCode,
+          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,
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    activeOptionIdsKey,
+    availabilitiesCache,
+  ]);
+
+  useEffect(() => {
+    if (!visibleRange) {
+      setVisibleRange({
+        start: EARLIEST_AVAILABILITY_DATE,
+        end: addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS),
+      });
+    }
+  }, [visibleRange]);
+
+  useEffect(() => {
+    if (selectedOption && !product.companyId) return;
+    if (!selectedOption) {
+      setAddOns([]);
+      return;
+    }
+    getAddOns(product.companyId!, {
+      productOptionId: selectedOption,
+      preCheckout: true,
+    })
+      .then(setAddOns)
+      .catch(() => setAddOns([]));
+  }, [selectedOption, product.companyId]);
+
+  useEffect(() => {
+    if (!draftItineraryDestinations.includes('emerald_lake')) {
+      setAddOnSelections((prev) => prev.filter((s) => s.addOnId !== 'addon_el_lunch'));
+    }
+  }, [draftItineraryDestinations]);
+
+  useEffect(() => {
+    fetchedRangesRef.current = [];
+  }, [
+    appliedPromoCode,
+    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,
+            appliedPromoCode,
+            pricingProfileIdForAvailabilities,
+          )
+        : null;
+      const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
+      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) {
+          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];
+            fetchingRef.current = false;
+            return;
+          }
+        }
+        // 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 (!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 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,
+          promoCode: appliedPromoCode || 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) => [
+              `${avail.dateTime}-${avail.productId || avail.productOptionId}`,
+              avail,
+            ])
+          );
+          result.availabilities.forEach((avail) => {
+            const key = `${avail.dateTime}-${avail.productId || avail.productOptionId}`;
+            existingMap.set(key, 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) {
+        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,
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    needsFetch,
+    availabilitiesCache,
+  ]);
+
+  // Group availabilities by date (in company timezone - MDT). Availabilities from API are in UTC.
+  const availabilitiesByDate = useMemo(() => {
+    const grouped = availabilities.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;
+  }, [availabilities, companyTimezone]);
+
+  const optionsAvailableForSelectedDate = useMemo(() => {
+    if (!selectedDate) return [];
+    const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
+    const optionIds = new Set(
+      dateAvailabilities.map((a) => a.productId || a.productOptionId).filter(Boolean)
+    );
+    return activeOptions.filter((opt) => optionIds.has(opt.optionId));
+  }, [selectedDate, availabilitiesByDate, activeOptions]);
+
+  const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
+
+  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 =
+    selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
+  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 dateAvailabilities = selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
+      const avail = dateAvailabilities.find(
+        (a) => (a.productId || a.productOptionId) === optionId
+      );
+      if (avail?.rates) {
+        const resourceRate = avail.rates.find(
+          (r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE'
+        );
+        if (resourceRate?.priceByCurrency?.[currency] != null)
+          return resourceRate.priceByCurrency[currency];
+        if (currency === 'CAD' && resourceRate?.price != null) return resourceRate.price;
+      }
+      if (resourcePriceByOption?.[optionId]?.[currency] != null)
+        return resourcePriceByOption[optionId][currency];
+      if (resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
+      const opt = activeOptions.find((o) => o.optionId === optionId);
+      return opt?.pricing?.['RESOURCE'] ?? 0;
+    },
+    [
+      selectedDate,
+      availabilitiesByDate,
+      resourcePriceByOption,
+      resourcePriceByCurrency,
+      currency,
+      activeOptions,
+    ]
+  );
+
+  const resourcePrice = useMemo(() => {
+    if (selectedAvailability?.rates) {
+      const resourceRate = selectedAvailability.rates.find(
+        (r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE'
+      );
+      if (resourceRate) {
+        const fromRate =
+          resourceRate.priceByCurrency?.[currency] ??
+          (currency === 'CAD' ? resourceRate.price : undefined);
+        if (fromRate != null) return fromRate;
+      }
+    }
+    if (selectedOption && resourcePriceByOption?.[selectedOption]?.[currency] != null)
+      return resourcePriceByOption[selectedOption][currency];
+    if (resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
+    if (precomputedPrices?.['RESOURCE']?.[currency] != null)
+      return precomputedPrices['RESOURCE'][currency];
+    return selectedOptionConfig?.pricing?.['RESOURCE'] ?? 0;
+  }, [
+    selectedAvailability,
+    resourcePriceByOption,
+    resourcePriceByCurrency,
+    precomputedPrices,
+    selectedOption,
+    selectedOptionConfig,
+    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 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 subtotal = basePrice + addOnTotal + additionalHoursAmount;
+  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;
+
+  useEffect(() => {
+    if (!onPricePreviewChange) return;
+    if (!selectedOption || !selectedStartTime || passengerCount <= 0) {
+      onPricePreviewChange(null);
+      return;
+    }
+    onPricePreviewChange({
+      subtotal,
+      tax: effectiveTaxAmount,
+      total: totalPrice,
+      currency,
+    });
+  }, [
+    onPricePreviewChange,
+    selectedOption,
+    selectedStartTime,
+    passengerCount,
+    subtotal,
+    effectiveTaxAmount,
+    totalPrice,
+    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 (
+      !appliedPromoCode ||
+      !selectedOption ||
+      !selectedDate ||
+      !selectedStartTime ||
+      resourceCount === 0
+    ) {
+      setPromoDiscountAmount(0);
+      setIsGiftCard(false);
+      setIsVoucher(false);
+      return;
+    }
+    const companyId = product.companyId;
+    if (!companyId) return;
+    let cancelled = false;
+    getPromoDiscount(
+      appliedPromoCode,
+      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;
+    };
+  }, [
+    appliedPromoCode,
+    selectedOption,
+    selectedDate,
+    selectedStartTime,
+    resourceCount,
+    product.companyId,
+    product.productId,
+    currency,
+    subtotal,
+  ]);
+
+  const handleDateSelect = (date: string) => {
+    setSelectedDate(date);
+    setSelectedOption('');
+    setSelectedAvailability(null);
+    setSelectedStartTime('');
+    setIsCustomTimeMode(false);
+    setDraftItineraryDestinations([]);
+    setDraftItineraryPlanningNotes('');
+    setError('');
+    if (!suppressCalendarDateScroll) {
+      // Scroll so calendar is almost at top and user sees the rest of the booking flow (inside dialog, not window)
+      setTimeout(() => {
+        contentRef?.current?.scrollBy({ top: 400, behavior: 'smooth' });
+      }, 100);
+    }
+  };
+
+  handleDateSelectRef.current = handleDateSelect;
+
+  useEffect(() => {
+    if (flowUi?.autoSelectFirstAvailableDate !== true) return;
+    if (mode === 'change') return;
+    if (initialValues?.dateTime?.trim()) return;
+    if (selectedDate !== '') return;
+    if (dates.length === 0) return;
+    if (hasAutoSelectedPartnerDateRef.current) return;
+
+    const first = isAdmin
+      ? dates[0]
+      : dates.find((d) =>
+          (availabilitiesByDate[d] ?? []).some((a) => (a.vacancies ?? 0) > 0),
+        );
+    if (!first) return;
+
+    hasAutoSelectedPartnerDateRef.current = true;
+    handleDateSelectRef.current(first);
+  }, [
+    flowUi?.autoSelectFirstAvailableDate,
+    mode,
+    initialValues?.dateTime,
+    selectedDate,
+    dates,
+    availabilitiesByDate,
+    isAdmin,
+  ]);
+
+  useEffect(() => {
+    if (flowUi?.autoSelectFirstHighlightedPickup !== true) return;
+    if (hasAutoSelectedPartnerPickupRef.current) return;
+    if (!highlightedPickupLocationIds?.length) return;
+    if (pickupLocationId) return;
+    if (pickupLocationSkipped) return;
+    if (initialValues?.pickupLocationId?.trim()) return;
+    const locs = product.pickupLocations;
+    if (!locs?.length) return;
+    const match = highlightedPickupLocationIds.find((id) => locs.some((l) => l.id === id));
+    if (!match) return;
+    hasAutoSelectedPartnerPickupRef.current = true;
+    setPickupLocationId(match);
+    setPickupLocationSkipped(false);
+  }, [
+    flowUi?.autoSelectFirstHighlightedPickup,
+    highlightedPickupLocationIds,
+    pickupLocationId,
+    pickupLocationSkipped,
+    initialValues?.pickupLocationId,
+    product.pickupLocations,
+  ]);
+
+  useEffect(() => {
+    if (selectedDate && !selectedOption && optionsAvailableForSelectedDate.length > 0) {
+      const mostPopular = optionsAvailableForSelectedDate.find((o) => o.mostPopular);
+      const opt = mostPopular ?? optionsAvailableForSelectedDate[0];
+      setSelectedOption(opt.optionId);
+      const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
+      const avail = dateAvailabilities.find(
+        (a) => (a.productId || a.productOptionId) === opt.optionId
+      );
+      setSelectedAvailability(avail || null);
+    }
+  }, [selectedDate, selectedOption, optionsAvailableForSelectedDate, availabilitiesByDate]);
+
+  // When availability changes, clip passenger count to new vacancies (e.g. user switched date/option).
+  // Don't run when passengerCount changes—allows special request for more than vacancies.
+  useEffect(() => {
+    if (!selectedAvailability) return;
+    const vacancies = selectedAvailability.vacancies || 0;
+    const minP = 1;
+    setIsSpecialRequestMode(false);
+    setSpecialRequestInputValue('');
+    setPassengerCount((prev) => {
+      if (prev <= vacancies) return Math.max(minP, prev);
+      return Math.max(minP, vacancies);
+    });
+  }, [selectedAvailability]);
+
+  useEffect(() => {
+    if (selectedOption) {
+      const optionConfig = activeOptions.find((o) => o.optionId === selectedOption);
+      const blacklist =
+        optionConfig?.privateShuttleConfig?.itineraryBuilderConfig?.optionBlacklist ?? [];
+      const defaults =
+        optionConfig?.privateShuttleConfig?.itineraryBuilderConfig?.defaultDestinations ?? [];
+      setDraftItineraryDestinations(defaults.filter((id) => !blacklist.includes(id)));
+      setDraftItineraryPlanningNotes('');
+    }
+  }, [selectedOption, activeOptions]);
+
+  useEffect(() => {
+    if (
+      suggestedStartTimes.length > 0 &&
+      !isCustomTimeMode &&
+      !selectedStartTime
+    ) {
+      setSelectedStartTime(suggestedStartTimes[0]);
+    }
+  }, [suggestedStartTimes, isCustomTimeMode, selectedStartTime]);
+
+  useEffect(() => {
+    if (
+      pricingConfig?.cancellationPolicies &&
+      pricingConfig.cancellationPolicies.length > 0 &&
+      !cancellationPolicyId
+    ) {
+      setCancellationPolicyId(pricingConfig.cancellationPolicies[0].id);
+    }
+  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId]);
+
+  const handleOptionSelect = (optionId: string) => {
+    setSelectedOption(optionId);
+    setError('');
+    if (selectedDate) {
+      const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
+      const avail = dateAvailabilities.find(
+        (a) => (a.productId || a.productOptionId) === optionId
+      );
+      setSelectedAvailability(avail || null);
+    } else {
+      setSelectedAvailability(null);
+    }
+    setSelectedStartTime('');
+    setIsCustomTimeMode(false);
+  };
+
+  const handleStartTimeSelect = (time: string) => {
+    setSelectedStartTime(time);
+    setIsCustomTimeMode(false);
+    setError('');
+  };
+
+  const handleCustomTimeRequest = () => {
+    setIsCustomTimeMode(true);
+    setSelectedStartTime('');
+    setError('');
+  };
+
+  const handleCustomTimeChange = (value: string) => {
+    setSelectedStartTime(value);
+    setError('');
+  };
+
+  const handlePassengerCountChange = (count: number) => {
+    const max = selectedAvailability?.vacancies || 0;
+    const min = 1;
+    setPassengerCount(Math.max(min, max > 0 ? Math.min(max, count) : count));
+    setError('');
+  };
+
+  const handleApplyPromo = useCallback(async () => {
+    const code = promoCodeInput.trim().toUpperCase();
+    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,
+    product.companyId,
+    product.productId,
+    hasOngoingDiscount,
+    t,
+  ]);
+
+  const handleApplyPromoRef = useRef(handleApplyPromo);
+  handleApplyPromoRef.current = handleApplyPromo;
+
+  const itineraryDisplayItems = useMemo(() => {
+    if (!selectedOption || !selectedStartTime) return [];
+    const items: Array<{
+      time: string | null;
+      label: string;
+      clickableLabel?: string;
+      prefix?: string;
+      timesNote?: string;
+      isProposedStops?: boolean;
+    }> = [];
+    const destMap = product.itineraryBuilder?.destinations
+      ? new Map(product.itineraryBuilder.destinations.map((d) => [d.id, d.label]))
+      : new Map<string, string>();
+    if (draftItineraryDestinations.length > 0) {
+      const labels = draftItineraryDestinations
+        .map((id) => destMap.get(id) || id.replace(/_/g, ' '))
+        .join(', ');
+      items.push({
+        time: null,
+        label: labels,
+        isProposedStops: true,
+        timesNote: t('booking.orderAndTimesToBeConfirmed') || '(order and times to be confirmed)',
+      });
+    }
+    const pickupLabel = pickupLocationSkipped
+      ? (t('booking.pickupLocationUnknown') || "I don't know")
+      : customPickupAddress
+        ? customPickupAddress
+        : selectedPickupLocation?.name;
+    items.push({
+      time: selectedStartTime,
+      label: pickupLabel || (t('booking.pickupAt') || 'Pickup'),
+      clickableLabel: !pickupLocationId && !customPickupAddress && !pickupLocationSkipped ? (t('pickup.title') || 'Select pickup') : undefined,
+      prefix: t('booking.pickupAtPrefix') || 'Pickup at ',
+    });
+    return items;
+  }, [
+    selectedOption,
+    selectedStartTime,
+    draftItineraryDestinations,
+    customPickupAddress,
+    selectedPickupLocation,
+    pickupLocationSkipped,
+    pickupLocationId,
+    product.itineraryBuilder,
+    t,
+  ]);
+
+  const cancelPendingReservation = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (!pending) return;
+    pendingReservationRef.current = null;
+    cancelReservation(pending.reservationReference).catch(() => {});
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+  }, []);
+
+  const cancelPendingReservationBestEffort = useCallback(() => {
+    if (paymentSubmitInFlightRef.current) return;
+    const pending = pendingReservationRef.current;
+    if (!pending) return;
+    pendingReservationRef.current = null;
+    cancelReservationBestEffort(pending.reservationReference);
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+  }, []);
+
+  // Parent surfaces (dialog close / embedded back) emit this when user abandons the booking flow.
+  useEffect(() => {
+    const handleAbandon = () => {
+      cancelPendingReservation();
+    };
+    window.addEventListener(BOOKING_FLOW_ABANDON_EVENT, handleAbandon);
+    return () => window.removeEventListener(BOOKING_FLOW_ABANDON_EVENT, handleAbandon);
+  }, [cancelPendingReservation]);
+
+  useEffect(() => {
+    const handlePageHide = () => {
+      cancelPendingReservationBestEffort();
+    };
+    window.addEventListener('pagehide', handlePageHide);
+    return () => window.removeEventListener('pagehide', handlePageHide);
+  }, [cancelPendingReservationBestEffort]);
+
+  const handleCheckout = async () => {
+    if (!selectedDate || !selectedStartTime || passengerCount < 1) {
+      setError('Please select a date, start time, and passenger count');
+      return;
+    }
+    if (
+      product.pickupLocations &&
+      product.pickupLocations.length > 0 &&
+      !pickupLocationId &&
+      !customPickupAddress &&
+      !pickupLocationSkipped
+    ) {
+      setError(t('booking.selectPickupLocation'));
+      return;
+    }
+    if (!email) {
+      setError(t('booking.enterEmail') || 'Please enter your email address');
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError(t('booking.invalidEmail') || 'Please enter a valid email address');
+      return;
+    }
+    if (!firstName?.trim()) {
+      setError(t('booking.enterFirstName') || 'Please enter your first name');
+      return;
+    }
+    if (!lastName?.trim()) {
+      setError(t('booking.enterLastName') || 'Please enter your last name');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    paymentSubmitInFlightRef.current = false;
+
+    try {
+      if (!selectedOption) {
+        setError('No product option selected');
+        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`;
+
+      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: (isAdmin ? appliedPromoCode : null) || 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,
+              },
+            ]
+          : []),
+        ...(cancellationPolicyFee > 0 && selectedCancellationPolicy
+          ? [
+              {
+                label: selectedCancellationPolicy.label,
+                amount: cancellationPolicyFee,
+                type: 'CANCELLATION_UPGRADE' as const,
+              },
+            ]
+          : []),
+        ...(taxAmount > 0
+          ? [
+              {
+                label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees',
+                amount: taxAmount,
+                type: 'TAX' as const,
+              },
+            ]
+          : []),
+        ...(effectiveTaxAmount > 0 ? [{ label: 'GST', amount: effectiveTaxAmount, type: 'TAX' as const }] : []),
+      ];
+      const receiptTotal = depositInfo ? depositInfo.totalPrice : totalPrice;
+      const linesWithPromo = [
+        ...lines,
+        ...(effectivePromoDiscountAmount > 0
+          ? [
+              {
+                label:
+                  appliedPromoCode
+                    ? `Promo: ${appliedPromoCode}`
+                    : (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,
+          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,
+          currency,
+          reservationReference: reservation.reservationReference,
+          travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
+          pickupLocationId: pickupLocationId || undefined,
+          itineraryDisplay: itineraryDisplayForStorage,
+          termsAcceptedAt: termsAcceptedAt ?? undefined,
+          cancellationPolicyId: cancellationPolicyId || undefined,
+          promoCode: (isAdmin ? appliedPromoCode : null) || 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 }[],
+          cancellationPolicyFee,
+          cancellationPolicyLabel: selectedCancellationPolicy?.label,
+          subtotal,
+          tax: effectiveTaxAmount,
+          totalQuantity: resourceCount,
+          isTaxIncludedInPrice,
+          taxRate,
+          promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
+          discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : 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,
+        currency,
+        reservationReference: reservation.reservationReference,
+        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
+        pickupLocationId: pickupLocationId || undefined,
+        itineraryDisplay: itineraryDisplayForStorage,
+        termsAcceptedAt: termsAcceptedAt ?? undefined,
+        cancellationPolicyId: cancellationPolicyId || undefined,
+        promoCode: (isAdmin ? appliedPromoCode : null) || 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,
+          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 feeLineItemsForModal = 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 }[];
+
+      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: appliedPromoCode ? `Promo: ${appliedPromoCode}` : 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,
+        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);
+  };
+
+  if (activeOptions.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-red-600">
+          {t('booking.noActiveOption') || 'No active product options available'}
+        </div>
+      </div>
+    );
+  }
+
+  const config = productId ? getProductByIdOrSlug(productId) : null;
+  const displayProducts = getProducts(defaultStrings);
+  const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
+  const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
+  const hasVideo = !!displayProduct?.videoUrl;
+  const hasImages = collageImageIds.length > 0;
+
+  return (
+    <div className={`booking-flow-root private-shuttle-booking-flow ${styles.root} space-y-8`}>
+      <AdminPaymentChoiceModal
+        open={!!(showAdminPaymentChoice && adminChoiceData)}
+        totalAmount={adminChoiceData?.totalAmount ?? 0}
+        currency={currency}
+        loading={loading}
+        error={error}
+        onPayNow={handlePayNow}
+        onConfirmWithoutPayment={handleConfirmWithoutPayment}
+        onCancel={() => {
+          setShowAdminPaymentChoice(false);
+          setAdminChoiceData(null);
+          setError('');
+        }}
+      />
+      {checkoutModalData && (
+        <CheckoutModal
+          open={showCheckoutModal}
+          onClose={cancelPendingReservation}
+          onPaymentSubmitStart={() => {
+            paymentSubmitInFlightRef.current = true;
+          }}
+          onPaymentSubmitError={() => {
+            paymentSubmitInFlightRef.current = false;
+          }}
+          clientSecret={checkoutClientSecret}
+          reservationReference={checkoutModalData.reservationReference}
+          reservationExpiration={checkoutModalData.reservationExpiration}
+          customerLastName={checkoutModalData.customerLastName}
+          successUrlOverride={
+            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} />
+      )}
+
+      {loadingAvailabilities && availabilities.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 gap-4">
+          <div className="booking-loading-spinner" aria-hidden />
+          <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+        </div>
+      ) : availabilities.length === 0 ? (
+        <div className="text-center py-8 text-stone-500">{t('booking.noAvailability')}</div>
+      ) : (
+        <>
+          {/* Form sections - match BookingFlow mt-6 space-y-6 spacing */}
+          <div className="mt-6 space-y-6">
+          <div className="relative">
+            {loadingAvailabilities && (
+              <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
+                <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+              </div>
+            )}
+            <Calendar
+              availabilitiesByDate={availabilitiesByDate}
+              selectedDate={selectedDate}
+              isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
+              onDateSelect={handleDateSelect}
+              timezone={companyTimezone}
+              displayMode="status"
+              earliestDate={earliestAvailabilityDate}
+              onVisibleRangeChange={handleVisibleRangeChange}
+              currency={currency}
+              showCapacity={isAdmin}
+            />
+          </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>
+          )}
+
+          {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>
+          )}
+
+          {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>
+          )}
+
+          {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>
+          )}
+
+          {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 && 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 &&
+            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,
+                        },
+                      ]
+                    : []),
+                  ...(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={taxAmount}
+                taxRate={taxRate}
+                size="sm"
+                t={t}
+                depositMode={
+                  depositInfo
+                    ? {
+                        totalLabel: t('booking.deposit') || 'Deposit',
+                        balanceAmount: depositInfo.balanceAmount,
+                        fullTotalAmount: depositInfo.totalPrice,
+                      }
+                    : undefined
+                }
+                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>
+          )}
+
+          {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>
+                  </>
+                {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
+                      ? (t('booking.creatingReservation') || 'Creating reservation...')
+                      : (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>
+          )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}