fix(BOOK-405): Pushing to history when opening sidepeek to avoid navigating back inside the booking flow

Approved-by: Chuma Mcphoy (We Ahead)

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

@@ -1,9 +1,11 @@
 "use client"
-import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"
+import { useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
-import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
+import BookedRoomSidePeekContent from "@/components/SidePeeks/BookedRoomSidePeekContent"
 import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import styles from "./sidePeek.module.css"
@@ -21,11 +23,14 @@ export default function RoomDetailsSidePeek({
   booking,
   user,
 }: RoomDetailsSidePeekProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
   return (
-    <DialogTrigger>
+    <>
       <ButtonRAC
         className={styles.trigger}
         onPress={() => {
+          setIsOpen(true)
           trackOpenSidePeekEvent({
             name: SidePeekEnum.bookedRoomDetails,
             hotelId: booking.hotelId,
@@ -35,7 +40,13 @@ export default function RoomDetailsSidePeek({
       >
         <MaterialIcon icon="pan_zoom" color="CurrentColor" />
       </ButtonRAC>
-      <BookedRoomSidePeek hotelRoom={booking.room} room={booking} user={user} />
-    </DialogTrigger>
+      <SidePeekSelfControlled
+        title={booking.room?.name ?? booking.roomName}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
+        <BookedRoomSidePeekContent room={booking} user={user} />
+      </SidePeekSelfControlled>
+    </>
   )
 }