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/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}>