feat(SW-791): make confirmation page dynamic

2024-11-06 16:31:03 +01:00
parent e6a70a0a8a
commit 0897a398ee
35 changed files with 983 additions and 577 deletions
--- a/components/HotelReservation/BookingConfirmation/Details/details.module.css
+++ b/components/HotelReservation/BookingConfirmation/Details/details.module.css
@@ -0,0 +1,31 @@
+.details {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  grid-area: details;
+  padding: var(--Spacing-x2);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+}
+
+@media screen and (min-width: 768px) {
+  .details {
+    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x2);
+  }
+}
--- a/components/HotelReservation/BookingConfirmation/Details/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Details/index.tsx
@@ -0,0 +1,61 @@
+import { dt } from "@/lib/dt"
+import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./details.module.css"
+
+import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function Details({
+  confirmationNumber,
+}: BookingConfirmationProps) {
+  const intl = await getIntl()
+  const lang = getLang()
+  const { booking } = await getBookingConfirmation(confirmationNumber)
+
+  const fromDate = dt(booking.checkInDate).locale(lang)
+  const toDate = dt(booking.checkOutDate).locale(lang)
+
+  return (
+    <article className={styles.details}>
+      <header>
+        <Subtitle color="burgundy" type="two">
+          {intl.formatMessage(
+            { id: "Reference #{bookingNr}" },
+            { bookingNr: booking.confirmationNumber }
+          )}
+        </Subtitle>
+      </header>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Body>{intl.formatMessage({ id: "Check-in" })}</Body>
+          <Body>
+            {`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
+          </Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body>{intl.formatMessage({ id: "Check-out" })}</Body>
+          <Body>
+            {`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
+          </Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body>{intl.formatMessage({ id: "Breakfast" })}</Body>
+          <Body>N/A</Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body>{intl.formatMessage({ id: "Cancellation policy" })}</Body>
+          <Body>N/A</Body>
+        </li>
+        <li className={styles.listItem}>
+          <Body>{intl.formatMessage({ id: "Rebooking" })}</Body>
+          <Body>N/A</Body>
+        </li>
+      </ul>
+    </article>
+  )
+}