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/MultiRoom/index.tsx

@@ -1,13 +1,16 @@
 "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 { dt } from "@/lib/dt"
+import { getBookedHotelRoom } from "@/server/routers/booking/utils"
 
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import Image from "@/components/Image"
+import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"
@@ -15,11 +18,11 @@ import { formatPrice } from "@/utils/numberFormatting"
 
 import PriceType from "../../PriceType"
 import { hasModifiableRate } from "../../utils"
-import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./multiRoom.module.css"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { RoomCategories } from "@/types/hotel"
 import type { Room } from "@/types/stores/my-stay"
 import type { SafeUser } from "@/types/user"
 
@@ -27,9 +30,15 @@ interface MultiRoomProps {
   booking: Room
   roomNr: number
   user: SafeUser
+  roomCategories: RoomCategories
 }
 
-export default function MultiRoom({ booking, roomNr, user }: MultiRoomProps) {
+export default function MultiRoom({
+  booking,
+  roomNr,
+  user,
+  roomCategories,
+}: MultiRoomProps) {
   const intl = useIntl()
   const lang = useLang()
 
@@ -42,7 +51,6 @@ export default function MultiRoom({ booking, roomNr, user }: MultiRoomProps) {
     childrenAges,
     confirmationNumber,
     currencyCode,
-    hotelId,
     packages,
     rateDefinition,
     room,
@@ -94,6 +102,7 @@ export default function MultiRoom({ booking, roomNr, user }: MultiRoomProps) {
       breakfast.localPrice.currency
     )
   }
+  const hotelRoom = getBookedHotelRoom(roomCategories, roomTypeCode)
 
   return (
     <article className={styles.multiRoom}>
@@ -167,12 +176,21 @@ export default function MultiRoom({ booking, roomNr, user }: MultiRoomProps) {
           </Typography>
         </div>
         <div className={styles.toggleSidePeek}>
-          <ToggleSidePeek
-            hotelId={hotelId}
-            roomTypeCode={roomTypeCode}
-            user={user}
-            confirmationNumber={confirmationNumber}
-          />
+          <DialogTrigger>
+            <ButtonRAC
+              aria-label={intl.formatMessage({
+                defaultMessage: "View room details",
+              })}
+              className={styles.iconContainer}
+            >
+              <MaterialIcon icon="pan_zoom" color="CurrentColor" />
+            </ButtonRAC>
+            <BookedRoomSidePeek
+              hotelRoom={hotelRoom}
+              room={booking}
+              user={user}
+            />
+          </DialogTrigger>
         </div>
       </div>
       <div