feat(SW-176): use the availability endpoint

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

@@ -1,11 +1,11 @@
 import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import HotelCard from "@/components/HotelReservation/HotelCard"
 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"
 
@@ -19,10 +19,7 @@ export default async function SelectHotelPage({
   const intl = await getIntl()
   setLang(params.lang)
 
-  // TODO: Use real endpoint.
   const tempSearchTerm = "Stockholm"
-  const hotel = tempHotelData.data.attributes
-  const hotels = [hotel]
 
   const hotelFilters = await serverClient().hotel.filters.get({
     hotelId: "879",
@@ -30,16 +27,14 @@ export default async function SelectHotelPage({
 
   const availability = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-01",
-    roomStayEndDate: "2024-11-02",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  const filterAvailability = availability?.availability.data.filter(
-    (hotels) => hotels.attributes.status === "Available"
-  )
-
-  console.log(filterAvailability)
+  const filterAvailability = availability?.availability.data
+    .filter((hotels) => hotels.attributes.status === "Available")
+    .flatMap((hotels) => hotels.attributes)
 
   return (
     <main className={styles.main}>
@@ -58,9 +53,19 @@ export default async function SelectHotelPage({
         <HotelFilter filters={hotelFilters} />
       </section>
       <section className={styles.hotelCards}>
-        {hotels.map((hotel) => (
-          <HotelCard key={hotel.name} hotel={hotel} />
-        ))}
+        {filterAvailability?.length ? (
+          filterAvailability.map((hotel) => (
+            <HotelCard
+              key={hotel.hotelId}
+              checkInDate={hotel.checkInDate}
+              checkOutDate={hotel.checkOutDate}
+              hotelId={hotel.hotelId}
+              price={hotel.bestPricePerNight}
+            />
+          ))
+        ) : (
+          <Title>No hotels found</Title>
+        )}
       </section>
     </main>
   )

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -77,6 +77,7 @@
       "image header"
       "image hotel"
       "image prices";
+    grid-template-columns: 518px;
     overflow: hidden;
     width: 1050px;
     padding: 0;

components/HotelReservation/HotelCard/index.tsx

@@ -1,3 +1,5 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
   ChevronRightIcon,
@@ -13,15 +15,28 @@ 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({ hotel }: HotelCardProps) {
+export default async function HotelCard({
+  checkInDate,
+  checkOutDate,
+  hotelId,
+  price,
+}: HotelCardProps) {
   const intl = await getIntl()
 
-  const sortedAmenities = hotel.detailedFacilities
+  const hotelData = await serverClient().hotel.get({
+    hotelId: hotelId.toString(),
+    language: getLang(),
+  })
+
+  if (!hotelData) return null
+
+  const sortedAmenities = hotelData.hotel.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -29,8 +44,8 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotel.hotelContent.images.imageSizes.large}
-          alt={hotel.hotelContent.images.metaData.altText}
+          src={hotelData.hotel.hotelContent.images.imageSizes.large}
+          alt={hotelData.hotel.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -38,25 +53,25 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotel.ratings?.tripAdvisor.rating}
+            {hotelData.hotel.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotel.name}
+          {hotelData.hotel.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+          {`${hotelData.hotel.address.streetAddress}, ${hotelData.hotel.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${hotelData.hotel.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}>
@@ -77,7 +92,9 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
             <PriceTagIcon color="white" width={15} height={15} />
             {intl.formatMessage({ id: "Public price from" })}
           </Chip>
-          <Caption color="textMediumContrast">2820 SEK / night</Caption>
+          <Caption color="textMediumContrast">
+            {price?.regularAmount} SEK / night
+          </Caption>
           <Footnote color="textMediumContrast">approx 280 eur</Footnote>
         </div>
         <div>
@@ -85,7 +102,9 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
             <PriceTagIcon color="white" width={15} height={15} />
             {intl.formatMessage({ id: "Member price from" })}
           </Chip>
-          <Caption color="textMediumContrast">2820 SEK / night</Caption>
+          <Caption color="textMediumContrast">
+            {price?.memberAmount} SEK / night
+          </Caption>
           <Footnote color="textMediumContrast">approx 280 eur</Footnote>
         </div>
         <Button

server/routers/hotels/output.ts

@@ -526,6 +526,9 @@ const availabilitySchema = z.object({
 })
 
 export const getAvailabilitySchema = availabilitySchema
+export type Availability = z.infer<typeof availabilitySchema>
+export type AvailabilityPrices =
+  Availability["data"][number]["attributes"]["bestPricePerNight"]
 
 const flexibilityPrice = z.object({
   standard: z.number(),

types/components/hotelReservation/selectHotel/hotelCardProps.ts

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

types/hotel.ts

@@ -18,5 +18,3 @@ export type HotelTripAdvisor =
   | undefined
 
 export type RoomData = z.infer<typeof roomSchema>
-
-export type Availability = z.infer<typeof getAvailabilitySchema>