@ticketboothapp/booking 1.2.42 → 1.2.43

package/package.json

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

package/src/components/booking/BookingFlow.tsx

@@ -1405,52 +1405,51 @@ export function BookingFlow({
     };
   }, [showTooltip]);
 
-  // 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).
+  // 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.
   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,
+      },
+    );
 
-    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;
-    };
-
-    const scrollParent = !useWindowScroll ? findScrollParent(el) : null;
-
-    const updateStickyState = () => {
-      if (!itineraryRef.current) return;
-
-      const rect = itineraryRef.current.getBoundingClientRect();
-      const containerTop =
-        scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
-      const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
-      const nextSticky = rect.top <= containerTop + topInset + 1;
-      if (nextSticky !== isItineraryStickyRef.current) {
-        isItineraryStickyRef.current = nextSticky;
-        setIsItinerarySticky(nextSticky);
-      }
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+      sentinel.remove();
     };
+  }, [selectedDate, selectedAvailability, flowUi?.itineraryStickyTopOffsetPx]); // Re-check when itinerary changes or host top inset changes
 
-    // Listen to both potential emitters; some embeds scroll window while the flow sits in a nested container.
-    const targets: EventTarget[] = [];
-    if (scrollParent) targets.push(scrollParent);
-    if (typeof window !== 'undefined') targets.push(window);
-    if (targets.length > 0) {
-      targets.forEach((target) => target.addEventListener('scroll', updateStickyState, { passive: true }));
-      updateStickyState();
-      return () => {
-        targets.forEach((target) => target.removeEventListener('scroll', updateStickyState));
-      };
-    }
-    return undefined;
-  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx]); // Re-check when itinerary / scroll mode / host chrome 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]);
 
   // 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