Merged in feat/confirmation-page-initial-multiroom-display (pull request #1334)

feat: initial display of linkedReservations on confirmation page * feat: initial display of linkedReservations on confirmation page * refactor: move notFound Approved-by: Tobias Johansson
2025-02-14 10:05:58 +00:00
parent 3044bc87d1
commit f5e0214313
9 changed files with 162 additions and 13 deletions
--- a/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
@@ -0,0 +1,98 @@
+"use client "
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
+
+import styles from "./linkedReservation.module.css"
+
+import type { LinkedReservationSchema } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
+
+interface LinkedReservationProps {
+  linkedReservation: LinkedReservationSchema
+  roomIndex: number
+}
+
+export function LinkedReservation({
+  linkedReservation,
+  roomIndex,
+}: LinkedReservationProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const {
+    checkinDate,
+    checkoutDate,
+    confirmationNumber,
+    roomTypeCode,
+    adults,
+    children,
+  } = linkedReservation
+
+  const fromDate = dt(checkinDate).locale(lang)
+  const toDate = dt(checkoutDate).locale(lang)
+  return (
+    <div className={styles.reservation}>
+      <Subtitle color="uiTextHighContrast" type="two">
+        {intl.formatMessage(
+          {
+            id: "Room {roomIndex}",
+          },
+          {
+            roomIndex: roomIndex + 2,
+          }
+        )}
+      </Subtitle>
+      <ul className={styles.details}>
+        <li className={styles.listItem}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Booking number" })}
+          </Body>
+          <Body color="uiTextHighContrast">{confirmationNumber}</Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Check-in" })}
+          </Body>
+          <Body color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "{checkInDate} from {checkInTime}" },
+              {
+                checkInDate: fromDate.format("ddd, D MMM"),
+                checkInTime: fromDate.format("HH:mm"),
+              }
+            )}
+          </Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Check-out" })}
+          </Body>
+          <Body color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "{checkOutDate} from {checkOutTime}" },
+              {
+                checkOutDate: toDate.format("ddd, D MMM"),
+                checkOutTime: toDate.format("HH:mm"),
+              }
+            )}
+          </Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Adults" })}
+          </Body>
+          <Body color="uiTextHighContrast">{adults}</Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Children" })}
+          </Body>
+          <Body color="uiTextHighContrast">{children}</Body>
+        </li>
+      </ul>
+    </div>
+  )
+}
--- a/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css
+++ b/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css
@@ -0,0 +1,19 @@
+.reservation {
+  background-color: var(--Base-Background-Primary-Normal);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
+    var(--Spacing-x2);
+}
+
+.details {
+  display: grid;
+  gap: var(--Spacing-x-half) var(--Spacing-x3);
+  list-style: none;
+}
+
+.listItem {
+  display: flex;
+  gap: var(--Spacing-x1);
+}