fix(SW-1111) added filter on pins

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
+    ),
   }))
 }

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<string | null>(null)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
   const listingContainerRef = useRef<HTMLDivElement | null>(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 = (
     <Button
       intent="inverted"
@@ -128,7 +140,7 @@ export default function SelectHotelMap({
         <InteractiveMap
           closeButton={closeButton}
           coordinates={coordinates}
-          hotelPins={hotelPins}
+          hotelPins={filteredHotelPins}
           activeHotelPin={activeHotelPin}
           onActiveHotelPinChange={setActiveHotelPin}
           mapId={mapId}

types/components/hotelReservation/selectHotel/map.ts

@@ -41,6 +41,7 @@ export type HotelPin = {
   amenities: Filter[]
   ratings: number | null
   operaId: string
+  facilityIds: number[]
 }
 
 export interface HotelListingMapContentProps {