@ticketboothapp/booking 1.2.98 → 1.2.100

package/src/components/booking/NewBookingFlow.tsx

@@ -27,6 +27,7 @@ import {
   EARLIEST_AVAILABILITY_DATE,
   LATEST_AVAILABILITY_DATE,
   INITIAL_FETCH_WEEKS,
+  VISIBLE_RANGE_BUFFER_WEEKS,
 } from '../../lib/booking-constants';
 import { Calendar } from './Calendar';
 import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
@@ -44,7 +45,7 @@ import { type Currency } from './CurrencySwitcher';
 import { formatBookingRefForDisplay } from '../../lib/booking-ref';
 import { formatCurrencyAmount } from '../../lib/currency';
 import { buildCheckoutBreakdown } from '../../lib/booking/checkout-breakdown';
-import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '../../lib/booking-api';
+import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep, GetAvailabilitiesResponse } from '../../lib/booking-api';
 import { ItineraryStepType as StepType } from '../../lib/booking-api';
 import {
   getDisplayPriceFromBaseInDisplayCurrency,
@@ -52,6 +53,7 @@ import {
   computeOrderSummary,
   type PriceBreakdown as PriceBreakdownData,
   type OrderSummary,
+  type OrderSummaryFeeLine,
 } from '../../lib/booking/pricing';
 import { useCompanyTimezone } from '../../contexts/CompanyContext';
 import { useBookingApp } from '../../contexts/BookingAppContext';
@@ -169,6 +171,26 @@ function findMergedAvailabilityForSelection(
   return merged.find((a) => a.dateTime === dt && a.productOptionId === optId);
 }
 
+function availabilityWithOptionId(availability: Availability, fallbackOptionId?: string): Availability {
+  const productOptionId = availability.productOptionId || availability.productId || fallbackOptionId;
+  return productOptionId ? { ...availability, productOptionId } : availability;
+}
+
+function mergePrecomputedPricesFromAvailabilityResult(
+  next: Record<string, PrecomputedPricesByCategory>,
+  result: GetAvailabilitiesResponse,
+  fallbackOptionId?: string,
+) {
+  if (result.precomputedPricesByOption) {
+    Object.entries(result.precomputedPricesByOption).forEach(([optionId, prices]) => {
+      if (prices && Object.keys(prices).length > 0) next[optionId] = prices;
+    });
+  }
+  if (fallbackOptionId && result.precomputedPrices && Object.keys(result.precomputedPrices).length > 0) {
+    next[fallbackOptionId] = result.precomputedPrices;
+  }
+}
+
 /** Ticket rates for one availability row — mirrors main cart [pricing] useMemo so baseline slots match BE. */
 function buildPricingFromAvailability(
   selectedAvailability: Availability | null,
@@ -320,6 +342,11 @@ export function NewBookingFlow({
   initialValues,
   hideItineraryBox = false,
   flowUi,
+  afterItinerary,
+  augmentItineraryItems,
+  augmentPriceSummary,
+  dependentAddOnSelection,
+  validateBeforeCheckout,
   bookingSourceAttribution,
   partnerPortalBooking = false,
   availabilityPricingProfileId,
@@ -563,45 +590,39 @@ export function NewBookingFlow({
       endDateStr = formatInTimeZone(endMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
     }
 
-    const availabilityPromises = activeOptions.map(async (option) => {
-      const result = await getAvailabilities(option.optionId, startDateStr, endDateStr, {
-        promoCode: appliedPromoCode || undefined,
-        ...(pricingProfileIdForAvailabilities
-          ? { pricingProfileId: pricingProfileIdForAvailabilities }
-          : {}),
-        ...(cancellationPolicyProfileIdForAvailabilities
-          ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-          : {}),
-      });
-      if (result.pricingConfig && !pricingConfigSetRef.current) {
-        setPricingConfig((prev) => {
-          if (!prev) {
-            pricingConfigSetRef.current = true;
-            return result.pricingConfig!;
-          }
-          return prev;
-        });
-      }
-      return {
-        optionId: option.optionId,
-        availabilities: result.availabilities.map((avail) => ({
-          ...avail,
-          productOptionId: option.optionId,
-        })),
-        precomputedPrices: result.precomputedPrices,
-        pricingConfig: result.pricingConfig,
-      };
+    const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
+      allOptions: true,
+      promoCode: appliedPromoCode || undefined,
+      ...(pricingProfileIdForAvailabilities
+        ? { pricingProfileId: pricingProfileIdForAvailabilities }
+        : {}),
+      ...(cancellationPolicyProfileIdForAvailabilities
+        ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+        : {}),
     });
+    if (result.pricingConfig && !pricingConfigSetRef.current) {
+      setPricingConfig((prev) => {
+        if (!prev) {
+          pricingConfigSetRef.current = true;
+          return result.pricingConfig!;
+        }
+        return prev;
+      });
+    }
+    const results = [{
+      optionId: product.productId,
+      availabilities: result.availabilities.map((avail) => availabilityWithOptionId(avail)),
+      precomputedPrices: result.precomputedPrices,
+      precomputedPricesByOption: result.precomputedPricesByOption,
+      pricingConfig: result.pricingConfig,
+    }];
 
-    const results = await Promise.all(availabilityPromises);
     const allFetchedAvailabilities = results.flatMap((r) => r.availabilities);
 
     setPrecomputedPricesByOption((prev) => {
       const next = { ...(prev || {}) };
       results.forEach((r) => {
-        if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
-          next[r.optionId] = r.precomputedPrices;
-        }
+        mergePrecomputedPricesFromAvailabilityResult(next, r);
       });
       return Object.keys(next).length > 0 ? next : prev;
     });
@@ -652,9 +673,7 @@ export function NewBookingFlow({
       });
       const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
       results.forEach((r) => {
-        if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
-          mergedPrecomputed[r.optionId] = r.precomputedPrices;
-        }
+        mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r);
       });
       const firstPricingConfig =
         (results[0] as { pricingConfig?: PricingConfig } | undefined)?.pricingConfig ??
@@ -684,10 +703,110 @@ export function NewBookingFlow({
     availabilitiesCache,
   ]);
 
+  /** Fresh selected-day check before reserve so stale calendar vacancies are corrected before payment. */
+  const refreshSelectedDateDetailsForCheckout = useCallback(async (): Promise<Availability[]> => {
+    if (!selectedDate || activeOptions.length === 0) return [];
+
+    let startDateStr: string;
+    let endDateStr: string;
+    if (isPrivateShuttle) {
+      startDateStr = selectedDate;
+      endDateStr = selectedDate;
+    } else {
+      const startMoment = fromZonedTime(parseISO(`${selectedDate}T00:00:00.000`), companyTimezone);
+      const endMoment = fromZonedTime(parseISO(`${selectedDate}T23:59:59.999`), companyTimezone);
+      startDateStr = formatInTimeZone(startMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+      endDateStr = formatInTimeZone(endMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+    }
+
+    const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
+      allOptions: true,
+      promoCode: appliedPromoCode || undefined,
+      ...(pricingProfileIdForAvailabilities
+        ? { pricingProfileId: pricingProfileIdForAvailabilities }
+        : {}),
+      ...(cancellationPolicyProfileIdForAvailabilities
+        ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+        : {}),
+    });
+    const results = [{
+      optionId: product.productId,
+      availabilities: result.availabilities.map((availability) => availabilityWithOptionId(availability)),
+      precomputedPrices: result.precomputedPrices,
+      precomputedPricesByOption: result.precomputedPricesByOption,
+      pricingConfig: result.pricingConfig,
+    }];
+    const detailedAvailabilities = results.flatMap((r) => r.availabilities);
+    if (detailedAvailabilities.length === 0) return [];
+
+    if (result.pricingConfig && !pricingConfigSetRef.current) {
+      setPricingConfig(result.pricingConfig);
+      pricingConfigSetRef.current = true;
+    }
+
+    setPrecomputedPricesByOption((prev) => {
+      const next = { ...(prev || {}) };
+      results.forEach((r) => mergePrecomputedPricesFromAvailabilityResult(next, r));
+      return Object.keys(next).length > 0 ? next : prev;
+    });
+
+    let mergedOut: Availability[] = [];
+    setAvailabilities((prev) => {
+      const merged = new Map(prev.map((availability) => [`${availability.dateTime}-${availability.productOptionId}`, availability]));
+      detailedAvailabilities.forEach((availability) => {
+        merged.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
+      });
+      mergedOut = Array.from(merged.values());
+      return mergedOut;
+    });
+
+    const cacheKey = availabilitiesCache
+      ? buildAvailabilitiesCacheKey(
+          product.productId,
+          activeOptionIdsKey,
+          appliedPromoCode,
+          pricingProfileIdForAvailabilities,
+        )
+      : null;
+    if (cacheKey && availabilitiesCache) {
+      const existingCache = availabilitiesCache.get(cacheKey);
+      const mergedAvailabilities = new Map(
+        (existingCache?.availabilities ?? []).map((availability) => [
+          `${availability.dateTime}-${availability.productOptionId}`,
+          availability,
+        ])
+      );
+      detailedAvailabilities.forEach((availability) => {
+        mergedAvailabilities.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
+      });
+      const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
+      results.forEach((r) => mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r));
+      availabilitiesCache.merge(cacheKey, {
+        fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
+        availabilities: Array.from(mergedAvailabilities.values()),
+        pricingConfig: result.pricingConfig ?? existingCache?.pricingConfig ?? null,
+        precomputedPricesByOption: Object.keys(mergedPrecomputed).length > 0 ? mergedPrecomputed : null,
+      });
+    }
+
+    return detailedAvailabilities;
+  }, [
+    selectedDate,
+    activeOptions.length,
+    isPrivateShuttle,
+    companyTimezone,
+    product.productId,
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    availabilitiesCache,
+    activeOptionIdsKey,
+  ]);
+
   // Initialize visible range when unset (anchor at season open for fast first paint).
   useEffect(() => {
     if (!visibleRange) {
-      const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS);
+      const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS + VISIBLE_RANGE_BUFFER_WEEKS);
       setVisibleRange({ start: EARLIEST_AVAILABILITY_DATE, end: initialEnd });
     }
   }, [visibleRange]);
