feat(SW-718) created useRoomFilteringStore

components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx

@@ -1,6 +1,8 @@
 import { useSearchParams } from "next/navigation"
 import { useMemo } from "react"
 
+import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"
+
 import RoomTypeFilter from "../RoomTypeFilter"
 import RoomTypeList from "../RoomTypeList"
 
@@ -8,16 +10,17 @@ import type { FilterValues } from "@/types/components/hotelReservation/selectRat
 import type { RoomSelectionPanelProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 
 export function RoomSelectionPanel({
-  rooms,
   roomCategories,
   availablePackages,
   selectedPackages,
   hotelType,
-  handleFilter,
   defaultPackages,
   roomListIndex,
 }: RoomSelectionPanelProps) {
   const searchParams = useSearchParams()
+  const { getRooms } = useRoomFilteringStore()
+
+  const rooms = getRooms(roomListIndex)
 
   const initialFilterValues = useMemo(() => {
     const packagesFromSearchParams =
@@ -32,19 +35,21 @@ export function RoomSelectionPanel({
   return (
     <>
       <RoomTypeFilter
-        numberOfRooms={rooms.roomConfigurations.length}
-        onFilter={handleFilter}
+        numberOfRooms={rooms?.roomConfigurations.length ?? 0}
         filterOptions={defaultPackages}
         initialFilterValues={initialFilterValues}
-      />
-      <RoomTypeList
-        roomsAvailability={rooms}
-        roomCategories={roomCategories}
-        availablePackages={availablePackages}
-        selectedPackages={selectedPackages}
-        hotelType={hotelType}
         roomListIndex={roomListIndex}
       />
+      {rooms && (
+        <RoomTypeList
+          roomsAvailability={rooms}
+          roomCategories={roomCategories}
+          availablePackages={availablePackages}
+          selectedPackages={selectedPackages}
+          hotelType={hotelType}
+          roomListIndex={roomListIndex}
+        />
+      )}
     </>
   )
 }

components/HotelReservation/SelectRate/RoomTypeFilter/index.tsx

@@ -7,6 +7,8 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 import { z } from "zod"
 
+import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"
+
 import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
 import { InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
@@ -24,13 +26,12 @@ import {
 
 export default function RoomFilter({
   numberOfRooms,
-  onFilter,
   filterOptions,
   initialFilterValues,
+  roomListIndex,
 }: RoomFilterProps) {
   const isTabletAndUp = useMediaQuery("(min-width: 768px)")
   const [isAboveMobile, setIsAboveMobile] = useState(false)
-  const [isInitialized, setIsInitialized] = useState(false)
 
   const intl = useIntl()
   const methods = useForm<FilterValues>({
@@ -40,6 +41,8 @@ export default function RoomFilter({
     resolver: zodResolver(z.object({})),
   })
 
+  const { handleFilter } = useRoomFilteringStore()
+
   const { watch, getValues } = methods
   const petFriendly = watch(RoomPackageCodeEnum.PET_ROOM)
   const allergyFriendly = watch(RoomPackageCodeEnum.ALLERGY_ROOM)
@@ -51,23 +54,18 @@ export default function RoomFilter({
   })
 
   useEffect(() => {
-    if (!initialFilterValues || isInitialized) return
+    if (!initialFilterValues) return
 
-    onFilter(initialFilterValues)
-    setIsInitialized(true)
-  }, [initialFilterValues, onFilter, isInitialized])
+    handleFilter(initialFilterValues, roomListIndex)
+  }, [initialFilterValues, handleFilter, roomListIndex])
 
   // Watch for filter changes
   useEffect(() => {
     const subscription = watch((value, { name }) => {
-      if (!name || !isInitialized) return
-
-      const currentValues = getValues()
-      onFilter(currentValues)
+      if (name) handleFilter(getValues(), roomListIndex)
     })
-
     return () => subscription.unsubscribe()
-  }, [watch, getValues, onFilter, isInitialized])
+  }, [watch, getValues, handleFilter, roomListIndex])
 
   useEffect(() => {
     setIsAboveMobile(isTabletAndUp)

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { useCallback, useEffect, useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
+import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"
 
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
 import { trackLowestRoomPrice } from "@/utils/tracking"
 import { convertObjToSearchParams, convertSearchParamsToObj } from "@/utils/url"
 
@@ -45,6 +45,13 @@ export default function Rooms({
   const { selectedRates, rateSummary, calculateRateSummary, initializeRates } =
     useRateSelectionStore()
 
+  const {
+    selectedPackagesByRoom,
+    setVisibleRooms,
+    setRoomsAvailability,
+    getFilteredRooms,
+  } = useRoomFilteringStore()
+
   const bookingWidgetSearchData = useMemo(
     () =>
       convertSearchParamsToObj<SelectRateSearchParams>(
@@ -109,8 +116,10 @@ export default function Rooms({
     [availablePackages, intl]
   )
 
-  const { selectedPackagesByRoom, getRooms, handleFilter, getFilteredRooms } =
-    useRoomFiltering({ roomsAvailability })
+  useEffect(() => {
+    setRoomsAvailability(roomsAvailability)
+    setVisibleRooms()
+  }, [roomsAvailability, setRoomsAvailability, setVisibleRooms])
 
   useEffect(() => {
     if (
@@ -183,14 +192,6 @@ export default function Rooms({
     router.push(`select-bed?${queryParams}`)
   }
 
-  const handleFilterForRoom = useCallback(
-    (index: number) =>
-      (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
-        handleFilter(filter, index)
-      },
-    [handleFilter]
-  )
-
   useEffect(() => {
     setTimeout(() => {
       const SCROLL_OFFSET = 100
@@ -252,12 +253,10 @@ export default function Rooms({
                 </div>
                 <div className={styles.roomSelectionPanel}>
                   <RoomSelectionPanel
-                    rooms={getRooms(index)}
                     roomCategories={roomCategories}
                     availablePackages={availablePackages}
                     selectedPackages={selectedPackagesByRoom[index]}
                     hotelType={hotelType}
-                    handleFilter={handleFilterForRoom(index)}
                     defaultPackages={defaultPackages}
                     roomListIndex={index}
                   />
@@ -268,12 +267,10 @@ export default function Rooms({
         })
       ) : (
         <RoomSelectionPanel
-          rooms={getRooms(0)}
           roomCategories={roomCategories}
           availablePackages={availablePackages}
           selectedPackages={selectedPackagesByRoom[0]}
           hotelType={hotelType}
-          handleFilter={handleFilterForRoom(0)}
           defaultPackages={defaultPackages}
           roomListIndex={0}
         />