feat(sw-453): implemented filter from packages

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { useState } from "react"
+
+import { RoomsAvailability } from "@/server/routers/hotels/output"
+
+import RoomFilter from "../RoomFilter"
+import RoomSelection from "../RoomSelection"
+
+import styles from "./rooms.module.css"
+
+import { RoomProps } from "@/types/components/hotelReservation/selectRate/room"
+import { RoomPackageCodes } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function Rooms({
+  roomsAvailability,
+  roomCategories = [],
+  user,
+  packages,
+}: RoomProps) {
+  const [rooms, setRooms] = useState<RoomsAvailability>(roomsAvailability)
+
+  function handleFilter(filter: Record<string, boolean | undefined>) {
+    const selectedCodes = Object.keys(filter).filter((key) => filter[key])
+
+    if (selectedCodes.length === 0) {
+      setRooms(roomsAvailability)
+      return
+    }
+
+    const filteredRooms = roomsAvailability.roomConfigurations.filter((room) =>
+      room.features.some((feature) =>
+        selectedCodes.includes(feature.code as RoomPackageCodes)
+      )
+    )
+    setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
+  }
+
+  return (
+    <div className={styles.content}>
+      <RoomFilter
+        numberOfRooms={rooms.roomConfigurations.length}
+        onFilter={handleFilter}
+        filterOptions={packages}
+      />
+      <RoomSelection
+        roomsAvailability={rooms}
+        roomCategories={roomCategories}
+        user={user}
+      />
+    </div>
+  )
+}

components/HotelReservation/SelectRate/Rooms/rooms.module.css

@@ -0,0 +1,8 @@
+.content {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x7);
+  padding: var(--Spacing-x2);
+}