@ticketboothapp/booking 1.2.102 → 1.2.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.102",
+  "version": "1.2.104",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -974,6 +974,14 @@ export function AdminChangeBookingFlow({
       return '';
     }
   });
+  const selectedDateRangeExtensionKey = useMemo(() => {
+    if (!visibleRange || !selectedDate) return '';
+    try {
+      return isAfter(parseISO(selectedDate), visibleRange.end) ? selectedDate : '';
+    } catch {
+      return '';
+    }
+  }, [selectedDate, visibleRange]);
   const [isItinerarySticky, setIsItinerarySticky] = useState(false);
   const isItineraryStickyRef = useRef(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -1303,6 +1311,7 @@ export function AdminChangeBookingFlow({
           activeOptionIdsKey,
           appliedPromoCode,
           pricingProfileIdForAvailabilities,
+          cancellationPolicyProfileIdForAvailabilities,
         )
       : null;
     if (cacheKey && availabilitiesCache) {
@@ -1427,11 +1436,11 @@ export function AdminChangeBookingFlow({
         ? endOfLatestDay
         : visibleRange.end;
       
-      // Ensure we include the selected date if it's after the visible range end
-      // This handles the case where user selects a date that's not yet in the visible range
-      if (selectedDate) {
+      // Include an externally seeded selected date only when it falls outside the current calendar window.
+      // Normal date clicks are already inside visibleRange and should not re-fetch the broad availability range.
+      if (selectedDateRangeExtensionKey) {
         try {
-          const selectedDateObj = parseISO(selectedDate);
+          const selectedDateObj = parseISO(selectedDateRangeExtensionKey);
           if (isAfter(selectedDateObj, clampedEnd)) {
             clampedEnd = selectedDateObj;
           }
@@ -1447,6 +1456,7 @@ export function AdminChangeBookingFlow({
             activeOptionIdsKey,
             appliedPromoCode,
             pricingProfileIdForAvailabilities,
+            cancellationPolicyProfileIdForAvailabilities,
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
@@ -1673,7 +1683,7 @@ export function AdminChangeBookingFlow({
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
-    selectedDate,
+    selectedDateRangeExtensionKey,
     appliedPromoCode,
     pricingProfileIdForAvailabilities,
     cancellationPolicyProfileIdForAvailabilities,

package/src/components/booking/ChangeBookingFlow.tsx

@@ -770,6 +770,14 @@ export function ChangeBookingFlow({
       return '';
     }
   });
+  const selectedDateRangeExtensionKey = useMemo(() => {
+    if (!visibleRange || !selectedDate) return '';
+    try {
+      return isAfter(parseISO(selectedDate), visibleRange.end) ? selectedDate : '';
+    } catch {
+      return '';
+    }
+  }, [selectedDate, visibleRange]);
   const [isItinerarySticky, setIsItinerarySticky] = useState(false);
   const isItineraryStickyRef = useRef(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -980,6 +988,7 @@ export function ChangeBookingFlow({
 
     const availabilityPromises = activeOptions.map(async (option) => {
       const result = await getAvailabilities(option.optionId, startDateStr, endDateStr, {
+        ...(!isPrivateShuttle ? { responseMode: 'booking-day' as const } : {}),
         promoCode: appliedPromoCode || undefined,
         ...(pricingProfileIdForAvailabilities
           ? { pricingProfileId: pricingProfileIdForAvailabilities }
@@ -1054,6 +1063,7 @@ export function ChangeBookingFlow({
           activeOptionIdsKey,
           appliedPromoCode,
           pricingProfileIdForAvailabilities,
+          cancellationPolicyProfileIdForAvailabilities,
         )
       : null;
     if (cacheKey && availabilitiesCache) {
@@ -1178,11 +1188,11 @@ export function ChangeBookingFlow({
         ? endOfLatestDay
         : visibleRange.end;
       
-      // Ensure we include the selected date if it's after the visible range end
-      // This handles the case where user selects a date that's not yet in the visible range
-      if (selectedDate) {
+      // Include an externally seeded selected date only when it falls outside the current calendar window.
+      // Normal date clicks are already inside visibleRange and should not re-fetch the broad availability range.
+      if (selectedDateRangeExtensionKey) {
         try {
-          const selectedDateObj = parseISO(selectedDate);
+          const selectedDateObj = parseISO(selectedDateRangeExtensionKey);
           if (isAfter(selectedDateObj, clampedEnd)) {
             clampedEnd = selectedDateObj;
           }
@@ -1198,6 +1208,7 @@ export function ChangeBookingFlow({
             activeOptionIdsKey,
             appliedPromoCode,
             pricingProfileIdForAvailabilities,
+            cancellationPolicyProfileIdForAvailabilities,
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
@@ -1291,6 +1302,7 @@ export function ChangeBookingFlow({
         // 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, {
+            ...(!isPrivateShuttle ? { responseMode: 'booking-day' as const } : {}),
             promoCode: appliedPromoCode || undefined,
             ...(pricingProfileIdForAvailabilities
               ? { pricingProfileId: pricingProfileIdForAvailabilities }
@@ -1424,7 +1436,7 @@ export function ChangeBookingFlow({
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
-    selectedDate,
+    selectedDateRangeExtensionKey,
     appliedPromoCode,
     pricingProfileIdForAvailabilities,
     cancellationPolicyProfileIdForAvailabilities,

package/src/components/booking/NewBookingFlow.tsx

@@ -493,8 +493,17 @@ export function NewBookingFlow({
   const inFlightRangeRef = useRef<{ start: Date; end: Date } | null>(null); // Range currently being fetched
   const fetchedRangesRef = useRef<Array<{ start: Date; end: Date }>>([]); // Track fetched date ranges
   const pendingRangeRef = useRef<{ start: Date; end: Date } | null>(null); // Range to fetch when current fetch completes (user navigated during fetch)
+  const selectedDateHydrationInFlightKeyRef = useRef<string | null>(null);
   const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
   const [selectedDate, setSelectedDate] = useState<string>('');
+  const selectedDateRangeExtensionKey = useMemo(() => {
+    if (!visibleRange || !selectedDate) return '';
+    try {
+      return isAfter(parseISO(selectedDate), visibleRange.end) ? selectedDate : '';
+    } catch {
+      return '';
+    }
+  }, [selectedDate, visibleRange]);
   const [isItinerarySticky, setIsItinerarySticky] = useState(false);
   const isItineraryStickyRef = useRef(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -728,6 +737,7 @@ export function NewBookingFlow({
           activeOptionIdsKey,
           appliedPromoCode,
           pricingProfileIdForAvailabilities,
+          cancellationPolicyProfileIdForAvailabilities,
         )
       : null;
     if (cacheKey && availabilitiesCache) {
@@ -830,6 +840,7 @@ export function NewBookingFlow({
           activeOptionIdsKey,
           appliedPromoCode,
           pricingProfileIdForAvailabilities,
+          cancellationPolicyProfileIdForAvailabilities,
         )
       : null;
     if (cacheKey && availabilitiesCache) {
@@ -918,11 +929,11 @@ export function NewBookingFlow({
         ? endOfLatestDay
         : visibleRange.end;
       
-      // Ensure we include the selected date if it's after the visible range end
-      // This handles the case where user selects a date that's not yet in the visible range
-      if (selectedDate) {
+      // Include an externally seeded selected date only when it falls outside the current calendar window.
+      // Normal date clicks are already inside visibleRange and should not re-fetch the broad calendar summary.
+      if (selectedDateRangeExtensionKey) {
         try {
-          const selectedDateObj = parseISO(selectedDate);
+          const selectedDateObj = parseISO(selectedDateRangeExtensionKey);
           if (isAfter(selectedDateObj, clampedEnd)) {
             clampedEnd = selectedDateObj;
           }
@@ -938,6 +949,7 @@ export function NewBookingFlow({
             activeOptionIdsKey,
             appliedPromoCode,
             pricingProfileIdForAvailabilities,
+            cancellationPolicyProfileIdForAvailabilities,
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
@@ -1151,7 +1163,7 @@ export function NewBookingFlow({
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
-    selectedDate,
+    selectedDateRangeExtensionKey,
     appliedPromoCode,
     pricingProfileIdForAvailabilities,
     cancellationPolicyProfileIdForAvailabilities,
@@ -1213,8 +1225,19 @@ export function NewBookingFlow({
 
   useEffect(() => {
     if (!selectedDate || activeOptions.length === 0) return;
-    const selectedDateAvailabilities = availabilitiesByDate[selectedDate] ?? [];
-    if (!selectedDateAvailabilities.some((availability) => availability.isSummary)) return;
+    if (!selectedAvailability) return;
+    if (!availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone)) return;
+    if (selectedAvailability.isSummary !== true) return;
+    const hydrationKey = [
+      product.productId,
+      selectedDate,
+      activeOptionIdsKey,
+      appliedPromoCode ?? '',
+      pricingProfileIdForAvailabilities ?? '',
+      cancellationPolicyProfileIdForAvailabilities ?? '',
+    ].join('|');
+    if (selectedDateHydrationInFlightKeyRef.current === hydrationKey) return;
+    selectedDateHydrationInFlightKeyRef.current = hydrationKey;
 
     let cancelled = false;
     async function hydrateSelectedDateDetails() {
@@ -1235,6 +1258,7 @@ export function NewBookingFlow({
 
         const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
           allOptions: true,
+          responseMode: 'booking-day',
           promoCode: appliedPromoCode || undefined,
           ...(pricingProfileIdForAvailabilities
             ? { pricingProfileId: pricingProfileIdForAvailabilities }
@@ -1274,6 +1298,16 @@ export function NewBookingFlow({
           mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
           return Array.from(merged.values());
         });
+        const updatedSelection = findMergedAvailabilityForSelection(detailedAvailabilities, selectedAvailability);
+        if (updatedSelection && selectedAvailability && shouldSyncSelectedAvailability(selectedAvailability, updatedSelection)) {
+          setSelectedAvailability(updatedSelection);
+          if (selectedReturnOption && updatedSelection.returnOptions) {
+            const updatedReturnOption = updatedSelection.returnOptions.find(
+              (option) => option.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
+            );
+            if (updatedReturnOption) setSelectedReturnOption(updatedReturnOption);
+          }
+        }
 
         const cacheKey = availabilitiesCache
           ? buildAvailabilitiesCacheKey(
@@ -1281,6 +1315,7 @@ export function NewBookingFlow({
               activeOptionIdsKey,
               appliedPromoCode,
               pricingProfileIdForAvailabilities,
+              cancellationPolicyProfileIdForAvailabilities,
             )
           : null;
         if (cacheKey && availabilitiesCache) {
@@ -1308,6 +1343,9 @@ export function NewBookingFlow({
           console.error('Error hydrating availability details:', err);
         }
       } finally {
+        if (selectedDateHydrationInFlightKeyRef.current === hydrationKey) {
+          selectedDateHydrationInFlightKeyRef.current = null;
+        }
         if (!cancelled) setIsFetchingMoreAvailabilities(false);
       }
     }
@@ -1318,8 +1356,9 @@ export function NewBookingFlow({
     };
   }, [
     selectedDate,
-    availabilitiesByDate,
-    activeOptions,
+    selectedAvailability,
+    selectedReturnOption,
+    activeOptions.length,
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
@@ -1478,6 +1517,8 @@ export function NewBookingFlow({
     if (!selectedAvailability || !selectedDate) return false;
     return availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone);
   }, [selectedAvailability, selectedDate, companyTimezone]);
+  const selectedBookingOptionsHydrating =
+    selectedAvailabilityMatchesDate && selectedAvailability?.isSummary === true;
 
   useEffect(() => {
     if (hasAppliedInitialValuesRef.current || !initialValues) return;
@@ -3478,7 +3519,15 @@ export function NewBookingFlow({
           )}
 
           {/* Select return time — wait for hydrated day details so summary refetches do not flash this block */}
-          {selectedAvailabilityMatchesDate &&
+          {selectedBookingOptionsHydrating && (
+            <div className="flex items-center justify-center gap-3 rounded-lg border border-stone-200 bg-white p-4 text-stone-600">
+              <div className="booking-loading-spinner" aria-hidden />
+              <div>{t('booking.loadingTimes')}</div>
+            </div>
+          )}
+
+          {!selectedBookingOptionsHydrating &&
+            selectedAvailabilityMatchesDate &&
             selectedAvailability &&
             !selectedAvailability.isSummary &&
             selectedAvailability.returnOptions &&
@@ -3502,7 +3551,7 @@ export function NewBookingFlow({
             />
           )}
 
-          {selectedDate && selectedAvailability && afterItinerary
+          {!selectedBookingOptionsHydrating && selectedDate && selectedAvailability && afterItinerary
             ? typeof afterItinerary === 'function'
               ? afterItinerary({
                   selectedDate,
@@ -3513,7 +3562,8 @@ export function NewBookingFlow({
             : null}
 
           {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
-          {selectedAvailabilityMatchesDate &&
+          {!selectedBookingOptionsHydrating &&
+            selectedAvailabilityMatchesDate &&
             selectedAvailability &&
             ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) &&
             (() => {
@@ -3540,7 +3590,7 @@ export function NewBookingFlow({
           })()}
 
           {/* Ticket Selection */}
-          {selectedAvailability && (
+          {!selectedBookingOptionsHydrating && selectedAvailability && (
             <TicketSelector
               pricing={pricing}
               quantities={quantities}
@@ -3564,7 +3614,7 @@ export function NewBookingFlow({
           )}
 
           {/* Add-ons — optional extras for the selected product option */}
-          {selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
+          {!selectedBookingOptionsHydrating && selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
             <AddOnsSection
               addOns={addOns}
               addOnSelections={addOnSelections}
@@ -3576,7 +3626,7 @@ export function NewBookingFlow({
           )}
 
           {/* Total and Checkout — shared PriceSummary component */}
-          {selectedAvailability && (
+          {!selectedBookingOptionsHydrating && selectedAvailability && (
             <>
             <CheckoutForm
                 priceSummaryLines={displayCheckoutPriceSummaryLines}

package/src/contexts/AvailabilitiesCacheContext.tsx

@@ -61,10 +61,12 @@ export function buildAvailabilitiesCacheKey(
   productId: string,
   optionIdsKey: string,
   promoCode: string | null,
-  pricingProfileId?: string | null
+  pricingProfileId?: string | null,
+  cancellationPolicyProfileId?: string | null,
 ): string {
   const pp = (pricingProfileId ?? '').trim();
-  return `${productId}|${optionIdsKey}|${promoCode ?? ''}|pp:${pp}`;
+  const cp = (cancellationPolicyProfileId ?? '').trim();
+  return `${productId}|${optionIdsKey}|${promoCode ?? ''}|pp:${pp}|cp:${cp}`;
 }
 
 export function AvailabilitiesCacheProvider({ children }: { children: ReactNode }) {

package/src/lib/booking-api.ts

@@ -1623,6 +1623,7 @@ export interface GetAvailabilitiesOptions {
   promoCode?: string | null;
   allOptions?: boolean;
   summary?: boolean;
+  responseMode?: 'summary' | 'booking-day';
   /**
    * When set, TicketBooth should return rates/precomputed prices for this partner pricing profile.
    * Must match the profile linked on the partner (e.g. capabilities.pricingProfileId).
@@ -1670,6 +1671,7 @@ export async function getAvailabilities(
   if (options?.promoCode?.trim()) params.set('promoCode', options.promoCode.trim());
   if (options?.allOptions === true) params.set('allOptions', 'true');
   if (options?.summary === true) params.set('summary', 'true');
+  if (options?.responseMode) params.set('responseMode', options.responseMode);
   const pricingProfileId = options?.pricingProfileId?.trim();
   if (pricingProfileId) params.set('pricingProfileId', pricingProfileId);
   const cancellationPolicyProfileId = options?.cancellationPolicyProfileId?.trim();