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
2025-05-02 15:10:34 +00:00
parent f5f9aba2e5
commit 0c7836fa59
33 changed files with 881 additions and 510 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/ToggleSidePeek.tsx
+++ b/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>
-  )
-}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/index.tsx
+++ b/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
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css
+++ b/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);
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/toggleSidePeek.module.css
+++ b/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);
-}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
+++ b/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>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
+++ b/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);
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
@@ -20,12 +20,15 @@ interface RoomsProps {

 export default function Rooms({ user }: RoomsProps) {
  const intl = useIntl()
-  const { allRoomsAreCancelled, room, rooms } = useMyStayStore((state) => ({
-    allRoomsAreCancelled: state.allRoomsAreCancelled,
-    hotel: state.hotel,
-    room: state.bookedRoom.room,
-    rooms: state.rooms,
-  }))
+  const { allRoomsAreCancelled, room, rooms, roomCategories } = useMyStayStore(
+    (state) => ({
+      allRoomsAreCancelled: state.allRoomsAreCancelled,
+      hotel: state.hotel,
+      room: state.bookedRoom.room,
+      rooms: state.rooms,
+      roomCategories: state.roomCategories,
+    })
+  )

  if (!room) {
    return null
@@ -50,6 +53,7 @@ export default function Rooms({ user }: RoomsProps) {
            bedType={room.bedType}
            image={room.images[0]}
            user={user}
+            roomCategories={roomCategories}
          />
        ) : (
          <div className={styles.roomsContainer}>
@@ -58,7 +62,12 @@ export default function Rooms({ user }: RoomsProps) {
                key={booking.confirmationNumber}
                className={styles.roomWrapper}
              >
-                <MultiRoom booking={booking} roomNr={index + 1} user={user} />
+                <MultiRoom
+                  booking={booking}
+                  roomNr={index + 1}
+                  user={user}
+                  roomCategories={roomCategories}
+                />
              </div>
            ))}
          </div>