@ticketboothapp/booking 1.2.103 → 1.2.105

package/src/components/booking/ChangeBookingFlow.tsx

@@ -263,18 +263,30 @@ function findMergedAvailabilityForSelection(
   selected: Availability | null
 ): Availability | undefined {
   if (!selected) return undefined;
-  const optId = selected.productOptionId ?? undefined;
+  const optId = getAvailabilityOptionId(selected) || undefined;
   const dt = selected.dateTime;
   const availId = selected.availabilityId?.trim();
   if (availId && optId) {
     const exact = merged.find(
       (a) =>
         a.availabilityId === availId &&
-        (a.productOptionId === optId || a.productOptionId === undefined)
+        getAvailabilityOptionId(a) === optId
     );
     if (exact) return exact;
   }
-  return merged.find((a) => a.dateTime === dt && a.productOptionId === optId);
+  return merged.find((a) => a.dateTime === dt && getAvailabilityOptionId(a) === optId);
+}
+
+function getAvailabilityOptionId(availability: Availability, fallbackOptionId?: string): string {
+  const productOptionId = availability.productOptionId?.trim();
+  if (productOptionId) return productOptionId;
+  const productId = availability.productId?.trim();
+  if (productId?.startsWith('po_')) return productId;
+  return fallbackOptionId?.trim() ?? '';
+}
+
+function getAvailabilityCacheKey(availability: Availability): string {
+  return `${availability.dateTime}-${getAvailabilityOptionId(availability)}`;
 }
 
 /** Ticket rates for one availability row — mirrors main cart [pricing] useMemo so baseline slots match BE. */
