feat(SW-176): use the availability endpoint

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