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

fix(SW-2051): issues on confirmation page

Browse Source
This commit is contained in:
Bianca Widstam
2025-05-05 16:07:26 +02:00
committed by Michael Zetterberg
parent 21e7932058
commit 314644c88c
3 changed files with 119 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,9 +9,7 @@ import { CancellationRuleEnum } from "@/constants/booking"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import Image from "@/components/Image" import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import RoomDetailsSidePeek from "./RoomDetailsSidePeek" import RoomDetailsSidePeek from "./RoomDetailsSidePeek"
@@ -112,19 +110,20 @@ export default function Room({
/> />
<div className={styles.roomDetails}> <div className={styles.roomDetails}>
<div className={styles.roomName}> <div className={styles.roomName}>
<Subtitle color="uiTextHighContrast" type="two"> <Typography variant="Title/Subtitle/md">
{roomName} <h2>{roomName}</h2>
</Subtitle> </Typography>
<RoomDetailsSidePeek booking={booking} roomNumber={roomNumber} /> <RoomDetailsSidePeek booking={booking} roomNumber={roomNumber} />
</div> </div>
<Typography variant="Body/Paragraph/mdRegular">
<ul className={styles.details}> <ul className={styles.details}>
<li className={styles.listItem}> <li className={styles.listItem}>
<Body color="uiTextPlaceholder"> <p className={styles.label}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Check-in", defaultMessage: "Check-in",
})} })}
</Body> </p>
<Body color="uiTextHighContrast"> <p>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "{checkInDate} from {checkInTime}", defaultMessage: "{checkInDate} from {checkInTime}",
@@ -134,15 +133,15 @@ export default function Room({
checkInTime: checkInTime, checkInTime: checkInTime,
} }
)} )}
</Body> </p>
</li> </li>
<li className={styles.listItem}> <li className={styles.listItem}>
<Body color="uiTextPlaceholder"> <p className={styles.label}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Check-out", defaultMessage: "Check-out",
})} })}
</Body> </p>
<Body color="uiTextHighContrast"> <p>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "{checkOutDate} from {checkOutTime}", defaultMessage: "{checkOutDate} from {checkOutTime}",
@@ -152,45 +151,49 @@ export default function Room({
checkOutTime: checkOutTime, checkOutTime: checkOutTime,
} }
)} )}
</Body> </p>
</li> </li>
<li className={styles.listItem}> <li className={styles.listItem}>
<Body color="uiTextPlaceholder"> <p className={styles.label}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Cancellation policy", defaultMessage: "Cancellation policy",
})} })}
</Body> </p>
<Body color="uiTextHighContrast"> <p>{booking.rateDefinition.cancellationText}</p>
{booking.rateDefinition.cancellationText}
</Body>
</li> </li>
{isFlexBooking || isChangeBooking ? ( {isFlexBooking || isChangeBooking ? (
<li className={styles.listItem}> <li className={styles.listItem}>
<Body color="uiTextPlaceholder"> <p className={styles.label}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Change or cancel", defaultMessage: "Change or cancel",
})} })}
</Body> </p>
<Body color="uiTextHighContrast"> <p>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "Until {time}, {date}", defaultMessage: "Until {time}, {date}",
}, },
{ time: "18:00", date: fromDate.format("dddd D MMM") } { time: "18:00", date: fromDate.format("dddd D MMM") }
)} )}
</Body> </p>
</li> </li>
) : null} ) : null}
</ul> </ul>
</Typography>
<div className={styles.guest}> <div className={styles.guest}>
<Body color="uiTextPlaceholder"> <Typography variant="Body/Paragraph/mdRegular">
<p className={styles.label}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Main guest", defaultMessage: "Main guest",
})} })}
</Body> </p>
<Body color="uiTextHighContrast">{guestName}</Body> </Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{guestName}</p>
</Typography>
{booking.guest.membershipNumber ? ( {booking.guest.membershipNumber ? (
<Body color="uiTextHighContrast"> <Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "Friend no. {value}", defaultMessage: "Friend no. {value}",
@@ -199,15 +202,18 @@ export default function Room({
value: booking.guest.membershipNumber, value: booking.guest.membershipNumber,
} }
)} )}
</Body> </p>
</Typography>
) : null} ) : null}
{booking.guest.phoneNumber ? ( {booking.guest.phoneNumber ? (
<Body color="uiTextHighContrast"> <Typography variant="Body/Paragraph/mdRegular">
{booking.guest.phoneNumber} <p>{booking.guest.phoneNumber}</p>
</Body> </Typography>
) : null} ) : null}
{booking.guest.email ? ( {booking.guest.email ? (
<Body color="uiTextHighContrast">{booking.guest.email}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p>{booking.guest.email}</p>
</Typography>
) : null} ) : null}
</div> </div>
</div> </div>

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

@@ -56,8 +56,10 @@
} }
.listItem { .listItem {
display: flex; display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-between; justify-content: space-between;
gap: var(--Space-x3);
} }
.guest { .guest {
@@ -66,13 +68,17 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.label {
color: var(--Text-Tertiary);
}
.details p:nth-of-type(even) {
text-align: right;
}
@media screen and (max-width: 1366px) { @media screen and (max-width: 1366px) {
.details { .details {
padding-bottom: var(--Spacing-x1); padding-bottom: var(--Space-x1);
}
.details p:nth-of-type(even) {
text-align: right;
} }
} }
@@ -81,6 +87,14 @@
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
.details p:nth-of-type(even) {
text-align: left;
}
.img {
width: 204px;
}
.booking { .booking {
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@@ -89,7 +103,7 @@
} }
.roomDetails { .roomDetails {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr auto;
} }
.guest { .guest {

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

@@ -8,6 +8,7 @@ import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt" import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms" import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel" import SidePanel from "@/components/HotelReservation/SidePanel"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider" import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
@@ -63,6 +64,15 @@ export default async function BookingConfirmation({
<PaymentDetails /> <PaymentDetails />
<Divider color="primaryLightSubtle" /> <Divider color="primaryLightSubtle" />
<HotelDetails hotel={hotel} /> <HotelDetails hotel={hotel} />
{hotel.specialAlerts.map((alert) => (
<div key={alert.id}>
<Alert
type={alert.type}
heading={alert.heading}
text={alert.text}
/>
</div>
))}
<Promos <Promos
confirmationNumber={booking.confirmationNumber} confirmationNumber={booking.confirmationNumber}
hotelId={hotel.operaId} hotelId={hotel.operaId}