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
2025-02-05 10:16:32 +00:00
parent 691c493522
commit 86a7650813
16 changed files with 5365 additions and 11 deletions
--- a/app/[lang]/(live)/(public)/hotelreservation/my-stay/[refId]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/my-stay/[refId]/page.tsx
@@ -0,0 +1,18 @@
+import { MyStay } from "@/components/HotelReservation/MyStay/MyStay"
+import { setLang } from "@/i18n/serverContext"
+
+import { response } from "./temporary_response"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function MyStayPage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
+  return (
+    <MyStay
+      hotel={response.hotel}
+      booking={response.booking}
+      room={response.room}
+    />
+  )
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/my-stay/[refId]/temporary_response.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/my-stay/[refId]/temporary_response.ts
--- a/components/HotelReservation/BookingConfirmation/Header/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Header/index.tsx
@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"

 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import AddToCalendar from "./Actions/AddToCalendar"
@@ -65,6 +66,14 @@ export default function Header({
          {hotel.name}
        </Title>
      </hgroup>
+      <Subtitle color="uiTextHighContrast" type="two">
+        {intl.formatMessage(
+          { id: "Reservation number {value}" },
+          {
+            value: booking.confirmationNumber,
+          }
+        )}
+      </Subtitle>
      <Body className={styles.body}>{text}</Body>
      <div className={styles.actions}>
        <AddToCalendar
--- a/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
@@ -30,19 +30,9 @@ export default function Room({ booking, img, roomName }: RoomProps) {
  return (
    <article className={styles.room}>
      <header className={styles.header}>
-        <div>
-          {/* <Subtitle color="mainGrey60" type="two">
+        {/* <Subtitle color="mainGrey60" type="two">
          {intl.formatMessage({ id: "Room" })} 1
        </Subtitle> */}
-          <Subtitle color="uiTextHighContrast" type="two">
-            {intl.formatMessage(
-              { id: "Reservation number {value}" },
-              {
-                value: booking.confirmationNumber,
-              }
-            )}
-          </Subtitle>
-        </div>
        <div className={styles.benefits}>
          {booking.rateDefinition.isMemberRate ? (
            <>
--- a/components/HotelReservation/MyStay/MyStay/Ancillaries/index.tsx
+++ b/components/HotelReservation/MyStay/MyStay/Ancillaries/index.tsx
@@ -0,0 +1,3 @@
+export function Ancillaries() {
+  return <div>Add Ancillaries</div>
+}
--- a/components/HotelReservation/MyStay/MyStay/BookingActions/bookingActions.module.css
+++ b/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;
+}
--- a/components/HotelReservation/MyStay/MyStay/BookingActions/index.tsx
+++ b/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>
+  )
+}
--- a/components/HotelReservation/MyStay/MyStay/Header/index.tsx
+++ b/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>
+  )
+}
--- a/components/HotelReservation/MyStay/MyStay/index.tsx
+++ b/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>
+  )
+}
--- a/components/HotelReservation/MyStay/MyStay/myStay.module.css
+++ b/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);
+}
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -285,6 +285,7 @@
  "My pages": "Mine sider",
  "My pages menu": "Mine sider menu",
  "My payment cards": "Mine betalingskort",
+  "My stay at {hotelName}": "My stay at {hotelName}",
  "My wishes": "Mine ønsker",
  "Name": "Navn",
  "Name: {cardMembershipType}": "Navn: {cardMembershipType}",
@@ -377,6 +378,7 @@
  "Relax": "Slap af",
  "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
  "Request bedtype": "Anmod om sengetype",
+  "Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Gentag den nye adgangskode",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -283,6 +283,7 @@
  "My pages": "Meine Seiten",
  "My pages menu": "Meine Seite Menü",
  "My payment cards": "Meine Zahlungskarten",
+  "My stay at {hotelName}": "My stay at {hotelName}",
  "My wishes": "Meine Wünsche",
  "Name": "Name",
  "Name: {cardMembershipType}": "Name: {cardMembershipType}",
