@ticketboothapp/booking 1.2.112 → 1.2.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.112",
+  "version": "1.2.114",
   "private": false,
   "sideEffects": [
     "**/*.css",
@@ -19,6 +19,7 @@
     "./providers/booking-dialog-provider": "./src/providers/booking-dialog-provider.tsx",
     "./hooks/useBookingSourceMetadataFromLocation": "./src/hooks/useBookingSourceMetadataFromLocation.ts",
     "./hooks/useIsBookingLaunchLive": "./src/hooks/useIsBookingLaunchLive.ts",
+    "./hooks/usePlacesAutocompleteSearch": "./src/hooks/usePlacesAutocompleteSearch.ts",
     "./viavia/catalog": "./src/constants/products.ts",
     "./viavia/images": "./src/constants/images.ts",
     "./viavia/product-descriptions": "./src/lib/product-descriptions.ts",

package/src/components/booking/Calendar.module.css

@@ -76,8 +76,10 @@
   --cal-discount-tag-bg: rgba(239, 68, 68, 0.9);
   --cal-discount-tag-text: #fff;
 
-  /* Today ring */
-  --cal-today-ring: var(--booking-emerald-600, #059669);
+  /* Today marker */
+  --cal-today-ring: var(--booking-orange-600, #ff4d00);
+  --cal-today-text: var(--booking-orange-600, #ff4d00);
+  --cal-today-dot: var(--booking-orange-600, #ff4d00);
 
   /* Grid borders */
   --cal-grid-border: var(--booking-stone-300, #d6d3d1);
@@ -201,7 +203,8 @@
   --cal-dropdown-day-selected-bg-hover: var(--booking-emerald-700, #047857);
   --cal-dropdown-day-soldout-bg: #f87171;
   --cal-dropdown-day-soldout-bg-hover: #ef4444;
-  --cal-dropdown-day-today-ring: var(--booking-emerald-500, #10b981);
+  --cal-dropdown-day-today-ring: var(--booking-orange-600, #ff4d00);
+  --cal-dropdown-day-today-text: var(--booking-orange-600, #ff4d00);
 
   position: fixed;
   background-color: var(--cal-dropdown-bg);
@@ -305,6 +308,7 @@
   transition: background-color 0.2s, color 0.2s;
   border: none;
   cursor: pointer;
+  position: relative;
 }
 
 .calendarDropdownDayMuted {
@@ -312,6 +316,12 @@
   cursor: not-allowed;
 }
 
+.calendarDropdownDayPast {
+  background-color: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
 .calendarDropdownDayAvailable {
   color: var(--cal-dropdown-day-text);
   background-color: var(--cal-dropdown-day-available-bg);
@@ -348,6 +358,20 @@
 
 .calendarDropdownDayToday {
   box-shadow: inset 0 0 0 1px var(--cal-dropdown-day-today-ring);
+  color: var(--cal-dropdown-day-today-text);
+  font-weight: 700;
+}
+
+.calendarDropdownDayToday::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0.1875rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 999px;
+  background-color: var(--cal-dropdown-day-today-ring);
+  transform: translateX(-50%);
 }
 
 .calendarGrid {
@@ -402,10 +426,10 @@
   }
 }
 
-/* Desktop: don't stretch every cell to the tallest day in the row (was huge empty space). */
+/* Desktop: stretch each day to the row height so grid borders stay aligned across empty and available days. */
 @media (min-width: 640px) {
   .calendarDaysGrid {
-    align-items: start;
+    align-items: stretch;
   }
 
   /* Admin capacity mode: keep all days in a row equal height (including empty days like leading/trailing month dates). */
@@ -456,15 +480,9 @@
   width: 100%;
 }
 
-/* Desktop: pin time pills to bottom of cell; centering left a tall empty band under the date. */
+/* Desktop: center availability content while row stretching keeps grid borders aligned. */
 @media (min-width: 640px) {
   .calendarDayCellInner:not(.calendarDayCellInnerMobile) {
-    justify-content: flex-end;
-    padding-bottom: 0.125rem;
-  }
-
-  /* Admin capacity mode: with stretched row heights, bottom-pinning creates excessive top whitespace. */
-  .calendar.calendarAdminMode .calendarDayCellInner:not(.calendarDayCellInnerMobile) {
     justify-content: center;
     padding-bottom: 0;
   }
@@ -517,8 +535,19 @@
   cursor: not-allowed;
 }
 
+.calendar button.calendarDayCellPast,
+.calendar .calendarDayCellPast {
+  background-color: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
+.calendarDayCellPast .calendarDayNumber {
+  color: var(--booking-stone-400, #a8a29e);
+}
+
 .calendarDayCellToday {
-  box-shadow: inset 0 0 0 1px var(--cal-today-ring);
+  box-shadow: none;
 }
 
 /* Day number */
@@ -534,6 +563,22 @@
   color: var(--cal-day-number-selected);
 }
 
+.calendarDayCellToday .calendarDayNumber {
+  color: var(--cal-today-text);
+  font-weight: 700;
+}
+
+.calendarDayCellToday .calendarDayNumber::after {
+  content: "";
+  display: inline-block;
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-left: 0.1875rem;
+  border-radius: 999px;
+  background-color: var(--cal-today-dot);
+  vertical-align: 0.125rem;
+}
+
 /* ============ BADGES & PILLS ============ */
 .calendarDiscountTag {
   position: absolute;

package/src/components/booking/Calendar.tsx

@@ -178,6 +178,7 @@ interface DateCellProps {
   availability: DateAvailability | null;
   isSelected: boolean;
   isToday: boolean;
+  isPast: boolean;
   showCapacity?: boolean;
   timezone: string;
   displayMode: 'times' | 'status';
@@ -192,6 +193,7 @@ const DateCell = memo(function DateCell({
   availability,
   isSelected,
   isToday,
+  isPast,
   showCapacity,
   timezone,
   displayMode,
@@ -209,7 +211,7 @@ const DateCell = memo(function DateCell({
   // In change flow, also allow the original booked sold-out date to stay selectable.
   const hasAvailability =
     hasAvailabilityData && (!availability.isSoldOut || showCapacity || allowPinnedSoldOutDate);
-  const isDisabled = !hasAvailability;
+  const isDisabled = isPast || !hasAvailability;
 
   // Format time for display. timeStr (e.g. "09:00") is already in company timezone (MDT).
   // Create a Date with those components, interpret as company timezone, then format.
@@ -246,21 +248,24 @@ const DateCell = memo(function DateCell({
           ? 'min-w-0 min-h-[5.75rem]'
           : 'min-h-[5rem]'
     ),
-    isDisabled
+    isPast
+      ? styles.calendarDayCellPast
+      : isDisabled
       ? styles.calendarDayCellDisabled
       : isSelected
       ? styles.calendarDayCellSelected
       : styles.calendarDayCellAvailable,
-    isToday && hasAvailability && !isSelected && styles.calendarDayCellToday
-  ), [isDisabled, isSelected, isToday, hasAvailability, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
+    isToday && !isPast && !isSelected && styles.calendarDayCellToday
+  ), [isPast, isDisabled, isSelected, isToday, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
 
   const ariaLabel = useMemo(() => {
     const parts = [dayNumber];
+    if (isPast) parts.push(' - Past date');
     if (availability?.isSoldOut) parts.push(' - Sold out');
     const pct = availability?.totalDiscountPercent;
     if (pct != null && pct > 0) parts.push(` - ${pct}% off`);
     return parts.join('');
-  }, [dayNumber, availability?.isSoldOut, availability?.totalDiscountPercent]);
+  }, [dayNumber, isPast, availability?.isSoldOut, availability?.totalDiscountPercent]);
 
   return (
     <button
@@ -996,6 +1001,8 @@ export function Calendar({
     getEffectiveVacancies,
   ]);
 
+  const todayDateStr = formatInTimeZone(new Date(), timezone, 'yyyy-MM-dd');
+
   // Get display range for header
   const displayRange = useMemo(() => {
     const firstDay = calendarDays[0];
@@ -1022,6 +1029,8 @@ export function Calendar({
 
   const handleDateClick = (date: Date) => {
     const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+    if (dateStr < todayDateStr) return;
+
     const availability = dateAvailabilityMap[dateStr] || null;
 
     const allowPinnedSoldOutDate = Boolean(
@@ -1165,6 +1174,7 @@ export function Calendar({
                     const availability = dateAvailabilityMap[dateStr] || null;
                     const isSelected = selectedDate === dateStr;
                     const isCurrentMonth = day >= miniCalendarData.monthStart && day <= miniCalendarData.monthEnd;
+                    const isPast = dateStr < todayDateStr;
                     // Check if day is within allowed range (June 1 - October 12, 2026) in company timezone
                     const isInAllowedRange = day >= miniCalendarBoundsInTz.start && day <= miniCalendarBoundsInTz.end;
                     
@@ -1178,19 +1188,21 @@ export function Calendar({
                     const isAvailable =
                       hasAvailabilityData &&
                       isInAllowedRange &&
+                      !isPast &&
                       (!isSoldOut || showCapacity || allowPinnedSoldOutDate);
                     const isToday = isSameDay(day, new Date());
                     
                     const dayClass = cn(
                       styles.calendarDropdownDay,
                       !isCurrentMonth && styles.calendarDropdownDayMuted,
+                      isPast && styles.calendarDropdownDayPast,
                       isSoldOut && !showCapacity && styles.calendarDropdownDaySoldOut,
                       isSoldOut && showCapacity && styles.calendarDropdownDaySoldOutAdmin,
                       !isSoldOut && !isInAllowedRange && styles.calendarDropdownDayMuted,
                       !hasAvailabilityData && isInAllowedRange && styles.calendarDropdownDayMuted,
                       isSelected && isAvailable && styles.calendarDropdownDaySelected,
                       isAvailable && !isSelected && styles.calendarDropdownDayAvailable,
-                      isToday && isAvailable && !isSelected && styles.calendarDropdownDayToday
+                      isToday && !isPast && !isSelected && styles.calendarDropdownDayToday
                     );
                     
                     return (
@@ -1276,6 +1288,7 @@ export function Calendar({
             const availability = dateAvailabilityMap[dateStr] || null;
             const isSelected = selectedDate === dateStr;
             const isToday = isSameDay(date, new Date());
+            const isPast = dateStr < todayDateStr;
 
             // Include availability data in key to force re-render when availability changes
             const availabilityKey = availability 
@@ -1289,6 +1302,7 @@ export function Calendar({
                 availability={availability}
                 isSelected={isSelected}
                 isToday={isToday}
+                isPast={isPast}
                 showCapacity={showCapacity}
                 timezone={timezone}
                 displayMode={displayMode}

package/src/components/booking/NewBookingFlow.tsx

@@ -2325,8 +2325,9 @@ export function NewBookingFlow({
   /** Latest cart context for get-promo-discount; effect only keys off promoDiscountFetchKey. */
   const promoDiscountParamsRef = useRef({
     selectedAvailability: null as Availability | null,
-    ticketLineItems: [] as Array<{ category: string; qty: number }>,
+    ticketLineItems: [] as Array<{ category: string; qty: number; itemTotal: number }>,
     effectiveSubtotal: 0,
+    displayedProductFeeTotal: 0,
     appliedPromoCode: null as string | null,
   });
 
@@ -2345,6 +2346,11 @@ export function NewBookingFlow({
       selectedAvailability.availabilityId ?? '',
       currency,
       quantitiesSignature,
+      ticketLineItems
+        .map((line) => `${line.category}:${line.qty}:${Math.round(line.itemTotal * 100)}`)
+        .sort()
+        .join('|'),
+      String(Math.round(feeLineItems.reduce((sum, fee) => sum + fee.totalAmount, 0) * 100)),
       String(Math.round(effectiveSubtotal * 100)),
     ].join('::');
   }, [
@@ -2357,13 +2363,16 @@ export function NewBookingFlow({
     product.productId,
     currency,
     quantitiesSignature,
+    ticketLineItems,
+    feeLineItems,
     effectiveSubtotal,
   ]);
 
   promoDiscountParamsRef.current = {
     selectedAvailability,
-    ticketLineItems: ticketLineItems.map((l) => ({ category: l.category, qty: l.qty })),
+    ticketLineItems: ticketLineItems.map((l) => ({ category: l.category, qty: l.qty, itemTotal: l.itemTotal })),
     effectiveSubtotal,
+    displayedProductFeeTotal: feeLineItems.reduce((sum, fee) => sum + fee.totalAmount, 0),
     appliedPromoCode,
   };
 
@@ -2383,11 +2392,12 @@ export function NewBookingFlow({
         selectedAvailability: sel,
         ticketLineItems: lines,
         effectiveSubtotal: sub,
+        displayedProductFeeTotal,
         appliedPromoCode: code,
       } = 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;
@@ -2401,7 +2411,13 @@ export function NewBookingFlow({
         currency,
         items,
         sel.dateTime,
-        sub
+        sub,
+        {
+          availabilityCount: sel.vacancies,
+          totalCapacity: sel.totalCapacity,
+          displayedTicketLines: lines,
+          displayedProductFeeTotal,
+        }
       )
         .then((res) => {
           if (cancelled) return;
@@ -2762,7 +2778,7 @@ export function NewBookingFlow({
     setPromoCodeError('');
     setPromoCodeValidating(true);
     try {
-      const result = await validatePromoCode(code, companyId, product.productId, hasOngoingDiscount);
+      const result = await validatePromoCode(code, companyId, product.productId, hasOngoingDiscount, selectedAvailability.dateTime);
       if (result.valid) {
         promoAppliedSelectionKeyRef.current = selectedAvailabilityKey;
         setAppliedPromoCode(code);
@@ -2797,29 +2813,33 @@ export function NewBookingFlow({
     }
   }, [promoCodeInput, appliedPromoCode, product.companyId, product.productId, hasOngoingDiscount, t, selectedAvailabilityKey, selectedAvailability, totalQuantity]);
 
-  // When user selects a time with ongoing discount and has a promo applied, re-validate and clear if promo can't be stacked
+  // When user changes selected booking context, re-validate the applied promo against the new date/deal context.
   useEffect(() => {
-    if (!appliedPromoCode || !hasOngoingDiscount) return;
+    if (!appliedPromoCode || !selectedAvailability) return;
     // Only run this guard when user moved away from the selection where promo was applied.
     // On the same selection, "deal" adjustments can be promo-driven and would self-clear incorrectly.
     if (promoAppliedSelectionKeyRef.current === selectedAvailabilityKey) {
       return;
     }
     let cancelled = false;
-    validatePromoCode(appliedPromoCode, product.companyId ?? '', product.productId, true).then((result) => {
+    validatePromoCode(appliedPromoCode, product.companyId ?? '', product.productId, hasOngoingDiscount, selectedAvailability.dateTime).then((result) => {
       if (cancelled) return;
-      if (!result.valid && result.error === 'Promo codes cannot be stacked with deals') {
+      if (!result.valid) {
         promoAppliedSelectionKeyRef.current = null;
         setAppliedPromoCode(null);
         setPromoCodeInput(appliedPromoCode);
-        setPromoCodeError(t('booking.promoCodesCannotStackWithDiscounts') || result.error);
+        const errorMsg =
+          result.error === 'Promo codes cannot be stacked with deals'
+            ? (t('booking.promoCodesCannotStackWithDiscounts') || result.error)
+            : (result.error || t('booking.invalidPromoCode') || 'Invalid or expired promo code');
+        setPromoCodeError(errorMsg);
         setForcedCancellationPolicy(null);
         setCancellationPolicyId(null);
         fetchedRangesRef.current = [];
       }
     });
     return () => { cancelled = true; };
-  }, [hasOngoingDiscount, appliedPromoCode, product.companyId, product.productId, t, selectedAvailabilityKey]);
+  }, [hasOngoingDiscount, appliedPromoCode, product.companyId, product.productId, t, selectedAvailabilityKey, selectedAvailability]);
 
   // Ref to avoid effect re-running when handleApplyPromo identity changes (t changes every render)
   const handleApplyPromoRef = useRef(handleApplyPromo);

package/src/components/booking/PickupLocationDialog.tsx

@@ -14,7 +14,7 @@ import styles from './PickupLocationDialog.module.css';
 
 const SAMSON_MALL_PICKUP_LOCATION_ID = 'loc_afkvmlNRwRqZ';
 const SAMSON_MALL_PARKING_DISCLAIMER =
-  'No public parking at this pickup location. You must be staying at a nearby Lake Louise hotel and walk to Samson Mall for pickup.';
+  'No public parking at this pickup location. This pickup location is meant to serve guests staying at the HI Lake Louise Alpine Hostel, Lake Louise Inn, or Lake Louise Campground and can walk to Samson Mall for pickup due to parking restrictions in the town of Lake Louise.';
 
 function findProductWithPickupLocations(
   products: Product[],

package/src/components/booking/PickupLocationSelector.tsx

@@ -14,10 +14,10 @@ import {
   isExactMatch,
 } from '../../lib/booking/location-calculations';
 import {
-  getAutocompleteSuggestions,
   getPlaceDetails,
   type AutocompleteSuggestion,
 } from '../../lib/booking/places-api';
+import { usePlacesAutocompleteSearch } from '../../hooks/usePlacesAutocompleteSearch';
 import {
   createDistanceMarkerIcon,
   createPinMarkerIcon,
@@ -79,7 +79,7 @@ const SEARCHED_LOCATION_ZOOM = 14;
 const MAX_ZOOM = 15;
 const SAMSON_MALL_PICKUP_LOCATION_ID = 'loc_afkvmlNRwRqZ';
 const SAMSON_MALL_PARKING_DISCLAIMER =
-  'No public parking at this pickup location. You must be staying at a nearby Lake Louise hotel and walk to Samson Mall for pickup.';
+  'No public parking at this pickup location. This pickup location is meant to serve guests staying at the HI Lake Louise Alpine Hostel, Lake Louise Inn, or Lake Louise Campground and can walk to Samson Mall for pickup due to parking restrictions in the town of Lake Louise.';
 
 // Filter definitions
 const FILTERS = [
@@ -250,11 +250,9 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   const [isGeocoding, setIsGeocoding] = useState(false);
   const [selectedMarker, setSelectedMarker] = useState<string | null>(null);
   const [hoveredMarker, setHoveredMarker] = useState<string | null>(null);
-  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteSuggestion[]>([]);
   const [exactMatchLocationId, setExactMatchLocationId] = useState<string | null>(null);
   const [cityFilter, setCityFilter] = useState<string | null>(null);
   const [selectedFilters, setSelectedFilters] = useState<Set<string>>(new Set());
-  const [showSuggestions, setShowSuggestions] = useState(false);
   const [mapZoom, setMapZoom] = useState(DEFAULT_MAP_ZOOM);
   const [showSkipWarning, setShowSkipWarning] = useState(false);
   const [dontKnowFilterActive, setDontKnowFilterActive] = useState(false);
@@ -286,6 +284,20 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   const { googleMapsApiKey: keyFromContext } = useBookingApp();
   const keyFromWindow = typeof window !== 'undefined' ? (window as unknown as { __TICKETBOOTH_GOOGLE_MAPS_API_KEY__?: string }).__TICKETBOOTH_GOOGLE_MAPS_API_KEY__ : undefined;
   const googleMapsApiKey = keyFromContext ?? keyFromWindow ?? env.GOOGLE_MAPS_API_KEY;
+  const {
+    suggestions: autocompleteSuggestions,
+    showSuggestions,
+    setShowSuggestions,
+    hideSuggestions,
+    clearSuggestions,
+    queueSuggestionsFetch,
+    consumeSessionToken,
+    endSession,
+    cancelPendingFetch,
+  } = usePlacesAutocompleteSearch({
+    apiKey: googleMapsApiKey,
+    locationBias: LOCATION_BIAS,
+  });
 
   // ============ Google Maps API Loading ============
   const { isLoaded, loadError } = useJsApiLoader({
@@ -391,14 +403,13 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       setSearchedLocation(null);
       setIsValidLocation(null);
       setNearbyLocations([]);
-      setShowSuggestions(false);
-      setAutocompleteSuggestions([]);
+      clearSuggestions();
       setSelectedMarker(null);
       setExactMatchLocationId(null);
       setCityFilter(null);
       setHoveredMarker(null);
     }
-  }, [isSkipped]);
+  }, [clearSuggestions, isSkipped]);
 
   // Clear search state when a location is selected from the list (parent updates selectedLocationId/selectedCustomAddress)
   // Only run when selection changes - NOT when user types (searchInput), otherwise typing gets erased
@@ -408,10 +419,9 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       setSearchedLocation(null);
       setIsValidLocation(null);
       setNearbyLocations([]);
-      setShowSuggestions(false);
-      setAutocompleteSuggestions([]);
+      clearSuggestions();
     }
-  }, [selectedLocationId, selectedCustomAddress]);
+  }, [clearSuggestions, selectedLocationId, selectedCustomAddress]);
 
   // Cleanup timeouts on unmount
   useEffect(() => {
@@ -427,32 +437,15 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
 
   // ============ Event Handlers ============
   
-  // Handle autocomplete suggestions as user types
-  const handleSearchInputChange = async (value: string) => {
+  const handleSearchInputChange = (value: string) => {
     setSearchInput(value);
-
-    if (!value.trim() || !googleMapsApiKey) {
-      setAutocompleteSuggestions([]);
-      setShowSuggestions(false);
-      return;
-    }
-
-    try {
-      const suggestions = await getAutocompleteSuggestions(value, googleMapsApiKey, LOCATION_BIAS);
-      // Only update if the input value hasn't changed (avoid race conditions)
-      setAutocompleteSuggestions(suggestions);
-      setShowSuggestions(suggestions.length > 0);
-    } catch (error) {
-      console.error('Error fetching autocomplete suggestions:', error);
-      setAutocompleteSuggestions([]);
-      setShowSuggestions(false);
-    }
+    queueSuggestionsFetch(value);
   };
 
   const handleSuggestionSelect = async (suggestion: AutocompleteSuggestion) => {
+    cancelPendingFetch();
     setSearchInput(suggestion.description);
-    setShowSuggestions(false);
-    setAutocompleteSuggestions([]);
+    hideSuggestions();
     setExactMatchLocationId(null);
     setCityFilter(null);
 
@@ -475,15 +468,17 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
         setExactMatchLocationId(matchingPickupLocation.id);
         setCityFilter(null); // Clear city filter if it was set
         setSearchedLocation(null); // Don't show searched location pin
+        endSession();
         return;
       }
     }
 
     // Case 2 & 3: Get place details to determine if it's a city or specific location
     setIsGeocoding(true);
+    const sessionToken = consumeSessionToken();
     try {
       // Get place details including types to determine if it's a city
-      const placeDetails = await getPlaceDetails(suggestion.placeId, googleMapsApiKey);
+      const placeDetails = await getPlaceDetails(suggestion.placeId, googleMapsApiKey, sessionToken);
 
       if (placeDetails) {
         const { lat, lng, types } = placeDetails;
@@ -513,7 +508,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
           }
         }
 
-        // Case 3: It's a specific location - geocode and show 3 closest
+        // Case 3: It's a specific location - show 3 closest
         setExactMatchLocationId(null);
         setCityFilter(null);
         setSearchedLocation({
@@ -569,13 +564,15 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       setSearchedLocation(null);
       setIsValidLocation(null);
       setNearbyLocations([]);
-      setShowSuggestions(false);
+      clearSuggestions();
       setExactMatchLocationId(null);
       setCityFilter(null);
       return;
     }
 
-    setShowSuggestions(false);
+    cancelPendingFetch();
+    hideSuggestions();
+    endSession();
     setExactMatchLocationId(null);
     setCityFilter(null);
     
@@ -667,7 +664,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     setSearchedLocation(null);
     setIsValidLocation(null);
     setNearbyLocations([]);
-    setShowSuggestions(false);
+    clearSuggestions();
     setSelectedMarker(null);
     setHoveredMarker(null);
   };
@@ -710,8 +707,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     setSearchedLocation(null);
     setIsValidLocation(null);
     setNearbyLocations([]);
-    setShowSuggestions(false);
-    setAutocompleteSuggestions([]);
+    clearSuggestions();
     setSelectedMarker(null);
     setHoveredMarker(null);
     

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -33,6 +33,10 @@ import {
 import { formatCurrencyAmount } from '../../lib/currency';
 import { formatBookingRefForDisplay } from '../../lib/booking-ref';
 import { buildCheckoutBreakdown } from '../../lib/booking/checkout-breakdown';
+import {
+  isDateAfterPublicBookingCutoff,
+  resolvePublicBookingCutoffMinutes,
+} from '../../lib/booking/booking-cutoffs';
 import type { PricingConfig, PrecomputedPricesByCategory } from '../../lib/booking-api';
 import { Calendar } from './Calendar';
 import { PickupLocationSelector } from './PickupLocationSelector';
@@ -122,6 +126,32 @@ function parseAvailabilityDateTime(value: string): Date {
   return parseISO(hasExplicitOffset ? value : `${value}Z`);
 }
 
+function privateShuttleStartDateTime(dateStr: string, timeStr: string, timezone: string): Date {
+  return fromZonedTime(parseISO(`${dateStr}T${timeStr}:00`), timezone);
+}
+
+function privateShuttleStartTimeAllowed(
+  dateStr: string,
+  timeStr: string,
+  timezone: string,
+  now: Date,
+  cutoffMinutes?: number | null,
+): boolean {
+  return isDateAfterPublicBookingCutoff(
+    privateShuttleStartDateTime(dateStr, timeStr, timezone),
+    now,
+    cutoffMinutes,
+  );
+}
+
+function privateShuttleBookingCutoffMessage(cutoffMinutes?: number | null): string {
+  const resolvedCutoffMinutes = resolvePublicBookingCutoffMinutes(cutoffMinutes);
+  if (resolvedCutoffMinutes % 60 === 0) {
+    return `Private shuttles must be booked at least ${resolvedCutoffMinutes / 60} hours before departure.`;
+  }
+  return `Private shuttles must be booked at least ${resolvedCutoffMinutes} minutes before departure.`;
+}
+
 function findMergedPrivateShuttleAvailability(
   merged: Availability[],
   sel: Availability | null,
@@ -257,6 +287,7 @@ export function PrivateShuttleBookingFlow({
   const [loading, setLoading] = useState(false);
   const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
   const [isFetchingMoreAvailabilities, setIsFetchingMoreAvailabilities] = useState(false);
+  const [bookingCutoffNowMs, setBookingCutoffNowMs] = useState(() => Date.now());
   const [error, setError] = useState('');
   const [showCheckoutModal, setShowCheckoutModal] = useState(false);
   /** Pending reservation while user is in checkout (RESERVED until confirmed/cancelled). */
@@ -355,6 +386,14 @@ export function PrivateShuttleBookingFlow({
     () => product.options?.filter((opt) => opt.status === 'ACTIVE') || [],
     [product.options]
   );
+  const bookingCutoffNow = useMemo(() => new Date(bookingCutoffNowMs), [bookingCutoffNowMs]);
+  const bookingCutoffMinutes = product.bookingCutoffMinutes ?? null;
+
+  useEffect(() => {
+    if (isAdmin) return;
+    const interval = window.setInterval(() => setBookingCutoffNowMs(Date.now()), 60 * 1000);
+    return () => window.clearInterval(interval);
+  }, [isAdmin]);
 
   // Fire view_item when product is first displayed
   const hasFiredViewItem = useRef(false);
@@ -780,9 +819,43 @@ export function PrivateShuttleBookingFlow({
     availabilitiesCache,
   ]);
 
+  const isPrivateShuttleAvailabilityBookable = useCallback(
+    (availability: Availability): boolean => {
+      if (isAdmin) return true;
+      const dateInCompanyTz = DATE_ONLY_REGEX.test(availability.dateTime)
+        ? availability.dateTime
+        : formatInTimeZone(parseAvailabilityDateTime(availability.dateTime), companyTimezone, 'yyyy-MM-dd');
+      const optionId = getPrivateShuttleAvailabilityOptionId(availability);
+      const option = activeOptions.find((opt) => opt.optionId === optionId);
+      const startTimes = availability.suggestedStartTimes || option?.privateShuttleConfig?.suggestedStartTimes || [];
+      if (startTimes.length === 0) {
+        return isDateAfterPublicBookingCutoff(
+          fromZonedTime(parseISO(`${dateInCompanyTz}T23:59:59`), companyTimezone),
+          bookingCutoffNow,
+          bookingCutoffMinutes,
+        );
+      }
+      return startTimes.some((time) =>
+        privateShuttleStartTimeAllowed(
+          dateInCompanyTz,
+          time,
+          companyTimezone,
+          bookingCutoffNow,
+          bookingCutoffMinutes,
+        ),
+      );
+    },
+    [activeOptions, bookingCutoffMinutes, bookingCutoffNow, companyTimezone, isAdmin],
+  );
+
+  const publicVisibleAvailabilities = useMemo(
+    () => (isAdmin ? availabilities : availabilities.filter(isPrivateShuttleAvailabilityBookable)),
+    [availabilities, isAdmin, isPrivateShuttleAvailabilityBookable],
+  );
+
   // Group availabilities by date (in company timezone - MDT). Availabilities from API are in UTC.
   const availabilitiesByDate = useMemo(() => {
-    const grouped = availabilities.reduce(
+    const grouped = publicVisibleAvailabilities.reduce(
       (acc, avail) => {
         const dateInCompanyTz = DATE_ONLY_REGEX.test(avail.dateTime)
           ? avail.dateTime
@@ -803,7 +876,7 @@ export function PrivateShuttleBookingFlow({
       });
     });
     return sorted;
-  }, [availabilities, companyTimezone]);
+  }, [publicVisibleAvailabilities, companyTimezone]);
 
   const optionsAvailableForSelectedDate = useMemo(() => {
     if (!selectedDate) return [];
@@ -914,8 +987,27 @@ export function PrivateShuttleBookingFlow({
     return fromZonedTime(parseISO(`${dates[0]}T12:00:00`), companyTimezone);
   }, [dates, companyTimezone]);
 
-  const suggestedStartTimes =
-    selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
+  const suggestedStartTimes = useMemo(() => {
+    const times = selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
+    if (isAdmin || !selectedDate) return times;
+    return times.filter((time) =>
+      privateShuttleStartTimeAllowed(
+        selectedDate,
+        time,
+        companyTimezone,
+        bookingCutoffNow,
+        bookingCutoffMinutes,
+      ),
+    );
+  }, [
+    bookingCutoffMinutes,
+    bookingCutoffNow,
+    companyTimezone,
+    isAdmin,
+    privateShuttleConfig?.suggestedStartTimes,
+    selectedAvailability?.suggestedStartTimes,
+    selectedDate,
+  ]);
   const resourceCount = Math.ceil(passengerCount / RESOURCE_CAPACITY);
   const maxVacancies = selectedAvailability?.vacancies || 0;
   const isSpecialRequest = passengerCount > maxVacancies;
@@ -1255,6 +1347,13 @@ export function PrivateShuttleBookingFlow({
     }
   }, [suggestedStartTimes, isCustomTimeMode, selectedStartTime]);
 
+  useEffect(() => {
+    if (isAdmin || isCustomTimeMode || !selectedStartTime) return;
+    if (!suggestedStartTimes.includes(selectedStartTime)) {
+      setSelectedStartTime('');
+    }
+  }, [isAdmin, isCustomTimeMode, selectedStartTime, suggestedStartTimes]);
+
   useEffect(() => {
     if (
       pricingConfig?.cancellationPolicies &&
@@ -1282,6 +1381,14 @@ export function PrivateShuttleBookingFlow({
   };
 
   const handleStartTimeSelect = (time: string) => {
+    if (
+      !isAdmin &&
+      selectedDate &&
+      !privateShuttleStartTimeAllowed(selectedDate, time, companyTimezone, bookingCutoffNow, bookingCutoffMinutes)
+    ) {
+      setError(privateShuttleBookingCutoffMessage(bookingCutoffMinutes));
+      return;
+    }
     setSelectedStartTime(time);
     setIsCustomTimeMode(false);
     setError('');
@@ -1465,6 +1572,19 @@ export function PrivateShuttleBookingFlow({
       setError('Please select a date, start time, and passenger count');
       return;
     }
+    if (
+      !isAdmin &&
+      !privateShuttleStartTimeAllowed(
+        selectedDate,
+        selectedStartTime,
+        companyTimezone,
+        bookingCutoffNow,
+        bookingCutoffMinutes,
+      )
+    ) {
+      setError(privateShuttleBookingCutoffMessage(bookingCutoffMinutes));
+      return;
+    }
     if (
       product.pickupLocations &&
       product.pickupLocations.length > 0 &&

package/src/data/products-config.json

@@ -113,6 +113,7 @@
       "productId": "p_urmbvZepRegd",
       "optionIds": ["po_uO9Ra6NHzwof", "po_44EQlZn24gXg", "po_vuzqpvGk6wVS", "po_nIToR7Qwau3E"],
       "productType": "PRIVATE_SHUTTLE",
+      "bookingCutoffMinutes": 2880,
       "display": {
         "path": "/private-shuttle",
         "slug": "private-tour",

package/src/hooks/usePlacesAutocompleteSearch.ts

@@ -0,0 +1,133 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  createPlacesSessionToken,
+  getAutocompleteSuggestions,
+  type AutocompleteSuggestion,
+  type PlacesLocationBias,
+} from '../lib/booking/places-api';
+
+const DEFAULT_DEBOUNCE_MS = 300;
+
+interface UsePlacesAutocompleteSearchOptions {
+  apiKey: string;
+  locationBias?: PlacesLocationBias;
+  debounceMs?: number;
+}
+
+export function usePlacesAutocompleteSearch({
+  apiKey,
+  locationBias,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+}: UsePlacesAutocompleteSearchOptions) {
+  const [suggestions, setSuggestions] = useState<AutocompleteSuggestion[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const sessionTokenRef = useRef<string | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const requestIdRef = useRef(0);
+
+  const cancelPendingFetch = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    requestIdRef.current += 1;
+  }, []);
+
+  const hideSuggestions = useCallback(() => {
+    setSuggestions([]);
+    setShowSuggestions(false);
+  }, []);
+
+  const endSession = useCallback(() => {
+    sessionTokenRef.current = null;
+  }, []);
+
+  const clearSuggestions = useCallback(() => {
+    cancelPendingFetch();
+    hideSuggestions();
+    endSession();
+  }, [cancelPendingFetch, hideSuggestions, endSession]);
+
+  const consumeSessionToken = useCallback((): string | undefined => {
+    const token = sessionTokenRef.current;
+    sessionTokenRef.current = null;
+    return token ?? undefined;
+  }, []);
+
+  const ensureSessionToken = useCallback(() => {
+    if (!sessionTokenRef.current) {
+      sessionTokenRef.current = createPlacesSessionToken();
+    }
+    return sessionTokenRef.current;
+  }, []);
+
+  const fetchSuggestions = useCallback(
+    async (input: string) => {
+      const requestId = ++requestIdRef.current;
+
+      try {
+        const sessionToken = ensureSessionToken();
+        const nextSuggestions = await getAutocompleteSuggestions(
+          input,
+          apiKey,
+          locationBias,
+          sessionToken
+        );
+
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+
+        setSuggestions(nextSuggestions);
+        setShowSuggestions(nextSuggestions.length > 0);
+      } catch (error) {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+
+        console.error('Error fetching autocomplete suggestions:', error);
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    },
+    [apiKey, ensureSessionToken, locationBias]
+  );
+
+  const queueSuggestionsFetch = useCallback(
+    (input: string) => {
+      cancelPendingFetch();
+
+      if (!input.trim() || !apiKey) {
+        hideSuggestions();
+        endSession();
+        return;
+      }
+
+      debounceRef.current = setTimeout(() => {
+        debounceRef.current = null;
+        void fetchSuggestions(input);
+      }, debounceMs);
+    },
+    [apiKey, cancelPendingFetch, debounceMs, endSession, fetchSuggestions, hideSuggestions]
+  );
+
+  useEffect(() => {
+    return () => {
+      cancelPendingFetch();
+    };
+  }, [cancelPendingFetch]);
+
+  return {
+    suggestions,
+    showSuggestions,
+    setShowSuggestions,
+    hideSuggestions,
+    clearSuggestions,
+    queueSuggestionsFetch,
+    consumeSessionToken,
+    endSession,
+    cancelPendingFetch,
+  };
+}

package/src/lib/booking/places-api.ts

@@ -9,6 +9,12 @@ export interface AutocompleteSuggestion {
   description: string;
 }
 
+export interface PlacesLocationBias {
+  latitude: number;
+  longitude: number;
+  radius: number;
+}
+
 // Internal API response types
 interface PlacePrediction {
   placeId: string;
@@ -25,13 +31,22 @@ interface AutocompleteSuggestionResponse {
 
 const GOOGLE_PLACES_API_BASE = 'https://places.googleapis.com/v1';
 
+/** Session tokens group autocomplete keystrokes + place selection into one billing session. */
+export function createPlacesSessionToken(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+
 /**
  * Get autocomplete suggestions using Places API (New)
  */
 export async function getAutocompleteSuggestions(
   input: string,
   apiKey: string,
-  locationBias?: { latitude: number; longitude: number; radius: number }
+  locationBias?: PlacesLocationBias,
+  sessionToken?: string
 ): Promise<AutocompleteSuggestion[]> {
   if (!input.trim() || !apiKey) {
     return [];
@@ -49,6 +64,7 @@ export async function getAutocompleteSuggestions(
       body: JSON.stringify({
         input,
         includedRegionCodes: ['ca'], // Restrict to Canada
+        ...(sessionToken && { sessionToken }),
         ...(locationBias && {
           locationBias: {
             circle: {
@@ -75,7 +91,7 @@ export async function getAutocompleteSuggestions(
 
     if (data.suggestions && Array.isArray(data.suggestions)) {
       return data.suggestions
-        .filter((s): s is AutocompleteSuggestionResponse & { placePrediction: PlacePrediction } => 
+        .filter((s): s is AutocompleteSuggestionResponse & { placePrediction: PlacePrediction } =>
           !!s.placePrediction
         )
         .map((s) => {
@@ -104,10 +120,12 @@ export async function getAutocompleteSuggestions(
  */
 export async function getPlaceDetails(
   placeId: string,
-  apiKey: string
+  apiKey: string,
+  sessionToken?: string
 ): Promise<{ lat: number; lng: number; types: string[] } | null> {
   try {
-    const response = await fetch(`${GOOGLE_PLACES_API_BASE}/places/${placeId}`, {
+    const sessionQuery = sessionToken ? `?sessionToken=${encodeURIComponent(sessionToken)}` : '';
+    const response = await fetch(`${GOOGLE_PLACES_API_BASE}/places/${placeId}${sessionQuery}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
@@ -143,12 +161,12 @@ export async function getPlaceDetails(
  */
 export async function getPlaceCoordinates(
   placeId: string,
-  apiKey: string
+  apiKey: string,
+  sessionToken?: string
 ): Promise<{ lat: number; lng: number } | null> {
-  const details = await getPlaceDetails(placeId, apiKey);
+  const details = await getPlaceDetails(placeId, apiKey, sessionToken);
   if (details) {
     return { lat: details.lat, lng: details.lng };
   }
   return null;
 }
-

package/src/lib/booking-api.ts

@@ -935,7 +935,8 @@ export async function validatePromoCode(
   promoCode: string,
   companyId: string,
   productId?: string,
-  hasOngoingDiscount?: boolean
+  hasOngoingDiscount?: boolean,
+  dateTime?: string | null
 ): Promise<ValidatePromoResponse> {
   const params = new URLSearchParams({ promoCode: promoCode.trim(), companyId });
   const normalizedProductId = productId?.trim()
@@ -943,6 +944,7 @@ export async function validatePromoCode(
     : '';
   if (normalizedProductId) params.set('productId', normalizedProductId);
   if (hasOngoingDiscount === true) params.set('hasOngoingDiscount', 'true');
+  if (dateTime?.trim()) params.set('dateTime', dateTime.trim());
   const res = await fetchBookingGetWithRetry(`${API_BASE}/1/validate-promo?${params}`);
   if (!res.ok) {
     const err = await res.json();
@@ -964,6 +966,14 @@ export interface GetPromoDiscountBookingChangeOptions {
   forBookingChange?: boolean;
   /** Stored promo discount from the existing booking (major units, same currency as quote). */
   priorPromoDiscountAmount?: number;
+  /** Live available capacity for the selected slot, used by dynamic pricing. */
+  availabilityCount?: number;
+  /** Live total capacity for the selected slot, used by dynamic pricing. */
+  totalCapacity?: number;
+  /** Displayed ticket line totals from the cart, used to value vouchers against the visible price. */
+  displayedTicketLines?: Array<{ category: string; qty: number; itemTotal: number }>;
+  /** Displayed product fee total from the cart, excluding add-ons, return, and cancellation lines. */
+  displayedProductFeeTotal?: number;
 }
 
 export async function getPromoDiscount(
@@ -988,6 +998,32 @@ export async function getPromoDiscount(
   });
   if (dateTime) params.set('dateTime', dateTime);
   if (subtotal != null && subtotal > 0) params.set('subtotal', String(subtotal));
+  if (
+    bookingChange?.availabilityCount != null &&
+    Number.isFinite(bookingChange.availabilityCount)
+  ) {
+    params.set('availabilityCount', String(Math.trunc(bookingChange.availabilityCount)));
+  }
+  if (
+    bookingChange?.totalCapacity != null &&
+    Number.isFinite(bookingChange.totalCapacity)
+  ) {
+    params.set('totalCapacity', String(Math.trunc(bookingChange.totalCapacity)));
+  }
+  const displayedTicketLines = bookingChange?.displayedTicketLines
+    ?.filter((line) => line.qty > 0 && Number.isFinite(line.itemTotal) && line.itemTotal >= 0)
+    .map((line) => `${line.category}:${Math.trunc(line.qty)}:${line.itemTotal}`)
+    .join(',');
+  if (displayedTicketLines) {
+    params.set('ticketLines', displayedTicketLines);
+  }
+  if (
+    bookingChange?.displayedProductFeeTotal != null &&
+    Number.isFinite(bookingChange.displayedProductFeeTotal) &&
+    bookingChange.displayedProductFeeTotal >= 0
+  ) {
+    params.set('productFeeTotal', String(bookingChange.displayedProductFeeTotal));
+  }
   if (bookingChange?.forBookingChange === true) {
     params.set('forBookingChange', 'true');
   }