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/SidePeeks/RoomDetailsSidePeek/index.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { DialogTrigger } from "react-aria-components"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
+import { trackOpenSidePeekEvent } from "@/utils/tracking"
+
+import { RoomSidePeekContent } from "./RoomSidePeekContent"
+
+import type { Room } from "@scandic-hotels/trpc/types/hotel"
+
+import { SidePeekEnum } from "@/types/sidepeek"
+
+interface RoomDetailsSidePeekProps {
+  hotelId: string
+  room: Room
+  triggerLabel: string
+  roomTypeCode?: string
+  buttonVariant?: "primary" | "secondary"
+  wrapping?: boolean
+}
+
+const buttonPropsMap: Record<
+  NonNullable<RoomDetailsSidePeekProps["buttonVariant"]>,
+  Pick<
+    React.ComponentProps<typeof Button>,
+    "variant" | "color" | "size" | "typography"
+  >
+> = {
+  primary: {
+    variant: "Text",
+    color: "Primary",
+    size: "Medium",
+    typography: "Body/Paragraph/mdBold",
+  },
+  secondary: {
+    variant: "Text",
+    color: "Inverted",
+    size: "Small",
+    typography: "Body/Supporting text (caption)/smBold",
+  },
+}
+
+export default function RoomDetailsSidePeek({
+  hotelId,
+  room,
+  roomTypeCode,
+  triggerLabel,
+  wrapping = true,
+  buttonVariant: variant = "primary",
+}: RoomDetailsSidePeekProps) {
+  const buttonProps = buttonPropsMap[variant]
+
+  return (
+    <DialogTrigger>
+      <Button
+        {...buttonProps}
+        wrapping={wrapping}
+        onPress={() =>
+          trackOpenSidePeekEvent({
+            name: SidePeekEnum.roomDetails,
+            hotelId,
+            roomTypeCode,
+            includePathname: true,
+          })
+        }
+      >
+        {triggerLabel}
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+      </Button>
+
+      <SidePeekSelfControlled title={room.name}>
+        <RoomSidePeekContent room={room} />
+      </SidePeekSelfControlled>
+    </DialogTrigger>
+  )
+}