Merged in fix/SW-2553-sidepeeks (pull request #1919)

Fix/SW-2553 sidepeeks

* fix(SW-2553): apply sidepeek display logic

* chore: move convertToChildType and getPriceType utils

* fix: apply PR requested changes

* fix(SW-2553): fix roomNumber for multiroom

* fix(SW-2553): fix sidepeek for my-stay page


Approved-by: Michael Zetterberg
Approved-by: Bianca Widstam
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
@@ -6,6 +7,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
+import { getBookedHotelRoom } from "@/server/routers/booking/utils"
 import { useMyStayStore } from "@/stores/my-stay"
 
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
@@ -14,26 +16,31 @@ import PriceType from "@/components/HotelReservation/MyStay/PriceType"
 import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import Image from "@/components/Image"
+import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import ToggleSidePeek from "./ToggleSidePeek"
-
 import styles from "./room.module.css"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import type { Room } from "@/types/hotel"
+import type { Room, RoomCategories } from "@/types/hotel"
 import type { SafeUser } from "@/types/user"
 
 interface RoomProps {
   bedType: Room["roomTypes"][number]
   image: Room["images"][number]
   user: SafeUser
+  roomCategories: RoomCategories
 }
 
-export default function SingleRoom({ bedType, image, user }: RoomProps) {
+export default function SingleRoom({
+  bedType,
+  image,
+  user,
+  roomCategories,
+}: RoomProps) {
   const intl = useIntl()
   const lang = useLang()
 
@@ -46,7 +53,7 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
     childrenAges,
     confirmationNumber,
     formattedTotalPrice,
-    hotel,
+    guest,
     isCancelled,
     packages,
     priceType,
@@ -57,10 +64,12 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
     roomTypeCode,
     totalPrice,
     vouchers,
+    bookedRoom,
   } = useMyStayStore((state) => ({
     adults: state.bookedRoom.adults,
     bookingCode: state.bookedRoom.bookingCode,
     breakfast: state.bookedRoom.breakfast,
+    guest: state.bookedRoom.guest,
     checkInDate: state.bookedRoom.checkInDate,
     cheques: state.bookedRoom.cheques,
     childrenAges: state.bookedRoom.childrenAges,
@@ -77,6 +86,7 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
     roomTypeCode: state.bookedRoom.roomTypeCode,
     totalPrice: state.bookedRoom.totalPrice,
     vouchers: state.bookedRoom.vouchers,
+    bookedRoom: state.bookedRoom,
   }))
 
   if (!roomNumber) {
@@ -149,6 +159,8 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
     )
   }
 
+  const hotelRoom = getBookedHotelRoom(roomCategories, roomTypeCode)
+
   return (
     <div>
       <article className={styles.room}>
@@ -187,11 +199,27 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
             </div>
           </div>
           <div className={styles.sidePeek}>
-            <ToggleSidePeek
-              hotelId={hotel.operaId}
-              roomTypeCode={roomTypeCode}
-              intent="text"
-            />
+            <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={bookedRoom}
+                user={user}
+              />
+            </DialogTrigger>
           </div>
         </div>
         <div className={styles.booking}>
@@ -401,7 +429,12 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
                 </div>
               </div>
               <div className={styles.guestDetailsDesktopWrapper}>
-                <GuestDetails user={user} />
+                <GuestDetails
+                  confirmationNumber={confirmationNumber}
+                  guest={guest}
+                  isCancelled={isCancelled}
+                  user={user}
+                />
               </div>
             </div>
           </div>
@@ -454,7 +487,12 @@ export default function SingleRoom({ bedType, image, user }: RoomProps) {
 
         <PriceDetails />
         <div className={styles.guestDetailsMobileWrapper}>
-          <GuestDetails user={user} />
+          <GuestDetails
+            confirmationNumber={confirmationNumber}
+            guest={guest}
+            isCancelled={isCancelled}
+            user={user}
+          />
         </div>
       </article>
     </div>

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css

@@ -6,6 +6,17 @@
   padding: var(--Spacing-x3) 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;
+}
+
 .roomName {
   color: var(--Scandic-Brand-Burgundy);
   padding: 0 var(--Spacing-x2);