feat(SW-251): use response to render filters

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

@@ -33,7 +33,7 @@ async function getAvailableHotels({
   const { availability } = getAvailableHotels
 
   const hotels = availability.map(async (hotel) => {
-    const hotelData = await serverClient().hotel.hotel.get({
+    const hotelData = await serverClient().hotel.hotelData.get({
       hotelId: hotel.hotelId.toString(),
       language: getLang(),
     })
@@ -53,7 +53,6 @@ export default async function SelectHotelPage({
   setLang(params.lang)
 
   const tempSearchTerm = "Stockholm"
-
   const intl = await getIntl()
 
   const hotels = await getAvailableHotels({
@@ -64,9 +63,37 @@ export default async function SelectHotelPage({
   })
 
   if (!hotels) return null
-
   if (hotels.some((item) => item?.hotelData === undefined)) return notFound()
 
+  const filters = hotels.flatMap((data) => data.hotelData?.detailedFacilities)
+
+  const filterId = [...new Set(filters.map((data) => data?.id))]
+  const filterList: {
+    name: string
+    id: number
+    applyToAllHotels: boolean
+    public: boolean
+    icon: string
+    sortOrder: number
+    code?: string
+    iconName?: string
+  }[] = filterId
+    .map((data) => filters.find((find) => find?.id === data))
+    .filter(
+      (
+        filter
+      ): filter is {
+        name: string
+        id: number
+        applyToAllHotels: boolean
+        public: boolean
+        icon: string
+        sortOrder: number
+        code?: string
+        iconName?: string
+      } => filter !== undefined
+    )
+
   return (
     <main className={styles.main}>
       <section className={styles.section}>
@@ -82,7 +109,7 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        <HotelFilter />
+        <HotelFilter filters={filterList} />
       </section>
       <HotelCardListing hotelData={hotels} />
     </main>

components/HotelReservation/HotelCard/index.tsx

@@ -25,19 +25,16 @@ export default function HotelCard({ hotel }: HotelCardProps) {
   const { hotelData } = hotel
   const { price } = hotel
 
-  if (!hotelData) return null
-  if (!price) return null
-
-  const sortedAmenities = hotelData.detailedFacilities
-    ?.sort((a, b) => b.sortOrder - a.sortOrder)
+  const sortedAmenities = hotelData?.detailedFacilities
+    .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
   return (
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotelData.hotelContent.images.imageSizes.medium}
-          alt={hotelData.hotelContent.images.metaData.altText}
+          src={hotelData?.hotelContent.images.imageSizes.medium ?? ""}
+          alt={hotelData?.hotelContent.images.metaData.altText ?? ""}
           width={300}
           height={200}
           className={styles.image}
@@ -45,20 +42,20 @@ export default function HotelCard({ hotel }: HotelCardProps) {
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotelData.ratings?.tripAdvisor.rating}
+            {hotelData?.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotelData.name}
+          {hotelData?.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotelData.address?.streetAddress}, ${hotelData.address?.city}`}
+          {`${hotelData?.address?.streetAddress}, ${hotelData?.address?.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${hotelData?.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
       <section className={styles.hotel}>

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,23 +1,28 @@
-import { getIntl } from "@/i18n"
+"use client"
+
+import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-export default async function HotelFilter() {
-  const intl = await getIntl()
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+
+export default function HotelFilter({ filters }: HotelFiltersProps) {
+  const intl = useIntl()
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {intl.formatMessage({ id: "Hotel facilities" })}
-      </div>
-      <div className={styles.facilities}>
-        {intl.formatMessage({ id: "Hotel surroundings" })}
-        {/* {filters.hotelSurroundings.map((surroundings) => (
-          <div key={surroundings} className={styles.filter}>
-            <input id={surroundings} name={surroundings} type="checkbox" />
-            <label htmlFor={surroundings}>{surroundings}</label>
-          </div>
-        ))} */}
+        <form>
+          <ul>
+            {filters.map((data) => (
+              <li key={data?.id} className={styles.filter}>
+                <input id={`${data?.id}`} name={data?.name} type="checkbox" />
+                <label htmlFor={`${data?.id}`}>{data?.name}</label>
+              </li>
+            ))}
+          </ul>
+        </form>
       </div>
     </aside>
   )

server/routers/hotels/input.ts

@@ -21,7 +21,7 @@ export const getRatesInputSchema = z.object({
   hotelId: z.string(),
 })
 
-export const getPlaceholderInputSchema = z.object({
+export const getlHotelDataInputSchema = z.object({
   hotelId: z.string(),
   language: z.string(),
   include: z

server/routers/hotels/query.ts

@@ -28,7 +28,7 @@ import {
 import {
   getAvailabilityInputSchema,
   getHotelInputSchema,
-  getPlaceholderInputSchema,
+  getlHotelDataInputSchema,
   getRatesInputSchema,
 } from "./input"
 import {
@@ -55,10 +55,6 @@ const availabilityFailCounter = meter.createCounter(
   "trpc.hotel.availability-fail"
 )
 
-const filterCounter = meter.createCounter("trcp.hotel.filter")
-const filterSuccessCounter = meter.createCounter("trcp.hotel.filter-success")
-const filterFailCounter = meter.createCounter("trcp.hotel.filter-fail")
-
 async function getContentstackData(
   locale: string,
   uid: string | null | undefined
@@ -421,9 +417,9 @@ export const hotelQueryRouter = router({
         return validatedHotelData.data
       }),
   }),
-  hotel: router({
+  hotelData: router({
     get: serviceProcedure
-      .input(getPlaceholderInputSchema)
+      .input(getlHotelDataInputSchema)
       .query(async ({ ctx, input }) => {
         const { hotelId, language, include } = input
 

types/components/hotelReservation/selectHotel/hotelFilters.ts

@@ -0,0 +1,5 @@
+import { Hotel } from "@/types/hotel"
+
+export type HotelFiltersProps = {
+  filters: Hotel["detailedFacilities"]
+}