feat: pass filters as prop

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -16,9 +16,13 @@ export default async function SelectHotelPage({
   })
   const hotels = [attributes]
 
+  const hotelFitlers = await serverClient().hotel.getFilters({
+    hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
+  })
+
   return (
     <main className={styles.main}>
-      <HotelFilter />
+      <HotelFilter filter={hotelFitlers} />
       <section className={styles.section}>
         {hotels.map((hotel) => (
           <HotelCard key={hotel.name} hotel={hotel} />

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -1,6 +1,6 @@
 .card {
   display: grid;
-  background-color: var(--Base-Surface-Primary-Normal);
+  background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
   min-height: 460px;
@@ -56,12 +56,14 @@
 @media screen and (min-width: 850px) {
   .card {
     grid-template-columns: 1fr min(480px);
-    min-height: 270px;
+    height: 285px;
+    min-height: 285px;
+    width: 850px;
     max-width: 850px;
   }
 
   .image {
-    min-height: 270px;
+    min-height: 285px;
   }
 
   .booking {

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -4,53 +4,39 @@ import { getIntl } from "@/i18n"
 
 import styles from "./hotelFilter.module.css"
 
-export default async function HotelFilter() {
+import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
+
+export default async function HotelFilter({ filter }: HotelFilterProps) {
   const { formatMessage } = await getIntl()
 
-  const filters = await serverClient().hotel.getFilters({
-    hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
-  })
-
-  const hotelFilters = filters.flatMap((filter) => filter.filter)
-
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {formatMessage({ id: "Room facilities" })}
-        {hotelFilters.map((data) =>
-          data.roomFacilities.map((roomFilter) => (
-            <div key={roomFilter} className={styles.filter}>
-              <input id={roomFilter} name={roomFilter} type="checkbox" />
-              <label htmlFor={roomFilter}>{roomFilter}</label>
-            </div>
-          ))
-        )}
+        {filter[0].filter.roomFacilities.map((filter, index) => (
+          <div key={index} className={styles.filter}>
+            <input id={filter} name={filter} type="checkbox" />
+            <label htmlFor={filter}>{filter}</label>
+          </div>
+        ))}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel facilities" })}
-        {hotelFilters.map((data) =>
-          data.hotelFacilities.map((hotelFilter) => (
-            <div key={hotelFilter} className={styles.filter}>
-              <input id={hotelFilter} name={hotelFilter} type="checkbox" />
-              <label htmlFor={hotelFilter}>{hotelFilter}</label>
-            </div>
-          ))
-        )}
+        {filter[0].filter.hotelFacilities.map((filter, index) => (
+          <div key={index} className={styles.filter}>
+            <input id={filter} name={filter} type="checkbox" />
+            <label htmlFor={filter}>{filter}</label>
+          </div>
+        ))}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel surroundings" })}
-        {hotelFilters.map((data) =>
-          data.hotelSurroundings.map((surroundingsFilter) => (
-            <div key={surroundingsFilter} className={styles.filter}>
-              <input
-                id={surroundingsFilter}
-                name={surroundingsFilter}
-                type="checkbox"
-              />
-              <label htmlFor={surroundingsFilter}>{surroundingsFilter}</label>
-            </div>
-          ))
-        )}
+        {filter[0].filter.hotelSurroundings.map((filter, index) => (
+          <div key={index} className={styles.filter}>
+            <input id={filter} name={filter} type="checkbox" />
+            <label htmlFor={filter}>{filter}</label>
+          </div>
+        ))}
       </div>
     </aside>
   )

server/routers/hotels/output.ts

@@ -491,4 +491,4 @@ const HotelFilter = z.object({
 })
 
 export const getFiltersSchema = z.array(HotelFilter)
-export type Filter = z.infer<typeof HotelFilter>
+export type HotelFilter = z.infer<typeof HotelFilter>

server/routers/hotels/query.ts

@@ -106,7 +106,7 @@ export const hotelQueryRouter = router({
       const validateFilterData = getFiltersSchema.safeParse(tempFilterData)
 
       if (!validateFilterData.success) {
-        console.info(`Get Individual Rates Data - Verified Data Error`)
+        console.info(`Get Individual Filter Data - Verified Data Error`)
         console.error(validateFilterData.error)
         throw badRequestError()
       }

types/components/hotelReservation/selectHotel/hotelFilterProps.ts

@@ -1,3 +1,3 @@
-import { Filter } from "@/server/routers/hotels/output"
+import { HotelFilter } from "@/server/routers/hotels/output"
 
-export type HotelFilterProps = { filter: Filter }
+export type HotelFilterProps = { filter: HotelFilter[] }