@ticketboothapp/booking 1.2.54 → 1.2.56

package/package.json

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

package/src/components/BookingDetails.ts

@@ -1,12 +1,12 @@
 export interface BookingData {
   bookingReference: string;
-  reservationReference?: string;
-  dateTime?: string;
-  totalAmount?: number;
-  currency?: string;
-  productId?: string;
-  optionId?: string;
-  bookingItems?: Array<{ category: string; count: number }>;
+  reservationReference?: string | null;
+  dateTime?: string | null;
+  totalAmount?: number | null;
+  currency?: string | null;
+  productId?: string | null;
+  optionId?: string | null;
+  bookingItems?: Array<{ category: string; count: number }> | null;
   pickupLocationId?: string | null;
   travelerHotel?: string | null;
   startTime?: string | null;
@@ -14,5 +14,4 @@ export interface BookingData {
   cancellationPolicyId?: string | null;
   promoCode?: string | null;
   addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
-  [key: string]: unknown;
 }

package/src/components/booking/BookingFlow.tsx

@@ -673,6 +673,8 @@ export function BookingFlow({
   const [precomputedPricesByOption, setPrecomputedPricesByOption] = useState<Record<string, PrecomputedPricesByCategory> | null>(null);
   const pricingConfigSetRef = useRef(false); // Track if pricingConfig has been set (optimize: only set once)
   const fetchingRef = useRef(false); // Prevent concurrent fetches
+  const hasLoadedAvailabilitiesRef = useRef(false); // First successful availability paint completed
+  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 [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
@@ -1068,6 +1070,14 @@ export function BookingFlow({
     async function fetchAvailabilities() {
       // Prevent concurrent fetches - store range to fetch when current one completes
       if (fetchingRef.current && visibleRange) {
+        const inFlight = inFlightRangeRef.current;
+        if (
+          inFlight &&
+          inFlight.start.getTime() === visibleRange.start.getTime() &&
+          inFlight.end.getTime() === visibleRange.end.getTime()
+        ) {
+          return;
+        }
         pendingRangeRef.current = { start: visibleRange.start, end: visibleRange.end };
         return;
       }
@@ -1119,6 +1129,9 @@ export function BookingFlow({
         const isStale = availabilitiesCache?.isStale(cached) ?? false;
         if (cacheCoversRange) {
           setAvailabilities(cached.availabilities);
+          if (cached.availabilities.length > 0) {
+            hasLoadedAvailabilitiesRef.current = true;
+          }
           if (cached.pricingConfig) {
             setPricingConfig(cached.pricingConfig);
             pricingConfigSetRef.current = true;
@@ -1137,6 +1150,9 @@ export function BookingFlow({
         }
         // Partial cache: show cached data immediately, then fetch missing range below
         setAvailabilities(cached.availabilities);
+        if (cached.availabilities.length > 0) {
+          hasLoadedAvailabilitiesRef.current = true;
+        }
         if (cached.pricingConfig) {
           setPricingConfig(cached.pricingConfig);
           pricingConfigSetRef.current = true;
@@ -1160,8 +1176,14 @@ export function BookingFlow({
       }
       
       const hasPartialCache = cached && cached.availabilities.length > 0;
+      const shouldUsePrimaryLoader =
+        !hasPartialCache && !hasLoadedAvailabilitiesRef.current;
       fetchingRef.current = true;
-      if (!hasPartialCache) setLoadingAvailabilities(true);
+      inFlightRangeRef.current = {
+        start: new Date(clampedStart),
+        end: new Date(clampedEnd),
+      };
+      if (shouldUsePrimaryLoader) setLoadingAvailabilities(true);
       else setIsFetchingMoreAvailabilities(true);
       
       try {
@@ -1218,6 +1240,9 @@ export function BookingFlow({
         
         const results = await Promise.all(availabilityPromises);
         const allFetchedAvailabilities = results.flatMap(r => r.availabilities);
+        if (allFetchedAvailabilities.length > 0) {
+          hasLoadedAvailabilitiesRef.current = true;
+        }
         setPrecomputedPricesByOption(prev => {
           const next = { ...(prev || {}) };
           results.forEach(r => {
@@ -1298,6 +1323,7 @@ export function BookingFlow({
         setLoadingAvailabilities(false);
         setIsFetchingMoreAvailabilities(false);
         fetchingRef.current = false;
+        inFlightRangeRef.current = null;
         // If user navigated during fetch, trigger fetch for the pending range
         const pending = pendingRangeRef.current;
         if (pending) {

package/src/components/booking/ItineraryBox.tsx

@@ -252,7 +252,7 @@ export function ItineraryBox({
                           <button
                             type="button"
                             onClick={handlePickupLocationClick}
-                            className={styles.placeLink}
+                            className={`${styles.placeLink} text-emerald-600`}
                           >
                             {getDisplayLabel(locationOnlyDisplay)}
                           </button>
@@ -284,7 +284,7 @@ export function ItineraryBox({
                           <button
                             type="button"
                             onClick={handlePickupLocationClick}
-                            className={styles.placeLink}
+                            className={`${styles.placeLink} text-emerald-600`}
                           >
                             {getDisplayLabel(locationOnlyDisplay)}
                           </button>

package/src/components/booking/booking-flow.css

@@ -301,13 +301,16 @@
   color: #b91c1c !important;
 }
 
-/* Clickable "your pickup location" etc. - style as link (blue, underlined) like ticketbooth */
+/* Clickable "your pickup location" etc. should stay booking green */
 .booking-flow-preflight button.text-stone-400.underline,
 .booking-flow-preflight button.text-stone-400.underline:hover {
-  color: var(--booking-primary) !important;
+  color: var(--booking-emerald-600, #059669) !important;
   background: none;
   border: none;
 }
+.booking-flow-preflight button.text-stone-400.underline:hover {
+  color: var(--booking-emerald-700, #047857) !important;
+}
 
 /* ========== Itinerary section - orange bg, Poppins, lowercase (match TourDescription) ========== */
 .booking-flow-preflight [class*="ItineraryBox_box"],