fix(SW-1111) Moved map to a page instead of intercepted route

components/MapContainer/index.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+
+import { debounce } from "@/utils/debounce"
+
+import styles from "./mapModal.module.css"
+
+export function MapContainer({ children }: { children: React.ReactNode }) {
+  const [mapHeight, setMapHeight] = useState("0px")
+  const [mapTop, setMapTop] = useState("0px")
+  const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
+
+  const rootDiv = useRef<HTMLDivElement | null>(null)
+
+  // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
+  const handleMapHeight = useCallback(() => {
+    const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
+    const scrollY = window.scrollY
+    setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
+    setMapTop(`${topPosition + scrollY}px`)
+  }, [])
+
+  // Making sure the map is always opened at the top of the page,
+  // just below the header and booking widget as these should stay visible.
+  // When closing, the page should scroll back to the position it was before opening the map.
+  useEffect(() => {
+    // Skip the first render
+    if (!rootDiv.current) {
+      return
+    }
+
+    if (scrollHeightWhenOpened === 0) {
+      const scrollY = window.scrollY
+      setScrollHeightWhenOpened(scrollY)
+      window.scrollTo({ top: 0, behavior: "instant" })
+    }
+  }, [scrollHeightWhenOpened, rootDiv])
+
+  useEffect(() => {
+    const debouncedResizeHandler = debounce(function () {
+      handleMapHeight()
+    })
+
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    observer.observe(document.documentElement)
+
+    return () => {
+      if (observer) {
+        observer.unobserve(document.documentElement)
+      }
+    }
+  }, [rootDiv, handleMapHeight])
+
+  return (
+    <div className={styles.wrapper} ref={rootDiv}>
+      <div
+        style={
+          {
+            "--hotel-map-height": mapHeight,
+            "--hotel-map-top": mapTop,
+          } as React.CSSProperties
+        }
+        className={styles.dynamicMap}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}