Merged in feat/SW-3289-replace-sidepeek-hotel-reservation (pull request #2686)

feat(SW-3289): replace sidepeek

* fix(SW-3289): replace sidepeek

* fix(SW-3289): add wrapping prop and change prop name to buttonVariant

* fix(SW-3289): replace body with typography

* fix(SW-3289): fix intl message


Approved-by: Joakim Jäderberg

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

@@ -1,48 +0,0 @@
-"use client"
-
-import { DialogTrigger } from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { RoomSidePeekContent } from "@scandic-hotels/booking-flow/components/RoomSidePeekContent"
-import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { getBookedHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
-
-import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
-
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
-
-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

@@ -11,13 +11,14 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
+import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
 
 import { CancellationRuleEnum } from "@/constants/booking"
+import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
+import RoomDetailsSidePeek from "@/components/SidePeeks/RoomDetailsSidePeek"
 import useLang from "@/hooks/useLang"
 
-import RoomDetailsSidePeek from "./RoomDetailsSidePeek"
-
 import styles from "./room.module.css"
 
 import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
@@ -31,6 +32,10 @@ export default function Room({
 }: RoomProps) {
   const intl = useIntl()
   const lang = useLang()
+  const { roomCategories } = useBookingConfirmationStore((state) => ({
+    roomCategories: state.roomCategories,
+  }))
+  const room = getHotelRoom(roomCategories, booking.roomTypeCode)
 
   const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
   const fromDate = dt(booking.checkInDate).locale(lang)
@@ -116,7 +121,18 @@ export default function Room({
             <Typography variant="Title/Subtitle/md">
               <h2>{roomName}</h2>
             </Typography>
-            <RoomDetailsSidePeek roomTypeCode={booking.roomTypeCode} />
+            {room && (
+              <RoomDetailsSidePeek
+                hotelId={booking.hotelId}
+                room={room}
+                roomTypeCode={booking.roomTypeCode}
+                buttonVariant="primary"
+                triggerLabel={intl.formatMessage({
+                  defaultMessage: "View room details",
+                })}
+                wrapping={false}
+              />
+            )}
           </div>
           <Typography variant="Body/Paragraph/mdRegular">
             <ul className={styles.details}>