Merged in feat/SW-475-enter-details-header (pull request #630)

Feat/SW-475 enter details header * feat(SW-475): updated hotel mock data to reflect api * feat(SW-475): Added hotel selection header with sidepeek buttons * fix(SW-475): fixes from PR * fix(SW-475): changed intl string Approved-by: Arvid Norlin
2024-10-03 07:42:26 +00:00
parent e8027be2e8
commit 869c9b67b8
9 changed files with 840 additions and 107 deletions
--- a/components/HotelReservation/HotelSelectionHeader/index.tsx
+++ b/components/HotelReservation/HotelSelectionHeader/index.tsx
@@ -0,0 +1,52 @@
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import HotelDetailSidePeek from "./HotelDetailSidePeek"
+
+import styles from "./hotelSelectionHeader.module.css"
+
+import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
+
+export default async function HotelSelectionHeader({
+  hotel,
+}: HotelSelectionHeaderProps) {
+  const intl = await getIntl()
+
+  return (
+    <header className={styles.hotelSelectionHeader}>
+      <div className={styles.titleContainer}>
+        <Title as="h3" level="h1">
+          {hotel.name}
+        </Title>
+        <address className={styles.address}>
+          <Caption color="textMediumContrast">
+            {hotel.address.streetAddress}, {hotel.address.city}
+          </Caption>
+          <div>
+            <Divider variant="vertical" color="subtle" />
+          </div>
+          <Caption color="textMediumContrast">
+            {intl.formatMessage(
+              {
+                id: "Distance to city centre",
+              },
+              { number: hotel.location.distanceToCentre }
+            )}
+          </Caption>
+        </address>
+      </div>
+      <div className={styles.dividerContainer}>
+        <Divider variant="vertical" color="subtle" />
+      </div>
+      <div className={styles.descriptionContainer}>
+        <Body color="textHighContrast">
+          {hotel.hotelContent.texts.descriptions.short}
+        </Body>
+        <HotelDetailSidePeek />
+      </div>
+    </header>
+  )
+}