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 Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"
@@ -77,16 +76,6 @@ export default function Header({
{hotel.name}
</Title>
</hgroup>
<Subtitle color="uiTextHighContrast" type="two">
{intl.formatMessage(
{
defaultMessage: "Booking number {value}",
},
{
value: booking.confirmationNumber,
}
)}
</Subtitle>
<Body className={styles.body}>{text}</Body>
<div className={styles.actions}>
<AddToCalendar

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

@@ -41,6 +41,16 @@ export default function Room({
return (
<article className={styles.room}>
<header className={styles.header}>
<Typography variant="Title/Subtitle/md">
<h2>
{intl.formatMessage(
{
defaultMessage: "Booking number {value}",
},
{ value: booking.confirmationNumber }
)}
</h2>
</Typography>
{booking.rateDefinition.isMemberRate ? (
<div className={styles.benefits}>
<>
@@ -60,19 +70,24 @@ export default function Room({
{booking.guaranteeInfo && (
<div className={styles.benefits}>
<MaterialIcon
icon="check"
icon="check_circle"
color="Icon/Feedback/Success"
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">
<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({
defaultMessage:
"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;
}
.guaranteeText {
color: var(--Text-Feedback-Succes-Accent);
}
.booking {
background-color: var(--Base-Background-Primary-Normal);
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 { LinkedReservation } from "./LinkedReservation"
@@ -21,14 +22,16 @@ export default async function Rooms({
<section className={styles.rooms}>
<div className={styles.room}>
{linkedReservations.length ? (
<Subtitle color="mainGrey60" type="two">
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: 1 }
)}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<h2 className={styles.roomTitle}>
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: 1 }
)}
</h2>
</Typography>
) : null}
<Room
booking={booking}
@@ -41,14 +44,16 @@ export default async function Rooms({
{linkedReservations.map((reservation, idx) => (
<div className={styles.room} key={reservation.confirmationNumber}>
<Subtitle color="mainGrey60" type="two">
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: idx + 2 }
)}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<h2 className={styles.roomTitle}>
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: idx + 2 }
)}
</h2>
</Typography>
<LinkedReservation
checkInTime={checkInTime}
checkOutTime={checkOutTime}

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

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