@ticketboothapp/booking 1.2.44 → 1.2.45

package/package.json

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

package/src/components/booking/BookingFlow.tsx

@@ -1405,51 +1405,77 @@ export function BookingFlow({
     };
   }, [showTooltip]);
 
-  // Detect when itinerary box becomes sticky.
-  // Use a viewport IntersectionObserver sentinel so host-specific scroll containers
-  // (dashboard embeds, dialog content, etc.) don't need custom scroll wiring.
+  // Detect when itinerary box becomes sticky
+  // In viavia the scroll usually happens inside the dialog content div, not window.
+  // On full-page partner layouts, we instead listen to window scroll (useWindowScroll = true).
+  const lastStickyChangeRef = useRef<number>(0);
   useEffect(() => {
     const el = itineraryRef.current;
     if (!el) return;
-    if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return;
-
-    const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
-    const sentinel = document.createElement('div');
-    sentinel.setAttribute('data-itinerary-sticky-sentinel', 'true');
-    sentinel.style.height = '1px';
-    sentinel.style.margin = '0';
-    sentinel.style.padding = '0';
-    sentinel.style.pointerEvents = 'none';
-    el.parentElement?.insertBefore(sentinel, el);
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        const nextSticky = !entry.isIntersecting;
-        if (nextSticky !== isItineraryStickyRef.current) {
-          isItineraryStickyRef.current = nextSticky;
-          setIsItinerarySticky(nextSticky);
-        }
-      },
-      {
-        root: null,
-        rootMargin: `${-topInset}px 0px 0px 0px`,
-        threshold: 0,
-      },
-    );
 
-    observer.observe(sentinel);
-    return () => {
-      observer.disconnect();
-      sentinel.remove();
+    const findScrollParent = (node: HTMLElement): HTMLElement | null => {
+      let parent = node.parentElement;
+      while (parent) {
+        const { overflowY } = getComputedStyle(parent);
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') return parent;
+        parent = parent.parentElement;
+      }
+      return null;
     };
-  }, [selectedDate, selectedAvailability, flowUi?.itineraryStickyTopOffsetPx]); // Re-check when itinerary changes or host top inset changes
 
-  // TEMP DEBUG: confirm sticky state transitions in host embeds.
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    // eslint-disable-next-line no-console
-    console.log('[booking-flow] isItinerarySticky:', isItinerarySticky);
-  }, [isItinerarySticky]);
+    const scrollParent = findScrollParent(el);
+    const scrollTarget =
+      useWindowScroll || !scrollParent
+        ? (typeof window !== 'undefined' ? window : null)
+        : scrollParent;
+
+    let ticking = false;
+    const COOLDOWN_MS = 600; // After a state change, ignore reverse changes for this long (covers 0.25s collapse animation + layout settle)
+    const atTopBand = 48; // px - must scroll back up past this band to expand again (wider = less oscillation at edges)
+
+    const updateStickyState = () => {
+      if (!itineraryRef.current) return;
+
+      const rect = itineraryRef.current.getBoundingClientRect();
+      const currentTop = rect.top;
+      const wasSticky = isItineraryStickyRef.current;
+
+      const containerTop =
+        scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
+      const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
+      const stickLine = containerTop + topInset;
+      const enterStickyThreshold = stickLine + 1;
+      const nextSticky = wasSticky
+        ? currentTop >= stickLine - atTopBand && currentTop <= stickLine + atTopBand
+        : currentTop <= enterStickyThreshold;
+
+      if (nextSticky !== wasSticky) {
+        const now = Date.now();
+        if (now - lastStickyChangeRef.current < COOLDOWN_MS) return; // Cooldown: prevent rapid toggling
+
+        lastStickyChangeRef.current = now;
+        isItineraryStickyRef.current = nextSticky;
+        setIsItinerarySticky(nextSticky);
+      }
+    };
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          updateStickyState();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    if (scrollTarget) {
+      scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+      updateStickyState();
+      return () => scrollTarget.removeEventListener('scroll', handleScroll);
+    }
+    return undefined;
+  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx]); // Re-check when itinerary / scroll mode / host chrome changes
 
   // Find the earliest availability date - memoize with a stable reference
   // Only recalculate if we don't have a cached value or if the new earliest is actually earlier

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

@@ -6,7 +6,7 @@
 .box {
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 10;
   margin-top: 1rem;
   margin-bottom: 1rem;
   background: var(--light-orange-background-dark);

package/src/components/booking/booking-flow-ui.ts

@@ -35,6 +35,4 @@ export const PARTNER_EMBEDDED_BOOKING_FLOW_UI_BASE: BookingFlowUiOptions = {
   showTourDescription: false,
   autoSelectFirstAvailableDate: true,
   autoSelectFirstHighlightedPickup: true,
-  // TicketBooth dashboard has sticky header/tabs; keep sticky itinerary visibly below.
-  itineraryStickyTopOffsetPx: 88,
 };