Merged in SW-2591-test-confirmation-page-incorrect-side-peek-is-displayed-upon-tapping-the-view-room-details-link (pull request #2057)

SW-2591 test confirmation page incorrect side peek is displayed upon tapping the view room details link
* fix(SW-2591): remove redundant div


Approved-by: Simon.Emanuelsson

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

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