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

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

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" })}