@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -1,2662 +0,0 @@
-'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>
-  );
-}