From e78d9f2a86e1bc57ef59df4e9032c2177cb8bdfa Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Mon, 12 May 2025 14:07:54 +0000 Subject: [PATCH] Merged in SW-2591-test-confirmation-page-incorrect-side-peek-is-displayed-upon-tapping-the-view-room-details-link (pull request #2057) SW-2591 test confirmation page incorrect side peek is displayed upon tapping the view room details link * fix(SW-2591): remove redundant div Approved-by: Simon.Emanuelsson --- .../Rooms/LinkedReservation/index.tsx | 2 - .../Rooms/Room/RoomDetailsSidePeek.tsx | 127 ---------------- .../Rooms/Room/RoomDetailsSidePeek/index.tsx | 48 ++++++ .../BookingConfirmation/Rooms/Room/index.tsx | 3 +- .../Rooms/Room/room.module.css | 1 + .../Rooms/Room/sidePeek.module.css | 10 -- .../BookingConfirmation/Rooms/index.tsx | 1 - .../RoomSidePeekContent/index.tsx | 138 ++++++++++++++++++ .../roomSidePeekContent.module.css} | 0 .../SidePeeks/RoomSidePeek/index.tsx | 132 +---------------- .../rooms/linkedReservation.ts | 1 - .../bookingConfirmation/rooms/room.ts | 1 - 12 files changed, 190 insertions(+), 274 deletions(-) delete mode 100644 apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek.tsx create mode 100644 apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx delete mode 100644 apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/sidePeek.module.css create mode 100644 apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx rename apps/scandic-web/components/SidePeeks/RoomSidePeek/{roomSidePeek.module.css => RoomSidePeekContent/roomSidePeekContent.module.css} (100%) diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx index a17c19da7..56ab256b4 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx @@ -22,7 +22,6 @@ export function LinkedReservation({ checkOutTime, refId, roomIndex, - roomNumber, }: LinkedReservationProps) { const lang = useLang() const { data, refetch, isLoading } = trpc.booking.get.useQuery({ @@ -87,7 +86,6 @@ export function LinkedReservation({ checkOutTime={checkOutTime} img={data.room.images[0]} roomName={data.room.name} - roomNumber={roomNumber} /> ) } diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek.tsx deleted file mode 100644 index 3023ce021..000000000 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek.tsx +++ /dev/null @@ -1,127 +0,0 @@ -"use client" - -import { Button as ButtonRAC, DialogTrigger } from "react-aria-components" -import { useIntl } from "react-intl" - -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { Typography } from "@scandic-hotels/design-system/Typography" - -import { BookingStatusEnum } from "@/constants/booking" -import { trpc } from "@/lib/trpc/client" -import { useBookingConfirmationStore } from "@/stores/booking-confirmation" - -import { convertToChildType } from "@/components/HotelReservation/utils/convertToChildType" -import { getPriceType } from "@/components/HotelReservation/utils/getPriceType" -import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek" -import { getBookedHotelRoom } from "@/utils/booking" - -import styles from "./sidePeek.module.css" - -import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast" -import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" -import { BreakfastPackageEnum } from "@/types/enums/breakfast" -import { PackageTypeEnum } from "@/types/enums/packages" -import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation" - -interface RoomDetailsSidePeekProps { - booking: BookingConfirmationSchema - roomNumber?: number -} - -export default function RoomDetailsSidePeek({ - booking, - roomNumber = 1, -}: RoomDetailsSidePeekProps) { - const intl = useIntl() - const user = trpc.user.getSafely.useQuery() - const roomCategories = useBookingConfirmationStore( - (state) => state.roomCategories - ) - const hotelRoom = getBookedHotelRoom(roomCategories, booking.roomTypeCode) - - const breakfastPackage = booking.packages.find( - (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST - ) - - const breakfast: Omit | null = - breakfastPackage - ? { - code: breakfastPackage.code, - description: breakfastPackage.description, - localPrice: { - currency: breakfastPackage.currency, - price: breakfastPackage.unitPrice, - totalPrice: breakfastPackage.totalPrice, - }, - packageType: PackageTypeEnum.BreakfastAdult, - } - : null - - const childrenInRoom = convertToChildType( - booking.childrenAges, - booking.childBedPreferences - ) - - const priceType = getPriceType( - booking.cheques, - booking.roomPoints, - booking.vouchers - ) - - const featuresPackages = booking.packages.filter( - (pkg) => - pkg.code === RoomPackageCodeEnum.PET_ROOM || - pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM || - pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM - ) - - const packages = featuresPackages.map((pkg) => ({ - code: pkg.code as RoomPackageCodeEnum, - description: pkg.description, - inventories: [], - itemCode: "", - localPrice: { - currency: pkg.currency, - price: pkg.unitPrice, - totalPrice: pkg.totalPrice, - }, - requestedPrice: { - currency: pkg.currency, - price: pkg.unitPrice, - totalPrice: pkg.totalPrice, - }, - })) - - const room = { - ...booking, - bedType: { - description: hotelRoom?.bedType.mainBed.description ?? "", - roomTypeCode: hotelRoom?.bedType.code ?? "", - }, - breakfast, - childrenInRoom, - isCancelled: booking.reservationStatus === BookingStatusEnum.Cancelled, - packages, - priceType, - roomName: hotelRoom?.name ?? "", - roomNumber, - terms: booking.rateDefinition.cancellationText, - } - return ( - - - - - {intl.formatMessage({ defaultMessage: "View room details" })} - - - - - - - ) -} diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx new file mode 100644 index 000000000..c1b72ed59 --- /dev/null +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx @@ -0,0 +1,48 @@ +"use client" + +import { DialogTrigger } from "react-aria-components" +import { useIntl } from "react-intl" + +import { Button } from "@scandic-hotels/design-system/Button" +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" + +import { useBookingConfirmationStore } from "@/stores/booking-confirmation" + +import { RoomSidePeekContent } from "@/components/SidePeeks/RoomSidePeek/RoomSidePeekContent" +import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled" +import { getBookedHotelRoom } from "@/utils/booking" + +interface RoomDetailsSidePeekProps { + roomTypeCode: string +} + +export default function RoomDetailsSidePeek({ + roomTypeCode, +}: RoomDetailsSidePeekProps) { + const { roomCategories } = useBookingConfirmationStore((state) => ({ + roomCategories: state.roomCategories, + })) + const room = getBookedHotelRoom(roomCategories, roomTypeCode) + const intl = useIntl() + + if (!room) { + return null + } + + return ( + + + + + + + ) +} 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 0babc8c72..bd807122b 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx @@ -24,7 +24,6 @@ export default function Room({ checkOutTime, img, roomName, - roomNumber = 1, }: RoomProps) { const intl = useIntl() const lang = useLang() @@ -113,7 +112,7 @@ export default function Room({

{roomName}

 - +
    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 9c4b62638..dc9d41e45 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 @@ -45,6 +45,7 @@ .roomName { display: flex; flex-direction: column; + align-items: flex-start; gap: var(--Spacing-x-half); grid-column: 1/-1; } diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/sidePeek.module.css b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/sidePeek.module.css deleted file mode 100644 index c02928dc1..000000000 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/sidePeek.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.trigger { - align-items: center; - background: none; - border: none; - color: var(--Component-Button-Brand-Secondary-On-fill-Default); - cursor: pointer; - display: flex; - gap: var(--Space-x1); - padding: var(--Space-x025) 0; -} diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx index 0f3badf16..512996d95 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx @@ -58,7 +58,6 @@ export default async function Rooms({ checkOutTime={checkOutTime} refId={reservation.refId} roomIndex={idx + 1} - roomNumber={idx + 2} /> ))} diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx new file mode 100644 index 000000000..0c35eff9f --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx @@ -0,0 +1,138 @@ +import { useIntl } from "react-intl" + +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" + +import ImageGallery from "@/components/ImageGallery" +import Body from "@/components/TempDesignSystem/Text/Body" +import Caption from "@/components/TempDesignSystem/Text/Caption" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" + +import { getBedIconName } from "../bedIcon" +import { FacilityIcon } from "../facilityIcon" + +import styles from "./roomSidePeekContent.module.css" + +import type { Room } from "@/types/hotel" + +interface RoomSidePeekContentProps { + room: Room +} + +export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) { + const intl = useIntl() + + const roomSize = room.roomSize + const totalOccupancy = room.totalOccupancy + const roomDescription = room.descriptions.medium + const galleryImages = mapApiImagesToGalleryImages(room.images) + + return ( +
    +
    + {totalOccupancy && ( + + {intl.formatMessage( + { + defaultMessage: + "Max. {max, plural, one {{range} guest} other {{range} guests}}", + }, + { + max: totalOccupancy.max, + range: totalOccupancy.range, + } + )} + + )} + {roomSize && ( + + {roomSize.min === roomSize.max + ? intl.formatMessage( + { + defaultMessage: "{roomSize} m²", + }, + { + roomSize: roomSize.min, + } + ) + : intl.formatMessage( + { + defaultMessage: "{roomSizeMin}–{roomSizeMax} m²", + }, + { + roomSizeMin: roomSize.min, + roomSizeMax: roomSize.max, + } + )} + + )} +
    + +
    + {roomDescription} +
    +
    + + {intl.formatMessage({ + defaultMessage: "Room amenities", + })} + +
      + {room.roomFacilities + .sort((a, b) => a.sortOrder - b.sortOrder) + .map((facility) => { + return ( +
    • + + + + {facility.availableInAllRooms + ? facility.name + : intl.formatMessage( + { + defaultMessage: + "{facility} (available in some rooms)", + }, + { + facility: facility.name, + } + )} + + +
      • + ) + })} +
    +
    +
    + + {intl.formatMessage({ + defaultMessage: "Bed options", + })} + + + {intl.formatMessage({ + defaultMessage: "Based on availability", + })} + +
      + {room.roomTypes.map((roomType) => { + const bedIcon = getBedIconName(roomType.mainBed.type) + return ( +
    • + + + {roomType.mainBed.description} + +
      • + ) + })} +
    +
    +
    + ) +} diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css similarity index 100% rename from apps/scandic-web/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css rename to apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/RoomSidePeek/index.tsx index 52445145b..c92ecda4d 100644 --- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/index.tsx +++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/index.tsx @@ -1,18 +1,6 @@ -import { useIntl } from "react-intl" - -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import ImageGallery from "@/components/ImageGallery" import SidePeek from "@/components/TempDesignSystem/SidePeek" -import Body from "@/components/TempDesignSystem/Text/Body" -import Caption from "@/components/TempDesignSystem/Text/Caption" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" -import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" -import { getBedIconName } from "./bedIcon" -import { FacilityIcon } from "./facilityIcon" - -import styles from "./roomSidePeek.module.css" +import { RoomSidePeekContent } from "./RoomSidePeekContent" import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek" @@ -22,129 +10,13 @@ export default function RoomSidePeek({ activeSidePeek, close, }: RoomSidePeekProps) { - const intl = useIntl() - - const roomSize = room.roomSize - const totalOccupancy = room.totalOccupancy - const roomDescription = room.descriptions.medium - const galleryImages = mapApiImagesToGalleryImages(room.images) - return ( -
    -
    - {totalOccupancy && ( - - {intl.formatMessage( - { - defaultMessage: - "Max. {max, plural, one {{range} guest} other {{range} guests}}", - }, - { - max: totalOccupancy.max, - range: totalOccupancy.range, - } - )} - - )} - {roomSize && ( - - {roomSize.min === roomSize.max - ? intl.formatMessage( - { - defaultMessage: "{roomSize} m²", - }, - { - roomSize: roomSize.min, - } - ) - : intl.formatMessage( - { - defaultMessage: "{roomSizeMin}–{roomSizeMax} m²", - }, - { - roomSizeMin: roomSize.min, - roomSizeMax: roomSize.max, - } - )} - - )} -
    - -
    - {roomDescription} -
    -
    - - {intl.formatMessage({ - defaultMessage: "Room amenities", - })} - -
      - {room.roomFacilities - .sort((a, b) => a.sortOrder - b.sortOrder) - .map((facility) => { - return ( -
    • - - - - {facility.availableInAllRooms - ? facility.name - : intl.formatMessage( - { - defaultMessage: - "{facility} (available in some rooms)", - }, - { - facility: facility.name, - } - )} - - -
      • - ) - })} -
    -
    -
    - - {intl.formatMessage({ - defaultMessage: "Bed options", - })} - - - {intl.formatMessage({ - defaultMessage: "Based on availability", - })} - -
      - {room.roomTypes.map((roomType) => { - const bedIcon = getBedIconName(roomType.mainBed.type) - return ( -
    • - - - {roomType.mainBed.description} - -
      • - ) - })} -
    -
    -
    +     ) } diff --git a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts index bd6a1aae8..ddd1209e8 100644 --- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts +++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts @@ -3,7 +3,6 @@ export interface LinkedReservationProps { checkOutTime: string refId: string roomIndex: number - roomNumber: number } export interface RetryProps { diff --git a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts index 3f5ba8c03..bc2ce6b9a 100644 --- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts +++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts @@ -6,5 +6,4 @@ export interface RoomProps { checkOutTime: string img: NonNullable["images"][number] roomName: NonNullable["name"] - roomNumber?: number }