@ticketboothapp/booking 1.2.99 → 1.2.101

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -28,6 +28,7 @@ import {
   EARLIEST_AVAILABILITY_DATE,
   LATEST_AVAILABILITY_DATE,
   INITIAL_FETCH_WEEKS,
+  VISIBLE_RANGE_BUFFER_WEEKS,
 } from '../../lib/booking-constants';
 import { formatCurrencyAmount } from '../../lib/currency';
 import { formatBookingRefForDisplay } from '../../lib/booking-ref';
@@ -447,11 +448,86 @@ export function PrivateShuttleBookingFlow({
     availabilitiesCache,
   ]);
 
+  /** Fresh selected-day check before reserve so stale private shuttle vacancies are corrected before payment. */
+  const refreshSelectedDateDetailsForCheckout = useCallback(async (): Promise<Availability[]> => {
+    if (!selectedDate || !product.productId) return [];
+
+    const result = await getAvailabilities(product.productId, selectedDate, selectedDate, {
+      allOptions: true,
+      promoCode: activePromoCode || undefined,
+      ...(pricingProfileIdForAvailabilities
+        ? { pricingProfileId: pricingProfileIdForAvailabilities }
+        : {}),
+      ...(cancellationPolicyProfileIdForAvailabilities
+        ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+        : {}),
+    });
+
+    if (result.pricingConfig && !pricingConfigSetRef.current) {
+      setPricingConfig(result.pricingConfig);
+      pricingConfigSetRef.current = true;
+    }
+    if (result.precomputedPrices) setPrecomputedPrices(result.precomputedPrices);
+    if (result.resourcePriceByCurrency) setResourcePriceByCurrency(result.resourcePriceByCurrency);
+    if (result.resourcePriceByOption) setResourcePriceByOption(result.resourcePriceByOption);
+
+    let mergedAvailabilities: Availability[] = [];
+    setAvailabilities((prev) => {
+      const existingMap = new Map(
+        prev.map((avail) => [`${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;
+    });
+
+    const cacheKey = availabilitiesCache
+      ? buildAvailabilitiesCacheKey(
+          product.productId,
+          activeOptionIdsKey,
+          activePromoCode,
+          pricingProfileIdForAvailabilities,
+        )
+      : null;
+    if (cacheKey && availabilitiesCache) {
+      const existingCache = availabilitiesCache.get(cacheKey);
+      const mergedAvailabilitiesMap = new Map(
+        (existingCache?.availabilities ?? []).map((availability) => [
+          `${availability.dateTime}-${availability.productId || availability.productOptionId}`,
+          availability,
+        ])
+      );
+      result.availabilities.forEach((availability) => {
+        mergedAvailabilitiesMap.set(`${availability.dateTime}-${availability.productId || availability.productOptionId}`, availability);
+      });
+      availabilitiesCache.merge(cacheKey, {
+        fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
+        availabilities: Array.from(mergedAvailabilitiesMap.values()),
+        pricingConfig: result.pricingConfig ?? existingCache?.pricingConfig ?? null,
+        precomputedPrices: result.precomputedPrices ?? existingCache?.precomputedPrices ?? null,
+        resourcePriceByCurrency: result.resourcePriceByCurrency ?? existingCache?.resourcePriceByCurrency ?? null,
+        resourcePriceByOption: result.resourcePriceByOption ?? existingCache?.resourcePriceByOption ?? null,
+      });
+    }
+
+    return result.availabilities;
+  }, [
+    selectedDate,
+    product.productId,
+    activePromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    availabilitiesCache,
+    activeOptionIdsKey,
+  ]);
+
   useEffect(() => {
     if (!visibleRange) {
       setVisibleRange({
         start: EARLIEST_AVAILABILITY_DATE,
-        end: addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS),
+        end: addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS + VISIBLE_RANGE_BUFFER_WEEKS),
       });
     }
   }, [visibleRange]);
@@ -534,6 +610,7 @@ export function PrivateShuttleBookingFlow({
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
+      let shouldRevalidateCachedRange = false;
       if (cached && cached.availabilities.length > 0) {
         const cacheCoversRange = cached.fetchedRanges.some(
           (r) =>
@@ -541,6 +618,7 @@ export function PrivateShuttleBookingFlow({
         );
         const isStale = availabilitiesCache?.isStale(cached) ?? false;
         if (cacheCoversRange) {
+          shouldRevalidateCachedRange = true;
           setAvailabilities(cached.availabilities);
           if (cached.pricingConfig) {
             setPricingConfig(cached.pricingConfig);
@@ -553,8 +631,7 @@ export function PrivateShuttleBookingFlow({
           setIsFetchingMoreAvailabilities(false);
           if (!isStale) {
             fetchedRangesRef.current = [...cached.fetchedRanges];
-            fetchingRef.current = false;
-            return;
+            // Show cached availability instantly, then quietly revalidate the visible range.
           }
         }
         // Partial cache: show cached data immediately, then fetch missing range below
@@ -570,7 +647,7 @@ export function PrivateShuttleBookingFlow({
         setLoadingAvailabilities(false);
       }
 
-      if (!needsFetch(clampedStart, clampedEnd)) {
+      if (!shouldRevalidateCachedRange && !needsFetch(clampedStart, clampedEnd)) {
         setLoadingAvailabilities(false);
         setIsFetchingMoreAvailabilities(false);
         fetchingRef.current = false;
@@ -579,12 +656,13 @@ export function PrivateShuttleBookingFlow({
       const hasPartialCache = cached && cached.availabilities.length > 0;
       fetchingRef.current = true;
       if (!hasPartialCache) setLoadingAvailabilities(true);
-      else setIsFetchingMoreAvailabilities(true);
+      else if (!shouldRevalidateCachedRange) setIsFetchingMoreAvailabilities(true);
       try {
         const startDate = format(startOfDay(clampedStart), 'yyyy-MM-dd');
         const endDate = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
         const result = await getAvailabilities(product.productId, startDate, endDate, {
           allOptions: true,
+          summary: true,
           promoCode: activePromoCode || undefined,
           ...(pricingProfileIdForAvailabilities
             ? { pricingProfileId: pricingProfileIdForAvailabilities }
@@ -643,7 +721,11 @@ export function PrivateShuttleBookingFlow({
           });
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load availabilities');
+        if (shouldRevalidateCachedRange && cached?.availabilities.length) {
+          console.warn('Background private shuttle availability refresh failed; keeping cached availability visible.', err);
+        } else {
+          setError(err instanceof Error ? err.message : 'Failed to load availabilities');
+        }
       } finally {
         setLoadingAvailabilities(false);
         setIsFetchingMoreAvailabilities(false);
@@ -702,6 +784,100 @@ export function PrivateShuttleBookingFlow({
 
   const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
 
+  useEffect(() => {
+    if (!selectedDate || !product.productId) return;
+    const selectedDateAvailabilities = availabilitiesByDate[selectedDate] ?? [];
+    if (!selectedDateAvailabilities.some((availability) => availability.isSummary)) return;
+
+    let cancelled = false;
+    async function hydrateSelectedDateDetails() {
+      setIsFetchingMoreAvailabilities(true);
+      try {
+        const result = await getAvailabilities(product.productId, selectedDate, selectedDate, {
+          allOptions: true,
+          promoCode: activePromoCode || undefined,
+          ...(pricingProfileIdForAvailabilities
+            ? { pricingProfileId: pricingProfileIdForAvailabilities }
+            : {}),
+          ...(cancellationPolicyProfileIdForAvailabilities
+            ? { cancellationPolicyProfileId: cancellationPolicyProfileIdForAvailabilities }
+            : {}),
+        });
+        if (cancelled) return;
+
+        if (result.pricingConfig && !pricingConfigSetRef.current) {
+          setPricingConfig(result.pricingConfig);
+          pricingConfigSetRef.current = true;
+        }
+        if (result.precomputedPrices) setPrecomputedPrices(result.precomputedPrices);
+        if (result.resourcePriceByCurrency) setResourcePriceByCurrency(result.resourcePriceByCurrency);
+        if (result.resourcePriceByOption) setResourcePriceByOption(result.resourcePriceByOption);
+
+        setAvailabilities((prev) => {
+          const merged = new Map(
+            prev.map((availability) => [
+              `${availability.dateTime}-${availability.productId || availability.productOptionId}`,
+              availability,
+            ])
+          );
+          result.availabilities.forEach((availability) => {
+            merged.set(`${availability.dateTime}-${availability.productId || availability.productOptionId}`, availability);
+          });
+          return Array.from(merged.values());
+        });
+
+        const cacheKey = availabilitiesCache
+          ? buildAvailabilitiesCacheKey(
+              product.productId,
+              activeOptionIdsKey,
+              activePromoCode,
+              pricingProfileIdForAvailabilities,
+            )
+          : null;
+        if (cacheKey && availabilitiesCache) {
+          const existingCache = availabilitiesCache.get(cacheKey);
+          const mergedAvailabilities = new Map(
+            (existingCache?.availabilities ?? []).map((availability) => [
+              `${availability.dateTime}-${availability.productId || availability.productOptionId}`,
+              availability,
+            ])
+          );
+          result.availabilities.forEach((availability) => {
+            mergedAvailabilities.set(`${availability.dateTime}-${availability.productId || availability.productOptionId}`, availability);
+          });
+          availabilitiesCache.merge(cacheKey, {
+            fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
+            availabilities: Array.from(mergedAvailabilities.values()),
+            pricingConfig: result.pricingConfig ?? existingCache?.pricingConfig ?? null,
+            precomputedPrices: result.precomputedPrices ?? existingCache?.precomputedPrices ?? null,
+            resourcePriceByCurrency: result.resourcePriceByCurrency ?? existingCache?.resourcePriceByCurrency ?? null,
+            resourcePriceByOption: result.resourcePriceByOption ?? existingCache?.resourcePriceByOption ?? null,
+          });
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error('Error hydrating private shuttle availability details:', err);
+        }
+      } finally {
+        if (!cancelled) setIsFetchingMoreAvailabilities(false);
+      }
+    }
+
+    hydrateSelectedDateDetails();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    selectedDate,
+    availabilitiesByDate,
+    product.productId,
+    activeOptionIdsKey,
+    activePromoCode,
+    pricingProfileIdForAvailabilities,
+    cancellationPolicyProfileIdForAvailabilities,
+    availabilitiesCache,
+  ]);
+
   const earliestAvailabilityDate = useMemo(() => {
     if (dates.length === 0) return EARLIEST_AVAILABILITY_DATE;
     // Build date in company timezone at noon to avoid cross-timezone day shifts.
@@ -1319,6 +1495,32 @@ export function PrivateShuttleBookingFlow({
       const [hours, minutes] = selectedStartTime.split(':').map(Number);
       const startTimeISO = `${selectedDate}T${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00-06:00`;
 
+      try {
+        const refreshed = await refreshSelectedDateDetailsForCheckout();
+        const slot = findMergedPrivateShuttleAvailability(
+          refreshed,
+          selectedAvailability,
+          selectedOption || null,
+          selectedDate || null,
+          companyTimezone
+        );
+        const passengersToReserve = isSpecialRequest
+          ? Math.min(passengerCount, maxVacancies)
+          : passengerCount;
+        if (slot?.vacancies != null && (slot.vacancies === 0 || slot.vacancies < passengersToReserve)) {
+          setError(
+            describePrivateShuttleCapacityConflictMessage({
+              passengersRequested: passengerCount,
+              vacancies: slot.vacancies,
+            })
+          );
+          setLoading(false);
+          return;
+        }
+      } catch (refreshErr) {
+        console.warn('Fresh private shuttle availability check failed before reserve; falling back to reserve validation.', refreshErr);
+      }
+
       const specialRequestNote = isSpecialRequest
         ? `Special request: Customer requested ${passengerCount} passengers (${resourceCount} shuttles needed). We reserved ${billableResourceCount} at standard capacity. Team to add ${resourceCount - billableResourceCount} more shuttle(s) and verify fleet availability.`
         : '';

package/src/components/booking/booking-flow-types.ts

@@ -1,7 +1,13 @@
-import type { RefObject } from 'react';
-import type { Product } from '../../lib/booking-api';
+import type { ReactNode, RefObject } from 'react';
+import type {
+  Availability,
+  CheckoutDependentAddOnSelection,
+  ItineraryDisplayStep,
+  Product,
+} from '../../lib/booking-api';
 import type { BookingSourceMetadata } from '../../lib/booking/source-metadata';
 import type { Currency } from './CurrencySwitcher';
+import type { PriceSummaryLine } from './PriceSummary';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
 import type { ProviderDashboardChangeBookingPayload } from './provider-dashboard-change-booking';
 
@@ -96,6 +102,25 @@ export interface BookingFlowBaseProps {
   hideItineraryBox?: boolean;
   /** Partner / embed-only tweaks; omit for default website behavior. */
   flowUi?: BookingFlowUiOptions;
+  /**
+   * Optional inline extension rendered immediately below the Build Itinerary box once
+   * a date and shuttle time are selected. Used by photo-first dependent add-on flows.
+   */
+  afterItinerary?: ReactNode | ((context: BookingFlowAfterItineraryContext) => ReactNode);
+  /**
+   * Optional hook to insert add-on rows into the Build Itinerary box. Receives the
+   * base itinerary from the selected shuttle and returns the display list to render.
+   */
+  augmentItineraryItems?: (context: BookingFlowAfterItineraryContext) => ItineraryDisplayStep[] | null;
+  /** Optional hook for embed flows to show extra rows in the checkout receipt summary. */
+  augmentPriceSummary?: (context: BookingFlowPriceSummaryContext) => BookingFlowPriceSummaryAugmentation | null;
+  /**
+   * Optional dependent add-on to create with the primary booking after checkout.
+   * Used by photo-first flows where the add-on is selected before the shuttle booking exists.
+   */
+  dependentAddOnSelection?: CheckoutDependentAddOnSelection | null;
+  /** Optional external validation before checkout submit (e.g. required add-on questionnaire answers). */
+  validateBeforeCheckout?: (context: BookingFlowAfterItineraryContext) => string | null;
   /** Explicit reserve/checkout source metadata (browser URL layer + optional portal merge at call site). */
   bookingSourceAttribution: Partial<BookingSourceMetadata>;
   /** Dedicated partner portal app (`booking.*`): persist reserve `source` as PARTNER_PORTAL. */
@@ -108,6 +133,29 @@ export interface BookingFlowBaseProps {
   changeProductOptions?: Product[];
 }
 
+export interface BookingFlowAfterItineraryContext {
+  selectedDate: string | null;
+  selectedAvailability: Availability | null;
+  itineraryItems: ItineraryDisplayStep[] | null;
+}
+
+export interface BookingFlowPriceSummaryContext {
+  selectedDate: string | null;
+  selectedAvailability: Availability | null;
+  itineraryItems?: ItineraryDisplayStep[] | null;
+  priceSummaryLines: PriceSummaryLine[];
+  subtotal: number;
+  tax: number;
+  total: number;
+  currency: Currency;
+}
+
+export interface BookingFlowPriceSummaryAugmentation {
+  lines?: PriceSummaryLine[];
+  subtotalAdjustment?: number;
+  totalAdjustment?: number;
+}
+
 /** Standard (new) reservation flow — no change-booking receipt or callbacks. */
 export interface NewBookingFlowProps extends BookingFlowBaseProps {}
 

package/src/components/booking/booking-flow-ui.ts

@@ -45,6 +45,8 @@ export type ProviderDashboardChangePricingUi = {
 export interface BookingFlowUiOptions {
   showCollage?: boolean;
   showTourDescription?: boolean;
+  /** When false, the flow still uses the selected/initial date but does not render the calendar picker. */
+  showCalendar?: boolean;
   autoSelectFirstAvailableDate?: boolean;
   autoSelectFirstHighlightedPickup?: boolean;
   /**

package/src/contexts/AvailabilitiesCacheContext.tsx

@@ -9,8 +9,8 @@ import {
 } from 'react';
 import type { Availability, PricingConfig, PrecomputedPricesByCategory } from '../lib/booking-api';
 
-/** Cache TTL in milliseconds (5 minutes). Entries older than this are considered stale. */
-export const AVAILABILITIES_CACHE_TTL_MS = 5 * 60 * 1000;
+/** Cache TTL in milliseconds (1 minute). Entries older than this are considered stale. */
+export const AVAILABILITIES_CACHE_TTL_MS = 60 * 1000;
 
 export interface CachedAvailabilitiesData {
   fetchedRanges: Array<{ start: Date; end: Date }>;

package/src/lib/booking/pricing.ts

@@ -355,6 +355,7 @@ export interface OrderSummaryFeeLine {
   name: string;
   totalAmount: number;
   description?: string;
+  showQuantityLabel?: boolean;
 }
 
 /** One ticket line for order summary (category, qty, price per unit, item total in display currency). */