From 314644c88c8a688b8f1f2b8cb331b16894e27c69 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Mon, 5 May 2025 16:07:26 +0200 Subject: [PATCH] fix(SW-2051): issues on confirmation page --- .../BookingConfirmation/Rooms/Room/index.tsx | 170 +++++++++--------- .../Rooms/Room/room.module.css | 28 ++- .../BookingConfirmation/index.tsx | 10 ++ 3 files changed, 119 insertions(+), 89 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx index dcfc43f01..0babc8c72 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx @@ -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({ />
- - {roomName} - + +

{roomName}

+
- +
- - {intl.formatMessage({ - defaultMessage: "Main guest", - })} - - {guestName} + +

+ {intl.formatMessage({ + defaultMessage: "Main guest", + })} +

+ + +

{guestName}

+ {booking.guest.membershipNumber ? ( - - {intl.formatMessage( - { - defaultMessage: "Friend no. {value}", - }, - { - value: booking.guest.membershipNumber, - } - )} - + +

+ {intl.formatMessage( + { + defaultMessage: "Friend no. {value}", + }, + { + value: booking.guest.membershipNumber, + } + )} +

+ ) : null} {booking.guest.phoneNumber ? ( - - {booking.guest.phoneNumber} - + +

{booking.guest.phoneNumber}

+ ) : null} {booking.guest.email ? ( - {booking.guest.email} + +

{booking.guest.email}

+ ) : null}
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css index da4dd92aa..9c4b62638 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx index cc24ba09a..399df125a 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx @@ -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({ + {hotel.specialAlerts.map((alert) => ( +
+ +
+ ))}