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

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

@@ -1,14 +1,15 @@
 "use client"
 
-import { DialogTrigger } from "react-aria-components"
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
-import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
+import BookedRoomSidePeekContent from "@/components/SidePeeks/BookedRoomSidePeekContent"
 import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import { SidePeekEnum } from "@/types/sidepeek"
@@ -23,9 +24,10 @@ export default function RoomDetailsSidePeek({
 }: RoomDetailsSidePeekProps) {
   const intl = useIntl()
   const bookedRoom = useMyStayStore((state) => state.bookedRoom)
+  const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <DialogTrigger>
+    <>
       <Button
         intent="text"
         size="small"
@@ -33,6 +35,7 @@ export default function RoomDetailsSidePeek({
         variant="icon"
         wrapping
         onPress={() => {
+          setIsOpen(true)
           trackOpenSidePeekEvent({
             name: SidePeekEnum.bookedRoomDetails,
             hotelId: bookedRoom.hotelId,
@@ -43,11 +46,13 @@ export default function RoomDetailsSidePeek({
         {intl.formatMessage({ defaultMessage: "See room details" })}
         <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
       </Button>
-      <BookedRoomSidePeek
-        hotelRoom={bookedRoom.room}
-        room={bookedRoom}
-        user={user}
-      />
-    </DialogTrigger>
+      <SidePeekSelfControlled
+        title={bookedRoom.room?.name ?? bookedRoom.roomName}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
+        <BookedRoomSidePeekContent room={bookedRoom} user={user} />
+      </SidePeekSelfControlled>
+    </>
   )
 }