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 { 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,102 +110,110 @@ 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>
<ul className={styles.details}> <Typography variant="Body/Paragraph/mdRegular">
<li className={styles.listItem}> <ul className={styles.details}>
<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 ? (
<li className={styles.listItem}> <li className={styles.listItem}>
<Body color="uiTextPlaceholder"> <p className={styles.label}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Change or cancel", defaultMessage: "Check-in",
})} })}
</Body> </p>
<Body color="uiTextHighContrast"> <p>
{intl.formatMessage( {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> </li>
) : null} <li className={styles.listItem}>
</ul> <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}> <div className={styles.guest}>
<Body color="uiTextPlaceholder"> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage({ <p className={styles.label}>
defaultMessage: "Main guest", {intl.formatMessage({
})} defaultMessage: "Main guest",
</Body> })}
<Body color="uiTextHighContrast">{guestName}</Body> </p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{guestName}</p>
</Typography>
{booking.guest.membershipNumber ? ( {booking.guest.membershipNumber ? (
<Body color="uiTextHighContrast"> <Typography variant="Body/Paragraph/mdRegular">
{intl.formatMessage( <p>
{ {intl.formatMessage(
defaultMessage: "Friend no. {value}", {
}, defaultMessage: "Friend no. {value}",
{ },
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}