@@ -375,6 +376,7 @@
  "Relax": "Entspannen",
  "Remove card from member profile": "Karte aus dem Mitgliedsprofil entfernen",
  "Request bedtype": "Bettentyp anfragen",
+  "Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Neues Passwort erneut eingeben",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -85,8 +85,10 @@
  "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service",
  "Campaign": "Campaign",
  "Cancel": "Cancel",
+  "Cancel booking": "Cancel booking",
  "Cancellation policy": "Cancellation policy",
  "Change room": "Change room",
+  "Changes can be made until {time}, {date} pending availability.": "Changes can be made until {time}, {date} pending availability.",
  "Check in": "Check in",
  "Check in from: {checkInTime}": "Check in from: {checkInTime}",
  "Check out": "Check out",
@@ -297,6 +299,7 @@
  "Menu": "Menu",
  "Menus": "Menus",
  "Modify": "Modify",
+  "Modify dates": "Modify dates",
  "Mon-Fri Always open": "Mon-Fri Always open",
  "Mon-Fri {openingTime}-{closingTime}": "Mon-Fri {openingTime}-{closingTime}",
  "Monday": "Monday",
@@ -308,6 +311,7 @@
  "My pages": "My pages",
  "My pages menu": "My pages menu",
  "My payment cards": "My payment cards",
+  "My stay at {hotelName}": "My stay at {hotelName}",
  "My wishes": "My wishes",
  "Name": "Name",
  "Name: {cardMembershipType}": "Name: {cardMembershipType}",
@@ -414,6 +418,7 @@
  "Relax": "Relax",
  "Remove card from member profile": "Remove card from member profile",
  "Request bedtype": "Request bedtype",
+  "Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
  "Reservation number {value}": "Reservation number {value}",
  "Reservation policy": "Reservation policy",
  "Restaurant & Bar": "Restaurant & Bar",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -285,6 +285,7 @@
  "My pages": "Omat sivut",
  "My pages menu": "Omat sivut -valikko",
  "My payment cards": "Minun maksukortit",
+  "My stay at {hotelName}": "My stay at {hotelName}",
  "My wishes": "Toiveeni",
  "Name": "Nimi",
  "Name: {cardMembershipType}": "Nimi: {cardMembershipType}",
@@ -377,6 +378,7 @@
  "Relax": "Rentoutua",
  "Remove card from member profile": "Poista kortti jäsenprofiilista",
  "Request bedtype": "Pyydä sänkytyyppiä",
+  "Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
  "Restaurant & Bar": "Ravintola & Baari",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Kirjoita uusi salasana uudelleen",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -284,6 +284,7 @@
  "My pages": "Mine sider",
  "My pages menu": "Mine sider-menyen",
  "My payment cards": "Mine betalingskort",
+  "My stay at {hotelName}": "My stay at {hotelName}",
  "My wishes": "Mine ønsker",
  "Name": "Navn",
  "Name: {cardMembershipType}": "Navn: {cardMembershipType}",
@@ -376,6 +377,7 @@
  "Relax": "Slappe av",
  "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
  "Request bedtype": "Be om sengetype",
+  "Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Skriv inn nytt passord på nytt",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -284,6 +284,7 @@
  "My pages": "Mina sidor",
  "My pages menu": "Mina sidor meny",
  "My payment cards": "Mina betalningskort",
+  "My stay at {hotelName}": "My stay at {hotelName}",
  "My wishes": "Mina önskningar",
  "Name": "Namn",
  "Name: {cardMembershipType}": "Namn: {cardMembershipType}",
@@ -376,6 +377,7 @@
  "Relax": "Koppla av",
  "Remove card from member profile": "Ta bort kortet från medlemsprofilen",
  "Request bedtype": "Request bedtype",
+  "Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
  "Restaurant & Bar": "Restaurang & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Upprepa nytt lösenord",