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

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { APIProvider } from "@vis.gl/react-google-maps"
-import { useRouter, useSearchParams } from "next/navigation"
+import { useSearchParams } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
@@ -11,6 +11,7 @@ import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import FilterAndSortModal from "../FilterAndSortModal"
@@ -29,7 +30,7 @@ export default function SelectHotelMap({
   cityCoordinates,
 }: SelectHotelMapProps) {
   const searchParams = useSearchParams()
-  const router = useRouter()
+
   const lang = useLang()
   const intl = useIntl()
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
@@ -82,25 +83,18 @@ export default function SelectHotelMap({
     hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
   }
 
-  function handlePageRedirect() {
-    const newUrl = `${selectHotel(lang)}?${searchParams.toString()}`
-    if (window.history.length > 1) {
-      router.back()
-    } else {
-      router.push(newUrl)
-    }
-  }
-
   const closeButton = (
     <Button
       intent="inverted"
       size="small"
       theme="base"
       className={styles.closeButton}
-      onClick={handlePageRedirect}
+      asChild
     >
-      <CloseIcon color="burgundy" />
-      {intl.formatMessage({ id: "Close the map" })}
+      <Link href={selectHotel(lang)} keepSearchParams>
+        <CloseIcon color="burgundy" />
+        {intl.formatMessage({ id: "Close the map" })}
+      </Link>
     </Button>
   )
   return (
@@ -113,10 +107,12 @@ export default function SelectHotelMap({
               size="small"
               variant="icon"
               wrapping
-              onClick={handlePageRedirect}
               className={styles.filterContainerCloseButton}
+              asChild
             >
-              <CloseLargeIcon />
+              <Link href={selectHotel(lang)} keepSearchParams>
+                <CloseLargeIcon />
+              </Link>
             </Button>
             <FilterAndSortModal filters={filterList} />
           </div>
@@ -126,7 +122,7 @@ export default function SelectHotelMap({
             setActiveHotelPin={setActiveHotelPin}
           />
           {showBackToTop && (
-            <BackToTopButton position="right" onClick={scrollToTop} />
+            <BackToTopButton position="left" onClick={scrollToTop} />
           )}
         </div>
         <InteractiveMap

components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css

@@ -14,10 +14,6 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
   background-color: var(--Base-Surface-Secondary-light-Normal);
   padding: 0 var(--Spacing-x2);
   height: 44px;