feat(SW-252): add new ux

components/HotelReservation/HotelCard/index.tsx

@@ -1,7 +1,16 @@
-import { ScandicLogoIcon } from "@/components/Icons"
+import {
+  ChevronRightIcon,
+  PriceTagIcon,
+  ScandicLogoIcon,
+} from "@/components/Icons"
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
+import Divider from "@/components/TempDesignSystem/Divider"
+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"
 
@@ -10,7 +19,7 @@ import styles from "./hotelCard.module.css"
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
 export default async function HotelCard({ hotel }: HotelCardProps) {
-  const { formatMessage } = await getIntl()
+  const intl = await getIntl()
   return (
     <article className={styles.card}>
       <Image
@@ -20,33 +29,53 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
         height={200}
         className={styles.image}
       />
-      <div className={styles.information}>
-        <header className={styles.title}>
-          <ScandicLogoIcon color="red" />
-          <Title as="h4" textTransform="capitalize">
-            {hotel.name}
-          </Title>
-        </header>
-        <div className={styles.description}>
-          <span>{`${hotel.address.streetAddress}, ${hotel.address.city}`}</span>
-          <span>{hotel.hotelContent.texts.descriptions.short}</span>
-        </div>
-        <div className={styles.chips}>
-          {hotel.detailedFacilities.slice(0, 6).map((chip, index) => (
-            <Chip key={`chip-${index}`}>{chip.name}</Chip>
+      <header className={styles.header}>
+        <ScandicLogoIcon color="red" className={styles.logo} />
+        <Title as="h4" textTransform="capitalize">
+          {hotel.name}
+        </Title>
+        <Footnote color="textMediumContrast">{`${hotel.address.streetAddress}, ${hotel.address.city}`}</Footnote>
+        <Footnote color="textMediumContrast">{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}</Footnote>
+      </header>
+      <section className={styles.hotel}>
+        <div className={styles.facilities}>
+          {hotel.detailedFacilities.slice(0, 6).map((data) => (
+            <Caption key={data.id} color="textMediumContrast">
+              {data.name}
+            </Caption>
           ))}
         </div>
-        <footer className={styles.booking}>
-          <Button
-            theme="base"
-            intent="primary"
-            size="small"
-            className={styles.button}
-          >
-            {formatMessage({ id: "Book" })}
-          </Button>
-        </footer>
-      </div>
+        <Link href="#" color="burgundy" className={styles.link}>
+          {intl.formatMessage({ id: "See hotel details" })}
+          <ChevronRightIcon color="burgundy" />
+        </Link>
+      </section>
+      <section className={styles.prices}>
+        <div>
+          <Chip intent="sublte" className={styles.public}>
+            <PriceTagIcon width={15} height={15} />
+            {intl.formatMessage({ id: "Public price from" })}
+          </Chip>
+          <Caption color="textMediumContrast">2820 SEK / night</Caption>
+          <Footnote color="textMediumContrast">approx 280 eur</Footnote>
+        </div>
+        <div>
+          <Chip intent="pale" className={styles.member}>
+            <PriceTagIcon width={15} height={15} />
+            {intl.formatMessage({ id: "Member price from" })}
+          </Chip>
+          <Caption color="textMediumContrast">2820 SEK / night</Caption>
+          <Footnote color="textMediumContrast">approx 280 eur</Footnote>
+        </div>
+        <Button
+          theme="base"
+          intent="tertiary"
+          size="small"
+          className={styles.button}
+        >
+          {intl.formatMessage({ id: "See rooms" })}
+        </Button>
+      </section>
     </article>
   )
 }