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

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek.tsx

@@ -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<BreakfastPackage, "requestedPrice"> | 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 (
-    <DialogTrigger>
-      <Typography variant="Body/Supporting text (caption)/smBold">
-        <ButtonRAC className={styles.trigger}>
-          <span>
-            {intl.formatMessage({ defaultMessage: "View room details" })}
-          </span>
-          <MaterialIcon color="CurrentColor" icon="chevron_right" size={20} />
-        </ButtonRAC>
-      </Typography>
-      <BookedRoomSidePeek
-        hotelRoom={hotelRoom}
-        room={room}
-        user={user.data ?? null}
-      />
-    </DialogTrigger>
-  )
-}

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 (
+    <DialogTrigger>
+      <Button
+        variant="Text"
+        color="Primary"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
+      >
+        {intl.formatMessage({ defaultMessage: "View room details" })}
+        <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
+      </Button>
+      <SidePeekSelfControlled title={room.name}>
+        <RoomSidePeekContent room={room} />
+      </SidePeekSelfControlled>
+    </DialogTrigger>
+  )
+}

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({
             <Typography variant="Title/Subtitle/md">
               <h2>{roomName}</h2>
             </Typography>
-            <RoomDetailsSidePeek booking={booking} roomNumber={roomNumber} />
+            <RoomDetailsSidePeek roomTypeCode={booking.roomTypeCode} />
           </div>
           <Typography variant="Body/Paragraph/mdRegular">
             <ul className={styles.details}>

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;
 }

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/sidePeek.module.css

@@ -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;
-}