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

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/loading.tsx

@@ -1,5 +0,0 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
-
-export default function LoadingModal() {
-  return <LoadingSpinner />
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -1,79 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { env } from "@/env/server"
-import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests"
-
-import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
-import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
-import {
-  generateChildrenString,
-  getHotelReservationQueryParams,
-} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-import { MapModal } from "@/components/MapModal"
-import { setLang } from "@/i18n/serverContext"
-
-import { fetchAvailableHotels, getFiltersFromHotels } from "../../utils"
-
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function SelectHotelMapPage({
-  params,
-  searchParams,
-}: PageArgs<LangParams, SelectHotelSearchParams>) {
-  setLang(params.lang)
-  const locations = await getLocations()
-
-  if (!locations || "error" in locations) {
-    return null
-  }
-  const city = locations.data.find(
-    (location) =>
-      location.name.toLowerCase() === searchParams.city.toLowerCase()
-  )
-  if (!city) return notFound()
-
-  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
-
-  const selectHotelParams = new URLSearchParams(searchParams)
-  const selectHotelParamsObject =
-    getHotelReservationQueryParams(selectHotelParams)
-  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selectHotelParamsObject.room[0].child
-    ? generateChildrenString(selectHotelParamsObject.room[0].child)
-    : undefined // TODO: Handle multiple rooms
-
-  const hotels = await fetchAvailableHotels({
-    cityId: city.id,
-    roomStayStartDate: searchParams.fromDate,
-    roomStayEndDate: searchParams.toDate,
-    adults,
-    children,
-  })
-
-  const validHotels = hotels.filter(
-    (hotel): hotel is HotelData => hotel !== null
-  )
-
-  const hotelPins = getHotelPins(validHotels)
-  const filterList = getFiltersFromHotels(validHotels)
-  const cityCoordinates = await getCityCoordinates({
-    city: city.name,
-    hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
-  })
-
-  return (
-    <MapModal>
-      <SelectHotelMap
-        apiKey={googleMapsApiKey}
-        hotelPins={hotelPins}
-        mapId={googleMapId}
-        hotels={validHotels}
-        filterList={filterList}
-        cityCoordinates={cityCoordinates}
-      />
-    </MapModal>
-  )
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return null
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css

@@ -2,4 +2,11 @@
   min-height: 100dvh;
   background-color: var(--Base-Background-Primary-Normal);
   position: relative;
+  z-index: var(--header-z-index);
+}
+
+@media screen and (min-width: 768px) {
+  .layout {
+    z-index: 0;
+  }
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.tsx

@@ -4,14 +4,6 @@ import { LangParams, LayoutArgs } from "@/types/params"
 
 export default function HotelReservationLayout({
   children,
-  modal,
-}: React.PropsWithChildren<
-  LayoutArgs<LangParams> & { modal: React.ReactNode }
->) {
-  return (
-    <div className={styles.layout}>
-      {children}
-      {modal}
-    </div>
-  )
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  return <div className={styles.layout}>{children}</div>
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/layout.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { useEffect } from "react"
+
+import styles from "../layout.module.css"
+
+import { LangParams, LayoutArgs } from "@/types/params"
+
+export default function HotelReservationLayout({
+  children,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden"
+
+    return () => {
+      document.body.style.overflow = ""
+    }
+  }, [])
+  return <div className={styles.layout}>{children}</div>
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -1 +1,79 @@
-export { default } from "../@modal/(.)map/page"
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests"
+
+import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
+import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
+import {
+  generateChildrenString,
+  getHotelReservationQueryParams,
+} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { MapContainer } from "@/components/MapContainer"
+import { setLang } from "@/i18n/serverContext"
+
+import { fetchAvailableHotels, getFiltersFromHotels } from "../utils"
+
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, SelectHotelSearchParams>) {
+  setLang(params.lang)
+  const locations = await getLocations()
+
+  if (!locations || "error" in locations) {
+    return null
+  }
+  const city = locations.data.find(
+    (location) =>
+      location.name.toLowerCase() === searchParams.city.toLowerCase()
+  )
+  if (!city) return notFound()
+
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+
+  const selectHotelParams = new URLSearchParams(searchParams)
+  const selectHotelParamsObject =
+    getHotelReservationQueryParams(selectHotelParams)
+  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectHotelParamsObject.room[0].child
+    ? generateChildrenString(selectHotelParamsObject.room[0].child)
+    : undefined // TODO: Handle multiple rooms
+
+  const hotels = await fetchAvailableHotels({
+    cityId: city.id,
+    roomStayStartDate: searchParams.fromDate,
+    roomStayEndDate: searchParams.toDate,
+    adults,
+    children,
+  })
+
+  const validHotels = hotels.filter(
+    (hotel): hotel is HotelData => hotel !== null
+  )
+
+  const hotelPins = getHotelPins(validHotels)
+  const filterList = getFiltersFromHotels(validHotels)
+  const cityCoordinates = await getCityCoordinates({
+    city: city.name,
+    hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
+  })
+
+  return (
+    <MapContainer>
+      <SelectHotelMap
+        apiKey={googleMapsApiKey}
+        hotelPins={hotelPins}
+        mapId={googleMapId}
+        hotels={validHotels}
+        filterList={filterList}
+        cityCoordinates={cityCoordinates}
+      />
+    </MapContainer>
+  )
+}

app/[lang]/(live)/layout.tsx

@@ -3,7 +3,6 @@ import "@scandic-hotels/design-system/style.css"
 
 import Script from "next/script"
 
-import { env } from "@/env/server"
 import TrpcProvider from "@/lib/trpc/Provider"
 
 import TokenRefresher from "@/components/Auth/TokenRefresher"