feat(SW-251): use parallel fetch for hotels

components/HotelReservation/HotelCard/index.tsx

@@ -1,5 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
@@ -15,43 +14,30 @@ 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 { getLang } from "@/i18n/serverContext"
 
 import styles from "./hotelCard.module.css"
 
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default async function HotelCard({
-  checkInDate,
-  checkOutDate,
-  hotelId,
-  price,
-}: HotelCardProps) {
-  const intl = await getIntl()
+export default function HotelCard({ hotel }: HotelCardProps) {
+  const intl = useIntl()
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const { hotelData } = hotel
+  const { price } = hotel
 
-  const hotelResponse = await serverClient().hotel.hotel.get({
-    hotelId: hotelId.toString(),
-    language: getLang(),
-  })
+  if (!hotelData) return null
+  if (!price) return null
 
-  if (!hotelResponse) return null
-
-  const { data } = hotelResponse
-
-  const sortedAmenities = data.attributes.detailedFacilities
-    .sort((a, b) => b.sortOrder - a.sortOrder)
+  const sortedAmenities = hotelData.detailedFacilities
+    ?.sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
   return (
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={data.attributes.hotelContent.images.imageSizes.large}
-          alt={data.attributes.hotelContent.images.metaData.altText}
+          src={hotelData.hotelContent.images.imageSizes.medium}
+          alt={hotelData.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -59,25 +45,25 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {data.attributes.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}>
-          {`${data.attributes.address.streetAddress}, ${data.attributes.address.city}`}
+          {`${hotelData.address?.streetAddress}, ${hotelData.address?.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${data.attributes.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}>
         <div className={styles.facilities}>
-          {sortedAmenities.map((facility) => {
+          {sortedAmenities?.map((facility) => {
             const IconComponent = mapFacilityToIcon(facility.name)
             return (
               <div className={styles.facilitiesItem} key={facility.id}>