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

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

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

@@ -56,8 +56,10 @@
}
.listItem {
display: flex;
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-between;
gap: var(--Space-x3);
}
.guest {
@@ -66,13 +68,17 @@
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) {
.details {
padding-bottom: var(--Spacing-x1);
}
.details p:nth-of-type(even) {
text-align: right;
padding-bottom: var(--Space-x1);
}
}
@@ -81,6 +87,14 @@
grid-template-columns: 1fr auto;
}
.details p:nth-of-type(even) {
text-align: left;
}
.img {
width: 204px;
}
.booking {
gap: var(--Spacing-x3);
grid-template-columns: auto 1fr;
@@ -89,7 +103,7 @@
}
.roomDetails {
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr auto;
}
.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 Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
@@ -63,6 +64,15 @@ export default async function BookingConfirmation({
<PaymentDetails />
<Divider color="primaryLightSubtle" />
<HotelDetails hotel={hotel} />
{hotel.specialAlerts.map((alert) => (
<div key={alert.id}>
<Alert
type={alert.type}
heading={alert.heading}
text={alert.text}
/>
</div>
))}
<Promos
confirmationNumber={booking.confirmationNumber}
hotelId={hotel.operaId}