Merged in feat/sw-343-select-hotel-map-view-mobile (pull request #808)

feat/sw-343-select-hotel-map-view-mobile

Approved-by: Niclas Edenvin

components/HotelReservation/SelectHotel/HotelFilter/hotelFilter.module.css

@@ -1,5 +1,6 @@
 .container {
   min-width: 272px;
+  display: none;
 }
 
 .facilities {
@@ -24,3 +25,9 @@
   height: 1.25rem;
   margin: 0;
 }
+
+@media (min-width: 768px) {
+  .container {
+    display: block;
+  }
+}

components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
+import { FilterIcon, MapIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import styles from "./mobileMapButtonContainer.module.css"
+
+export default function MobileMapButtonContainer({ city }: { city: string }) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <div className={styles.buttonContainer}>
+      <Button
+        asChild
+        variant="icon"
+        intent="secondary"
+        size="small"
+        className={styles.button}
+      >
+        <Link
+          href={`${selectHotelMap[lang]}`}
+          keepSearchParams
+          color="burgundy"
+        >
+          <MapIcon color="burgundy" />
+          {intl.formatMessage({ id: "See on map" })}
+        </Link>
+      </Button>
+      {/* TODO: Add filter toggle */}
+      <Button
+        variant="icon"
+        intent="secondary"
+        size="small"
+        className={styles.button}
+      >
+        <FilterIcon color="burgundy" />
+        {intl.formatMessage({ id: "Filter and sort" })}
+      </Button>
+    </div>
+  )
+}

components/HotelReservation/SelectHotel/MobileMapButtonContainer/mobileMapButtonContainer.module.css

@@ -0,0 +1,15 @@
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x3);
+}
+
+.button {
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .buttonContainer {
+    display: none;
+  }
+}

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -0,0 +1,9 @@
+.hotelListing {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .hotelListing {
+    display: block;
+  }
+}

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import styles from "./hotelListing.module.css"
+
 import { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 // TODO: This component is copied from
@@ -7,5 +9,5 @@ import { HotelListingProps } from "@/types/components/hotelReservation/selectHot
 // Look at that for inspiration on how to do the interaction with the map.
 
 export default function HotelListing({}: HotelListingProps) {
-  return <section>Hotel listing TBI</section>
+  return <section className={styles.hotelListing}>Hotel listing TBI</section>
 }

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,14 +1,14 @@
 "use client"
 import { APIProvider } from "@vis.gl/react-google-maps"
+import { useRouter, useSearchParams } from "next/navigation"
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 
-import { CloseIcon } from "@/components/Icons"
+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"
@@ -22,36 +22,60 @@ export default function SelectHotelMap({
   coordinates,
   pointsOfInterest,
   mapId,
+  isModal,
 }: SelectHotelMapProps) {
+  const searchParams = useSearchParams()
+  const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
   const [activePoi, setActivePoi] = useState<string | null>(null)
 
+  function handleModalDismiss() {
+    router.back()
+  }
+
+  function handlePageRedirect() {
+    router.push(`${selectHotel[lang]}?${searchParams.toString()}`)
+  }
+
   const closeButton = (
     <Button
-      asChild
       intent="inverted"
       size="small"
       theme="base"
       className={styles.closeButton}
+      onClick={isModal ? handleModalDismiss : handlePageRedirect}
     >
-      <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
-        <CloseIcon color="burgundy" />
-        {intl.formatMessage({ id: "Close the map" })}
-      </Link>
+      <CloseIcon color="burgundy" />
+      {intl.formatMessage({ id: "Close the map" })}
     </Button>
   )
   return (
     <APIProvider apiKey={apiKey}>
-      <HotelListing />
-      <InteractiveMap
-        closeButton={closeButton}
-        coordinates={coordinates}
-        pointsOfInterest={pointsOfInterest}
-        activePoi={activePoi}
-        onActivePoiChange={setActivePoi}
-        mapId={mapId}
-      />
+      <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>
     </APIProvider>
   )
 }

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

@@ -2,4 +2,39 @@
   pointer-events: initial;
   box-shadow: var(--button-box-shadow);
   gap: var(--Spacing-x-half);
+  display: none !important;
+}
+
+.container {
+  height: 100%;
+}
+
+.filterContainer {
+  display: flex;
+  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;
+}
+
+.filterContainer .closeButton {
+  color: var(--UI-Text-High-Contrast);
+}
+
+@media (min-width: 768px) {
+  .closeButton {
+    display: flex !important;
+  }
+  .filterContainer {
+    display: none;
+  }
+  .container {
+    display: flex;
+  }
 }