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/MyStay/Rooms/MultiRoom/RoomDetailsSidePeek.tsx

@@ -4,9 +4,11 @@ import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
+import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import styles from "./sidePeek.module.css"
 
+import { SidePeekEnum } from "@/types/sidepeek"
 import type { Room as MyStayRoom } from "@/types/stores/my-stay"
 import type { SafeUser } from "@/types/user"
 
@@ -21,7 +23,16 @@ export default function RoomDetailsSidePeek({
 }: RoomDetailsSidePeekProps) {
   return (
     <DialogTrigger>
-      <ButtonRAC className={styles.trigger}>
+      <ButtonRAC
+        className={styles.trigger}
+        onPress={() => {
+          trackOpenSidePeekEvent({
+            name: SidePeekEnum.bookedRoomDetails,
+            hotelId: booking.hotelId,
+            includePathname: true,
+          })
+        }}
+      >
         <MaterialIcon icon="pan_zoom" color="CurrentColor" />
       </ButtonRAC>
       <BookedRoomSidePeek hotelRoom={booking.room} room={booking} user={user} />

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx

@@ -9,7 +9,9 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
 import { useMyStayStore } from "@/stores/my-stay"
 
 import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
+import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
+import { SidePeekEnum } from "@/types/sidepeek"
 import type { SafeUser } from "@/types/user"
 
 interface RoomDetailsSidePeekProps {
@@ -21,9 +23,23 @@ export default function RoomDetailsSidePeek({
 }: RoomDetailsSidePeekProps) {
   const intl = useIntl()
   const bookedRoom = useMyStayStore((state) => state.bookedRoom)
+
   return (
     <DialogTrigger>
-      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+      <Button
+        intent="text"
+        size="small"
+        theme="base"
+        variant="icon"
+        wrapping
+        onPress={() => {
+          trackOpenSidePeekEvent({
+            name: SidePeekEnum.bookedRoomDetails,
+            hotelId: bookedRoom.hotelId,
+            includePathname: true,
+          })
+        }}
+      >
         {intl.formatMessage({ defaultMessage: "See room details" })}
         <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
       </Button>

apps/scandic-web/components/HotelReservation/MyStay/index.tsx

@@ -1,7 +1,6 @@
 import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
 
-import SidePeek from "@scandic-hotels/booking-flow/components/HotelReservationSidePeek"
 import { dt } from "@scandic-hotels/common/dt"
 import { logger } from "@scandic-hotels/common/logger"
 import * as maskValue from "@scandic-hotels/common/utils/maskValue"
@@ -268,7 +267,6 @@ export default async function MyStay(props: {
             )}
           </div>
         </main>
-        <SidePeek />
       </MyStayProvider>
     )
   }