@@ -760,6 +879,7 @@ export function NewBookingFlow({
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
+      let shouldRevalidateCachedRange = false;
       if (cached && cached.availabilities.length > 0) {
         const cachedInitialQuantities = deriveDefaultQuantitiesFromAvailabilities(cached.availabilities);
         if (cachedInitialQuantities) {
@@ -770,6 +890,7 @@ export function NewBookingFlow({
         );
         const isStale = availabilitiesCache?.isStale(cached) ?? false;
         if (cacheCoversRange) {
+          shouldRevalidateCachedRange = true;
           setAvailabilities(cached.availabilities);
           if (cached.availabilities.length > 0) {
             hasLoadedAvailabilitiesRef.current = true;
@@ -785,10 +906,9 @@ export function NewBookingFlow({
           setIsFetchingMoreAvailabilities(false);
           if (!isStale) {
             fetchedRangesRef.current = [...cached.fetchedRanges];
-            fetchingRef.current = false;
-            return;
+            // Show cached availability instantly, then quietly revalidate the visible range.
           }
-          // Stale-while-revalidate: show cached data, fetch in background (don't set fetchedRangesRef so we fall through)
+          // Stale-while-revalidate: show cached data, fetch in background.
         }
         // Partial cache: show cached data immediately, then fetch missing range below
         setAvailabilities(cached.availabilities);
@@ -808,7 +928,7 @@ export function NewBookingFlow({
       
       // Check if we need to fetch this range
       // Backend always returns CAD prices without fee/tax, so no need to refetch on currency change
-      const shouldFetch = needsFetch(clampedStart, clampedEnd);
+      const shouldFetch = shouldRevalidateCachedRange || needsFetch(clampedStart, clampedEnd);
       if (!shouldFetch) {
         // Range already fetched - ensure loading state is cleared
         setLoadingAvailabilities(false);
@@ -826,7 +946,7 @@ export function NewBookingFlow({
         end: new Date(clampedEnd),
       };
       if (shouldUsePrimaryLoader) setLoadingAvailabilities(true);
-      else setIsFetchingMoreAvailabilities(true);
+      else if (!shouldRevalidateCachedRange) setIsFetchingMoreAvailabilities(true);
       
       try {
         let startDateStr: string;
@@ -847,40 +967,33 @@ export function NewBookingFlow({
           endDateStr = formatInTimeZone(endMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
         }
         
-        // Fetch availabilities for all product options in parallel (no currency param - we use precomputedPrices for display)
-        const availabilityPromises = activeOptions.map(async (option) => {
-          const result = await getAvailabilities(option.optionId, startDateStr, endDateStr, {
-            promoCode: appliedPromoCode || undefined,
-            ...(pricingProfileIdForAvailabilities
-              ? { pricingProfileId: pricingProfileIdForAvailabilities }
-              : {}),
-            ...(cancellationPolicyProfileIdForAvailabilities
-              ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
-              : {}),
-          });
-          // Store pricing config from first response only (all responses have same config)
-          if (result.pricingConfig && !pricingConfigSetRef.current) {
-            setPricingConfig(prev => {
-              if (!prev) {
-                pricingConfigSetRef.current = true;
-                return result.pricingConfig!;
-              }
-              return prev;
-            });
-          }
-          // Tag each availability with its productOptionId and carry precomputedPrices for this option
-          return {
-            optionId: option.optionId,
-            availabilities: result.availabilities.map(avail => ({
-              ...avail,
-              productOptionId: option.optionId
-            })),
-            precomputedPrices: result.precomputedPrices,
-            pricingConfig: result.pricingConfig,
-          };
+        const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
+          allOptions: true,
+          summary: true,
+          promoCode: appliedPromoCode || undefined,
+          ...(pricingProfileIdForAvailabilities
+            ? { pricingProfileId: pricingProfileIdForAvailabilities }
+            : {}),
+          ...(cancellationPolicyProfileIdForAvailabilities
+            ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+            : {}),
         });
-        
-        const results = await Promise.all(availabilityPromises);
+        if (result.pricingConfig && !pricingConfigSetRef.current) {
+          setPricingConfig(prev => {
+            if (!prev) {
+              pricingConfigSetRef.current = true;
+              return result.pricingConfig!;
+            }
+            return prev;
+          });
+        }
+        const results = [{
+          optionId: product.productId,
+          availabilities: result.availabilities.map((avail) => availabilityWithOptionId(avail)),
+          precomputedPrices: result.precomputedPrices,
+          precomputedPricesByOption: result.precomputedPricesByOption,
+          pricingConfig: result.pricingConfig,
+        }];
         const allFetchedAvailabilities = results.flatMap(r => r.availabilities);
         if (allFetchedAvailabilities.length > 0) {
           hasLoadedAvailabilitiesRef.current = true;
@@ -888,9 +1001,7 @@ export function NewBookingFlow({
         setPrecomputedPricesByOption(prev => {
           const next = { ...(prev || {}) };
           results.forEach(r => {
-            if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
-              next[r.optionId] = r.precomputedPrices;
-            }
+            mergePrecomputedPricesFromAvailabilityResult(next, r);
           });
           return Object.keys(next).length > 0 ? next : prev;
         });
@@ -939,9 +1050,7 @@ export function NewBookingFlow({
           });
           const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
           results.forEach((r) => {
-            if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
-              mergedPrecomputed[r.optionId] = r.precomputedPrices;
-            }
+            mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r);
           });
           const firstPricingConfig = (results[0] as { pricingConfig?: PricingConfig } | undefined)?.pricingConfig ?? existingCache?.pricingConfig ?? null;
           availabilitiesCache.merge(cacheKey, {
@@ -959,8 +1068,12 @@ export function NewBookingFlow({
           setQuantities((prev) => (Object.keys(prev).length > 0 ? prev : fetchedInitialQuantities));
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load availabilities');
-        console.error('Error fetching availabilities:', err);
+        if (shouldRevalidateCachedRange && cached?.availabilities.length) {
+          console.warn('Background availability refresh failed; keeping cached availability visible.', err);
+        } else {
+          setError(err instanceof Error ? err.message : 'Failed to load availabilities');
+          console.error('Error fetching availabilities:', err);
+        }
       } finally {
         setLoadingAvailabilities(false);
         setIsFetchingMoreAvailabilities(false);
@@ -1043,6 +1156,129 @@ export function NewBookingFlow({
 
   const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
 
+  useEffect(() => {
+    if (!selectedDate || activeOptions.length === 0) return;
+    const selectedDateAvailabilities = availabilitiesByDate[selectedDate] ?? [];
+    if (!selectedDateAvailabilities.some((availability) => availability.isSummary)) return;
+
+    let cancelled = false;
+    async function hydrateSelectedDateDetails() {
+      setIsFetchingMoreAvailabilities(true);
+      try {
+        let startDateStr: string;
+        let endDateStr: string;
+
+        if (isPrivateShuttle) {
+          startDateStr = selectedDate;
+          endDateStr = selectedDate;
+        } else {
+          const startMoment = fromZonedTime(parseISO(`${selectedDate}T00:00:00.000`), companyTimezone);
+          const endMoment = fromZonedTime(parseISO(`${selectedDate}T23:59:59.999`), companyTimezone);
+          startDateStr = formatInTimeZone(startMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+          endDateStr = formatInTimeZone(endMoment, 'UTC', "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+        }
+
+        const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
+          allOptions: true,
+          promoCode: appliedPromoCode || undefined,
+          ...(pricingProfileIdForAvailabilities
+            ? { pricingProfileId: pricingProfileIdForAvailabilities }
+            : {}),
+          ...(cancellationPolicyProfileIdForAvailabilities
+            ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+            : {}),
+        });
+        const results = [{
+          optionId: product.productId,
+          availabilities: result.availabilities.map((availability) => availabilityWithOptionId(availability)),
+          precomputedPrices: result.precomputedPrices,
+          precomputedPricesByOption: result.precomputedPricesByOption,
+          pricingConfig: result.pricingConfig,
+        }];
+        if (cancelled) return;
+
+        const detailedAvailabilities = results.flatMap((result) => result.availabilities);
+        if (detailedAvailabilities.length === 0) return;
+
+        const firstPricingConfig = results.find((result) => result.pricingConfig)?.pricingConfig;
+        if (firstPricingConfig && !pricingConfigSetRef.current) {
+          setPricingConfig(firstPricingConfig);
+          pricingConfigSetRef.current = true;
+        }
+
+        setPrecomputedPricesByOption((prev) => {
+          const next = { ...(prev || {}) };
+          results.forEach((result) => {
+            mergePrecomputedPricesFromAvailabilityResult(next, result);
+          });
+          return Object.keys(next).length > 0 ? next : prev;
+        });
+
+        setAvailabilities((prev) => {
+          const merged = new Map(prev.map((availability) => [`${availability.dateTime}-${availability.productOptionId}`, availability]));
+          detailedAvailabilities.forEach((availability) => {
+            merged.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
+          });
+          return Array.from(merged.values());
+        });
+
+        const cacheKey = availabilitiesCache
+          ? buildAvailabilitiesCacheKey(
+              product.productId,
+              activeOptionIdsKey,
+              appliedPromoCode,
+              pricingProfileIdForAvailabilities,
+            )
+          : null;
+        if (cacheKey && availabilitiesCache) {
+          const existingCache = availabilitiesCache.get(cacheKey);
+          const mergedAvailabilities = new Map(
+            (existingCache?.availabilities ?? []).map((availability) => [
+              `${availability.dateTime}-${availability.productOptionId}`,
+              availability,
+            ])
+          );
+          detailedAvailabilities.forEach((availability) => {
+            mergedAvailabilities.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
+          });
+          const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
+          results.forEach((result) => {
+            mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, result);
+          });
+          availabilitiesCache.merge(cacheKey, {
+            fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
+            availabilities: Array.from(mergedAvailabilities.values()),
+            pricingConfig: firstPricingConfig ?? existingCache?.pricingConfig ?? null,
+            precomputedPricesByOption: Object.keys(mergedPrecomputed).length > 0 ? mergedPrecomputed : null,
+          });
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error('Error hydrating availability details:', err);
+        }
+      } finally {
+        if (!cancelled) setIsFetchingMoreAvailabilities(false);
+      }
+    }
+
+    hydrateSelectedDateDetails();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    selectedDate,
+    availabilitiesByDate,
+    activeOptions,
+    activeOptionIdsKey,
+    isPrivateShuttle,
+    companyTimezone,
+    appliedPromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    availabilitiesCache,
+    product.productId,
+  ]);
+
   // Track mobile state
   useEffect(() => {
     const checkMobile = () => {
@@ -1930,6 +2166,56 @@ export function NewBookingFlow({
       ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
       : taxOnSubtotal;
   const totalPrice = effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
+  const priceSummaryAugmentation = useMemo(
+    () =>
+      augmentPriceSummary
+        ? augmentPriceSummary({
+            selectedDate: selectedDate || null,
+            selectedAvailability,
+            itineraryItems: computeItineraryDisplay(),
+            priceSummaryLines: checkoutPriceSummaryLines,
+            subtotal: effectiveSubtotal,
+            tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
+            total: totalPrice,
+            currency,
+          })
+        : null,
+    [
+      augmentPriceSummary,
+      selectedDate,
+      selectedAvailability,
+      checkoutPriceSummaryLines,
+      effectiveSubtotal,
+      effectivePromoDiscountAmount,
+      effectiveTax,
+      tax,
+      totalPrice,
+      currency,
+    ]
+  );
+  const displayCheckoutPriceSummaryLines =
+    priceSummaryAugmentation?.lines ?? checkoutPriceSummaryLines;
+  const displaySubtotal =
+    effectiveSubtotal + (priceSummaryAugmentation?.subtotalAdjustment ?? 0);
+  const displayTotalPrice =
+    totalPrice + (priceSummaryAugmentation?.totalAdjustment ?? 0);
+  const augmentedModalFeeLineItems = useMemo((): OrderSummaryFeeLine[] => {
+    const externalLines =
+      priceSummaryAugmentation?.lines
+        ?.slice(checkoutPriceSummaryLines.length)
+        .flatMap((line) =>
+          line.kind === 'line'
+            ? [
+                {
+                  name: line.label,
+                  totalAmount: line.amount,
+                  showQuantityLabel: false,
+                },
+              ]
+            : []
+        ) ?? [];
+    return [...feeLineItemsWithAddOns, ...externalLines];
+  }, [checkoutPriceSummaryLines.length, feeLineItemsWithAddOns, priceSummaryAugmentation?.lines]);
 
   const changeCheckoutButtonLabel = undefined;
 
@@ -2352,6 +2638,15 @@ export function NewBookingFlow({
       setError(t('booking.selectPickupLocation'));
       return;
     }
+    const externalValidationError = validateBeforeCheckout?.({
+      selectedDate: selectedDate || null,
+      selectedAvailability,
+      itineraryItems: computeItineraryDisplay(),
+    });
+    if (externalValidationError) {
+      setError(externalValidationError);
+      return;
+    }
 
     setLoading(true);
     setError('');
@@ -2385,6 +2680,31 @@ export function NewBookingFlow({
       const selectedPickupLocation = pickupLocationId 
         ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
         : null;
+
+      try {
+        const refreshed = await refreshSelectedDateDetailsForCheckout();
+        const outbound = findMergedAvailabilityForSelection(refreshed, selectedAvailability);
+        const outboundVacancies = outbound?.vacancies ?? null;
+        const returnVacancies = findMergedReturnVacancies(outbound, selectedReturnOption);
+        if (
+          (outboundVacancies != null && outboundVacancies < totalQuantity) ||
+          (selectedReturnOption && returnVacancies != null && returnVacancies < totalQuantity)
+        ) {
+          setError(
+            describeStandardTourCapacityConflictMessage({
+              partySize: totalQuantity,
+              outboundVacancies,
+              returnVacancies,
+              hasReturnSelection: !!selectedReturnOption,
+            })
+          );
+          setLoading(false);
+          return;
+        }
+      } catch (refreshErr) {
+        console.warn('Fresh availability check failed before reserve; falling back to reserve validation.', refreshErr);
+      }
+
       const reservation = await createReservation({
         productId: availabilityProductOptionId, // GetYourGuide passes productOptionId values in productId field
         dateTime: selectedAvailability.dateTime,
@@ -2448,7 +2768,22 @@ export function NewBookingFlow({
       // Build checkout breakdown from the exact same values we show in the UI and Stripe modal.
       // Backend will charge totalAmount and store this as the receipt so /manage matches.
       const taxForBreakdown = effectivePromoDiscountAmount > 0 ? effectiveTax : tax;
-      const amountDueForCheckout = totalPrice;
+      const amountDueForCheckout = displayTotalPrice;
+      const augmentedCheckoutLines =
+        priceSummaryAugmentation?.lines
+          ?.slice(checkoutPriceSummaryLines.length)
+          .flatMap((line) =>
+            line.kind === 'line'
+              ? [
+                  {
+                    label: line.label,
+                    amount: line.amount,
+                    type: line.type ?? 'FEE',
+                    quantity: line.quantity ?? undefined,
+                  },
+                ]
+              : []
+          ) ?? [];
       const lines = [
         ...ticketLineItems.map((line) => ({
           label: line.category,
@@ -2493,6 +2828,7 @@ export function NewBookingFlow({
             };
           })
           .filter((x): x is NonNullable<typeof x> => x != null),
+        ...augmentedCheckoutLines,
         ...feeLineItems.map((fee) => ({
           label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
           amount: fee.totalAmount,
@@ -2546,6 +2882,7 @@ export function NewBookingFlow({
           skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
           disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
           checkoutBreakdown,
+          dependentAddOnSelection: dependentAddOnSelection || undefined,
           depositAmount: 0,
           balanceAmount: amountDueForCheckout,
           totalAmount: amountDueForCheckout,
@@ -2587,6 +2924,7 @@ export function NewBookingFlow({
             cancellationPolicyId: cancellationPolicyId || undefined,
             termsAcceptedAt: termsAcceptedAt ?? undefined,
             checkoutBreakdown,
+            dependentAddOnSelection: dependentAddOnSelection || undefined,
             skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
             disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
             ...bookingSourceContext,
@@ -2614,6 +2952,7 @@ export function NewBookingFlow({
           termsAcceptedAt: termsAcceptedAt ?? undefined,
           skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
           disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+          dependentAddOnSelection: dependentAddOnSelection || undefined,
           ...bookingSourceContext,
         });
         pendingReservationRef.current = null;
@@ -2658,11 +2997,11 @@ export function NewBookingFlow({
             );
             return { line, breakdown };
           }),
-          feeLineItems: feeLineItemsWithAddOns,
+          feeLineItems: augmentedModalFeeLineItems,
           returnPriceAdjustment: checkoutReturnLineAmount,
           cancellationPolicyFee,
           cancellationPolicyLabel: effectiveCancellationPolicyLabel,
-          subtotal: effectiveSubtotal,
+          subtotal: displaySubtotal,
           tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
           totalQuantity,
           isTaxIncludedInPrice,
@@ -2694,11 +3033,11 @@ export function NewBookingFlow({
         bookingDate: datePart,
         successUrlOverride: undefined,
         ticketLines: ticketLinesForModal,
-        feeLineItems: feeLineItemsWithAddOns,
+        feeLineItems: augmentedModalFeeLineItems,
         returnPriceAdjustment: checkoutReturnLineAmount,
         cancellationPolicyFee,
         cancellationPolicyLabel: effectiveCancellationPolicyLabel,
-        subtotal: effectiveSubtotal,
+        subtotal: displaySubtotal,
         tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
         total: amountDueForCheckout,
         totalQuantity,
@@ -2959,48 +3298,50 @@ export function NewBookingFlow({
         </div>
       ) : (
         <>
-          {/* Date Selection */}
-          <div>
-            <div className="relative">
-              {loadingAvailabilities && (
-                <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
-                  <div className="flex flex-col items-center gap-3">
-                    <div className="booking-loading-spinner" aria-hidden />
-                    <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+          {flowUi?.showCalendar !== false && (
+            /* Date Selection */
+            <div>
+              <div className="relative">
+                {loadingAvailabilities && (
+                  <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
+                    <div className="flex flex-col items-center gap-3">
+                      <div className="booking-loading-spinner" aria-hidden />
+                      <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+                    </div>
                   </div>
-                </div>
-              )}
-              <Calendar
-                availabilitiesByDate={availabilitiesByDate}
-                selectedDate={selectedDate}
-                syncVisibleWeekToSelectedDate={false}
-                selectableSoldOutDate={null}
-                isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
-                onDateSelect={(date) => {
-                  setSelectedDate(date);
-                  handleDateSelect(date);
-                  if (suppressCalendarDateScroll) return;
-                  // Scroll so calendar is almost at top and user sees the rest of the booking flow.
-                  // Dialog: scroll inside contentRef. Full-page: fall back to window scroll.
-                  setTimeout(() => {
-                    const container = contentRef?.current;
-                    if (!useWindowScroll && container && container.scrollHeight > container.clientHeight + 16) {
-                      container.scrollBy({ top: 400, behavior: 'smooth' });
-                    } else if (typeof window !== 'undefined') {
-                      window.scrollBy({ top: 400, behavior: 'smooth' });
-                    }
-                  }, 100);
-                }}
-                timezone={companyTimezone}
-                earliestDate={earliestAvailabilityDate}
-                onVisibleRangeChange={handleVisibleRangeChange}
-                currency={currency}
-                showCapacity={isAdmin}
-                extraDiscountPercent={calendarDiscountPercent}
-                capDiscountBadgesToBookingDate={null}
-              />
+                )}
+                <Calendar
+                  availabilitiesByDate={availabilitiesByDate}
+                  selectedDate={selectedDate}
+                  syncVisibleWeekToSelectedDate={false}
+                  selectableSoldOutDate={null}
+                  isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
+                  onDateSelect={(date) => {
+                    setSelectedDate(date);
+                    handleDateSelect(date);
+                    if (suppressCalendarDateScroll) return;
+                    // Scroll so calendar is almost at top and user sees the rest of the booking flow.
+                    // Dialog: scroll inside contentRef. Full-page: fall back to window scroll.
+                    setTimeout(() => {
+                      const container = contentRef?.current;
+                      if (!useWindowScroll && container && container.scrollHeight > container.clientHeight + 16) {
+                        container.scrollBy({ top: 400, behavior: 'smooth' });
+                      } else if (typeof window !== 'undefined') {
+                        window.scrollBy({ top: 400, behavior: 'smooth' });
+                      }
+                    }, 100);
+                  }}
+                  timezone={companyTimezone}
+                  earliestDate={earliestAvailabilityDate}
+                  onVisibleRangeChange={handleVisibleRangeChange}
+                  currency={currency}
+                  showCapacity={isAdmin}
+                  extraDiscountPercent={calendarDiscountPercent}
+                  capDiscountBadgesToBookingDate={null}
+                />
+              </div>
             </div>
-          </div>
+          )}
 
           {/* Form sections - equal spacing between each */}
           <div className="mt-6 space-y-6">
@@ -3012,7 +3353,14 @@ export function NewBookingFlow({
             if (!selectedAvailability) {
               return <ItineraryPlaceholder formattedDate={formattedDate} t={t} />;
             }
-            const itineraryItems = computeItineraryDisplay();
+            const baseItineraryItems = computeItineraryDisplay();
+            const itineraryItems = augmentItineraryItems
+              ? augmentItineraryItems({
+                  selectedDate,
+                  selectedAvailability,
+                  itineraryItems: baseItineraryItems,
+                })
+              : baseItineraryItems;
             if (!itineraryItems || itineraryItems.length === 0) return null;
             const isBookingComplete = Boolean(selectedAvailability &&
               selectedReturnOption &&
@@ -3079,6 +3427,16 @@ export function NewBookingFlow({
             />
           )}
 
+          {selectedDate && selectedAvailability && afterItinerary
+            ? typeof afterItinerary === 'function'
+              ? afterItinerary({
+                  selectedDate,
+                  selectedAvailability,
+                  itineraryItems: computeItineraryDisplay(),
+                })
+              : afterItinerary
+            : null}
+
           {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
           {selectedAvailability && ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) && (() => {
             const sortedPolicies = [...(pricingConfig?.cancellationPolicies ?? [])].sort((a, b) => {
@@ -3141,12 +3499,15 @@ export function NewBookingFlow({
           {selectedAvailability && (
             <>
             <CheckoutForm
-                priceSummaryLines={checkoutPriceSummaryLines}
-                totalPrice={totalPrice}
+                priceSummaryLines={displayCheckoutPriceSummaryLines}
+                totalPrice={displayTotalPrice}
                 totalSummaryLabel={undefined}
                 subtotal={
-                  subtotal !== totalFromSummary || effectivePromoDiscountAmount > 0 || addOnTotal > 0
-                    ? effectiveSubtotal
+                  subtotal !== totalFromSummary ||
+                  effectivePromoDiscountAmount > 0 ||
+                  addOnTotal > 0 ||
+                  (priceSummaryAugmentation?.subtotalAdjustment ?? 0) !== 0
+                    ? displaySubtotal
                     : undefined
                 }
                 taxAmount={
@@ -3253,4 +3614,3 @@ export function NewBookingFlow({
     </div>
   );
 }
-