fix(sw-453): Correct view of cards and icons when filter

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -9,6 +9,10 @@ import RoomSelection from "../RoomSelection"
 
 import styles from "./rooms.module.css"
 
+import {
+  RoomPackageCodeEnum,
+  type RoomPackageCodes,
+} from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 
 export default function Rooms({
@@ -16,20 +20,25 @@ export default function Rooms({
   roomCategories = [],
   user,
   packages,
-}: RoomSelectionProps) {
-  const defaultRooms = roomsAvailability.roomConfigurations.filter(
-    (room) => room.features.length === 0
-  )
+}: Omit<RoomSelectionProps, "selectedPackages">) {
+  const defaultRooms = roomsAvailability.roomConfigurations
   const [rooms, setRooms] = useState<RoomsAvailability>({
     ...roomsAvailability,
     roomConfigurations: defaultRooms,
   })
+  const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
+    []
+  )
 
   const handleFilter = useCallback(
-    (filter: Record<string, boolean | undefined>) => {
-      const selectedCodes = Object.keys(filter).filter((key) => filter[key])
+    (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
+      const filteredPackages = Object.keys(filter).filter(
+        (key) => filter[key as RoomPackageCodeEnum]
+      ) as RoomPackageCodeEnum[]
 
-      if (selectedCodes.length === 0) {
+      setSelectedPackages(filteredPackages)
+
+      if (filteredPackages.length === 0) {
         setRooms({
           ...roomsAvailability,
           roomConfigurations: defaultRooms,
@@ -39,8 +48,8 @@ export default function Rooms({
 
       const filteredRooms = roomsAvailability.roomConfigurations.filter(
         (room) =>
-          selectedCodes.every((selectedCode) =>
-            room.features.some((feature) => feature.code === selectedCode)
+          filteredPackages.every((filteredPackage) =>
+            room.features.some((feature) => feature.code === filteredPackage)
           )
       )
       setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
@@ -60,6 +69,7 @@ export default function Rooms({
         roomCategories={roomCategories}
         user={user}
         packages={packages}
+        selectedPackages={selectedPackages}
       />
     </div>
   )