feat: add router for filters

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

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: repeat(3, minmax(min-content, max-content));
   padding: 32px 32px 0px 32px;
+  height: 100dvh;
   background-color: var(--Scandic-Brand-Warm-White);
 }
 

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

@@ -14,7 +14,6 @@ export default async function SelectHotelPage({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
     language: params.lang,
   })
-
   const hotels = [attributes]
 
   return (

components/HotelReservation/SelectHotel/HotelFilter/hotelFilter.module.css

@@ -5,13 +5,14 @@
 .facilities {
   flex-direction: column;
   font-family: var(--typography-Body-Bold-fontFamily);
-  margin: var(--Spacing-x3) 0;
+  margin-bottom: var(--Spacing-x3);
 }
 
 .filter {
   display: grid;
   grid-template-columns: repeat(2, minmax(min-content, max-content));
   gap: var(--Spacing-x-one-and-half);
+  margin-bottom: var(--Spacing-x-one-and-half);
   align-items: center;
 }
 

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,31 +1,56 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import { getIntl } from "@/i18n"
 
 import styles from "./hotelFilter.module.css"
 
 export default async function HotelFilter() {
   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" })}
-        <div className={styles.filter}>
-          <input id="balcony" name="balcony" type="checkbox" />
-          <label htmlFor="balcony">Balcony</label>
-        </div>
+        {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>
+          ))
+        )}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel facilities" })}
-        <div className={styles.filter}>
-          <input id="balcony" name="balcony" type="checkbox" />
-          <label htmlFor="balcony">Balcony</label>
-        </div>
+        {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>
+          ))
+        )}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel surroundings" })}
-        <div className={styles.filter}>
-          <input id="balcony" name="balcony" type="checkbox" />
-          <label htmlFor="balcony">Balcony</label>
-        </div>
+        {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>
+          ))
+        )}
       </div>
     </aside>
   )

server/routers/hotels/input.ts

@@ -13,3 +13,7 @@ export const getHotelInputSchema = z.object({
 export const getRatesInputSchema = z.object({
   hotelId: z.string(),
 })
+
+export const getFiltersInputSchema = z.object({
+  hotelId: z.string(),
+})

server/routers/hotels/output.ts

@@ -481,3 +481,14 @@ const Rate = z.object({
 export const getRatesSchema = z.array(Rate)
 
 export type Rate = z.infer<typeof Rate>
+
+const HotelFilter = z.object({
+  filter: z.object({
+    roomFacilities: z.array(z.string()),
+    hotelFacilities: z.array(z.string()),
+    hotelSurroundings: z.array(z.string()),
+  }),
+})
+
+export const getFiltersSchema = z.array(HotelFilter)
+export type Filter = z.infer<typeof HotelFilter>

server/routers/hotels/query.ts

@@ -2,8 +2,18 @@ import * as api from "@/lib/api"
 import { badRequestError } from "@/server/errors/trpc"
 import { publicProcedure, router } from "@/server/trpc"
 
-import { getHotelInputSchema, getRatesInputSchema } from "./input"
-import { getHotelDataSchema, getRatesSchema, RoomSchema } from "./output"
+import {
+  getFiltersInputSchema,
+  getHotelInputSchema,
+  getRatesInputSchema,
+} from "./input"
+import {
+  getFiltersSchema,
+  getHotelDataSchema,
+  getRatesSchema,
+  RoomSchema,
+} from "./output"
+import tempFilterData from "./tempFilterData.json"
 import tempHotelData from "./tempHotelData.json"
 import tempRatesData from "./tempRatesData.json"
 import { toApiLang } from "./utils"
@@ -90,4 +100,17 @@ export const hotelQueryRouter = router({
 
       return validatedHotelData.data
     }),
+  getFilters: publicProcedure
+    .input(getFiltersInputSchema)
+    .query(async ({ input, ctx }) => {
+      const validateFilterData = getFiltersSchema.safeParse(tempFilterData)
+
+      if (!validateFilterData.success) {
+        console.info(`Get Individual Rates Data - Verified Data Error`)
+        console.error(validateFilterData.error)
+        throw badRequestError()
+      }
+
+      return validateFilterData.data
+    }),
 })

server/routers/hotels/tempFilterData.json

@@ -0,0 +1,26 @@
+[
+  {
+    "filter": {
+      "roomFacilities": ["Balcony", "Bathub", "View", "Conntecting doors"],
+      "hotelFacilities": [
+        "Parking inside",
+        "Parking outside",
+        "Parking electric",
+        "Sauna",
+        "Pool",
+        "Restaurant",
+        "Bar",
+        "Sky/rooftop bar",
+        "Gym",
+        "Coworking"
+      ],
+      "hotelSurroundings": [
+        "Beach",
+        "Lake or sea",
+        "Hiking",
+        "Mountains",
+        "Golf course"
+      ]
+    }
+  }
+]

types/components/hotelReservation/selectHotel/hotelFilterProps.ts

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