Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)

feat(SW-2879): Move BookingWidget to booking-flow package

* Fix lockfile

* Fix styling

* a tiny little booking widget test

* Tiny fixes

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Remove unused scripts

* lint:fix

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Tiny lint fixes

* update test

* Update Input in booking-flow

* Clean up comments etc

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Setup tracking context for booking-flow

* Add missing use client

* Fix temp tracking function

* Pass booking to booking-widget

* Remove comment

* Add use client to booking widget tracking provider

* Add use client to tracking functions

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Move debug page

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package


Approved-by: Bianca Widstam

packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css

@@ -0,0 +1,28 @@
+.floatingBookingWidget {
+  width: var(--max-width-content);
+  margin: 0 auto;
+  min-height: 84px;
+  z-index: 1000;
+  position: relative;
+
+  .floatingBackground {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  &[data-intersecting="true"] {
+    .floatingBackground {
+      background: var(--Surface-UI-Fill-Default);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      margin-top: var(--sitewide-alert-sticky-height);
+      box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+    }
+  }
+}

packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidgetClient.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+import BookingWidgetClient, { type BookingWidgetClientProps } from "../Client"
+
+import styles from "./FloatingBookingWidget.module.css"
+
+type Props = Omit<BookingWidgetClientProps, "type">
+
+export function FloatingBookingWidgetClient(props: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const [stickyTop, setStickyTop] = useState(false)
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      ([entry]) => {
+        const hasScrolledPastTop = entry.boundingClientRect.top < 0
+        setStickyTop(hasScrolledPastTop)
+      },
+      { threshold: 0, rootMargin: "0px 0px -100% 0px" }
+    )
+
+    if (containerRef.current) {
+      observerRef.current?.observe(containerRef.current)
+    }
+
+    return () => {
+      observerRef.current?.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    /*
+     Re-observe the element on an interval to ensure the observer is up to date
+     This is a workaround for the fact that the observer doesn't always trigger
+     when the element is scrolled out of view if you do it too fast
+    */
+    const interval = setInterval(() => {
+      if (!containerRef.current || !observerRef.current) {
+        return
+      }
+
+      observerRef.current.unobserve(containerRef.current)
+      observerRef.current.observe(containerRef.current)
+    }, 500)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div
+      className={styles.floatingBookingWidget}
+      data-intersecting={stickyTop}
+      ref={containerRef}
+    >
+      <div className={styles.floatingBackground}>
+        <BookingWidgetClient {...props} type={"compact"} />
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/index.tsx

@@ -0,0 +1,30 @@
+import {
+  getPageSettingsBookingCode,
+  isBookingWidgetHidden,
+} from "../../../trpc/memoizedRequests"
+import { FloatingBookingWidgetClient } from "./FloatingBookingWidgetClient"
+
+import type { BookingWidgetProps } from ".."
+
+export async function FloatingBookingWidget({
+  booking,
+  lang,
+}: Omit<BookingWidgetProps, "type">) {
+  const isHidden = await isBookingWidgetHidden(lang)
+
+  if (isHidden) {
+    return null
+  }
+
+  let pageSettingsBookingCodePromise: Promise<string> | null = null
+  if (!booking.bookingCode) {
+    pageSettingsBookingCodePromise = getPageSettingsBookingCode(lang)
+  }
+
+  return (
+    <FloatingBookingWidgetClient
+      data={booking}
+      pageSettingsBookingCodePromise={pageSettingsBookingCodePromise}
+    />
+  )
+}