feat(sw-343): fixed map page (without modal)

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -9,7 +9,6 @@ import { selectHotel } from "@/constants/routes/hotelReservation"
 import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import HotelListing from "./HotelListing"
@@ -23,23 +22,30 @@ export default function SelectHotelMap({
   coordinates,
   pointsOfInterest,
   mapId,
+  isModal,
 }: SelectHotelMapProps) {
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
   const [activePoi, setActivePoi] = useState<string | null>(null)
 
-  function onDismiss() {
+  function handleModalDismiss() {
     router.back()
   }
 
+  function handlePageRedirect() {
+    router.push(
+      `${selectHotel[lang]}?${new URLSearchParams(window.location.search)}`
+    )
+  }
+
   const closeButton = (
     <Button
       intent="inverted"
       size="small"
       theme="base"
       className={styles.closeButton}
-      onClick={onDismiss}
+      onClick={isModal ? handleModalDismiss : handlePageRedirect}
     >
       <CloseIcon color="burgundy" />
       {intl.formatMessage({ id: "Close the map" })}
@@ -47,28 +53,30 @@ export default function SelectHotelMap({
   )
   return (
     <APIProvider apiKey={apiKey}>
-      <div className={styles.filterContainer}>
-        <Button
-          intent="text"
-          size="small"
-          variant="icon"
-          wrapping
-          onClick={onDismiss}
-        >
-          <CloseLargeIcon />
-        </Button>
-        <span>Filter and sort</span>
-        {/* TODO: Add filter and sort button */}
+      <div className={styles.container}>
+        <div className={styles.filterContainer}>
+          <Button
+            intent="text"
+            size="small"
+            variant="icon"
+            wrapping
+            onClick={isModal ? handleModalDismiss : handlePageRedirect}
+          >
+            <CloseLargeIcon />
+          </Button>
+          <span>Filter and sort</span>
+          {/* TODO: Add filter and sort button */}
+        </div>
+        <HotelListing />
+        <InteractiveMap
+          closeButton={closeButton}
+          coordinates={coordinates}
+          pointsOfInterest={pointsOfInterest}
+          activePoi={activePoi}
+          onActivePoiChange={setActivePoi}
+          mapId={mapId}
+        />
       </div>
-      <HotelListing />
-      <InteractiveMap
-        closeButton={closeButton}
-        coordinates={coordinates}
-        pointsOfInterest={pointsOfInterest}
-        activePoi={activePoi}
-        onActivePoiChange={setActivePoi}
-        mapId={mapId}
-      />
     </APIProvider>
   )
 }

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

@@ -5,6 +5,10 @@
   display: none !important;
 }
 
+.container {
+  height: 100%;
+}
+
 .filterContainer {
   display: flex;
   justify-content: space-between;
@@ -16,6 +20,7 @@
   z-index: 10;
   background-color: var(--Base-Surface-Secondary-light-Normal);
   padding: 0 var(--Spacing-x2);
+  height: 44px;
 }
 
 .filterContainer .closeButton {