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}