From 3f6e2ca06e885dcf8493b192d79e9b4407fb50dc Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 4 Sep 2024 13:44:16 +0200
Subject: [PATCH 01/14] feat(SW-251): set up filter route

---
 .../hotelreservation/select-hotel/page.tsx    | 24 +++--
 .../SelectHotel/HotelFilter/index.tsx         | 12 +--
 server/routers/hotels/input.ts                |  4 +-
 server/routers/hotels/output.ts               | 30 +++++--
 server/routers/hotels/query.ts                | 88 +++++++++++++++++--
 5 files changed, 129 insertions(+), 29 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 6d350b61c..1352fbdcd 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -20,18 +20,28 @@ export default async function SelectHotelPage({
   setLang(params.lang)
 
   const tempSearchTerm = "Stockholm"
-  const hotelFilters = await serverClient().hotel.filters.get({
-    hotelId: "879",
+  const getHotelFitlers = await serverClient().hotel.filters.get({
+    language: params.lang,
+    country: "Sweden",
+    city: "Halmstad",
   })
 
-  const availableHotels = await serverClient().hotel.availability.get({
+  if (!getHotelFitlers) return null
+
+  console.log(getHotelFitlers.data)
+
+  const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  if (!availableHotels) return null
+  if (!getAvailableHotels) return null
+
+  const { availability } = getAvailableHotels
+
+  console.log(availability)
 
   return (
     <main className={styles.main}>
@@ -48,11 +58,11 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        <HotelFilter filters={hotelFilters} />
+        {/* <HotelFilter filters={hotelFilters} /> */}
       </section>
       <section className={styles.hotelCards}>
-        {availableHotels.availability.length ? (
-          availableHotels.availability.map((hotel) => (
+        {availability.length ? (
+          availability.map((hotel) => (
             <HotelCard
               key={hotel.hotelId}
               checkInDate={hotel.checkInDate}
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index 1c30bf264..84984b9d7 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -11,30 +11,30 @@ export default async function HotelFilter({ filters }: HotelFilterProps) {
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {formatMessage({ id: "Room facilities" })}
-        {filters.roomFacilities.map((roomFilter) => (
+        {/* {filters.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" })}
-        {filters.hotelFacilities.map((hotelFilter) => (
+        {/* {filters.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" })}
-        {filters.hotelSurroundings.map((surroundings) => (
+        {/* {filters.hotelSurroundings.map((surroundings) => (
           <div key={surroundings} className={styles.filter}>
             <input id={surroundings} name={surroundings} type="checkbox" />
             <label htmlFor={surroundings}>{surroundings}</label>
           </div>
-        ))}
+        ))} */}
       </div>
     </aside>
   )
diff --git a/server/routers/hotels/input.ts b/server/routers/hotels/input.ts
index 562a0e608..51106963b 100644
--- a/server/routers/hotels/input.ts
+++ b/server/routers/hotels/input.ts
@@ -22,5 +22,7 @@ export const getRatesInputSchema = z.object({
 })
 
 export const getFiltersInputSchema = z.object({
-  hotelId: z.string(),
+  language: z.string(),
+  country: z.string(),
+  city: z.string(),
 })
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 192bab55c..39ccaeaf4 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -554,11 +554,29 @@ export const getRatesSchema = z.array(rate)
 
 export type Rate = z.infer<typeof rate>
 
-const hotelFilter = z.object({
-  roomFacilities: z.array(z.string()),
-  hotelFacilities: z.array(z.string()),
-  hotelSurroundings: z.array(z.string()),
+const hotelFilterSchema = z.object({
+  data: z.array(
+    z.object({
+      attributes: z.object({
+        name: z.string(),
+        operaId: z.string(),
+        isPublished: z.boolean(),
+        cityId: z.string(),
+        cityName: z.string(),
+        ratings: ratingsSchema,
+        address: addressSchema,
+        location: locationSchema,
+        hotelContent: hotelContentSchema,
+        detailedFacilities: z.array(detailedFacilitySchema),
+        isActive: z.boolean(),
+      }),
+      id: z.string(),
+      language: z.unknown(),
+      hotelInformationSystemId: z.number(),
+      type: z.string(),
+    })
+  ),
 })
 
-export const getFiltersSchema = hotelFilter
-export type HotelFilter = z.infer<typeof hotelFilter>
+export const getHotelFilterSchema = hotelFilterSchema
+export type HotelFilter = z.infer<typeof hotelFilterSchema>
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index b35ed7cd2..69aa9ad59 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -33,8 +33,8 @@ import {
 } from "./input"
 import {
   getAvailabilitySchema,
-  getFiltersSchema,
   getHotelDataSchema,
+  getHotelFilterSchema,
   getRatesSchema,
   roomSchema,
 } from "./output"
@@ -57,6 +57,10 @@ 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
@@ -420,31 +424,97 @@ export const hotelQueryRouter = router({
       }),
   }),
   filters: router({
-    get: publicProcedure
+    get: serviceProcedure
       .input(getFiltersInputSchema)
       .query(async ({ input, ctx }) => {
-        console.info("api.hotels.filters start", JSON.stringify({}))
+        const { language, country, city } = input
+        const params: Record<string, string> = {
+          language,
+          country,
+          city,
+        }
 
-        if (!tempFilterData) {
+        filterCounter.add(1, {
+          language,
+          country,
+          city,
+        })
+        console.info(
+          "api.hotels.filters start",
+          JSON.stringify({
+            query: { params },
+          })
+        )
+
+        const apiResponse = await api.get(
+          api.endpoints.v1.hotels,
+          {
+            headers: {
+              Authorization: `Bearer ${ctx.serviceToken}`,
+            },
+          },
+          params
+        )
+
+        if (!apiResponse.ok) {
+          const text = await apiResponse.text()
+          filterFailCounter.add(1, {
+            language,
+            country,
+            city,
+            error_type: "http_error",
+            error: JSON.stringify({
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            }),
+          })
           console.error(
             "api.hotels.filters error",
-            JSON.stringify({ error: null })
+            JSON.stringify({
+              query: {
+                params,
+              },
+              error: {
+                status: apiResponse.status,
+                statusText: apiResponse.statusText,
+                text,
+              },
+            })
           )
-          //Can't return null here since consuming component does not handle null yet
-          // return null
+          return null
         }
-        const validateFilterData = getFiltersSchema.safeParse(tempFilterData)
+
+        const apiJson = await apiResponse.json()
+        const validateFilterData = getHotelFilterSchema.safeParse(apiJson)
 
         if (!validateFilterData.success) {
+          filterFailCounter.add(1, {
+            language,
+            country,
+            city,
+            error_type: "validation_error",
+            error: JSON.stringify(validateFilterData.error),
+          })
           console.error(
             "api.hotels.filters validation error",
             JSON.stringify({
+              query: { params },
               error: validateFilterData.error,
             })
           )
           throw badRequestError()
         }
-        console.info("api.hotels.rates success", JSON.stringify({}))
+
+        filterSuccessCounter.add(1, {
+          language,
+          country,
+          city,
+        })
+        console.info(
+          "api.hotels.fuilters success",
+          JSON.stringify({ query: { params: params } })
+        )
         return validateFilterData.data
       }),
   }),

From 6089af764a7c2b189bb9b07e6a70b462f0d12dfb Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 4 Sep 2024 15:57:32 +0200
Subject: [PATCH 02/14] feat(SW-251): filter request

---
 .../hotelreservation/select-hotel/page.tsx    |  6 +----
 .../SelectHotel/HotelFilter/index.tsx         |  5 ++++-
 server/routers/hotels/output.ts               |  8 ++++---
 server/routers/hotels/query.ts                | 15 +++++++++++--
 server/routers/hotels/tempFilterData.json     | 22 -------------------
 .../selectHotel/hotelFilterProps.ts           |  7 ++++--
 6 files changed, 28 insertions(+), 35 deletions(-)
 delete mode 100644 server/routers/hotels/tempFilterData.json

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 1352fbdcd..cb2e8cd43 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -23,13 +23,11 @@ export default async function SelectHotelPage({
   const getHotelFitlers = await serverClient().hotel.filters.get({
     language: params.lang,
     country: "Sweden",
-    city: "Halmstad",
+    city: "Helsingborg",
   })
 
   if (!getHotelFitlers) return null
 
-  console.log(getHotelFitlers.data)
-
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
@@ -41,8 +39,6 @@ export default async function SelectHotelPage({
 
   const { availability } = getAvailableHotels
 
-  console.log(availability)
-
   return (
     <main className={styles.main}>
       <section>
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index 84984b9d7..fe7b98fe9 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -4,7 +4,10 @@ import styles from "./hotelFilter.module.css"
 
 import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
 
-export default async function HotelFilter({ filters }: HotelFilterProps) {
+export default async function HotelFilter({
+  hotelId,
+  filters,
+}: HotelFilterProps) {
   const { formatMessage } = await getIntl()
 
   return (
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 39ccaeaf4..a72d08c3a 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -145,7 +145,7 @@ const hotelContentSchema = z.object({
     restaurantsOverviewPageLinkText: z.string(),
     restaurantsOverviewPageLink: z.string(),
     restaurantsContentDescriptionShort: z.string(),
-    restaurantsContentDescriptionMedium: z.string(),
+    restaurantsContentDescriptionMedium: z.string().optional(),
   }),
 })
 
@@ -551,7 +551,6 @@ const rate = z.object({
 })
 
 export const getRatesSchema = z.array(rate)
-
 export type Rate = z.infer<typeof rate>
 
 const hotelFilterSchema = z.object({
@@ -566,7 +565,7 @@ const hotelFilterSchema = z.object({
         ratings: ratingsSchema,
         address: addressSchema,
         location: locationSchema,
-        hotelContent: hotelContentSchema,
+        hotelContent: hotelContentSchema.optional(),
         detailedFacilities: z.array(detailedFacilitySchema),
         isActive: z.boolean(),
       }),
@@ -580,3 +579,6 @@ const hotelFilterSchema = z.object({
 
 export const getHotelFilterSchema = hotelFilterSchema
 export type HotelFilter = z.infer<typeof hotelFilterSchema>
+export type HotelId = HotelFilter["data"][number]["id"]
+export type HotelFilters =
+  HotelFilter["data"][number]["attributes"]["detailedFacilities"]
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 69aa9ad59..54a97be78 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -38,7 +38,6 @@ import {
   getRatesSchema,
   roomSchema,
 } from "./output"
-import tempFilterData from "./tempFilterData.json"
 import tempRatesData from "./tempRatesData.json"
 
 import { HotelBlocksTypenameEnum } from "@/types/components/hotelPage/enums"
@@ -515,7 +514,19 @@ export const hotelQueryRouter = router({
           "api.hotels.fuilters success",
           JSON.stringify({ query: { params: params } })
         )
-        return validateFilterData.data
+
+        const hotelData = validateFilterData.data.data
+        const filters = hotelData.flatMap(
+          (data) => data.attributes.detailedFacilities
+        )
+        const unieqId = [...new Set(filters.map((data) => data.id))]
+
+        return {
+          hotelId: hotelData.map((data) => data.id),
+          filters: unieqId.map((data) =>
+            filters.find((find) => find.id === data)
+          ),
+        }
       }),
   }),
 })
diff --git a/server/routers/hotels/tempFilterData.json b/server/routers/hotels/tempFilterData.json
deleted file mode 100644
index e58bdf50b..000000000
--- a/server/routers/hotels/tempFilterData.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "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"
-  ]
-}
diff --git a/types/components/hotelReservation/selectHotel/hotelFilterProps.ts b/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
index e100131ba..709e9378d 100644
--- a/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
+++ b/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
@@ -1,3 +1,6 @@
-import { HotelFilter } from "@/server/routers/hotels/output"
+import { HotelFilters, HotelId } from "@/server/routers/hotels/output"
 
-export type HotelFilterProps = { filters: HotelFilter }
+export type HotelFilterProps = {
+  hotelId: HotelId
+  filters: HotelFilters
+}

From 024a095dc65e8e1b55750ea849f8624cfb626aec Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Thu, 5 Sep 2024 13:25:46 +0200
Subject: [PATCH 03/14] feat(SW-251): check for undefined

---
 .../hotelreservation/select-hotel/page.tsx    |  4 +++-
 .../SelectHotel/HotelFilter/index.tsx         | 19 +++++++------------
 server/routers/hotels/query.ts                | 10 +++++-----
 .../selectHotel/hotelFilterProps.ts           |  3 +--
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index cb2e8cd43..1a75c56f5 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -28,6 +28,8 @@ export default async function SelectHotelPage({
 
   if (!getHotelFitlers) return null
 
+  const { filters } = getHotelFitlers
+
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
@@ -54,7 +56,7 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        {/* <HotelFilter filters={hotelFilters} /> */}
+        <HotelFilter filters={filters} />
       </section>
       <section className={styles.hotelCards}>
         {availability.length ? (
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index fe7b98fe9..f002c83b9 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -4,25 +4,20 @@ import styles from "./hotelFilter.module.css"
 
 import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
 
-export default async function HotelFilter({
-  hotelId,
-  filters,
-}: HotelFilterProps) {
+export default async function HotelFilter({ filters }: HotelFilterProps) {
   const { formatMessage } = await getIntl()
 
+  console.log(filters)
+
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Room facilities" })}
-        {/* {filters.roomFacilities.map((roomFilter) => (
-          <div key={roomFilter} className={styles.filter}>
-            <input id={roomFilter} name={roomFilter} type="checkbox" />
-            <label htmlFor={roomFilter}>{roomFilter}</label>
-          </div>
-        ))} */}
+        {formatMessage({ id: "Hotel facilities" })}
+        {filters.map((data) => (
+          <div key={data.id}>{data.name}</div>
+        ))}
       </div>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel facilities" })}
         {/* {filters.hotelFacilities.map((hotelFilter) => (
           <div key={hotelFilter} className={styles.filter}>
             <input id={hotelFilter} name={hotelFilter} type="checkbox" />
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 54a97be78..b2cf25d5e 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -36,6 +36,7 @@ import {
   getHotelDataSchema,
   getHotelFilterSchema,
   getRatesSchema,
+  HotelFilters,
   roomSchema,
 } from "./output"
 import tempRatesData from "./tempRatesData.json"
@@ -519,13 +520,12 @@ export const hotelQueryRouter = router({
         const filters = hotelData.flatMap(
           (data) => data.attributes.detailedFacilities
         )
-        const unieqId = [...new Set(filters.map((data) => data.id))]
+        const unieqeFilters = [...new Set(filters.map((data) => data.id))]
 
         return {
-          hotelId: hotelData.map((data) => data.id),
-          filters: unieqId.map((data) =>
-            filters.find((find) => find.id === data)
-          ),
+          filters: unieqeFilters
+            .map((data) => filters.find((find) => find.id === data))
+            .filter((filter) => filter !== undefined) as HotelFilters,
         }
       }),
   }),
diff --git a/types/components/hotelReservation/selectHotel/hotelFilterProps.ts b/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
index 709e9378d..7657b9ec1 100644
--- a/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
+++ b/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
@@ -1,6 +1,5 @@
-import { HotelFilters, HotelId } from "@/server/routers/hotels/output"
+import { HotelFilters } from "@/server/routers/hotels/output"
 
 export type HotelFilterProps = {
-  hotelId: HotelId
   filters: HotelFilters
 }

From 8c530658c5e84ff91649a8697189498e675d6db9 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Mon, 9 Sep 2024 10:02:35 +0200
Subject: [PATCH 04/14] feat(SW-251): use availability to get hotel

---
 .../hotelreservation/select-hotel/page.tsx    | 11 +--
 .../HotelReservation/HotelCard/index.tsx      | 23 +++--
 .../SelectHotel/HotelFilter/index.tsx         | 17 +---
 server/routers/hotels/input.ts                |  8 +-
 server/routers/hotels/output.ts               | 30 -------
 server/routers/hotels/query.ts                | 90 +++++++++----------
 .../selectHotel/hotelFilterProps.ts           |  5 --
 7 files changed, 64 insertions(+), 120 deletions(-)
 delete mode 100644 types/components/hotelReservation/selectHotel/hotelFilterProps.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 1a75c56f5..bc5231f08 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -20,15 +20,6 @@ export default async function SelectHotelPage({
   setLang(params.lang)
 
   const tempSearchTerm = "Stockholm"
-  const getHotelFitlers = await serverClient().hotel.filters.get({
-    language: params.lang,
-    country: "Sweden",
-    city: "Helsingborg",
-  })
-
-  if (!getHotelFitlers) return null
-
-  const { filters } = getHotelFitlers
 
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
@@ -56,7 +47,7 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        <HotelFilter filters={filters} />
+        <HotelFilter />
       </section>
       <section className={styles.hotelCards}>
         {availability.length ? (
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 43cf56a03..0f37287f1 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -1,3 +1,4 @@
+import { serverClient } from "@/lib/trpc/server"
 import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
@@ -15,6 +16,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./hotelCard.module.css"
 
@@ -31,7 +33,16 @@ export default async function HotelCard({
   // TODO: Use real endpoint.
   const hotel = tempHotelData.data.attributes
 
-  const sortedAmenities = hotel.detailedFacilities
+  const hotelResponse = await serverClient().hotel.hotel.get({
+    hotelId: hotelId.toString(),
+    language: getLang(),
+  })
+
+  if (!hotelResponse) return null
+
+  const { data } = hotelResponse
+
+  const sortedAmenities = data.attributes.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -39,8 +50,8 @@ export default async function HotelCard({
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotel.hotelContent.images.imageSizes.large}
-          alt={hotel.hotelContent.images.metaData.altText}
+          src={data.attributes.hotelContent.images.imageSizes.large}
+          alt={data.attributes.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -48,7 +59,7 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotel.ratings?.tripAdvisor.rating}
+            {data.attributes.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
@@ -58,10 +69,10 @@ export default async function HotelCard({
           {hotel.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+          {`${data.attributes.address.streetAddress}, ${data.attributes.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${data.attributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
       <section className={styles.hotel}>
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index f002c83b9..81230461d 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -2,28 +2,13 @@ import { getIntl } from "@/i18n"
 
 import styles from "./hotelFilter.module.css"
 
-import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
-
-export default async function HotelFilter({ filters }: HotelFilterProps) {
+export default async function HotelFilter() {
   const { formatMessage } = await getIntl()
 
-  console.log(filters)
-
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel facilities" })}
-        {filters.map((data) => (
-          <div key={data.id}>{data.name}</div>
-        ))}
-      </div>
-      <div className={styles.facilities}>
-        {/* {filters.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" })}
diff --git a/server/routers/hotels/input.ts b/server/routers/hotels/input.ts
index 51106963b..a89c55dc2 100644
--- a/server/routers/hotels/input.ts
+++ b/server/routers/hotels/input.ts
@@ -21,8 +21,10 @@ export const getRatesInputSchema = z.object({
   hotelId: z.string(),
 })
 
-export const getFiltersInputSchema = z.object({
+export const getPlaceholderInputSchema = z.object({
+  hotelId: z.string(),
   language: z.string(),
-  country: z.string(),
-  city: z.string(),
+  include: z
+    .array(z.enum(["RoomCategories", "NearbyHotels", "Restaurants", "City"]))
+    .optional(),
 })
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index a72d08c3a..ff7437b2a 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -552,33 +552,3 @@ const rate = z.object({
 
 export const getRatesSchema = z.array(rate)
 export type Rate = z.infer<typeof rate>
-
-const hotelFilterSchema = z.object({
-  data: z.array(
-    z.object({
-      attributes: z.object({
-        name: z.string(),
-        operaId: z.string(),
-        isPublished: z.boolean(),
-        cityId: z.string(),
-        cityName: z.string(),
-        ratings: ratingsSchema,
-        address: addressSchema,
-        location: locationSchema,
-        hotelContent: hotelContentSchema.optional(),
-        detailedFacilities: z.array(detailedFacilitySchema),
-        isActive: z.boolean(),
-      }),
-      id: z.string(),
-      language: z.unknown(),
-      hotelInformationSystemId: z.number(),
-      type: z.string(),
-    })
-  ),
-})
-
-export const getHotelFilterSchema = hotelFilterSchema
-export type HotelFilter = z.infer<typeof hotelFilterSchema>
-export type HotelId = HotelFilter["data"][number]["id"]
-export type HotelFilters =
-  HotelFilter["data"][number]["attributes"]["detailedFacilities"]
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index b2cf25d5e..1532d1690 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -27,16 +27,14 @@ import {
 } from "../contentstack/hotelPage/output"
 import {
   getAvailabilityInputSchema,
-  getFiltersInputSchema,
   getHotelInputSchema,
+  getPlaceholderInputSchema,
   getRatesInputSchema,
 } from "./input"
 import {
   getAvailabilitySchema,
   getHotelDataSchema,
-  getHotelFilterSchema,
   getRatesSchema,
-  HotelFilters,
   roomSchema,
 } from "./output"
 import tempRatesData from "./tempRatesData.json"
@@ -423,31 +421,33 @@ export const hotelQueryRouter = router({
         return validatedHotelData.data
       }),
   }),
-  filters: router({
+  hotel: router({
     get: serviceProcedure
-      .input(getFiltersInputSchema)
-      .query(async ({ input, ctx }) => {
-        const { language, country, city } = input
+      .input(getPlaceholderInputSchema)
+      .query(async ({ ctx, input }) => {
+        const { hotelId, language, include } = input
+
         const params: Record<string, string> = {
+          hotelId,
           language,
-          country,
-          city,
         }
 
-        filterCounter.add(1, {
+        if (include) {
+          params.include = include.join(",")
+        }
+
+        getHotelCounter.add(1, {
+          hotelId,
           language,
-          country,
-          city,
+          include,
         })
         console.info(
-          "api.hotels.filters start",
-          JSON.stringify({
-            query: { params },
-          })
+          "api.hotels.hotel start",
+          JSON.stringify({ query: { hotelId, params } })
         )
 
         const apiResponse = await api.get(
-          api.endpoints.v1.hotels,
+          `${api.endpoints.v1.hotels}/${hotelId}`,
           {
             headers: {
               Authorization: `Bearer ${ctx.serviceToken}`,
@@ -458,10 +458,10 @@ export const hotelQueryRouter = router({
 
         if (!apiResponse.ok) {
           const text = await apiResponse.text()
-          filterFailCounter.add(1, {
+          getHotelFailCounter.add(1, {
+            hotelId,
             language,
-            country,
-            city,
+            include,
             error_type: "http_error",
             error: JSON.stringify({
               status: apiResponse.status,
@@ -470,11 +470,9 @@ export const hotelQueryRouter = router({
             }),
           })
           console.error(
-            "api.hotels.filters error",
+            "api.hotels.hotel error",
             JSON.stringify({
-              query: {
-                params,
-              },
+              query: { hotelId, params },
               error: {
                 status: apiResponse.status,
                 statusText: apiResponse.statusText,
@@ -486,47 +484,39 @@ export const hotelQueryRouter = router({
         }
 
         const apiJson = await apiResponse.json()
-        const validateFilterData = getHotelFilterSchema.safeParse(apiJson)
+        const validateHotelData = getHotelDataSchema.safeParse(apiJson)
 
-        if (!validateFilterData.success) {
-          filterFailCounter.add(1, {
+        if (!validateHotelData.success) {
+          getHotelFailCounter.add(1, {
+            hotelId,
             language,
-            country,
-            city,
+            include,
             error_type: "validation_error",
-            error: JSON.stringify(validateFilterData.error),
+            error: JSON.stringify(validateHotelData.error),
           })
+
           console.error(
-            "api.hotels.filters validation error",
+            "api.hotels.hotel validation error",
             JSON.stringify({
-              query: { params },
-              error: validateFilterData.error,
+              query: { hotelId, params },
+              error: validateHotelData.error,
             })
           )
           throw badRequestError()
         }
 
-        filterSuccessCounter.add(1, {
+        getHotelSuccessCounter.add(1, {
+          hotelId,
           language,
-          country,
-          city,
+          include,
         })
         console.info(
-          "api.hotels.fuilters success",
-          JSON.stringify({ query: { params: params } })
+          "api.hotels.hotel success",
+          JSON.stringify({
+            query: { hotelId, params: params },
+          })
         )
-
-        const hotelData = validateFilterData.data.data
-        const filters = hotelData.flatMap(
-          (data) => data.attributes.detailedFacilities
-        )
-        const unieqeFilters = [...new Set(filters.map((data) => data.id))]
-
-        return {
-          filters: unieqeFilters
-            .map((data) => filters.find((find) => find.id === data))
-            .filter((filter) => filter !== undefined) as HotelFilters,
-        }
+        return validateHotelData.data
       }),
   }),
 })
diff --git a/types/components/hotelReservation/selectHotel/hotelFilterProps.ts b/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
deleted file mode 100644
index 7657b9ec1..000000000
--- a/types/components/hotelReservation/selectHotel/hotelFilterProps.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { HotelFilters } from "@/server/routers/hotels/output"
-
-export type HotelFilterProps = {
-  filters: HotelFilters
-}

From 43e58dcf0106047aef84b3e90e06809eae922ccf Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 11 Sep 2024 10:22:01 +0200
Subject: [PATCH 05/14] feat(SW-251): use parallel fetch for hotels

---
 .../select-hotel/page.module.css              |  3 +-
 .../hotelreservation/select-hotel/page.tsx    | 84 ++++++++++++-------
 .../HotelReservation/HotelCard/index.tsx      | 46 ++++------
 .../hotelCardListing.module.css               |  5 ++
 .../HotelCardListing/index.tsx                | 25 ++++++
 .../SelectHotel/HotelFilter/index.tsx         |  6 +-
 .../selectHotel/availabilityInput.ts          | 10 +++
 .../selectHotel/hotelCardListingProps.ts      | 12 +++
 .../selectHotel/hotelCardProps.ts             | 10 +--
 9 files changed, 126 insertions(+), 75 deletions(-)
 create mode 100644 components/HotelReservation/HotelCardListing/hotelCardListing.module.css
 create mode 100644 components/HotelReservation/HotelCardListing/index.tsx
 create mode 100644 types/components/hotelReservation/selectHotel/availabilityInput.ts
 create mode 100644 types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
index 9877bc4cf..3a8bcfe07 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
@@ -6,10 +6,9 @@
   min-height: 100dvh;
 }
 
-.hotelCards {
+.section {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x4);
 }
 
 .link {
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index bc5231f08..0c128c835 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -1,40 +1,75 @@
 import { serverClient } from "@/lib/trpc/server"
+import { notFound } from "@/server/errors/next"
 
-import HotelCard from "@/components/HotelReservation/HotelCard"
+import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { setLang } from "@/i18n/serverContext"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
+import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { LangParams, PageArgs } from "@/types/params"
 
-export default async function SelectHotelPage({
-  params,
-}: PageArgs<LangParams>) {
-  const intl = await getIntl()
-  setLang(params.lang)
-
-  const tempSearchTerm = "Stockholm"
-
+async function getAvailableHotels({
+  cityId,
+  roomStayStartDate,
+  roomStayEndDate,
+  adults,
+}: AvailabilityInput): Promise<HotelData[] | null> {
   const getAvailableHotels = await serverClient().hotel.availability.get({
-    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
+    cityId: cityId,
+    roomStayStartDate: roomStayStartDate,
+    roomStayEndDate: roomStayEndDate,
+    adults: adults,
   })
 
   if (!getAvailableHotels) return null
 
   const { availability } = getAvailableHotels
 
+  const hotels = availability.map(async (hotel) => {
+    const hotelData = await serverClient().hotel.hotel.get({
+      hotelId: hotel.hotelId.toString(),
+      language: getLang(),
+    })
+
+    return {
+      hotelData: hotelData?.data.attributes,
+      price: hotel.bestPricePerNight,
+    }
+  })
+
+  return await Promise.all(hotels)
+}
+
+export default async function SelectHotelPage({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
+
+  const tempSearchTerm = "Stockholm"
+
+  const intl = await getIntl()
+
+  const hotels = await getAvailableHotels({
+    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
+  })
+
+  if (!hotels) return null
+
+  if (hotels.some((item) => item?.hotelData === undefined)) return notFound()
+
   return (
     <main className={styles.main}>
-      <section>
+      <section className={styles.section}>
         <StaticMap
           city={tempSearchTerm}
           width={340}
@@ -49,22 +84,7 @@ export default async function SelectHotelPage({
         </Link>
         <HotelFilter />
       </section>
-      <section className={styles.hotelCards}>
-        {availability.length ? (
-          availability.map((hotel) => (
-            <HotelCard
-              key={hotel.hotelId}
-              checkInDate={hotel.checkInDate}
-              checkOutDate={hotel.checkOutDate}
-              hotelId={hotel.hotelId}
-              price={hotel.bestPricePerNight}
-            />
-          ))
-        ) : (
-          // TODO: handle no hotels found
-          <Title>No hotels found</Title>
-        )}
-      </section>
+      <HotelCardListing hotelData={hotels} />
     </main>
   )
 }
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 0f37287f1..5cd6989f0 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -1,5 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
@@ -15,43 +14,30 @@ import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import styles from "./hotelCard.module.css"
 
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default async function HotelCard({
-  checkInDate,
-  checkOutDate,
-  hotelId,
-  price,
-}: HotelCardProps) {
-  const intl = await getIntl()
+export default function HotelCard({ hotel }: HotelCardProps) {
+  const intl = useIntl()
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const { hotelData } = hotel
+  const { price } = hotel
 
-  const hotelResponse = await serverClient().hotel.hotel.get({
-    hotelId: hotelId.toString(),
-    language: getLang(),
-  })
+  if (!hotelData) return null
+  if (!price) return null
 
-  if (!hotelResponse) return null
-
-  const { data } = hotelResponse
-
-  const sortedAmenities = data.attributes.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={data.attributes.hotelContent.images.imageSizes.large}
-          alt={data.attributes.hotelContent.images.metaData.altText}
+          src={hotelData.hotelContent.images.imageSizes.medium}
+          alt={hotelData.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -59,25 +45,25 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {data.attributes.ratings?.tripAdvisor.rating}
+            {hotelData.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotel.name}
+          {hotelData.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${data.attributes.address.streetAddress}, ${data.attributes.address.city}`}
+          {`${hotelData.address?.streetAddress}, ${hotelData.address?.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${data.attributes.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}>
         <div className={styles.facilities}>
-          {sortedAmenities.map((facility) => {
+          {sortedAmenities?.map((facility) => {
             const IconComponent = mapFacilityToIcon(facility.name)
             return (
               <div className={styles.facilitiesItem} key={facility.id}>
diff --git a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css
new file mode 100644
index 000000000..be62321df
--- /dev/null
+++ b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css
@@ -0,0 +1,5 @@
+.hotelCards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+}
diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
new file mode 100644
index 000000000..2af4f0b9c
--- /dev/null
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import HotelCard from "../HotelCard"
+
+import styles from "./hotelCardListing.module.css"
+
+import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+
+export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
+  if (!hotelData) return null
+
+  return (
+    <section className={styles.hotelCards}>
+      {hotelData && hotelData.length ? (
+        hotelData.map((hotel) => (
+          <HotelCard key={hotel.hotelData?.name} hotel={hotel} />
+        ))
+      ) : (
+        <Title>Hallå</Title>
+      )}
+    </section>
+  )
+}
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index 81230461d..cc171f654 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -3,15 +3,15 @@ import { getIntl } from "@/i18n"
 import styles from "./hotelFilter.module.css"
 
 export default async function HotelFilter() {
-  const { formatMessage } = await getIntl()
+  const intl = await getIntl()
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel facilities" })}
+        {intl.formatMessage({ id: "Hotel facilities" })}
       </div>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel surroundings" })}
+        {intl.formatMessage({ id: "Hotel surroundings" })}
         {/* {filters.hotelSurroundings.map((surroundings) => (
           <div key={surroundings} className={styles.filter}>
             <input id={surroundings} name={surroundings} type="checkbox" />
diff --git a/types/components/hotelReservation/selectHotel/availabilityInput.ts b/types/components/hotelReservation/selectHotel/availabilityInput.ts
new file mode 100644
index 000000000..ff25984b9
--- /dev/null
+++ b/types/components/hotelReservation/selectHotel/availabilityInput.ts
@@ -0,0 +1,10 @@
+export type AvailabilityInput = {
+  cityId: string
+  roomStayStartDate: string
+  roomStayEndDate: string
+  adults: number
+  children?: number
+  promotionCode?: string
+  reservationProfileType?: string
+  attachedProfileId?: string
+}
diff --git a/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts b/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
new file mode 100644
index 000000000..21d9f03ba
--- /dev/null
+++ b/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
@@ -0,0 +1,12 @@
+import { AvailabilityPrices } from "@/server/routers/hotels/output"
+
+import { Hotel } from "@/types/hotel"
+
+export type HotelCardListingProps = {
+  hotelData: HotelData[]
+}
+
+export type HotelData = {
+  hotelData: Hotel | undefined
+  price: AvailabilityPrices
+}
diff --git a/types/components/hotelReservation/selectHotel/hotelCardProps.ts b/types/components/hotelReservation/selectHotel/hotelCardProps.ts
index feafa6228..dbfdd797c 100644
--- a/types/components/hotelReservation/selectHotel/hotelCardProps.ts
+++ b/types/components/hotelReservation/selectHotel/hotelCardProps.ts
@@ -1,11 +1,5 @@
-import {
-  Availability,
-  AvailabilityPrices,
-} from "@/server/routers/hotels/output"
+import { HotelData } from "./hotelCardListingProps"
 
 export type HotelCardProps = {
-  checkInDate: Availability["data"][number]["attributes"]["checkInDate"]
-  checkOutDate: Availability["data"][number]["attributes"]["checkOutDate"]
-  hotelId: Availability["data"][number]["attributes"]["hotelId"]
-  price: AvailabilityPrices
+  hotel: HotelData
 }

From 7eeafd2a204e0d4c36582b2db6162c2024789744 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 11 Sep 2024 15:39:57 +0200
Subject: [PATCH 06/14] feat(SW-251): use response to render filters

---
 .../hotelreservation/select-hotel/page.tsx    | 35 ++++++++++++++++---
 .../HotelReservation/HotelCard/index.tsx      | 19 +++++-----
 .../SelectHotel/HotelFilter/index.tsx         | 29 ++++++++-------
 server/routers/hotels/input.ts                |  2 +-
 server/routers/hotels/query.ts                | 10 ++----
 .../selectHotel/hotelFilters.ts               |  5 +++
 6 files changed, 65 insertions(+), 35 deletions(-)
 create mode 100644 types/components/hotelReservation/selectHotel/hotelFilters.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 0c128c835..032ff30f0 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/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>
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 5cd6989f0..83d830515 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/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}>
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index cc171f654..a3a993aee 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/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>
   )
diff --git a/server/routers/hotels/input.ts b/server/routers/hotels/input.ts
index a89c55dc2..416d41eee 100644
--- a/server/routers/hotels/input.ts
+++ b/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
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 1532d1690..5f8ae5dd9 100644
--- a/server/routers/hotels/query.ts
+++ b/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
 
diff --git a/types/components/hotelReservation/selectHotel/hotelFilters.ts b/types/components/hotelReservation/selectHotel/hotelFilters.ts
new file mode 100644
index 000000000..1be84f63d
--- /dev/null
+++ b/types/components/hotelReservation/selectHotel/hotelFilters.ts
@@ -0,0 +1,5 @@
+import { Hotel } from "@/types/hotel"
+
+export type HotelFiltersProps = {
+  filters: Hotel["detailedFacilities"]
+}

From 98b903b314e01a36e13ea3972b76a28be6c0e97a Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 11 Sep 2024 16:19:59 +0200
Subject: [PATCH 07/14] feat(SW-251): add input

---
 .../(public)/hotelreservation/select-hotel/page.tsx       | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 032ff30f0..634c4cf1c 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -20,12 +20,20 @@ async function getAvailableHotels({
   roomStayStartDate,
   roomStayEndDate,
   adults,
+  children,
+  promotionCode,
+  attachedProfileId,
+  reservationProfileType,
 }: AvailabilityInput): Promise<HotelData[] | null> {
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: cityId,
     roomStayStartDate: roomStayStartDate,
     roomStayEndDate: roomStayEndDate,
     adults: adults,
+    children: children,
+    promotionCode: promotionCode,
+    attachedProfileId: attachedProfileId,
+    reservationProfileType: reservationProfileType,
   })
 
   if (!getAvailableHotels) return null

From 297fdfab5742c087e890827618bda01e4c4c866d Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 11 Sep 2024 16:29:50 +0200
Subject: [PATCH 08/14] feat(SW-251): add error text

---
 components/HotelReservation/HotelCardListing/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
index 2af4f0b9c..a98e0e906 100644
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -18,7 +18,7 @@ export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
           <HotelCard key={hotel.hotelData?.name} hotel={hotel} />
         ))
       ) : (
-        <Title>Hallå</Title>
+        <Title>No hotels found</Title>
       )}
     </section>
   )

From d338fee8a90d46c10375a129dc38ede2839f9e24 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 11 Sep 2024 16:34:08 +0200
Subject: [PATCH 09/14] feat(Sw-251): rename file

---
 components/HotelReservation/SelectHotel/HotelFilter/index.tsx   | 2 +-
 .../selectHotel/{hotelFilters.ts => hotelFiltersProps.ts}       | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename types/components/hotelReservation/selectHotel/{hotelFilters.ts => hotelFiltersProps.ts} (100%)

diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index a3a993aee..52bf5a7fe 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFiltersProps"
 
 export default function HotelFilter({ filters }: HotelFiltersProps) {
   const intl = useIntl()
diff --git a/types/components/hotelReservation/selectHotel/hotelFilters.ts b/types/components/hotelReservation/selectHotel/hotelFiltersProps.ts
similarity index 100%
rename from types/components/hotelReservation/selectHotel/hotelFilters.ts
rename to types/components/hotelReservation/selectHotel/hotelFiltersProps.ts

From 21ff8f8b5d920f71ba93589fc5d2e15785791946 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 11 Sep 2024 16:41:29 +0200
Subject: [PATCH 10/14] feat(SW-251): update logging texts

---
 server/routers/hotels/output.ts | 2 +-
 server/routers/hotels/query.ts  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index ff7437b2a..1eba75ea0 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -145,7 +145,7 @@ const hotelContentSchema = z.object({
     restaurantsOverviewPageLinkText: z.string(),
     restaurantsOverviewPageLink: z.string(),
     restaurantsContentDescriptionShort: z.string(),
-    restaurantsContentDescriptionMedium: z.string().optional(),
+    restaurantsContentDescriptionMedium: z.string(),
   }),
 })
 
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 5f8ae5dd9..fe92fa109 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -438,7 +438,7 @@ export const hotelQueryRouter = router({
           include,
         })
         console.info(
-          "api.hotels.hotel start",
+          "api.hotels.hotelData start",
           JSON.stringify({ query: { hotelId, params } })
         )
 
@@ -466,7 +466,7 @@ export const hotelQueryRouter = router({
             }),
           })
           console.error(
-            "api.hotels.hotel error",
+            "api.hotels.hotelData error",
             JSON.stringify({
               query: { hotelId, params },
               error: {
@@ -492,7 +492,7 @@ export const hotelQueryRouter = router({
           })
 
           console.error(
-            "api.hotels.hotel validation error",
+            "api.hotels.hotelData validation error",
             JSON.stringify({
               query: { hotelId, params },
               error: validateHotelData.error,
@@ -507,7 +507,7 @@ export const hotelQueryRouter = router({
           include,
         })
         console.info(
-          "api.hotels.hotel success",
+          "api.hotels.hotelData success",
           JSON.stringify({
             query: { hotelId, params: params },
           })

From 85460e95e57408490ee7d386bf29ff5fb7e895c2 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Thu, 12 Sep 2024 13:48:27 +0200
Subject: [PATCH 11/14] feat(SW-251): type assertion

---
 .../hotelreservation/select-hotel/page.tsx     | 18 ++++++++----------
 .../HotelReservation/HotelCard/index.tsx       | 16 ++++++++--------
 .../HotelCardListing/index.tsx                 |  4 +---
 .../SelectHotel/HotelFilter/index.tsx          | 13 +++++++++++--
 .../selectHotel/hotelCardListingProps.ts       |  2 +-
 5 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 634c4cf1c..4e5f85841 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -1,5 +1,4 @@
 import { serverClient } from "@/lib/trpc/server"
-import { notFound } from "@/server/errors/next"
 
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
@@ -24,7 +23,7 @@ async function getAvailableHotels({
   promotionCode,
   attachedProfileId,
   reservationProfileType,
-}: AvailabilityInput): Promise<HotelData[] | null> {
+}: AvailabilityInput): Promise<HotelData[]> {
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: cityId,
     roomStayStartDate: roomStayStartDate,
@@ -36,7 +35,7 @@ async function getAvailableHotels({
     reservationProfileType: reservationProfileType,
   })
 
-  if (!getAvailableHotels) return null
+  if (!getAvailableHotels) throw new Error()
 
   const { availability } = getAvailableHotels
 
@@ -46,8 +45,10 @@ async function getAvailableHotels({
       language: getLang(),
     })
 
+    if (!hotelData) throw new Error()
+
     return {
-      hotelData: hotelData?.data.attributes,
+      hotelData: hotelData.data.attributes,
       price: hotel.bestPricePerNight,
     }
   })
@@ -70,12 +71,9 @@ export default async function SelectHotelPage({
     adults: 1,
   })
 
-  if (!hotels) return null
-  if (hotels.some((item) => item?.hotelData === undefined)) return notFound()
+  const filters = hotels.flatMap((data) => data.hotelData.detailedFacilities)
 
-  const filters = hotels.flatMap((data) => data.hotelData?.detailedFacilities)
-
-  const filterId = [...new Set(filters.map((data) => data?.id))]
+  const filterId = [...new Set(filters.map((data) => data.id))]
   const filterList: {
     name: string
     id: number
@@ -86,7 +84,7 @@ export default async function SelectHotelPage({
     code?: string
     iconName?: string
   }[] = filterId
-    .map((data) => filters.find((find) => find?.id === data))
+    .map((data) => filters.find((find) => find.id === data))
     .filter(
       (
         filter
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 83d830515..76d702b98 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -25,7 +25,7 @@ export default function HotelCard({ hotel }: HotelCardProps) {
   const { hotelData } = hotel
   const { price } = hotel
 
-  const sortedAmenities = hotelData?.detailedFacilities
+  const sortedAmenities = hotelData.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -33,8 +33,8 @@ export default function HotelCard({ hotel }: HotelCardProps) {
     <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}
@@ -42,25 +42,25 @@ 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}>
         <div className={styles.facilities}>
-          {sortedAmenities?.map((facility) => {
+          {sortedAmenities.map((facility) => {
             const IconComponent = mapFacilityToIcon(facility.name)
             return (
               <div className={styles.facilitiesItem} key={facility.id}>
diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
index a98e0e906..8a3da1dba 100644
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -9,13 +9,11 @@ import styles from "./hotelCardListing.module.css"
 import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 
 export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
-  if (!hotelData) return null
-
   return (
     <section className={styles.hotelCards}>
       {hotelData && hotelData.length ? (
         hotelData.map((hotel) => (
-          <HotelCard key={hotel.hotelData?.name} hotel={hotel} />
+          <HotelCard key={hotel.hotelData.name} hotel={hotel} />
         ))
       ) : (
         <Title>No hotels found</Title>
diff --git a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
index 52bf5a7fe..f10191cec 100644
--- a/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelFilter/index.tsx
@@ -9,6 +9,10 @@ import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHot
 export default function HotelFilter({ filters }: HotelFiltersProps) {
   const intl = useIntl()
 
+  function handleOnChange() {
+    // TODO: Update URL with selected values
+  }
+
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
@@ -16,8 +20,13 @@ export default function HotelFilter({ filters }: HotelFiltersProps) {
         <form>
           <ul>
             {filters.map((data) => (
-              <li key={data?.id} className={styles.filter}>
-                <input id={`${data?.id}`} name={data?.name} type="checkbox" />
+              <li key={data.id} className={styles.filter}>
+                <input
+                  id={`${data.id}`}
+                  name={data.name}
+                  type="checkbox"
+                  onChange={handleOnChange}
+                />
                 <label htmlFor={`${data?.id}`}>{data?.name}</label>
               </li>
             ))}
diff --git a/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts b/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
index 21d9f03ba..0ab3df1ad 100644
--- a/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
+++ b/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
@@ -7,6 +7,6 @@ export type HotelCardListingProps = {
 }
 
 export type HotelData = {
-  hotelData: Hotel | undefined
+  hotelData: Hotel
   price: AvailabilityPrices
 }

From 7547da73d25f899a04ffdaf886c1420d93665cef Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Thu, 12 Sep 2024 14:49:45 +0200
Subject: [PATCH 12/14] feat(SW-251): add comment

---
 components/HotelReservation/HotelCardListing/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
index 8a3da1dba..bba0ce99d 100644
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -9,6 +9,8 @@ import styles from "./hotelCardListing.module.css"
 import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 
 export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
+  // TODO: filter with url params
+
   return (
     <section className={styles.hotelCards}>
       {hotelData && hotelData.length ? (

From 4287b868faec1d99661a84984b8a301b1d9b7f57 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Fri, 13 Sep 2024 09:19:35 +0200
Subject: [PATCH 13/14] feat(SW-251): pr changes

---
 .../hotelreservation/select-hotel/page.tsx    | 31 +++++--------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 4e5f85841..948cafbc2 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -14,26 +14,11 @@ import { AvailabilityInput } from "@/types/components/hotelReservation/selectHot
 import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { LangParams, PageArgs } from "@/types/params"
 
-async function getAvailableHotels({
-  cityId,
-  roomStayStartDate,
-  roomStayEndDate,
-  adults,
-  children,
-  promotionCode,
-  attachedProfileId,
-  reservationProfileType,
-}: AvailabilityInput): Promise<HotelData[]> {
-  const getAvailableHotels = await serverClient().hotel.availability.get({
-    cityId: cityId,
-    roomStayStartDate: roomStayStartDate,
-    roomStayEndDate: roomStayEndDate,
-    adults: adults,
-    children: children,
-    promotionCode: promotionCode,
-    attachedProfileId: attachedProfileId,
-    reservationProfileType: reservationProfileType,
-  })
+async function getAvailableHotels(
+  input: AvailabilityInput
+): Promise<HotelData[]> {
+  console.log("This is the input: ", input)
+  const getAvailableHotels = await serverClient().hotel.availability.get(input)
 
   if (!getAvailableHotels) throw new Error()
 
@@ -73,7 +58,7 @@ export default async function SelectHotelPage({
 
   const filters = hotels.flatMap((data) => data.hotelData.detailedFacilities)
 
-  const filterId = [...new Set(filters.map((data) => data.id))]
+  const filterIds = [...new Set(filters.map((data) => data.id))]
   const filterList: {
     name: string
     id: number
@@ -83,8 +68,8 @@ export default async function SelectHotelPage({
     sortOrder: number
     code?: string
     iconName?: string
-  }[] = filterId
-    .map((data) => filters.find((find) => find.id === data))
+  }[] = filterIds
+    .map((id) => filters.find((find) => find.id === id))
     .filter(
       (
         filter

From 19f6cf91df450bdf59106a942ebf609ed810be48 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Fri, 13 Sep 2024 11:30:17 +0200
Subject: [PATCH 14/14] feat(SW-251): remove log

---
 .../(live)/(public)/hotelreservation/select-hotel/page.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index 948cafbc2..63facf6d8 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -17,7 +17,6 @@ import { LangParams, PageArgs } from "@/types/params"
 async function getAvailableHotels(
   input: AvailabilityInput
 ): Promise<HotelData[]> {
-  console.log("This is the input: ", input)
   const getAvailableHotels = await serverClient().hotel.availability.get(input)
 
   if (!getAvailableHotels) throw new Error()