@ticketboothapp/booking 1.2.104 → 1.2.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.104",
+  "version": "1.2.106",
   "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) => {
@@ -1281,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;
@@ -1318,10 +1336,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) => {
@@ -1598,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);
           });
@@ -1632,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) => {
@@ -1881,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],
@@ -2315,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;
     
@@ -2391,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);
@@ -2630,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,
@@ -2663,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,
@@ -2866,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(
@@ -3342,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,
@@ -3359,7 +3383,7 @@ export function AdminChangeBookingFlow({
   }, [
     appliedPromoCode,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.availabilityId,
     totalQuantity,
     product.companyId,
@@ -3402,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;
@@ -3802,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
     );
@@ -3933,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,
@@ -3948,7 +3972,7 @@ export function AdminChangeBookingFlow({
     initialValues?.bookingReference,
     lastName,
     product.productId,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.dateTime,
     selectedAvailability?.availabilityId,
     activeOptions,
@@ -4506,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);
@@ -4605,7 +4628,7 @@ export function AdminChangeBookingFlow({
     hasChangeSelection,
     selectedAvailability,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.bookingReference,
     lastName,
     missingRequiredReturnSelection,
@@ -4671,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;
@@ -4697,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);
@@ -4730,7 +4753,7 @@ export function AdminChangeBookingFlow({
     setImplicitReturnBaselineId(null);
   }, [
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.returnAvailabilityId,
     initialValues?.returnDateTime,
   ]);
@@ -4818,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) {
@@ -4838,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
@@ -4975,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);
@@ -5131,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');
@@ -5667,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);

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) => {
@@ -1033,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;
@@ -1070,10 +1088,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) => {
@@ -1351,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);
           });
@@ -1385,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) => {
@@ -1634,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],
@@ -2066,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;
     
