scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2481-booking-number (pull request #1845)

Browse Source 
fix(SW-2481): add booking number for multiroom

* fix(SW-2481): add booking number for multiroom


Approved-by: Michael Zetterberg
This commit is contained in:
Bianca Widstam
2025-04-23 23:44:52 +00:00
committed by Michael Zetterberg
parent d827bf04d0
commit d077184e5e
5 changed files with 54 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/index.tsx
View File

@@ -5,7 +5,6 @@ import { myStay } from "@/constants/routes/myStay"
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 useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
@@ -77,16 +76,6 @@ export default function Header({
{hotel.name} {hotel.name}
</Title> </Title>
</hgroup> </hgroup>
<Subtitle color="uiTextHighContrast" type="two">
{intl.formatMessage(
{
defaultMessage: "Booking 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

31
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
View File

@@ -41,6 +41,16 @@ export default function Room({
return ( return (
<article className={styles.room}> <article className={styles.room}>
<header className={styles.header}> <header className={styles.header}>
<Typography variant="Title/Subtitle/md">
<h2>
{intl.formatMessage(
{
defaultMessage: "Booking number {value}",
},
{ value: booking.confirmationNumber }
)}
</h2>
</Typography>
{booking.rateDefinition.isMemberRate ? ( {booking.rateDefinition.isMemberRate ? (
<div className={styles.benefits}> <div className={styles.benefits}>
<> <>
@@ -60,19 +70,24 @@ export default function Room({
{booking.guaranteeInfo && ( {booking.guaranteeInfo && (
<div className={styles.benefits}> <div className={styles.benefits}>
<MaterialIcon <MaterialIcon
icon="check" icon="check_circle"
color="Icon/Feedback/Success" color="Icon/Feedback/Success"
size={20} size={20}
/> />
<Typography
variant="Body/Supporting text (caption)/smBold"
className={styles.guaranteeText}
>
<p>
{intl.formatMessage({
defaultMessage: "Booking guaranteed.",
})}
</p>
</Typography>
{/* eslint-disable formatjs/no-literal-string-in-jsx */}{" "}
{/* eslint-enable formatjs/no-literal-string-in-jsx */}
<Typography variant="Body/Supporting text (caption)/smRegular"> <Typography variant="Body/Supporting text (caption)/smRegular">
<p> <p>
<strong>
{intl.formatMessage({
defaultMessage: "Booking guaranteed.",
})}
</strong>
{/* eslint-disable formatjs/no-literal-string-in-jsx */}{" "}
{/* eslint-enable formatjs/no-literal-string-in-jsx */}
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: defaultMessage:
"Your room will remain available for check-in even after 18:00.", "Your room will remain available for check-in even after 18:00.",

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css
View File

@@ -20,6 +20,10 @@
width: max-content; width: max-content;
} }
.guaranteeText {
color: var(--Text-Feedback-Succes-Accent);
}
.booking { .booking {
background-color: var(--Base-Background-Primary-Normal); background-color: var(--Base-Background-Primary-Normal);
border-radius: var(--Corner-radius-Large); border-radius: var(--Corner-radius-Large);

39
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx
View File

@@ -1,4 +1,5 @@
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { Typography } from "@scandic-hotels/design-system/Typography"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { LinkedReservation } from "./LinkedReservation" import { LinkedReservation } from "./LinkedReservation"
@@ -21,14 +22,16 @@ export default async function Rooms({
<section className={styles.rooms}> <section className={styles.rooms}>
<div className={styles.room}> <div className={styles.room}>
{linkedReservations.length ? ( {linkedReservations.length ? (
<Subtitle color="mainGrey60" type="two"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage( <h2 className={styles.roomTitle}>
{ {intl.formatMessage(
defaultMessage: "Room {roomIndex}", {
}, defaultMessage: "Room {roomIndex}",
{ roomIndex: 1 } },
)} { roomIndex: 1 }
</Subtitle> )}
</h2>
</Typography>
) : null} ) : null}
<Room <Room
booking={booking} booking={booking}
@@ -41,14 +44,16 @@ export default async function Rooms({
{linkedReservations.map((reservation, idx) => ( {linkedReservations.map((reservation, idx) => (
<div className={styles.room} key={reservation.confirmationNumber}> <div className={styles.room} key={reservation.confirmationNumber}>
<Subtitle color="mainGrey60" type="two"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage( <h2 className={styles.roomTitle}>
{ {intl.formatMessage(
defaultMessage: "Room {roomIndex}", {
}, defaultMessage: "Room {roomIndex}",
{ roomIndex: idx + 2 } },
)} { roomIndex: idx + 2 }
</Subtitle> )}
</h2>
</Typography>
<LinkedReservation <LinkedReservation
checkInTime={checkInTime} checkInTime={checkInTime}
checkOutTime={checkOutTime} checkOutTime={checkOutTime}

6
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/rooms.module.css
View File

@@ -7,5 +7,9 @@
.room { .room {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Space-x025);
}
.roomTitle {
color: var(--Text-Tertiary);
} }