feat(SW-341): add hotels listing sidepeeks

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -48,12 +48,6 @@
   gap: var(--Spacing-x-half);
 }
 
-.link {
-  display: flex;
-  padding: var(--Spacing-x2) var(--Spacing-x0);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-}
-
 .prices {
   display: flex;
   flex-direction: column;
@@ -115,7 +109,7 @@
     padding-bottom: var(--Spacing-x2);
   }
 
-  .link {
+  .detailsButton {
     border-bottom: none;
   }
 

components/HotelReservation/HotelCard/index.tsx

@@ -1,11 +1,5 @@
-import { useIntl } from "react-intl"
-
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import {
-  ChevronRightIcon,
-  PriceTagIcon,
-  ScandicLogoIcon,
-} from "@/components/Icons"
+import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
@@ -14,13 +8,16 @@ 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 ReadMore from "../ReadMore"
 
 import styles from "./hotelCard.module.css"
 
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({ hotel }: HotelCardProps) {
-  const intl = useIntl()
+export default async function HotelCard({ hotel }: HotelCardProps) {
+  const intl = await getIntl()
 
   const { hotelData } = hotel
   const { price } = hotel
@@ -51,7 +48,7 @@ export default function HotelCard({ hotel }: HotelCardProps) {
         <Title as="h4" textTransform="capitalize">
           {hotelData.name}
         </Title>
-        <Footnote color="textMediumContrast" className={styles.adress}>
+        <Footnote color="textMediumContrast">
           {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
@@ -70,10 +67,7 @@ export default function HotelCard({ hotel }: HotelCardProps) {
             )
           })}
         </div>
-        <Link href="#" color="burgundy" className={styles.link}>
-          {intl.formatMessage({ id: "See hotel details" })}
-          <ChevronRightIcon color="burgundy" />
-        </Link>
+        <ReadMore hotelId={hotelData.operaId} hotel={hotelData} />
       </section>
       <section className={styles.prices}>
         <div>