@@ -2142,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);
@@ -2381,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,
@@ -2414,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,
@@ -2617,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(
@@ -3049,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,
@@ -3066,7 +3090,7 @@ export function ChangeBookingFlow({
   }, [
     appliedPromoCode,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.availabilityId,
     totalQuantity,
     product.companyId,
@@ -3109,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;
@@ -3252,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
     );
@@ -3620,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);
@@ -3695,7 +3718,7 @@ export function ChangeBookingFlow({
     hasChangeSelection,
     selectedAvailability,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.bookingReference,
     lastName,
     missingRequiredReturnSelection,
@@ -3754,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;
@@ -3780,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);
@@ -3813,7 +3836,7 @@ export function ChangeBookingFlow({
     setImplicitReturnBaselineId(null);
   }, [
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     initialValues?.returnAvailabilityId,
     initialValues?.returnDateTime,
   ]);
@@ -3885,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) {
@@ -3905,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
@@ -4042,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);
@@ -4195,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');

package/src/components/booking/NewBookingFlow.tsx

@@ -158,22 +158,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 availabilityWithOptionId(availability: Availability, fallbackOptionId?: string): Availability {
-  const productOptionId = availability.productOptionId || availability.productId || fallbackOptionId;
+  const productOptionId = getAvailabilityOptionId(availability, fallbackOptionId);
   return productOptionId ? { ...availability, productOptionId } : availability;
 }
 
@@ -195,11 +203,15 @@ function mergeAvailabilitiesIntoMap(
   availabilities: Availability[],
 ): void {
   for (const availability of availabilities) {
-    const key = `${availability.dateTime}-${availability.productOptionId}`;
+    const key = getAvailabilityCacheKey(availability);
     map.set(key, mergeAvailabilityRecord(map.get(key), availability));
   }
 }
 
+function getAvailabilityCacheKey(availability: Availability): string {
+  return `${availability.dateTime}-${getAvailabilityOptionId(availability)}`;
+}
+
 function pickDefaultAvailabilityForTimes(
   times: Availability[],
   activeOptions: Product['options'],
@@ -208,7 +220,7 @@ function pickDefaultAvailabilityForTimes(
   const mostPopularOption = activeOptions.find((opt) => opt.mostPopular);
   const candidate = mostPopularOption
     ? times.find(
-        (avail) => avail.productOptionId === mostPopularOption.optionId && avail.vacancies > 0,
+        (avail) => getAvailabilityOptionId(avail) === mostPopularOption.optionId && avail.vacancies > 0,
       )
     : null;
   const fallback = times.find((avail) => avail.vacancies > 0);
@@ -271,7 +283,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) =>
@@ -289,11 +301,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,
@@ -301,8 +319,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) => {
@@ -708,9 +726,7 @@ export function NewBookingFlow({
 
     let mergedOut: Availability[] = [];
     setAvailabilities((prev) => {
-      const existingMap = new Map(
-        prev.map((avail) => [`${avail.dateTime}-${avail.productOptionId}`, avail])
-      );
+      const existingMap = new Map(prev.map((avail) => [getAvailabilityCacheKey(avail), avail]));
       mergeAvailabilitiesIntoMap(existingMap, allFetchedAvailabilities);
       mergedOut = Array.from(existingMap.values());
       return mergedOut;
@@ -744,7 +760,7 @@ export function NewBookingFlow({
       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])
       );
       mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
       const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
@@ -828,7 +844,7 @@ export function NewBookingFlow({
 
     let mergedOut: Availability[] = [];
     setAvailabilities((prev) => {
-      const merged = new Map(prev.map((availability) => [`${availability.dateTime}-${availability.productOptionId}`, availability]));
+      const merged = new Map(prev.map((availability) => [getAvailabilityCacheKey(availability), availability]));
       mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
       mergedOut = Array.from(merged.values());
       return mergedOut;
@@ -847,7 +863,7 @@ export function NewBookingFlow({
       const existingCache = availabilitiesCache.get(cacheKey);
       const mergedAvailabilities = new Map(
         (existingCache?.availabilities ?? []).map((availability) => [
-          `${availability.dateTime}-${availability.productOptionId}`,
+          getAvailabilityCacheKey(availability),
           availability,
         ])
       );
@@ -1083,7 +1099,7 @@ export function NewBookingFlow({
         // 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
@@ -1112,7 +1128,7 @@ export function NewBookingFlow({
           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])
           );
           mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
           const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
@@ -1294,7 +1310,7 @@ export function NewBookingFlow({
         });
 
         setAvailabilities((prev) => {
-          const merged = new Map(prev.map((availability) => [`${availability.dateTime}-${availability.productOptionId}`, availability]));
+          const merged = new Map(prev.map((availability) => [getAvailabilityCacheKey(availability), availability]));
           mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
           return Array.from(merged.values());
         });
@@ -1322,7 +1338,7 @@ export function NewBookingFlow({
           const existingCache = availabilitiesCache.get(cacheKey);
           const mergedAvailabilities = new Map(
             (existingCache?.availabilities ?? []).map((availability) => [
-              `${availability.dateTime}-${availability.productOptionId}`,
+              getAvailabilityCacheKey(availability),
               availability,
             ])
           );
@@ -1507,7 +1523,7 @@ export function NewBookingFlow({
       timesForSelectedDate
         .map(
           (avail) =>
-            `${avail.dateTime}|${avail.productOptionId ?? ''}|${avail.vacancies ?? 0}`,
+            `${avail.dateTime}|${getAvailabilityOptionId(avail)}|${avail.vacancies ?? 0}`,
         )
         .join('||'),
     [timesForSelectedDate],
@@ -1694,7 +1710,9 @@ export function NewBookingFlow({
   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;
     
@@ -1770,7 +1788,9 @@ export function NewBookingFlow({
   // 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);
@@ -1940,7 +1960,7 @@ export function NewBookingFlow({
   // 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(
@@ -2163,7 +2183,7 @@ export function NewBookingFlow({
     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,
@@ -2179,7 +2199,7 @@ export function NewBookingFlow({
   }, [
     appliedPromoCode,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.availabilityId,
     totalQuantity,
     product.companyId,
@@ -2375,9 +2395,9 @@ export function NewBookingFlow({
   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 && shouldSyncSelectedAvailability(selectedAvailability, updatedAvailability)) {
         setSelectedAvailability(updatedAvailability);
@@ -2435,7 +2455,7 @@ export function NewBookingFlow({
   ]);
 
   // 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) {
@@ -2564,8 +2584,8 @@ export function NewBookingFlow({
     [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);
@@ -2756,8 +2776,7 @@ export function NewBookingFlow({
         .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');

package/src/components/booking/PickupLocationSelector.tsx

@@ -251,6 +251,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   const [mapZoom, setMapZoom] = useState(DEFAULT_MAP_ZOOM);
   const [showSkipWarning, setShowSkipWarning] = useState(false);
   const [dontKnowFilterActive, setDontKnowFilterActive] = useState(false);
+  const [mapsAuthError, setMapsAuthError] = useState(false);
   const mapRef = useRef<google.maps.Map | null>(null);
   const highlightedPickupLocationIdSet = useMemo(
     () => new Set(highlightIds),
@@ -285,8 +286,26 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     googleMapsApiKey,
     libraries,
   });
+  const canUseMap = isLoaded && !loadError && !mapsAuthError;
 
   // ============ Effects ============
+
+  useEffect(() => {
+    const mapsWindow = window as typeof window & { gm_authFailure?: () => void };
+    const previousAuthFailure = mapsWindow.gm_authFailure;
+
+    const handleAuthFailure = () => {
+      setMapsAuthError(true);
+      previousAuthFailure?.();
+    };
+    mapsWindow.gm_authFailure = handleAuthFailure;
+
+    return () => {
+      if (mapsWindow.gm_authFailure === handleAuthFailure) {
+        mapsWindow.gm_authFailure = previousAuthFailure;
+      }
+    };
+  }, []);
   
   // Apply filter pills to pickup locations
   const filteredPickupLocations = useMemo(() => {
@@ -868,16 +887,20 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
 
   // ============ Render ============
   
-  if (loadError) {
-    return (
-      <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
-        Error loading Google Maps. Please check your API key.
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-3">
+      {loadError && (
+        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 text-sm">
+          Google Maps could not load. You can still select a pickup location from the list below.
+        </div>
+      )}
+
+      {mapsAuthError && (
+        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 text-sm">
+          Google Maps is not authorized for this website. You can still select a pickup location from the list below.
+        </div>
+      )}
+
       {!hideTitle && (
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold text-stone-900">
@@ -1038,7 +1061,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       </div>
 
       {/* Filter Pills + I don't know pill - horizontal scroll on mobile */}
-      {isLoaded && pickupLocations.length > 0 && (
+      {pickupLocations.length > 0 && (
         <div className={styles.filterPillsScroll}>
         <FilterPills
               pickupLocations={pickupLocations}
@@ -1112,7 +1135,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       )}
 
       {/* Two-column layout: list left, map right - list height matches map */}
-      {isLoaded && pickupLocations.length > 0 && (
+      {pickupLocations.length > 0 && (
           <div className={styles.twoColLayout}>
             {/* Left column: scrollable list of pickup locations + I don't know */}
             <div className={styles.leftColumn}>
@@ -1235,13 +1258,14 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
             {/* Right column: map */}
             <div className={styles.rightColumn}>
             <div className={styles.mapWrapper}>
-            <GoogleMap
-              mapContainerClassName="w-full h-full rounded-lg overflow-hidden"
-              center={mapCenter}
-              zoom={mapZoom}
-              options={mapOptions}
-              onLoad={onMapLoad}
-            >
+            {canUseMap ? (
+              <GoogleMap
+                mapContainerClassName="w-full h-full rounded-lg overflow-hidden"
+                center={mapCenter}
+                zoom={mapZoom}
+                options={mapOptions}
+                onLoad={onMapLoad}
+              >
               {/* Markers for filtered locations */}
               {nearbyLocations.map((location) => {
                 if (!location.coordinates) return null;
@@ -1480,7 +1504,12 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                   cursor="default"
                 />
               ))}
-            </GoogleMap>
+              </GoogleMap>
+            ) : (
+              <div className="h-full min-h-[280px] flex items-center justify-center rounded-lg bg-stone-50 border border-stone-200 p-4 text-center text-sm text-stone-600">
+                Google Maps is unavailable right now. The pickup list is still available.
+              </div>
+            )}
             </div>
             </div>
           </div>

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -130,7 +130,7 @@ function findMergedPrivateShuttleAvailability(
   tz: string
 ): Availability | undefined {
   if (!sel || !optionId || !selectedDateStr) return undefined;
-  const oidMatches = (a: Availability) => (a.productOptionId ?? a.productId) === optionId;
+  const oidMatches = (a: Availability) => getPrivateShuttleAvailabilityOptionId(a) === optionId;
   const availId = sel.availabilityId?.trim();
   if (availId) {
     const hit = merged.find((a) => a.availabilityId === availId && oidMatches(a));
@@ -146,6 +146,40 @@ function findMergedPrivateShuttleAvailability(
   return onDay[0];
 }
 
+function getPrivateShuttleAvailabilityOptionId(availability: Availability): string {
+  const productOptionId = availability.productOptionId?.trim();
+  if (productOptionId) return productOptionId;
+  const productId = availability.productId?.trim();
+  return productId?.startsWith('po_') ? productId : '';
+}
+
+function getPrivateShuttleAvailabilityCacheKey(availability: Availability): string {
+  return `${availability.dateTime}-${getPrivateShuttleAvailabilityOptionId(availability)}`;
+}
+
+function getResourceRate(availability: Availability | undefined | null) {
+  return availability?.rates?.find((r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE');
+}
+
+function applyResourceAdjustments(
+  basePrice: number,
+  availability: Availability | undefined | null,
+  currency: Currency
+): number {
+  const resourceRate = getResourceRate(availability);
+  const adjustmentTotal =
+    resourceRate?.appliedAdjustments?.reduce(
+      (sum, adjustment) => sum + (adjustment.changeByCurrency?.[currency] ?? 0),
+      0
+    ) ??
+    resourceRate?.applied_adjustments?.reduce(
+      (sum, adjustment) => sum + (adjustment.changeByCurrency?.[currency] ?? 0),
+      0
+    ) ??
+    0;
+  return basePrice + adjustmentTotal;
+}
+
 export function PrivateShuttleBookingFlow({
   product,
   productId,
@@ -394,11 +428,9 @@ export function PrivateShuttleBookingFlow({
 
     let mergedAvailabilities: Availability[] = [];
     setAvailabilities((prev) => {
-      const existingMap = new Map(
-        prev.map((avail) => [`${avail.dateTime}-${avail.productId || avail.productOptionId}`, avail])
-      );
+      const existingMap = new Map(prev.map((avail) => [getPrivateShuttleAvailabilityCacheKey(avail), avail]));
       result.availabilities.forEach((avail) => {
-        existingMap.set(`${avail.dateTime}-${avail.productId || avail.productOptionId}`, avail);
+        existingMap.set(getPrivateShuttleAvailabilityCacheKey(avail), avail);
       });
       mergedAvailabilities = Array.from(existingMap.values());
       return mergedAvailabilities;
@@ -476,11 +508,9 @@ export function PrivateShuttleBookingFlow({
 
     let mergedAvailabilities: Availability[] = [];
     setAvailabilities((prev) => {
-      const existingMap = new Map(
-        prev.map((avail) => [`${avail.dateTime}-${avail.productId || avail.productOptionId}`, avail])
-      );
+      const existingMap = new Map(prev.map((avail) => [getPrivateShuttleAvailabilityCacheKey(avail), avail]));
       result.availabilities.forEach((avail) => {
-        existingMap.set(`${avail.dateTime}-${avail.productId || avail.productOptionId}`, avail);
+        existingMap.set(getPrivateShuttleAvailabilityCacheKey(avail), avail);
       });
       mergedAvailabilities = Array.from(existingMap.values());
       return mergedAvailabilities;
@@ -498,12 +528,12 @@ export function PrivateShuttleBookingFlow({
       const existingCache = availabilitiesCache.get(cacheKey);
       const mergedAvailabilitiesMap = new Map(
         (existingCache?.availabilities ?? []).map((availability) => [
-          `${availability.dateTime}-${availability.productId || availability.productOptionId}`,
+          getPrivateShuttleAvailabilityCacheKey(availability),
           availability,
         ])
       );
       result.availabilities.forEach((availability) => {
-        mergedAvailabilitiesMap.set(`${availability.dateTime}-${availability.productId || availability.productOptionId}`, availability);
+        mergedAvailabilitiesMap.set(getPrivateShuttleAvailabilityCacheKey(availability), availability);
       });
       availabilitiesCache.merge(cacheKey, {
         fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
@@ -687,13 +717,12 @@ export function PrivateShuttleBookingFlow({
           if (existing.length === 0) return result.availabilities;
           const existingMap = new Map(
             existing.map((avail) => [
-              `${avail.dateTime}-${avail.productId || avail.productOptionId}`,
+              getPrivateShuttleAvailabilityCacheKey(avail),
               avail,
             ])
           );
           result.availabilities.forEach((avail) => {
-            const key = `${avail.dateTime}-${avail.productId || avail.productOptionId}`;
-            existingMap.set(key, avail);
+            existingMap.set(getPrivateShuttleAvailabilityCacheKey(avail), avail);
           });
           return Array.from(existingMap.values());
         })();
@@ -779,9 +808,7 @@ export function PrivateShuttleBookingFlow({
   const optionsAvailableForSelectedDate = useMemo(() => {
     if (!selectedDate) return [];
     const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
-    const optionIds = new Set(
-      dateAvailabilities.map((a) => a.productId || a.productOptionId).filter(Boolean)
-    );
+    const optionIds = new Set(dateAvailabilities.map(getPrivateShuttleAvailabilityOptionId).filter(Boolean));
     return activeOptions.filter((opt) => optionIds.has(opt.optionId));
   }, [selectedDate, availabilitiesByDate, activeOptions]);
 
@@ -819,12 +846,12 @@ export function PrivateShuttleBookingFlow({
         setAvailabilities((prev) => {
           const merged = new Map(
             prev.map((availability) => [
-              `${availability.dateTime}-${availability.productId || availability.productOptionId}`,
+              getPrivateShuttleAvailabilityCacheKey(availability),
               availability,
             ])
           );
           result.availabilities.forEach((availability) => {
-            merged.set(`${availability.dateTime}-${availability.productId || availability.productOptionId}`, availability);
+            merged.set(getPrivateShuttleAvailabilityCacheKey(availability), availability);
           });
           return Array.from(merged.values());
         });
@@ -841,12 +868,12 @@ export function PrivateShuttleBookingFlow({
           const existingCache = availabilitiesCache.get(cacheKey);
           const mergedAvailabilities = new Map(
             (existingCache?.availabilities ?? []).map((availability) => [
-              `${availability.dateTime}-${availability.productId || availability.productOptionId}`,
+              getPrivateShuttleAvailabilityCacheKey(availability),
               availability,
             ])
           );
           result.availabilities.forEach((availability) => {
-            mergedAvailabilities.set(`${availability.dateTime}-${availability.productId || availability.productOptionId}`, availability);
+            mergedAvailabilities.set(getPrivateShuttleAvailabilityCacheKey(availability), availability);
           });
           availabilitiesCache.merge(cacheKey, {
             fetchedRanges: existingCache?.fetchedRanges ?? fetchedRangesRef.current,
@@ -898,22 +925,25 @@ export function PrivateShuttleBookingFlow({
 
   const getOptionPrice = useCallback(
     (optionId: string) => {
+      const opt = activeOptions.find((o) => o.optionId === optionId);
       const dateAvailabilities = selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
       const avail = dateAvailabilities.find(
-        (a) => (a.productId || a.productOptionId) === optionId
+        (a) => getPrivateShuttleAvailabilityOptionId(a) === optionId
       );
+      const profileOptionPrice = resourcePriceByOption?.[optionId]?.[currency];
+      if (profileOptionPrice != null) {
+        return applyResourceAdjustments(profileOptionPrice, avail, currency);
+      }
+      if (currency === 'CAD' && opt?.pricing?.['RESOURCE'] != null) {
+        return applyResourceAdjustments(opt.pricing['RESOURCE'], avail, currency);
+      }
       if (avail?.rates) {
-        const resourceRate = avail.rates.find(
-          (r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE'
-        );
+        const resourceRate = getResourceRate(avail);
         if (resourceRate?.priceByCurrency?.[currency] != null)
           return resourceRate.priceByCurrency[currency];
         if (currency === 'CAD' && resourceRate?.price != null) return resourceRate.price;
       }
-      if (resourcePriceByOption?.[optionId]?.[currency] != null)
-        return resourcePriceByOption[optionId][currency];
-      if (resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
-      const opt = activeOptions.find((o) => o.optionId === optionId);
+      if (currency === 'CAD' && resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
       return opt?.pricing?.['RESOURCE'] ?? 0;
     },
     [
@@ -927,10 +957,20 @@ export function PrivateShuttleBookingFlow({
   );
 
   const resourcePrice = useMemo(() => {
-    if (selectedAvailability?.rates) {
-      const resourceRate = selectedAvailability.rates.find(
-        (r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE'
+    const selectedProfileOptionPrice = selectedOption
+      ? resourcePriceByOption?.[selectedOption]?.[currency]
+      : undefined;
+    if (selectedProfileOptionPrice != null) {
+      return applyResourceAdjustments(selectedProfileOptionPrice, selectedAvailability, currency);
+    }
+    if (currency === 'CAD' && selectedOptionConfig?.pricing?.['RESOURCE'] != null)
+      return applyResourceAdjustments(
+        selectedOptionConfig.pricing['RESOURCE'],
+        selectedAvailability,
+        currency
       );
+    if (selectedAvailability?.rates) {
+      const resourceRate = getResourceRate(selectedAvailability);
       if (resourceRate) {
         const fromRate =
           resourceRate.priceByCurrency?.[currency] ??
@@ -938,12 +978,12 @@ export function PrivateShuttleBookingFlow({
         if (fromRate != null) return fromRate;
       }
     }
-    if (selectedOption && resourcePriceByOption?.[selectedOption]?.[currency] != null)
-      return resourcePriceByOption[selectedOption][currency];
-    if (resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
+    if (currency === 'CAD' && resourcePriceByCurrency?.[currency] != null) return resourcePriceByCurrency[currency];
     if (precomputedPrices?.['RESOURCE']?.[currency] != null)
       return precomputedPrices['RESOURCE'][currency];
-    return selectedOptionConfig?.pricing?.['RESOURCE'] ?? 0;
+    if (selectedOptionConfig?.pricing?.['RESOURCE'] != null)
+      return selectedOptionConfig.pricing['RESOURCE'];
+    return 0;
   }, [
     selectedAvailability,
     resourcePriceByOption,
@@ -1173,7 +1213,7 @@ export function PrivateShuttleBookingFlow({
       setSelectedOption(opt.optionId);
       const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
       const avail = dateAvailabilities.find(
-        (a) => (a.productId || a.productOptionId) === opt.optionId
+        (a) => getPrivateShuttleAvailabilityOptionId(a) === opt.optionId
       );
       setSelectedAvailability(avail || null);
     }
@@ -1231,7 +1271,7 @@ export function PrivateShuttleBookingFlow({
     if (selectedDate) {
       const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
       const avail = dateAvailabilities.find(
-        (a) => (a.productId || a.productOptionId) === optionId
+        (a) => getPrivateShuttleAvailabilityOptionId(a) === optionId
       );
       setSelectedAvailability(avail || null);
     } else {

package/src/lib/booking/pricing.ts

@@ -331,10 +331,14 @@ export function computePriceBreakdown(
 
   // Subtotal in display currency = base + adjustments; pass so final price is (subtotal + fees) * (1+tax) and breakdown adds up
   const subtotalInDisplayCurrency = baseAmount + adjustmentSum;
+  const backendPriceForDetails =
+    currency === BASE_CURRENCY && subtotalInDisplayCurrency > 0
+      ? subtotalInDisplayCurrency
+      : backendPriceCAD;
   const details = computeTicketPriceDetails(
     pricingConfig,
     currency,
-    backendPriceCAD,
+    backendPriceForDetails,
     hasFees,
     subtotalInDisplayCurrency > 0 ? subtotalInDisplayCurrency : baseInDisplayCurrency
   );