feat(sw-343) set up intercepted routes for map modal

components/MapModal/index.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect, useRef, useState } from "react"
+import { Dialog, Modal } from "react-aria-components"
+
+import styles from "./mapModal.module.css"
+
+export function MapModal({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
+  const hasMounted = useRef(false)
+
+  function onDismiss() {
+    router.back()
+  }
+
+  // Making sure the map is always opened at the top of the page, just below the header.
+  // When closing, the page should scroll back to the position it was before opening the map.
+  useEffect(() => {
+    // Skip the first render
+    if (!hasMounted.current) {
+      hasMounted.current = true
+      return
+    }
+
+    if (scrollHeightWhenOpened === 0) {
+      setScrollHeightWhenOpened(window.scrollY)
+      window.scrollTo({ top: 0, behavior: "instant" })
+    }
+  }, [scrollHeightWhenOpened])
+
+  return (
+    <Modal isOpen={true}>
+      <Dialog className={styles.dynamicMap}>
+        {children}
+        <button onClick={onDismiss} className="close-button">
+          close
+        </button>
+      </Dialog>
+    </Modal>
+  )
+}

components/MapModal/mapModal.module.css

@@ -0,0 +1,18 @@
+.dynamicMap {
+  position: fixed;
+  top: calc(
+    var(--main-menu-mobile-height) + var(--booking-widget-mobile-height) - 4px
+  );
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--dialog-z-index);
+  display: flex;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+@media screen and (min-width: 768px) {
+  .dynamicMap {
+    top: var(--main-menu-desktop-height);
+  }
+}