feat: merge stores, fix auto navigation, split summary

2024-11-12 15:30:59 +01:00
parent a69d14ff61
commit ccb15593ea
82 changed files with 2149 additions and 1842 deletions
--- a/components/HotelReservation/EnterDetails/HotelHeader/header.module.css
+++ b/components/HotelReservation/EnterDetails/HotelHeader/header.module.css
@@ -0,0 +1,64 @@
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  justify-content: center;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--Spacing-x1);
+}
+
+.descriptionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.address {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  font-style: normal;
+}
+
+.dividerContainer {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .header {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .wrapper {
+    flex-direction: row;
+    gap: var(--Spacing-x6);
+    margin: 0 auto;
+    /* simulates padding on viewport smaller than --max-width-navigation */
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
+  .titleContainer > h1 {
+    white-space: nowrap;
+  }
+
+  .dividerContainer {
+    display: block;
+  }
+
+  .address {
+    gap: var(--Spacing-x3);
+  }
+}
--- a/components/HotelReservation/EnterDetails/HotelHeader/index.tsx
+++ b/components/HotelReservation/EnterDetails/HotelHeader/index.tsx
@@ -0,0 +1,51 @@
+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 getSingleDecimal from "@/utils/numberFormatting"
+
+import styles from "./header.module.css"
+
+import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"
+
+export default async function HotelHeader({ hotel }: HotelHeaderProps) {
+  const intl = await getIntl()
+  return (
+    <header className={styles.header}>
+      <div className={styles.wrapper}>
+        <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 in km to city centre" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="baseTextHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+        </div>
+      </div>
+    </header>
+  )
+}