Merged in feat/SW-342-filtering-and-sorting-mobile (pull request #919)

Feat/SW-342 filtering and sorting mobile

* feat(SW-342): add sort and filter on mobile

* Use zustand for state management

* Add count and translations

* Clear filters

* Small fixes

* Fixes


Approved-by: Pontus Dreij

components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -4,26 +4,28 @@ import { useIntl } from "react-intl"
 
 import { selectHotelMap } from "@/constants/routes/hotelReservation"
 
-import { FilterIcon, MapIcon } from "@/components/Icons"
+import { MapIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
+import FilterAndSortModal from "../FilterAndSortModal"
+
 import styles from "./mobileMapButtonContainer.module.css"
 
-export default function MobileMapButtonContainer({ city }: { city: string }) {
+import { CategorizedFilters } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+
+export default function MobileMapButtonContainer({
+  filters,
+}: {
+  filters: CategorizedFilters
+}) {
   const intl = useIntl()
   const lang = useLang()
 
   return (
     <div className={styles.buttonContainer}>
-      <Button
-        asChild
-        variant="icon"
-        intent="secondary"
-        size="small"
-        className={styles.button}
-      >
+      <Button asChild variant="icon" intent="secondary" size="small">
         <Link
           href={`${selectHotelMap[lang]}`}
           keepSearchParams
@@ -33,16 +35,7 @@ export default function MobileMapButtonContainer({ city }: { city: string }) {
           {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>
+      <FilterAndSortModal filters={filters} />
     </div>
   )
 }