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
This commit is contained in:
Niclas Edenvin
2025-02-05 10:16:32 +00:00
committed by Michael Zetterberg
parent 691c493522
commit 86a7650813
16 changed files with 5365 additions and 11 deletions

View File

@@ -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}
/>
)
}

File diff suppressed because it is too large Load Diff

View File

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import AddToCalendar from "./Actions/AddToCalendar" import AddToCalendar from "./Actions/AddToCalendar"
@@ -65,6 +66,14 @@ export default function Header({
{hotel.name} {hotel.name}
</Title> </Title>
</hgroup> </hgroup>
<Subtitle color="uiTextHighContrast" type="two">
{intl.formatMessage(
{ id: "Reservation number {value}" },
{
value: booking.confirmationNumber,
}
)}
</Subtitle>
<Body className={styles.body}>{text}</Body> <Body className={styles.body}>{text}</Body>
<div className={styles.actions}> <div className={styles.actions}>
<AddToCalendar <AddToCalendar

View File

@@ -30,19 +30,9 @@ export default function Room({ booking, img, roomName }: RoomProps) {
return ( return (
<article className={styles.room}> <article className={styles.room}>
<header className={styles.header}> <header className={styles.header}>
<div> {/* <Subtitle color="mainGrey60" type="two">
{/* <Subtitle color="mainGrey60" type="two">
{intl.formatMessage({ id: "Room" })} 1 {intl.formatMessage({ id: "Room" })} 1
</Subtitle> */} </Subtitle> */}
<Subtitle color="uiTextHighContrast" type="two">
{intl.formatMessage(
{ id: "Reservation number {value}" },
{
value: booking.confirmationNumber,
}
)}
</Subtitle>
</div>
<div className={styles.benefits}> <div className={styles.benefits}>
{booking.rateDefinition.isMemberRate ? ( {booking.rateDefinition.isMemberRate ? (
<> <>

View File

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

View File

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

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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);
}

View File

@@ -285,6 +285,7 @@
"My pages": "Mine sider", "My pages": "Mine sider",
"My pages menu": "Mine sider menu", "My pages menu": "Mine sider menu",
"My payment cards": "Mine betalingskort", "My payment cards": "Mine betalingskort",
"My stay at {hotelName}": "My stay at {hotelName}",
"My wishes": "Mine ønsker", "My wishes": "Mine ønsker",
"Name": "Navn", "Name": "Navn",
"Name: {cardMembershipType}": "Navn: {cardMembershipType}", "Name: {cardMembershipType}": "Navn: {cardMembershipType}",
@@ -377,6 +378,7 @@
"Relax": "Slap af", "Relax": "Slap af",
"Remove card from member profile": "Fjern kortet fra medlemsprofilen", "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
"Request bedtype": "Anmod om sengetype", "Request bedtype": "Anmod om sengetype",
"Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
"Restaurant & Bar": "Restaurant & Bar", "Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars", "Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Gentag den nye adgangskode", "Retype new password": "Gentag den nye adgangskode",

View File

@@ -283,6 +283,7 @@
"My pages": "Meine Seiten", "My pages": "Meine Seiten",
"My pages menu": "Meine Seite Menü", "My pages menu": "Meine Seite Menü",
"My payment cards": "Meine Zahlungskarten", "My payment cards": "Meine Zahlungskarten",
"My stay at {hotelName}": "My stay at {hotelName}",
"My wishes": "Meine Wünsche", "My wishes": "Meine Wünsche",
"Name": "Name", "Name": "Name",
"Name: {cardMembershipType}": "Name: {cardMembershipType}", "Name: {cardMembershipType}": "Name: {cardMembershipType}",
@@ -375,6 +376,7 @@
"Relax": "Entspannen", "Relax": "Entspannen",
"Remove card from member profile": "Karte aus dem Mitgliedsprofil entfernen", "Remove card from member profile": "Karte aus dem Mitgliedsprofil entfernen",
"Request bedtype": "Bettentyp anfragen", "Request bedtype": "Bettentyp anfragen",
"Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
"Restaurant & Bar": "Restaurant & Bar", "Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars", "Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Neues Passwort erneut eingeben", "Retype new password": "Neues Passwort erneut eingeben",

View File

@@ -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", "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", "Campaign": "Campaign",
"Cancel": "Cancel", "Cancel": "Cancel",
"Cancel booking": "Cancel booking",
"Cancellation policy": "Cancellation policy", "Cancellation policy": "Cancellation policy",
"Change room": "Change room", "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": "Check in",
"Check in from: {checkInTime}": "Check in from: {checkInTime}", "Check in from: {checkInTime}": "Check in from: {checkInTime}",
"Check out": "Check out", "Check out": "Check out",
@@ -297,6 +299,7 @@
"Menu": "Menu", "Menu": "Menu",
"Menus": "Menus", "Menus": "Menus",
"Modify": "Modify", "Modify": "Modify",
"Modify dates": "Modify dates",
"Mon-Fri Always open": "Mon-Fri Always open", "Mon-Fri Always open": "Mon-Fri Always open",
"Mon-Fri {openingTime}-{closingTime}": "Mon-Fri {openingTime}-{closingTime}", "Mon-Fri {openingTime}-{closingTime}": "Mon-Fri {openingTime}-{closingTime}",
"Monday": "Monday", "Monday": "Monday",
@@ -308,6 +311,7 @@
"My pages": "My pages", "My pages": "My pages",
"My pages menu": "My pages menu", "My pages menu": "My pages menu",
"My payment cards": "My payment cards", "My payment cards": "My payment cards",
"My stay at {hotelName}": "My stay at {hotelName}",
"My wishes": "My wishes", "My wishes": "My wishes",
"Name": "Name", "Name": "Name",
"Name: {cardMembershipType}": "Name: {cardMembershipType}", "Name: {cardMembershipType}": "Name: {cardMembershipType}",
@@ -414,6 +418,7 @@
"Relax": "Relax", "Relax": "Relax",
"Remove card from member profile": "Remove card from member profile", "Remove card from member profile": "Remove card from member profile",
"Request bedtype": "Request bedtype", "Request bedtype": "Request bedtype",
"Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
"Reservation number {value}": "Reservation number {value}", "Reservation number {value}": "Reservation number {value}",
"Reservation policy": "Reservation policy", "Reservation policy": "Reservation policy",
"Restaurant & Bar": "Restaurant & Bar", "Restaurant & Bar": "Restaurant & Bar",

View File

@@ -285,6 +285,7 @@
"My pages": "Omat sivut", "My pages": "Omat sivut",
"My pages menu": "Omat sivut -valikko", "My pages menu": "Omat sivut -valikko",
"My payment cards": "Minun maksukortit", "My payment cards": "Minun maksukortit",
"My stay at {hotelName}": "My stay at {hotelName}",
"My wishes": "Toiveeni", "My wishes": "Toiveeni",
"Name": "Nimi", "Name": "Nimi",
"Name: {cardMembershipType}": "Nimi: {cardMembershipType}", "Name: {cardMembershipType}": "Nimi: {cardMembershipType}",
@@ -377,6 +378,7 @@
"Relax": "Rentoutua", "Relax": "Rentoutua",
"Remove card from member profile": "Poista kortti jäsenprofiilista", "Remove card from member profile": "Poista kortti jäsenprofiilista",
"Request bedtype": "Pyydä sänkytyyppiä", "Request bedtype": "Pyydä sänkytyyppiä",
"Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
"Restaurant & Bar": "Ravintola & Baari", "Restaurant & Bar": "Ravintola & Baari",
"Restaurants & Bars": "Restaurants & Bars", "Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Kirjoita uusi salasana uudelleen", "Retype new password": "Kirjoita uusi salasana uudelleen",

View File

@@ -284,6 +284,7 @@
"My pages": "Mine sider", "My pages": "Mine sider",
"My pages menu": "Mine sider-menyen", "My pages menu": "Mine sider-menyen",
"My payment cards": "Mine betalingskort", "My payment cards": "Mine betalingskort",
"My stay at {hotelName}": "My stay at {hotelName}",
"My wishes": "Mine ønsker", "My wishes": "Mine ønsker",
"Name": "Navn", "Name": "Navn",
"Name: {cardMembershipType}": "Navn: {cardMembershipType}", "Name: {cardMembershipType}": "Navn: {cardMembershipType}",
@@ -376,6 +377,7 @@
"Relax": "Slappe av", "Relax": "Slappe av",
"Remove card from member profile": "Fjern kortet fra medlemsprofilen", "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
"Request bedtype": "Be om sengetype", "Request bedtype": "Be om sengetype",
"Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
"Restaurant & Bar": "Restaurant & Bar", "Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars", "Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Skriv inn nytt passord på nytt", "Retype new password": "Skriv inn nytt passord på nytt",

View File

@@ -284,6 +284,7 @@
"My pages": "Mina sidor", "My pages": "Mina sidor",
"My pages menu": "Mina sidor meny", "My pages menu": "Mina sidor meny",
"My payment cards": "Mina betalningskort", "My payment cards": "Mina betalningskort",
"My stay at {hotelName}": "My stay at {hotelName}",
"My wishes": "Mina önskningar", "My wishes": "Mina önskningar",
"Name": "Namn", "Name": "Namn",
"Name: {cardMembershipType}": "Namn: {cardMembershipType}", "Name: {cardMembershipType}": "Namn: {cardMembershipType}",
@@ -376,6 +377,7 @@
"Relax": "Koppla av", "Relax": "Koppla av",
"Remove card from member profile": "Ta bort kortet från medlemsprofilen", "Remove card from member profile": "Ta bort kortet från medlemsprofilen",
"Request bedtype": "Request bedtype", "Request bedtype": "Request bedtype",
"Reservation No. {reservationNumber}": "Reservation No. {reservationNumber}",
"Restaurant & Bar": "Restaurang & Bar", "Restaurant & Bar": "Restaurang & Bar",
"Restaurants & Bars": "Restaurants & Bars", "Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Upprepa nytt lösenord", "Retype new password": "Upprepa nytt lösenord",