Merge branch 'develop' into feat/sw-386-header-fixes

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 {

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

@@ -1,41 +1,92 @@
 import { serverClient } from "@/lib/trpc/server"
 
-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"
 
+async function getAvailableHotels(
+  input: AvailabilityInput
+): Promise<HotelData[]> {
+  const getAvailableHotels = await serverClient().hotel.availability.get(input)
+
+  if (!getAvailableHotels) throw new Error()
+
+  const { availability } = getAvailableHotels
+
+  const hotels = availability.map(async (hotel) => {
+    const hotelData = await serverClient().hotel.hotelData.get({
+      hotelId: hotel.hotelId.toString(),
+      language: getLang(),
+    })
+
+    if (!hotelData) throw new Error()
+
+    return {
+      hotelData: hotelData.data.attributes,
+      price: hotel.bestPricePerNight,
+    }
+  })
+
+  return await Promise.all(hotels)
+}
+
 export default async function SelectHotelPage({
   params,
 }: PageArgs<LangParams>) {
-  const intl = await getIntl()
   setLang(params.lang)
 
   const tempSearchTerm = "Stockholm"
-  const hotelFilters = await serverClient().hotel.filters.get({
+  const intl = await getIntl()
-    hotelId: "879",
-  })
 
-  const availableHotels = await serverClient().hotel.availability.get({
+  const hotels = await getAvailableHotels({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  if (!availableHotels) return null
+  const filters = hotels.flatMap((data) => data.hotelData.detailedFacilities)
+
+  const filterIds = [...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
+  }[] = filterIds
+    .map((id) => filters.find((find) => find.id === id))
+    .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>
+      <section className={styles.section}>
         <StaticMap
           city={tempSearchTerm}
           width={340}
@@ -48,24 +99,9 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        <HotelFilter filters={hotelFilters} />
+        <HotelFilter filters={filterList} />
-      </section>
-      <section className={styles.hotelCards}>
-        {availableHotels.availability.length ? (
-          availableHotels.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>
   )
 }

components/HotelReservation/HotelCard/index.tsx

@@ -1,4 +1,4 @@
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
@@ -14,24 +14,18 @@ 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 styles from "./hotelCard.module.css"
 
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default async function HotelCard({
+export default function HotelCard({ hotel }: HotelCardProps) {
-  checkInDate,
+  const intl = useIntl()
-  checkOutDate,
-  hotelId,
-  price,
-}: HotelCardProps) {
-  const intl = await getIntl()
 
-  // TODO: Use real endpoint.
+  const { hotelData } = hotel
-  const hotel = tempHotelData.data.attributes
+  const { price } = hotel
 
-  const sortedAmenities = hotel.detailedFacilities
+  const sortedAmenities = hotelData.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -39,8 +33,8 @@ export default async function HotelCard({
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotel.hotelContent.images.imageSizes.large}
+          src={hotelData.hotelContent.images.imageSizes.medium}
-          alt={hotel.hotelContent.images.metaData.altText}
+          alt={hotelData.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -48,20 +42,20 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotel.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}>
-          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+          {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotel.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/HotelCardListing/hotelCardListing.module.css

@@ -0,0 +1,5 @@
+.hotelCards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+}

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) {
+  // TODO: filter with url params
+
+  return (
+    <section className={styles.hotelCards}>
+      {hotelData && hotelData.length ? (
+        hotelData.map((hotel) => (
+          <HotelCard key={hotel.hotelData.name} hotel={hotel} />
+        ))
+      ) : (
+        <Title>No hotels found</Title>
+      )}
+    </section>
+  )
+}

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,40 +1,37 @@
-import { getIntl } from "@/i18n"
+"use client"
+
+import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFiltersProps"
 
-export default async function HotelFilter({ filters }: HotelFilterProps) {
+export default function HotelFilter({ filters }: HotelFiltersProps) {
-  const { formatMessage } = await getIntl()
+  const intl = useIntl()
+
+  function handleOnChange() {
+    // TODO: Update URL with selected values
+  }
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Room facilities" })}
+        {intl.formatMessage({ id: "Hotel facilities" })}
-        {filters.roomFacilities.map((roomFilter) => (
+        <form>
-          <div key={roomFilter} className={styles.filter}>
+          <ul>
-            <input id={roomFilter} name={roomFilter} type="checkbox" />
+            {filters.map((data) => (
-            <label htmlFor={roomFilter}>{roomFilter}</label>
+              <li key={data.id} className={styles.filter}>
-          </div>
+                <input
-        ))}
+                  id={`${data.id}`}
-      </div>
+                  name={data.name}
-      <div className={styles.facilities}>
+                  type="checkbox"
-        {formatMessage({ id: "Hotel facilities" })}
+                  onChange={handleOnChange}
-        {filters.hotelFacilities.map((hotelFilter) => (
+                />
-          <div key={hotelFilter} className={styles.filter}>
+                <label htmlFor={`${data?.id}`}>{data?.name}</label>
-            <input id={hotelFilter} name={hotelFilter} type="checkbox" />
+              </li>
-            <label htmlFor={hotelFilter}>{hotelFilter}</label>
+            ))}
-          </div>
+          </ul>
-        ))}
+        </form>
-      </div>
-      <div className={styles.facilities}>
-        {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>
-        ))}
       </div>
     </aside>
   )

server/routers/hotels/input.ts

@@ -21,6 +21,10 @@ export const getRatesInputSchema = z.object({
   hotelId: z.string(),
 })
 
-export const getFiltersInputSchema = z.object({
+export const getlHotelDataInputSchema = z.object({
   hotelId: z.string(),
+  language: z.string(),
+  include: z
+    .array(z.enum(["RoomCategories", "NearbyHotels", "Restaurants", "City"]))
+    .optional(),
 })

server/routers/hotels/output.ts

@@ -551,14 +551,4 @@ const rate = z.object({
 })
 
 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()),
-})
-
-export const getFiltersSchema = hotelFilter
-export type HotelFilter = z.infer<typeof hotelFilter>

server/routers/hotels/query.ts

@@ -27,18 +27,16 @@ import {
 } from "../contentstack/hotelPage/output"
 import {
   getAvailabilityInputSchema,
-  getFiltersInputSchema,
   getHotelInputSchema,
+  getlHotelDataInputSchema,
   getRatesInputSchema,
 } from "./input"
 import {
   getAvailabilitySchema,
-  getFiltersSchema,
   getHotelDataSchema,
   getRatesSchema,
   roomSchema,
 } from "./output"
-import tempFilterData from "./tempFilterData.json"
 import tempRatesData from "./tempRatesData.json"
 
 import { HotelBlocksTypenameEnum } from "@/types/components/hotelPage/enums"
@@ -419,33 +417,102 @@ export const hotelQueryRouter = router({
         return validatedHotelData.data
       }),
   }),
-  filters: router({
+  hotelData: router({
-    get: publicProcedure
+    get: serviceProcedure
-      .input(getFiltersInputSchema)
+      .input(getlHotelDataInputSchema)
-      .query(async ({ input, ctx }) => {
+      .query(async ({ ctx, input }) => {
-        console.info("api.hotels.filters start", JSON.stringify({}))
+        const { hotelId, language, include } = input
 
-        if (!tempFilterData) {
+        const params: Record<string, string> = {
-          console.error(
+          hotelId,
-            "api.hotels.filters error",
+          language,
-            JSON.stringify({ error: null })
-          )
-          //Can't return null here since consuming component does not handle null yet
-          // return null
         }
-        const validateFilterData = getFiltersSchema.safeParse(tempFilterData)
 
-        if (!validateFilterData.success) {
+        if (include) {
+          params.include = include.join(",")
+        }
+
+        getHotelCounter.add(1, {
+          hotelId,
+          language,
+          include,
+        })
+        console.info(
+          "api.hotels.hotelData start",
+          JSON.stringify({ query: { hotelId, params } })
+        )
+
+        const apiResponse = await api.get(
+          `${api.endpoints.v1.hotels}/${hotelId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${ctx.serviceToken}`,
+            },
+          },
+          params
+        )
+
+        if (!apiResponse.ok) {
+          const text = await apiResponse.text()
+          getHotelFailCounter.add(1, {
+            hotelId,
+            language,
+            include,
+            error_type: "http_error",
+            error: JSON.stringify({
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            }),
+          })
           console.error(
-            "api.hotels.filters validation error",
+            "api.hotels.hotelData error",
             JSON.stringify({
-              error: validateFilterData.error,
+              query: { hotelId, params },
+              error: {
+                status: apiResponse.status,
+                statusText: apiResponse.statusText,
+                text,
+              },
+            })
+          )
+          return null
+        }
+
+        const apiJson = await apiResponse.json()
+        const validateHotelData = getHotelDataSchema.safeParse(apiJson)
+
+        if (!validateHotelData.success) {
+          getHotelFailCounter.add(1, {
+            hotelId,
+            language,
+            include,
+            error_type: "validation_error",
+            error: JSON.stringify(validateHotelData.error),
+          })
+
+          console.error(
+            "api.hotels.hotelData validation error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: validateHotelData.error,
             })
           )
           throw badRequestError()
         }
-        console.info("api.hotels.rates success", JSON.stringify({}))
+
-        return validateFilterData.data
+        getHotelSuccessCounter.add(1, {
+          hotelId,
+          language,
+          include,
+        })
+        console.info(
+          "api.hotels.hotelData success",
+          JSON.stringify({
+            query: { hotelId, params: params },
+          })
+        )
+        return validateHotelData.data
       }),
   }),
 })

server/routers/hotels/tempFilterData.json

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

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
+}

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
+  price: AvailabilityPrices
+}

types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -1,11 +1,5 @@
-import {
+import { HotelData } from "./hotelCardListingProps"
-  Availability,
-  AvailabilityPrices,
-} from "@/server/routers/hotels/output"
 
 export type HotelCardProps = {
-  checkInDate: Availability["data"][number]["attributes"]["checkInDate"]
+  hotel: HotelData
-  checkOutDate: Availability["data"][number]["attributes"]["checkOutDate"]
-  hotelId: Availability["data"][number]["attributes"]["hotelId"]
-  price: AvailabilityPrices
 }

types/components/hotelReservation/selectHotel/hotelFilterProps.ts

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

types/components/hotelReservation/selectHotel/hotelFiltersProps.ts

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