Merged in feat/sw-1523-my-stay-page (pull request #1227)

feat(SW-1523): foundation for my stay page

* feat(SW-1523): foundation for my stay page

This is the base page for the my stay page. It is very much hard coded
and all components need to get a design update afterwards. But this is
to get the page going!

* fix(i18n): messages


Approved-by: Michael Zetterberg
Approved-by: Christian Andolf

components/HotelReservation/MyStay/MyStay/Ancillaries/index.tsx

@@ -0,0 +1,3 @@
+export function Ancillaries() {
+  return <div>Add Ancillaries</div>
+}

components/HotelReservation/MyStay/MyStay/BookingActions/bookingActions.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.actions {
+  display: flex;
+}

components/HotelReservation/MyStay/MyStay/BookingActions/index.tsx

@@ -0,0 +1,25 @@
+import Button from "@/components/TempDesignSystem/Button"
+import { getIntl } from "@/i18n"
+
+import styles from "./bookingActions.module.css"
+
+export async function BookingActions() {
+  const intl = await getIntl()
+  return (
+    <div className={styles.container}>
+      <div>
+        {intl.formatMessage(
+          {
+            id: "Changes can be made until {time}, {date} pending availability.",
+          },
+          { time: "15:00", date: "Mon 15 Aug" }
+        )}
+      </div>
+      <div className={styles.actions}>
+        <Button>{intl.formatMessage({ id: "Modify dates" })}</Button>
+        <Button>{intl.formatMessage({ id: "Cancel booking" })}</Button>
+        <Button>{intl.formatMessage({ id: "Customer service" })}</Button>
+      </div>
+    </div>
+  )
+}

components/HotelReservation/MyStay/MyStay/Header/index.tsx

@@ -0,0 +1,31 @@
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export async function Header({
+  booking,
+  hotel,
+}: Pick<BookingConfirmation, "booking" | "hotel">) {
+  const intl = await getIntl()
+  return (
+    <header>
+      <Title as="h2" color="red">
+        {intl.formatMessage(
+          { id: "My stay at {hotelName}" },
+          {
+            hotelName: hotel.name,
+          }
+        )}
+      </Title>
+      <Title as="h3" level="h2" textTransform="regular">
+        {intl.formatMessage(
+          { id: "Reservation No. {reservationNumber}" },
+          {
+            reservationNumber: booking.confirmationNumber,
+          }
+        )}
+      </Title>
+    </header>
+  )
+}

components/HotelReservation/MyStay/MyStay/index.tsx

@@ -0,0 +1,33 @@
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import HotelDetails from "../../BookingConfirmation/HotelDetails"
+import PaymentDetails from "../../BookingConfirmation/PaymentDetails"
+import Promos from "../../BookingConfirmation/Promos"
+import Rooms from "../../BookingConfirmation/Rooms"
+import { Ancillaries } from "./Ancillaries"
+import { BookingActions } from "./BookingActions"
+import { Header } from "./Header"
+
+import styles from "./myStay.module.css"
+
+import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export function MyStay({ room, hotel, booking }: ConfirmationProps) {
+  return (
+    <main className={styles.main}>
+      <Header booking={booking} hotel={hotel} />
+      <BookingActions />
+      <Rooms booking={booking} room={room} />
+      <Ancillaries />
+      <Divider color="primaryLightSubtle" />
+      <PaymentDetails booking={booking} />
+      <Divider color="primaryLightSubtle" />
+      <HotelDetails hotel={hotel} />
+      <Promos
+        hotelId={hotel.operaId}
+        lastName={booking.guest.lastName}
+        confirmationNumber={booking.confirmationNumber}
+      />
+    </main>
+  )
+}

components/HotelReservation/MyStay/MyStay/myStay.module.css

@@ -0,0 +1,10 @@
+.main {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x5);
+  margin: 0 auto;
+  min-height: 100dvh;
+  padding-top: var(--Spacing-x5);
+  width: var(--max-width-page);
+}