feat: new booking confirmation page

2024-11-28 14:22:31 +01:00
parent 329d762917
commit ed1574838a
66 changed files with 1127 additions and 825 deletions
--- a/components/HotelReservation/BookingConfirmation/HotelDetails/hotelDetails.module.css
+++ b/components/HotelReservation/BookingConfirmation/HotelDetails/hotelDetails.module.css
@@ -0,0 +1,37 @@
+.contact,
+.container,
+.details,
+.hotel {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: var(--Spacing-x4);
+}
+
+.details {
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.contact,
+.hotel {
+  gap: var(--Spacing-x-half);
+}
+
+.coordinates {
+  margin-top: var(--Spacing-x-half);
+}
+
+.toast {
+  align-self: flex-start;
+  min-width: 300px;
+}
+
+.list {
+  padding-left: var(--Spacing-x2);
+}
+
+.link {
+  word-break: break-all;
+}
--- a/components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx
@@ -0,0 +1,74 @@
+import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { Toast } from "@/components/TempDesignSystem/Toasts"
+import { getIntl } from "@/i18n"
+
+import styles from "./hotelDetails.module.css"
+
+import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function HotelDetails({
+  confirmationNumber,
+}: BookingConfirmationProps) {
+  const intl = await getIntl()
+  const { hotel } = await getBookingConfirmation(confirmationNumber)
+  return (
+    <div className={styles.container}>
+      <div className={styles.details}>
+        <Subtitle color="uiTextHighContrast" type="two">
+          {intl.formatMessage({ id: "Hotel details" })}
+        </Subtitle>
+        <div className={styles.hotel}>
+          <Body color="uiTextHighContrast">{hotel.name}</Body>
+          <Body color="uiTextHighContrast">
+            {hotel.address.streetAddress}, {hotel.address.zipCode}{" "}
+            {hotel.address.city}
+          </Body>
+          <Body asChild color="uiTextHighContrast">
+            <Link
+              className={styles.link}
+              href={`tel:${hotel.contactInformation.phoneNumber}`}
+            >
+              {hotel.contactInformation.phoneNumber}
+            </Link>
+          </Body>
+        </div>
+        <Body color="uiTextPlaceholder" className={styles.coordinates}>
+          {intl.formatMessage(
+            { id: "Long {long} ∙ Lat {lat}" },
+            {
+              lat: hotel.location.latitude,
+              long: hotel.location.longitude,
+            }
+          )}
+        </Body>
+      </div>
+      <div className={styles.contact}>
+        <Link
+          className={styles.link}
+          color="baseTextMediumContrast"
+          href={`mailto:${hotel.contactInformation.email}`}
+        >
+          {hotel.contactInformation.email}
+        </Link>
+        <Link
+          className={styles.link}
+          color="baseTextMediumContrast"
+          href={hotel.contactInformation.websiteUrl}
+        >
+          {hotel.contactInformation.websiteUrl}
+        </Link>
+      </div>
+      <div className={styles.toast}>
+        <Toast variant="info">
+          <ul className={styles.list}>
+            <li>N/A</li>
+          </ul>
+        </Toast>
+      </div>
+    </div>
+  )
+}