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

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

@@ -2,5 +2,11 @@
   display: grid;
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
-  grid-template-columns: 420px 1fr;
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .main {
+    grid-template-columns: 420px 1fr;
+  }
 }

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

@@ -1,6 +1,6 @@
 .main {
   display: flex;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
@@ -29,6 +29,10 @@
   margin-bottom: var(--Spacing-x3);
 }
 
+.button {
+  flex: 1;
+}
+
 @media (min-width: 768px) {
   .mapContainer {
     display: block;
@@ -36,4 +40,7 @@
   .main {
     flex-direction: row;
   }
+  .buttonContainer {
+    display: none;
+  }
 }

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

@@ -9,13 +9,13 @@ import {
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import MobileButtonContainer from "@/components/HotelReservation/SelectHotel/MobileButtonContainer"
 import {
   generateChildrenString,
   getHotelReservationQueryParams,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-import { ChevronRightIcon, MapIcon } from "@/components/Icons"
+import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
@@ -84,18 +84,7 @@ export default async function SelectHotelPage({
             <ChevronRightIcon color="burgundy" />
           </Link>
         </div>
-        <div className={styles.buttonContainer}>
+        <MobileButtonContainer city={searchParams.city} />
-          <Button asChild variant="icon" intent="secondary" size="small">
-            <Link
-              prefetch={false}
-              color="none"
-              href={selectHotelMap[params.lang]}
-            >
-              <MapIcon color="burgundy" />
-              {intl.formatMessage({ id: "See on map" })}
-            </Link>
-          </Button>
-        </div>
         <HotelFilter filters={filterList} />
       </section>
       <HotelCardListing hotelData={hotels} />

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;
+  }
 }

components/Icons/Filter.tsx

@@ -0,0 +1,23 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FilterIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M9.58789 15.8125C9.46046 15.8125 9.34813 15.7681 9.25091 15.6792C9.15368 15.5903 9.10507 15.4819 9.10507 15.3542V10.7292L4.33424 4.9375C4.21618 4.78472 4.19886 4.62153 4.28226 4.44792C4.36568 4.27431 4.508 4.1875 4.70924 4.1875H15.2926C15.4938 4.1875 15.6361 4.27431 15.7196 4.44792C15.803 4.62153 15.7856 4.78472 15.6676 4.9375L10.8967 10.7292V15.3542C10.8967 15.4819 10.8489 15.5903 10.7533 15.6792C10.6577 15.7681 10.5462 15.8125 10.4188 15.8125H9.58789ZM10.0009 9.625L13.3134 5.58333H6.66757L10.0009 9.625Z"
+        fill="#4D001B"
+      />
+    </svg>
+  )
+}

components/Icons/index.tsx

@@ -45,6 +45,7 @@ export { default as ErrorCircleIcon } from "./ErrorCircle"
 export { default as EyeHideIcon } from "./EyeHide"
 export { default as EyeShowIcon } from "./EyeShow"
 export { default as FanIcon } from "./Fan"
+export { default as FilterIcon } from "./Filter"
 export { default as FitnessIcon } from "./Fitness"
 export { default as FootstoolIcon } from "./Footstool"
 export { default as GalleryIcon } from "./Gallery"