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/Header/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Header/index.tsx
@@ -0,0 +1,60 @@
+import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+
+import Link from "@/components/TempDesignSystem/Link"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./header.module.css"
+
+import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function Header({
+  confirmationNumber,
+}: BookingConfirmationProps) {
+  const intl = await getIntl()
+  const { hotel } = await getBookingConfirmation(confirmationNumber)
+
+  const text = intl.formatMessage<React.ReactNode>(
+    { id: "booking.confirmation.text" },
+    {
+      emailLink: (str) => (
+        <Link color="burgundy" href="#" textDecoration="underline">
+          {str}
+        </Link>
+      ),
+    }
+  )
+
+  return (
+    <header className={styles.header}>
+      <hgroup className={styles.hgroup}>
+        <BiroScript color="red" tilted="small" type="two">
+          {intl.formatMessage({ id: "See you soon!" })}
+        </BiroScript>
+        <Title
+          as="h4"
+          color="red"
+          textAlign="center"
+          textTransform="regular"
+          type="h2"
+        >
+          {intl.formatMessage({ id: "booking.confirmation.title" })}
+        </Title>
+        <Title
+          as="h4"
+          color="burgundy"
+          textAlign="center"
+          textTransform="regular"
+          type="h1"
+        >
+          {hotel.name}
+        </Title>
+      </hgroup>
+      <Body className={styles.body} textAlign="center">
+        {text}
+      </Body>
+    </header>
+  )
+}