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,11 +35,12 @@ export function RoomSelectionPanel({
   return (
     <>
       <RoomTypeFilter
-        numberOfRooms={rooms.roomConfigurations.length}
+        numberOfRooms={rooms?.roomConfigurations.length ?? 0}
-        onFilter={handleFilter}
         filterOptions={defaultPackages}
         initialFilterValues={initialFilterValues}
+        roomListIndex={roomListIndex}
       />
+      {rooms && (
         <RoomTypeList
           roomsAvailability={rooms}
           roomCategories={roomCategories}
@@ -45,6 +49,7 @@ export function RoomSelectionPanel({
           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)
+    handleFilter(initialFilterValues, roomListIndex)
-    setIsInitialized(true)
+  }, [initialFilterValues, handleFilter, roomListIndex])
-  }, [initialFilterValues, onFilter, isInitialized])
 
   // Watch for filter changes
   useEffect(() => {
     const subscription = watch((value, { name }) => {
-      if (!name || !isInitialized) return
+      if (name) handleFilter(getValues(), roomListIndex)
-
-      const currentValues = getValues()
-      onFilter(currentValues)
     })
-
     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 } =
+  useEffect(() => {
-    useRoomFiltering({ roomsAvailability })
+    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}
         />

hooks/selectRate/useRoomFiltering.ts

@@ -1,92 +0,0 @@
-import { useCallback, useMemo, useState } from "react"
-
-import { filterDuplicateRoomTypesByLowestPrice } from "@/components/HotelReservation/SelectRate/Rooms/utils"
-
-import type {
-  RoomPackageCodeEnum,
-  RoomPackageCodes,
-} from "@/types/components/hotelReservation/selectRate/roomFilter"
-import type {
-  RoomConfiguration,
-  RoomsAvailability,
-} from "@/server/routers/hotels/output"
-
-interface UseRoomFilteringProps {
-  roomsAvailability: RoomsAvailability
-}
-
-export function useRoomFiltering({ roomsAvailability }: UseRoomFilteringProps) {
-  const [selectedPackagesByRoom, setSelectedPackagesByRoom] = useState<
-    Record<number, RoomPackageCodes[]>
-  >({})
-
-  const visibleRooms = useMemo(() => {
-    const deduped = filterDuplicateRoomTypesByLowestPrice(
-      roomsAvailability.roomConfigurations
-    )
-
-    const separated = deduped.reduce<{
-      available: RoomConfiguration[]
-      notAvailable: RoomConfiguration[]
-    }>(
-      (acc, curr) => {
-        if (curr.status === "NotAvailable")
-          return { ...acc, notAvailable: [...acc.notAvailable, curr] }
-        return { ...acc, available: [...acc.available, curr] }
-      },
-      { available: [], notAvailable: [] }
-    )
-
-    return [...separated.available, ...separated.notAvailable]
-  }, [roomsAvailability.roomConfigurations])
-
-  const handleFilter = useCallback(
-    (
-      filter: Record<RoomPackageCodeEnum, boolean | undefined>,
-      roomIndex: number
-    ) => {
-      const filteredPackages = Object.keys(filter).filter(
-        (key) => filter[key as RoomPackageCodeEnum]
-      ) as RoomPackageCodeEnum[]
-
-      setSelectedPackagesByRoom((prev) => ({
-        ...prev,
-        [roomIndex]: filteredPackages,
-      }))
-    },
-    []
-  )
-
-  const getFilteredRooms = useCallback(
-    (roomIndex: number) => {
-      const selectedPackages = selectedPackagesByRoom[roomIndex] || []
-
-      return visibleRooms.filter((room) =>
-        selectedPackages.every((filteredPackage) =>
-          room.features.some((feature) => feature.code === filteredPackage)
-        )
-      )
-    },
-    [visibleRooms, selectedPackagesByRoom]
-  )
-  const getRooms = useCallback(
-    (roomIndex: number) => {
-      const selectedPackages = selectedPackagesByRoom[roomIndex] || []
-      const filteredRooms = getFilteredRooms(roomIndex)
-
-      return {
-        ...roomsAvailability,
-        roomConfigurations:
-          selectedPackages.length === 0 ? visibleRooms : filteredRooms,
-      }
-    },
-    [roomsAvailability, visibleRooms, selectedPackagesByRoom, getFilteredRooms]
-  )
-
-  return {
-    selectedPackagesByRoom,
-    getFilteredRooms,
-    getRooms,
-    handleFilter,
-  }
-}

stores/select-rate/room-filtering.ts

@@ -0,0 +1,104 @@
+import { create } from "zustand"
+
+import { filterDuplicateRoomTypesByLowestPrice } from "@/components/HotelReservation/SelectRate/Rooms/utils"
+
+import type {
+  FilterValues,
+  RoomPackageCodeEnum,
+  RoomPackageCodes,
+} from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type {
+  RoomConfiguration,
+  RoomsAvailability,
+} from "@/server/routers/hotels/output"
+
+interface RoomFilteringState {
+  selectedPackagesByRoom: Record<number, RoomPackageCodes[]>
+  roomsAvailability: RoomsAvailability | null
+  visibleRooms: RoomConfiguration[]
+  setVisibleRooms: () => void
+  setRoomsAvailability: (rooms: RoomsAvailability) => void
+  handleFilter: (filter: FilterValues, roomIndex: number) => void
+  getFilteredRooms: (roomIndex: number) => RoomConfiguration[]
+  getRooms: (roomIndex: number) => RoomsAvailability | null
+}
+
+export const useRoomFilteringStore = create<RoomFilteringState>((set, get) => ({
+  selectedPackagesByRoom: {},
+  roomsAvailability: null,
+  visibleRooms: [],
+  setRoomsAvailability: (rooms) => {
+    set({ roomsAvailability: rooms })
+  },
+  setVisibleRooms: () => {
+    const { roomsAvailability } = get()
+    if (!roomsAvailability) return null
+
+    const deduped = filterDuplicateRoomTypesByLowestPrice(
+      roomsAvailability.roomConfigurations
+    )
+
+    const separated = deduped.reduce<{
+      available: RoomConfiguration[]
+      notAvailable: RoomConfiguration[]
+    }>(
+      (acc, curr) => {
+        if (curr.status === "NotAvailable")
+          return { ...acc, notAvailable: [...acc.notAvailable, curr] }
+        return { ...acc, available: [...acc.available, curr] }
+      },
+      { available: [], notAvailable: [] }
+    )
+
+    set({ visibleRooms: [...separated.available, ...separated.notAvailable] })
+  },
+
+  handleFilter: (filter, roomIndex) => {
+    const filteredPackages = Object.entries(filter)
+      .filter(([_, isSelected]) => isSelected)
+      .map(([code]) => code) as RoomPackageCodeEnum[]
+
+    set((state) => {
+      const currentPackages = state.selectedPackagesByRoom[roomIndex] || []
+      const sortedCurrent = [...currentPackages].sort()
+      const sortedNew = [...filteredPackages].sort()
+
+      if (JSON.stringify(sortedCurrent) === JSON.stringify(sortedNew)) {
+        return state
+      }
+
+      return {
+        ...state,
+        selectedPackagesByRoom: {
+          ...state.selectedPackagesByRoom,
+          [roomIndex]: filteredPackages,
+        },
+      }
+    })
+  },
+
+  getFilteredRooms: (roomIndex) => {
+    const state = get()
+    const selectedPackages = state.selectedPackagesByRoom[roomIndex] || []
+
+    return state.visibleRooms.filter((room) =>
+      selectedPackages.every((filteredPackage) =>
+        room.features.some((feature) => feature.code === filteredPackage)
+      )
+    )
+  },
+
+  getRooms: (roomIndex) => {
+    const state = get()
+    if (!state.roomsAvailability) return null
+
+    const selectedPackages = state.selectedPackagesByRoom[roomIndex] || []
+    const filteredRooms = state.getFilteredRooms(roomIndex)
+
+    return {
+      ...state.roomsAvailability,
+      roomConfigurations:
+        selectedPackages.length === 0 ? state.visibleRooms : filteredRooms,
+    }
+  },
+}))

types/components/hotelReservation/selectRate/roomFilter.ts

@@ -19,9 +19,9 @@ export interface FilterValues {
 }
 export interface RoomFilterProps {
   numberOfRooms: number
-  onFilter: (filter: Record<string, boolean | undefined>) => void
   filterOptions: DefaultFilterOptions[]
   initialFilterValues: FilterValues
+  roomListIndex: number
 }
 
 export type RoomPackage = z.output<typeof packagesSchema>

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -3,7 +3,6 @@ import type { RoomsAvailability } from "@/server/routers/hotels/output"
 import type {
   DefaultFilterOptions,
   RoomPackage,
-  RoomPackageCodeEnum,
   RoomPackageCodes,
   RoomPackageData,
 } from "./roomFilter"
@@ -26,14 +25,10 @@ export interface SelectRateProps {
 }
 
 export interface RoomSelectionPanelProps {
-  rooms: RoomsAvailability
   roomCategories: RoomData[]
   availablePackages: RoomPackage[]
   selectedPackages: RoomPackageCodes[]
   hotelType: string | undefined
-  handleFilter: (
-    filter: Record<RoomPackageCodeEnum, boolean | undefined>
-  ) => void
   defaultPackages: DefaultFilterOptions[]
   roomListIndex: number
 }