@@ -288,7 +300,7 @@ function buildPricingFromAvailability(
   isSimplifiedPricingView: boolean,
 ) {
   if (!selectedAvailability || !pricingConfig) return [];
-  const optionId = selectedAvailability.productOptionId;
+  const optionId = getAvailabilityOptionId(selectedAvailability);
   const selectedOption = activeOptions.find((opt) => opt.optionId === optionId);
   const precomputed = optionId ? precomputedPricesByOption?.[optionId] : undefined;
   const rateToDisplayPrice = (backendInDisplayCurrency: number) =>
@@ -306,11 +318,17 @@ function buildPricingFromAvailability(
     appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }>,
   ) => {
     const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
+    const hasOptionScopedPrice = baseInDisplayCurrency > 0;
+    const priceCADForBreakdown =
+      hasOptionScopedPrice && currency === 'CAD' ? baseInDisplayCurrency : backendPriceCAD;
+    const displayCurrencyPriceForFallback = hasOptionScopedPrice
+      ? baseInDisplayCurrency
+      : backendInDisplayCurrency;
     const isPublicMode = isSimplifiedPricingView;
     const breakdown = computePriceBreakdown(
       pricingConfig,
       currency,
-      backendPriceCAD,
+      priceCADForBreakdown,
       basePriceCAD,
       hasFees,
       appliedAdjustments,
@@ -318,8 +336,8 @@ function buildPricingFromAvailability(
       baseInDisplayCurrency,
       isPublicMode,
     );
-    const price = breakdown?.finalPrice ?? rateToDisplayPrice(backendInDisplayCurrency);
-    return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: backendPriceCAD };
+    const price = breakdown?.finalPrice ?? rateToDisplayPrice(displayCurrencyPriceForFallback);
+    return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: priceCADForBreakdown };
   };
   return (
     selectedAvailability.rates?.map((rate) => {
@@ -770,6 +788,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 +1006,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 }
@@ -1024,10 +1051,10 @@ export function ChangeBookingFlow({
     let mergedOut: Availability[] = [];
     setAvailabilities((prev) => {
       const existingMap = new Map(
-        prev.map((avail) => [`${avail.dateTime}-${avail.productOptionId}`, avail])
+        prev.map((avail) => [getAvailabilityCacheKey(avail), avail])
       );
       allFetchedAvailabilities.forEach((avail) => {
-        existingMap.set(`${avail.dateTime}-${avail.productOptionId}`, avail);
+        existingMap.set(getAvailabilityCacheKey(avail), avail);
       });
       mergedOut = Array.from(existingMap.values());
       return mergedOut;
@@ -1054,16 +1081,17 @@ export function ChangeBookingFlow({
           activeOptionIdsKey,
           appliedPromoCode,
           pricingProfileIdForAvailabilities,
+          cancellationPolicyProfileIdForAvailabilities,
         )
       : null;
     if (cacheKey && availabilitiesCache) {
       const existingCache = availabilitiesCache.get(cacheKey);
       const existingAvailabilities = existingCache?.availabilities ?? [];
       const mergedAvailabilitiesMap = new Map(
-        existingAvailabilities.map((a) => [`${a.dateTime}-${a.productOptionId}`, a])
+        existingAvailabilities.map((a) => [getAvailabilityCacheKey(a), a])
       );
       allFetchedAvailabilities.forEach((a) => {
-        mergedAvailabilitiesMap.set(`${a.dateTime}-${a.productOptionId}`, a);
+        mergedAvailabilitiesMap.set(getAvailabilityCacheKey(a), a);
       });
       const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
       results.forEach((r) => {
@@ -1178,11 +1206,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 +1226,7 @@ export function ChangeBookingFlow({
             activeOptionIdsKey,
             appliedPromoCode,
             pricingProfileIdForAvailabilities,
+            cancellationPolicyProfileIdForAvailabilities,
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
@@ -1291,6 +1320,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 }
@@ -1339,12 +1369,12 @@ export function ChangeBookingFlow({
         // Merge with existing availabilities (avoid duplicates by dateTime + productOptionId)
         setAvailabilities(prev => {
           const existingMap = new Map(
-            prev.map(avail => [`${avail.dateTime}-${avail.productOptionId}`, avail])
+            prev.map(avail => [getAvailabilityCacheKey(avail), avail])
           );
           
           // Merge new availabilities - update existing ones or add new ones
           allFetchedAvailabilities.forEach(avail => {
-            const key = `${avail.dateTime}-${avail.productOptionId}`;
+            const key = getAvailabilityCacheKey(avail);
             // Always update to get latest data (vacancies, prices, etc.)
             existingMap.set(key, avail);
           });
@@ -1373,10 +1403,10 @@ export function ChangeBookingFlow({
           const existingCache = availabilitiesCache.get(cacheKey);
           const existingAvailabilities = existingCache?.availabilities ?? [];
           const mergedAvailabilitiesMap = new Map(
-            existingAvailabilities.map((a) => [`${a.dateTime}-${a.productOptionId}`, a])
+            existingAvailabilities.map((a) => [getAvailabilityCacheKey(a), a])
           );
           allFetchedAvailabilities.forEach((a) => {
-            mergedAvailabilitiesMap.set(`${a.dateTime}-${a.productOptionId}`, a);
+            mergedAvailabilitiesMap.set(getAvailabilityCacheKey(a), a);
           });
           const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
           results.forEach((r) => {
@@ -1424,7 +1454,7 @@ export function ChangeBookingFlow({
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
-    selectedDate,
+    selectedDateRangeExtensionKey,
     appliedPromoCode,
     pricingProfileIdForAvailabilities,
     cancellationPolicyProfileIdForAvailabilities,
@@ -1622,7 +1652,7 @@ export function ChangeBookingFlow({
       timesForSelectedDate
         .map(
           (avail) =>
-            `${avail.dateTime}|${avail.productOptionId ?? ''}|${avail.vacancies ?? 0}`,
+            `${avail.dateTime}|${getAvailabilityOptionId(avail)}|${avail.vacancies ?? 0}`,
         )
         .join('||'),
     [timesForSelectedDate],
@@ -2054,7 +2084,9 @@ export function ChangeBookingFlow({
   const calculateStaySummary = useCallback((returnDateTime: Date): string | null => {
     if (!selectedAvailability) return null;
     
-    const availabilityProductOptionId = selectedAvailability.productOptionId || activeOptions[0]?.optionId;
+    const availabilityProductOptionId =
+      getAvailabilityOptionId(selectedAvailability) ||
+      (activeOptions.length === 1 ? activeOptions[0]?.optionId : undefined);
     const selectedOption = activeOptions.find(opt => opt.optionId === availabilityProductOptionId);
     if (!selectedOption) return null;
     
@@ -2130,7 +2162,9 @@ export function ChangeBookingFlow({
   // Helper function to compute itinerary display for storage (returns same shape as "Your Itinerary" box)
   const computeItineraryDisplay = useCallback((): ItineraryDisplayStep[] | null => {
     if (!selectedAvailability) return null;
-    const availabilityProductOptionId = selectedAvailability.productOptionId || activeOptions[0]?.optionId;
+    const availabilityProductOptionId =
+      getAvailabilityOptionId(selectedAvailability) ||
+      (activeOptions.length === 1 ? activeOptions[0]?.optionId : undefined);
     const selectedOption = activeOptions.find(opt => opt.optionId === availabilityProductOptionId);
     if (!selectedOption) return null;
     const tourStartTime = parseISO(selectedAvailability.dateTime);
@@ -2369,13 +2403,13 @@ export function ChangeBookingFlow({
     const selectedMs = parseAvailabilityDateTime(selectedAvailability.dateTime).getTime();
     const initialMs = parseAvailabilityDateTime(initialValues.dateTime).getTime();
     if (selectedMs !== initialMs) return false;
-    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(getAvailabilityOptionId(selectedAvailability));
     const initialOpt = changeFlowResolvedInitialProductOptionId;
     if (selectedOpt != null && initialOpt != null) {
       return selectedOpt === initialOpt;
     }
     const legacyInitial = initialValues.productOptionId?.trim() || null;
-    const legacySelected = selectedAvailability.productOptionId?.trim() || null;
+    const legacySelected = getAvailabilityOptionId(selectedAvailability) || null;
     return !legacySelected || !legacyInitial || legacySelected === legacyInitial;
   }, [
     selectedAvailability,
@@ -2402,13 +2436,13 @@ export function ChangeBookingFlow({
       return false;
     }
     if (!selectedDate || selectedDate !== initialDay) return false;
-    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(getAvailabilityOptionId(selectedAvailability));
     const initialOpt = changeFlowResolvedInitialProductOptionId;
     if (selectedOpt != null && initialOpt != null) {
       return selectedOpt === initialOpt;
     }
     const legacyInitial = initialValues.productOptionId?.trim() || null;
-    const legacySelected = selectedAvailability.productOptionId?.trim() || null;
+    const legacySelected = getAvailabilityOptionId(selectedAvailability) || null;
     return Boolean(legacySelected && legacyInitial && legacySelected === legacyInitial);
   }, [
     selectedDate,
@@ -2605,7 +2639,9 @@ export function ChangeBookingFlow({
   // Price breakdown: mid-layer returns line items (base + one per rule/deal). UI renders each line; rate in brackets when used.
   const getPriceBreakdown = useCallback((category: string, priceCAD: number, baseInDisplayCurrency: number | undefined, appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }> = []): PriceBreakdownData | null => {
     if (!pricingConfig) return null;
-    const selectedOption = activeOptions.find(opt => opt.optionId === selectedAvailability?.productOptionId);
+    const selectedOption = activeOptions.find(
+      opt => opt.optionId === (selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '')
+    );
     const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
     const isPublicMode = isSimplifiedPricingView;
     return computePriceBreakdown(
@@ -3037,7 +3073,7 @@ export function ChangeBookingFlow({
     if (!appliedPromoCode || !selectedAvailability || totalQuantity === 0) return '';
     const companyId = product.companyId ?? env.COMPANY_ID;
     if (!companyId) return '';
-    const optionId = selectedAvailability.productOptionId;
+    const optionId = getAvailabilityOptionId(selectedAvailability);
     if (!optionId || !quantitiesSignature) return '';
     return [
       appliedPromoCode,
@@ -3054,7 +3090,7 @@ export function ChangeBookingFlow({
   }, [
     appliedPromoCode,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.availabilityId,
     totalQuantity,
     product.companyId,
@@ -3097,7 +3133,7 @@ export function ChangeBookingFlow({
       } = promoDiscountParamsRef.current;
       if (!code || !sel) return;
       const companyId = product.companyId ?? env.COMPANY_ID;
-      const optionId = sel.productOptionId;
+      const optionId = getAvailabilityOptionId(sel);
       if (!companyId || !optionId) return;
       const items = lines.map((l) => ({ category: l.category, qty: l.qty }));
       if (items.length === 0) return;
@@ -3240,7 +3276,7 @@ export function ChangeBookingFlow({
     const initialOpt =
       changeFlowResolvedInitialProductOptionId ??
       (initialValues.productOptionId?.trim() || null);
-    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(getAvailabilityOptionId(selectedAvailability));
     const optionChanged = Boolean(
       selectedOpt != null && initialOpt != null && initialOpt !== selectedOpt
     );
@@ -3608,8 +3644,7 @@ export function ChangeBookingFlow({
       return;
     }
 
-    const optionId =
-      selectedAvailability.productOptionId?.trim() || activeOptions[0]?.optionId;
+    const optionId = getAvailabilityOptionId(selectedAvailability);
     if (!optionId) {
       setLatestChangeQuote(null);
       setChangeQuoteLoading(false);
@@ -3683,7 +3718,7 @@ export function ChangeBookingFlow({
     hasChangeSelection,
     selectedAvailability,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.bookingReference,
     lastName,
     missingRequiredReturnSelection,
@@ -3742,7 +3777,7 @@ export function ChangeBookingFlow({
 
       const mostPopularOption = activeOptions.find(opt => opt.mostPopular);
       const candidate = mostPopularOption
-        ? timesForSelectedDate.find(avail => avail.productOptionId === mostPopularOption.optionId && avail.vacancies > 0)
+        ? timesForSelectedDate.find(avail => getAvailabilityOptionId(avail) === mostPopularOption.optionId && avail.vacancies > 0)
         : null;
       const fallback = timesForSelectedDate.find(avail => avail.vacancies > 0);
       const toSelect = candidate ?? fallback;
@@ -3768,9 +3803,9 @@ export function ChangeBookingFlow({
   useEffect(() => {
     if (selectedAvailability && availabilities.length > 0) {
       const updatedAvailability = availabilities.find(
-        avail =>
+          avail =>
           avail.dateTime === selectedAvailability.dateTime &&
-          avail.productOptionId === selectedAvailability.productOptionId
+          getAvailabilityOptionId(avail) === getAvailabilityOptionId(selectedAvailability)
       );
       if (updatedAvailability) {
         setSelectedAvailability(updatedAvailability);
@@ -3801,7 +3836,7 @@ export function ChangeBookingFlow({
     setImplicitReturnBaselineId(null);
   }, [
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.returnAvailabilityId,
     initialValues?.returnDateTime,
   ]);
@@ -3873,7 +3908,7 @@ export function ChangeBookingFlow({
   ]);
 
   // Fetch add-ons when availability (product option) is selected; clear selections when option changes
-  const availabilityProductOptionId = selectedAvailability?.productOptionId ?? null;
+  const availabilityProductOptionId = selectedAvailability ? getAvailabilityOptionId(selectedAvailability) || null : null;
   const prevAvailabilityProductOptionIdRef = useRef<string | null>(null);
   useEffect(() => {
     if (!availabilityProductOptionId || !product.companyId) {
@@ -3893,7 +3928,7 @@ export function ChangeBookingFlow({
     if (date === selectedDate) return;
     if (selectedAvailability) {
       changeFlowOutboundAnchorRef.current = {
-        productOptionId: selectedAvailability.productOptionId ?? null,
+        productOptionId: getAvailabilityOptionId(selectedAvailability) || null,
         minutesFromMidnight: getMinutesFromMidnightInTimezone(
           selectedAvailability.dateTime,
           companyTimezone
@@ -4030,8 +4065,8 @@ export function ChangeBookingFlow({
     [selectedAvailability]
   );
   const selectedAvailabilityKey = useMemo(
-    () => `${selectedAvailability?.dateTime ?? ''}::${selectedAvailability?.productOptionId ?? ''}`,
-    [selectedAvailability?.dateTime, selectedAvailability?.productOptionId]
+    () => `${selectedAvailability?.dateTime ?? ''}::${selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : ''}`,
+    [selectedAvailability]
   );
   // Remember where promo was successfully applied to avoid self-clearing on same selection.
   const promoAppliedSelectionKeyRef = useRef<string | null>(null);
@@ -4183,8 +4218,7 @@ export function ChangeBookingFlow({
         .map(([category, count]) => ({ category, count }));
 
       // Get the productOptionId from the selected availability (we tagged it when fetching)
-      const availabilityProductOptionId = selectedAvailability.productOptionId 
-        || activeOptions[0]?.optionId;
+      const availabilityProductOptionId = getAvailabilityOptionId(selectedAvailability);
       
       if (!availabilityProductOptionId) {
         setError('No product option selected');