Merged in feature/SW-1736-foating-booking-widget (pull request #1696)

Feature/SW-1736 floating booking widget

* feature: Add floating booking widget on start page SW-1736

* fix: Make sure we don't try to use IntersectionObserver on the server

* fix: make sure that we disconnect the intersectionobserver when dismounting

* fix: pass searchparams to floating bookingwidget


Approved-by: Michael Zetterberg

apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidgetClient.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+import BookingWidgetClient from "../Client"
+
+import styles from "./FloatingBookingWidget.module.css"
+
+import type { BookingWidgetClientProps } from "@/types/components/bookingWidget"
+
+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>
+  )
+}