@ticketboothapp/booking 1.2.103 → 1.2.105

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) => {
@@ -493,8 +511,17 @@ export function NewBookingFlow({
   const inFlightRangeRef = useRef<{ start: Date; end: Date } | null>(null); // Range currently being fetched
   const fetchedRangesRef = useRef<Array<{ start: Date; end: Date }>>([]); // Track fetched date ranges
   const pendingRangeRef = useRef<{ start: Date; end: Date } | null>(null); // Range to fetch when current fetch completes (user navigated during fetch)
+  const selectedDateHydrationInFlightKeyRef = useRef<string | null>(null);
   const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
   const [selectedDate, setSelectedDate] = useState<string>('');
+  const selectedDateRangeExtensionKey = useMemo(() => {
+    if (!visibleRange || !selectedDate) return '';
+    try {
+      return isAfter(parseISO(selectedDate), visibleRange.end) ? selectedDate : '';
+    } catch {
+      return '';
+    }
+  }, [selectedDate, visibleRange]);
   const [isItinerarySticky, setIsItinerarySticky] = useState(false);
   const isItineraryStickyRef = useRef(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -699,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;
@@ -728,13 +753,14 @@ export function NewBookingFlow({
           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])
       );
       mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
       const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
@@ -818,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;
@@ -830,13 +856,14 @@ export function NewBookingFlow({
           activeOptionIdsKey,
           appliedPromoCode,
           pricingProfileIdForAvailabilities,
+          cancellationPolicyProfileIdForAvailabilities,
         )
       : null;
     if (cacheKey && availabilitiesCache) {
       const existingCache = availabilitiesCache.get(cacheKey);
       const mergedAvailabilities = new Map(
         (existingCache?.availabilities ?? []).map((availability) => [
-          `${availability.dateTime}-${availability.productOptionId}`,
+          getAvailabilityCacheKey(availability),
           availability,
         ])
       );
@@ -918,11 +945,11 @@ export function NewBookingFlow({
         ? endOfLatestDay
         : visibleRange.end;
       
-      // Ensure we include the selected date if it's after the visible range end
-      // This handles the case where user selects a date that's not yet in the visible range
-      if (selectedDate) {
+      // Include an externally seeded selected date only when it falls outside the current calendar window.
+      // Normal date clicks are already inside visibleRange and should not re-fetch the broad calendar summary.
+      if (selectedDateRangeExtensionKey) {
         try {
-          const selectedDateObj = parseISO(selectedDate);
+          const selectedDateObj = parseISO(selectedDateRangeExtensionKey);
           if (isAfter(selectedDateObj, clampedEnd)) {
             clampedEnd = selectedDateObj;
           }
@@ -938,6 +965,7 @@ export function NewBookingFlow({
             activeOptionIdsKey,
             appliedPromoCode,
             pricingProfileIdForAvailabilities,
+            cancellationPolicyProfileIdForAvailabilities,
           )
         : null;
       const cached = cacheKey ? availabilitiesCache!.get(cacheKey) : undefined;
@@ -1071,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
@@ -1100,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 ?? {}) };
@@ -1151,7 +1179,7 @@ export function NewBookingFlow({
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
-    selectedDate,
+    selectedDateRangeExtensionKey,
     appliedPromoCode,
     pricingProfileIdForAvailabilities,
     cancellationPolicyProfileIdForAvailabilities,
@@ -1213,8 +1241,19 @@ export function NewBookingFlow({
 
   useEffect(() => {
     if (!selectedDate || activeOptions.length === 0) return;
-    const selectedDateAvailabilities = availabilitiesByDate[selectedDate] ?? [];
-    if (!selectedDateAvailabilities.some((availability) => availability.isSummary)) return;
+    if (!selectedAvailability) return;
+    if (!availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone)) return;
+    if (selectedAvailability.isSummary !== true) return;
+    const hydrationKey = [
+      product.productId,
+      selectedDate,
+      activeOptionIdsKey,
+      appliedPromoCode ?? '',
+      pricingProfileIdForAvailabilities ?? '',
+      cancellationPolicyProfileIdForAvailabilities ?? '',
+    ].join('|');
+    if (selectedDateHydrationInFlightKeyRef.current === hydrationKey) return;
+    selectedDateHydrationInFlightKeyRef.current = hydrationKey;
 
     let cancelled = false;
     async function hydrateSelectedDateDetails() {
@@ -1235,6 +1274,7 @@ export function NewBookingFlow({
 
         const result = await getAvailabilities(product.productId, startDateStr, endDateStr, {
           allOptions: true,
+          responseMode: 'booking-day',
           promoCode: appliedPromoCode || undefined,
           ...(pricingProfileIdForAvailabilities
             ? { pricingProfileId: pricingProfileIdForAvailabilities }
@@ -1270,10 +1310,20 @@ 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());
         });
+        const updatedSelection = findMergedAvailabilityForSelection(detailedAvailabilities, selectedAvailability);
+        if (updatedSelection && selectedAvailability && shouldSyncSelectedAvailability(selectedAvailability, updatedSelection)) {
+          setSelectedAvailability(updatedSelection);
+          if (selectedReturnOption && updatedSelection.returnOptions) {
+            const updatedReturnOption = updatedSelection.returnOptions.find(
+              (option) => option.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
+            );
+            if (updatedReturnOption) setSelectedReturnOption(updatedReturnOption);
+          }
+        }
 
         const cacheKey = availabilitiesCache
           ? buildAvailabilitiesCacheKey(
@@ -1281,13 +1331,14 @@ export function NewBookingFlow({
               activeOptionIdsKey,
               appliedPromoCode,
               pricingProfileIdForAvailabilities,
+              cancellationPolicyProfileIdForAvailabilities,
             )
           : null;
         if (cacheKey && availabilitiesCache) {
           const existingCache = availabilitiesCache.get(cacheKey);
           const mergedAvailabilities = new Map(
             (existingCache?.availabilities ?? []).map((availability) => [
-              `${availability.dateTime}-${availability.productOptionId}`,
+              getAvailabilityCacheKey(availability),
               availability,
             ])
           );
@@ -1308,6 +1359,9 @@ export function NewBookingFlow({
           console.error('Error hydrating availability details:', err);
         }
       } finally {
+        if (selectedDateHydrationInFlightKeyRef.current === hydrationKey) {
+          selectedDateHydrationInFlightKeyRef.current = null;
+        }
         if (!cancelled) setIsFetchingMoreAvailabilities(false);
       }
     }
@@ -1318,8 +1372,9 @@ export function NewBookingFlow({
     };
   }, [
     selectedDate,
-    availabilitiesByDate,
-    activeOptions,
+    selectedAvailability,
+    selectedReturnOption,
+    activeOptions.length,
     activeOptionIdsKey,
     isPrivateShuttle,
     companyTimezone,
@@ -1468,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],
@@ -1478,6 +1533,8 @@ export function NewBookingFlow({
     if (!selectedAvailability || !selectedDate) return false;
     return availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone);
   }, [selectedAvailability, selectedDate, companyTimezone]);
+  const selectedBookingOptionsHydrating =
+    selectedAvailabilityMatchesDate && selectedAvailability?.isSummary === true;
 
   useEffect(() => {
     if (hasAppliedInitialValuesRef.current || !initialValues) return;
@@ -1653,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;
     
@@ -1729,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);
@@ -1899,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(
@@ -2122,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,
@@ -2138,7 +2199,7 @@ export function NewBookingFlow({
   }, [
     appliedPromoCode,
     selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
+    selectedAvailability ? getAvailabilityOptionId(selectedAvailability) : '',
     selectedAvailability?.availabilityId,
     totalQuantity,
     product.companyId,
@@ -2334,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);
@@ -2394,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) {
@@ -2523,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);
@@ -2715,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');
@@ -3478,7 +3538,15 @@ export function NewBookingFlow({
           )}
 
           {/* Select return time — wait for hydrated day details so summary refetches do not flash this block */}
-          {selectedAvailabilityMatchesDate &&
+          {selectedBookingOptionsHydrating && (
+            <div className="flex items-center justify-center gap-3 rounded-lg border border-stone-200 bg-white p-4 text-stone-600">
+              <div className="booking-loading-spinner" aria-hidden />
+              <div>{t('booking.loadingTimes')}</div>
+            </div>
+          )}
+
+          {!selectedBookingOptionsHydrating &&
+            selectedAvailabilityMatchesDate &&
             selectedAvailability &&
             !selectedAvailability.isSummary &&
             selectedAvailability.returnOptions &&
@@ -3502,7 +3570,7 @@ export function NewBookingFlow({
             />
           )}
 
-          {selectedDate && selectedAvailability && afterItinerary
+          {!selectedBookingOptionsHydrating && selectedDate && selectedAvailability && afterItinerary
             ? typeof afterItinerary === 'function'
               ? afterItinerary({
                   selectedDate,
@@ -3513,7 +3581,8 @@ export function NewBookingFlow({
             : null}
 
           {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
-          {selectedAvailabilityMatchesDate &&
+          {!selectedBookingOptionsHydrating &&
+            selectedAvailabilityMatchesDate &&
             selectedAvailability &&
             ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) &&
             (() => {
@@ -3540,7 +3609,7 @@ export function NewBookingFlow({
           })()}
 
           {/* Ticket Selection */}
-          {selectedAvailability && (
+          {!selectedBookingOptionsHydrating && selectedAvailability && (
             <TicketSelector
               pricing={pricing}
               quantities={quantities}
@@ -3564,7 +3633,7 @@ export function NewBookingFlow({
           )}
 
           {/* Add-ons — optional extras for the selected product option */}
-          {selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
+          {!selectedBookingOptionsHydrating && selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
             <AddOnsSection
               addOns={addOns}
               addOnSelections={addOnSelections}
@@ -3576,7 +3645,7 @@ export function NewBookingFlow({
           )}
 
           {/* Total and Checkout — shared PriceSummary component */}
-          {selectedAvailability && (
+          {!selectedBookingOptionsHydrating && selectedAvailability && (
             <>
             <CheckoutForm
                 priceSummaryLines={displayCheckoutPriceSummaryLines}

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>