feat: SW-602 Update states on filter changes

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,6 +1,9 @@
 "use client"
+import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import useRoomAvailableStore from "@/stores/roomAvailability"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import Alert from "@/components/TempDesignSystem/Alert"
@@ -24,10 +27,23 @@ export default function HotelInfoCard({
   const hotelAttributes = hotelData?.data.attributes
   const intl = useIntl()
 
+  const noRoomsAvailable = useRoomAvailableStore(
+    (state) => state.noRoomsAvailable
+  )
+  const setNoRoomsAvailable = useRoomAvailableStore(
+    (state) => state.setNoRoomsAvailable
+  )
+
   const sortedFacilities = hotelAttributes?.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
+  useEffect(() => {
+    if (noAvailability) {
+      setNoRoomsAvailable()
+    }
+  }, [noAvailability, setNoRoomsAvailable])
+
   return (
     <article className={styles.container}>
       {hotelAttributes && (
@@ -101,7 +117,7 @@ export default function HotelInfoCard({
           </div>
         )
       })}
-      {noAvailability ? (
+      {noRoomsAvailable ? (
         <div className={styles.hotelAlert}>
           <Alert
             type={AlertTypeEnum.Info}

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -2,6 +2,8 @@
 
 import { useCallback, useState } from "react"
 
+import useRoomAvailableStore from "@/stores/roomAvailability"
+
 import RoomFilter from "../RoomFilter"
 import RoomSelection from "../RoomSelection"
 import { filterDuplicateRoomTypesByLowestPrice } from "./utils"
@@ -35,6 +37,15 @@ export default function Rooms({
   const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
     []
   )
+  const noRoomsAvailable = useRoomAvailableStore(
+    (state) => state.noRoomsAvailable
+  )
+  const setNoRoomsAvailable = useRoomAvailableStore(
+    (state) => state.setNoRoomsAvailable
+  )
+  const setRoomsAvailable = useRoomAvailableStore(
+    (state) => state.setRoomsAvailable
+  )
 
   const handleFilter = useCallback(
     (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
@@ -57,6 +68,10 @@ export default function Rooms({
           })
         }
 
+        if (noRoomsAvailable) {
+          setRoomsAvailable()
+        }
+
         return
       }
 
@@ -65,7 +80,27 @@ export default function Rooms({
           room.features.some((feature) => feature.code === filteredPackage)
         )
       )
-      setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
+      let notAvailableRooms = visibleRooms.filter((room) =>
+        filteredPackages.every(
+          (filteredPackage) =>
+            !room.features.some((feature) => feature.code === filteredPackage)
+        )
+      )
+      // Clone nested object to keep original object intact and not messup the room data
+      notAvailableRooms = JSON.parse(JSON.stringify(notAvailableRooms))
+      notAvailableRooms.forEach((room) => {
+        room.status = "NotAvailable"
+      })
+      setRooms({
+        ...roomsAvailability,
+        roomConfigurations: [...filteredRooms, ...notAvailableRooms],
+      })
+
+      if (filteredRooms.length == 0) {
+        setNoRoomsAvailable()
+      } else if (noRoomsAvailable) {
+        setRoomsAvailable()
+      }
 
       const petRoomPackage =
         (filteredPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
@@ -85,7 +120,15 @@ export default function Rooms({
         })
       }
     },
-    [roomsAvailability, visibleRooms, rateSummary, packages]
+    [
+      roomsAvailability,
+      visibleRooms,
+      rateSummary,
+      packages,
+      noRoomsAvailable,
+      setNoRoomsAvailable,
+      setRoomsAvailable,
+    ]
   )
 
   return (

stores/roomAvailability.ts

@@ -0,0 +1,17 @@
+"use client"
+
+import { create } from "zustand"
+
+interface RoomAvailabilityState {
+  noRoomsAvailable: boolean
+  setNoRoomsAvailable: () => void
+  setRoomsAvailable: () => void
+}
+
+const useRoomAvailableStore = create<RoomAvailabilityState>((set) => ({
+  noRoomsAvailable: false,
+  setNoRoomsAvailable: () => set(() => ({ noRoomsAvailable: true })),
+  setRoomsAvailable: () => set(() => ({ noRoomsAvailable: false })),
+}))
+
+export default useRoomAvailableStore