feat(SW-251): use availability to get hotel

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 ? (

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}
+          src={data.attributes.hotelContent.images.imageSizes.large}
-          alt={hotel.hotelContent.images.metaData.altText}
+          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}>

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() {
-
-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: "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" })}

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(),
+  include: z
-  city: z.string(),
+    .array(z.enum(["RoomCategories", "NearbyHotels", "Restaurants", "City"]))
+    .optional(),
 })

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"]

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)
+      .input(getPlaceholderInputSchema)
-      .query(async ({ input, ctx }) => {
+      .query(async ({ ctx, input }) => {
-        const { language, country, city } = 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,
+          include,
-          city,
         })
         console.info(
-          "api.hotels.filters start",
+          "api.hotels.hotel start",
-          JSON.stringify({
+          JSON.stringify({ query: { hotelId, params } })
-            query: { 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,
+            include,
-            city,
             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: {
+              query: { hotelId, params },
-                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) {
+        if (!validateHotelData.success) {
-          filterFailCounter.add(1, {
+          getHotelFailCounter.add(1, {
+            hotelId,
             language,
-            country,
+            include,
-            city,
             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 },
+              query: { hotelId, params },
-              error: validateFilterData.error,
+              error: validateHotelData.error,
             })
           )
           throw badRequestError()
         }
 
-        filterSuccessCounter.add(1, {
+        getHotelSuccessCounter.add(1, {
+          hotelId,
           language,
-          country,
+          include,
-          city,
         })
         console.info(
-          "api.hotels.fuilters success",
+          "api.hotels.hotel success",
-          JSON.stringify({ query: { params: params } })
+          JSON.stringify({
+            query: { hotelId, params: params },
+          })
         )
-
+        return validateHotelData.data
-        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,
-        }
       }),
   }),
 })

types/components/hotelReservation/selectHotel/hotelFilterProps.ts

@@ -1,5 +0,0 @@
-import { HotelFilters } from "@/server/routers/hotels/output"
-
-export type HotelFilterProps = {
-  filters: HotelFilters
-}