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/ToggleSidePeek.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import useSidePeekStore from "@/stores/sidepeek"
-
-import Button from "@/components/TempDesignSystem/Button"
-
-import styles from "./toggleSidePeek.module.css"
-
-import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
-import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
-
-export default function ToggleSidePeek({
-  hotelId,
-  roomTypeCode,
-  user,
-  confirmationNumber,
-}: ToggleSidePeekProps) {
-  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-
-  return (
-    <Button
-      onClick={() =>
-        openSidePeek({
-          key: SidePeekEnum.bookedRoomDetails,
-          hotelId,
-          roomTypeCode,
-          user,
-          confirmationNumber,
-        })
-      }
-      size="small"
-      variant="icon"
-      intent="text"
-      wrapping
-    >
-      <div className={styles.iconContainer}>
-        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
-      </div>
-    </Button>
-  )
-}

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

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css

@@ -31,6 +31,13 @@
   position: relative;
 }
 
+.iconContainer {
+  display: flex;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+  padding: var(--Spacing-x-half);
+}
+
 .roomName {
   color: var(--Scandic-Brand-Burgundy);
 }

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/toggleSidePeek.module.css

@@ -1,6 +0,0 @@
-.iconContainer {
-  display: flex;
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  padding: var(--Spacing-x-half);
-}