diff --git a/components/HotelReservation/HotelCardDialogListing/utils.ts b/components/HotelReservation/HotelCardDialogListing/utils.ts index bfe491a22..fb658adc0 100644 --- a/components/HotelReservation/HotelCardDialogListing/utils.ts +++ b/components/HotelReservation/HotelCardDialogListing/utils.ts @@ -28,5 +28,8 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] { .slice(0, 3), ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null, operaId: hotel.hotelData.operaId, + facilityIds: hotel.hotelData.detailedFacilities.map( + (facility) => facility.id + ), })) } diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx index bf83bace1..d64a4e883 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx @@ -1,11 +1,12 @@ "use client" import { APIProvider } from "@vis.gl/react-google-maps" import { useSearchParams } from "next/navigation" -import { useEffect, useRef, useState } from "react" +import { useEffect, useMemo, useRef, useState } from "react" import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" import { selectHotel } from "@/constants/routes/hotelReservation" +import { useHotelFilterStore } from "@/stores/hotel-filters" import { CloseIcon, CloseLargeIcon } from "@/components/Icons" import InteractiveMap from "@/components/Maps/InteractiveMap" @@ -37,6 +38,7 @@ export default function SelectHotelMap({ const [activeHotelPin, setActiveHotelPin] = useState(null) const [showBackToTop, setShowBackToTop] = useState(false) const listingContainerRef = useRef(null) + const activeFilters = useHotelFilterStore((state) => state.activeFilters) const selectHotelParams = new URLSearchParams(searchParams.toString()) const selectedHotel = selectHotelParams.get("selectedHotel") @@ -83,6 +85,16 @@ export default function SelectHotelMap({ hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" }) } + const filteredHotelPins = useMemo( + () => + hotelPins.filter((hotel) => + activeFilters.every((filterId) => + hotel.facilityIds.includes(Number(filterId)) + ) + ), + [activeFilters, hotelPins] + ) + const closeButton = (