@ticketboothapp/booking 1.2.103 → 1.2.105

package/package.json

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

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -333,18 +333,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. */
@@ -358,7 +370,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) =>
@@ -376,11 +388,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,
@@ -388,8 +406,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) => {
@@ -974,6 +992,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);
@@ -1273,10 +1299,10 @@ export function AdminChangeBookingFlow({
     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;
@@ -1303,16 +1329,17 @@ export function AdminChangeBookingFlow({
           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) => {
@@ -1427,11 +1454,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 +1474,7 @@ export function AdminChangeBookingFlow({
             activeOptionIdsKey,
             appliedPromoCode,
             pricingProfileIdForAvailabilities,
+            cancellationPolicyProfileIdForAvailabilities,
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
@@ -1588,12 +1616,12 @@ export function AdminChangeBookingFlow({
         // 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);
           });
@@ -1622,10 +1650,10 @@ export function AdminChangeBookingFlow({
           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) => {
@@ -1673,7 +1701,7 @@ export function AdminChangeBookingFlow({
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
-    selectedDate,
+    selectedDateRangeExtensionKey,
     appliedPromoCode,
     pricingProfileIdForAvailabilities,
     cancellationPolicyProfileIdForAvailabilities,
@@ -1871,7 +1899,7 @@ export function AdminChangeBookingFlow({
       timesForSelectedDate
         .map(
           (avail) =>
-            `${avail.dateTime}|${avail.productOptionId ?? ''}|${avail.vacancies ?? 0}`,
+            `${avail.dateTime}|${getAvailabilityOptionId(avail)}|${avail.vacancies ?? 0}`,
         )
         .join('||'),
     [timesForSelectedDate],
@@ -2305,7 +2333,9 @@ export function AdminChangeBookingFlow({
   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;
     
@@ -2381,7 +2411,9 @@ export function AdminChangeBookingFlow({
   // 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);
@@ -2620,13 +2652,13 @@ export function AdminChangeBookingFlow({
     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,
@@ -2653,13 +2685,13 @@ export function AdminChangeBookingFlow({
       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,
@@ -2856,7 +2888,9 @@ export function AdminChangeBookingFlow({
   // 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(
@@ -3332,7 +3366,7 @@ export function AdminChangeBookingFlow({
     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,
@@ -3349,7 +3383,7 @@ export function AdminChangeBookingFlow({
   }, [
     appliedPromoCode,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.availabilityId,
     totalQuantity,
     product.companyId,
@@ -3392,7 +3426,7 @@ export function AdminChangeBookingFlow({
       } = 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;
@@ -3792,7 +3826,7 @@ export function AdminChangeBookingFlow({
     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
     );
@@ -3923,7 +3957,7 @@ export function AdminChangeBookingFlow({
     bookingReference: initialValues?.bookingReference?.trim() ?? '',
     lastName: lastName.trim().toLowerCase(),
     parentProductId: product.productId,
-    optionId: selectedAvailability?.productOptionId?.trim() || activeOptions[0]?.optionId || '',
+    optionId: selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     dateTime: selectedAvailability?.dateTime ?? '',
     availabilityId: selectedAvailability?.availabilityId ?? null,
     pickupLocationId: pickupLocationId ?? null,
@@ -3938,7 +3972,7 @@ export function AdminChangeBookingFlow({
     initialValues?.bookingReference,
     lastName,
     product.productId,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.dateTime,
     selectedAvailability?.availabilityId,
     activeOptions,
@@ -4496,8 +4530,7 @@ export function AdminChangeBookingFlow({
       return;
     }
 
-    const optionId =
-      selectedAvailability.productOptionId?.trim() || activeOptions[0]?.optionId;
+    const optionId = getAvailabilityOptionId(selectedAvailability);
     if (!optionId) {
       setLatestChangeQuote(null);
       setChangeQuoteLoading(false);
@@ -4595,7 +4628,7 @@ export function AdminChangeBookingFlow({
     hasChangeSelection,
     selectedAvailability,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.bookingReference,
     lastName,
     missingRequiredReturnSelection,
@@ -4661,7 +4694,7 @@ export function AdminChangeBookingFlow({
 
       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;
@@ -4687,9 +4720,9 @@ export function AdminChangeBookingFlow({
   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);
@@ -4720,7 +4753,7 @@ export function AdminChangeBookingFlow({
     setImplicitReturnBaselineId(null);
   }, [
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.returnAvailabilityId,
     initialValues?.returnDateTime,
   ]);
@@ -4808,7 +4841,7 @@ export function AdminChangeBookingFlow({
   }, [selectedAvailability?.returnOptions, selectedReturnOption]);
 
   // 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) {
@@ -4828,7 +4861,7 @@ export function AdminChangeBookingFlow({
     if (date === selectedDate) return;
     if (selectedAvailability) {
       changeFlowOutboundAnchorRef.current = {
-        productOptionId: selectedAvailability.productOptionId ?? null,
+        productOptionId: getAvailabilityOptionId(selectedAvailability) || null,
         minutesFromMidnight: getMinutesFromMidnightInTimezone(
           selectedAvailability.dateTime,
           companyTimezone
@@ -4965,8 +4998,8 @@ export function AdminChangeBookingFlow({
     [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);
@@ -5121,8 +5154,7 @@ export function AdminChangeBookingFlow({
         .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');
@@ -5657,8 +5689,7 @@ export function AdminChangeBookingFlow({
           .map(([category, count]) => ({ category, count }));
         const availabilityProductOptionId =
           adminChoiceData.availabilityProductOptionId ||
-          selectedAvailability.productOptionId ||
-          activeOptions[0]?.optionId;
+          getAvailabilityOptionId(selectedAvailability);
         if (!availabilityProductOptionId) {
           setError('No product option selected');
           setLoading(false);