feat(sw-343) added buttons to open map in mobile

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/MobileButtonContainer/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 "./mobileButtonContainer.module.css"
+
+export default function MobileButtonContainer({ 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]}/${city}`}
+          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/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

@@ -43,6 +43,22 @@ export default function SelectHotelMap({
   )
   return (
     <APIProvider apiKey={apiKey}>
+      <div className={styles.filterContainer}>
+        <Button
+          asChild
+          intent="text"
+          size="small"
+          theme="base"
+          variant="icon"
+          wrapping
+        >
+          <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
+            <CloseIcon color="burgundy" width={32} height={32} />
+          </Link>
+        </Button>
+        <span>Filter and sort</span>
+        {/* TODO: Add filter and sort button */}
+      </div>
       <HotelListing />
       <InteractiveMap
         closeButton={closeButton}

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

@@ -2,4 +2,27 @@
   pointer-events: initial;
   box-shadow: var(--button-box-shadow);
   gap: var(--Spacing-x-half);
+  display: none !important;
+}
+
+.filterContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  padding: 0 var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .closeButton {
+    display: flex !important;
+  }
+  .filterContainer {
+    display: none;
+  }
 }