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

Approved-by: Chuma Mcphoy (We Ahead)

packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { DialogTrigger } from "react-aria-components"
+import { type ReactNode, useState } from "react"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -14,7 +14,6 @@ import type {
   Hotel,
   Restaurant,
 } from "@scandic-hotels/trpc/types/hotel"
-import type { ReactNode } from "react"
 
 enum SidePeekEnum {
   hotelDetails = "hotel-detail-side-peek",
@@ -59,19 +58,21 @@ export function HotelDetailsSidePeek({
   buttonVariant,
 }: HotelDetailsSidePeekProps) {
   const buttonProps = buttonPropsMap[buttonVariant]
+  const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <DialogTrigger>
+    <>
       <Button
         {...buttonProps}
         wrapping={wrapping}
-        onPress={() =>
+        onPress={() => {
+          setIsOpen(true)
           trackOpenSidePeekEvent({
             name: SidePeekEnum.hotelDetails,
             hotelId: hotel.operaId,
             includePathname: true,
           })
-        }
+        }}
       >
         {triggerLabel}
         <MaterialIcon
@@ -81,13 +82,17 @@ export function HotelDetailsSidePeek({
         />
       </Button>
 
-      <SidePeekSelfControlled title={hotel.name}>
+      <SidePeekSelfControlled
+        title={hotel.name}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
         <HotelSidePeekContent
           hotel={hotel}
           restaurants={restaurants}
           additionalHotelData={additionalHotelData}
         />
       </SidePeekSelfControlled>
-    </DialogTrigger>
+    </>
   )
 }

packages/booking-flow/lib/components/RoomDetailsSidePeek/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { DialogTrigger } from "react-aria-components"
+import { useState } from "react"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -54,28 +54,34 @@ export function RoomDetailsSidePeek({
   buttonVariant: variant = "primary",
 }: RoomDetailsSidePeekProps) {
   const buttonProps = buttonPropsMap[variant]
+  const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <DialogTrigger>
+    <>
       <Button
         {...buttonProps}
         wrapping={wrapping}
-        onPress={() =>
+        onPress={() => {
+          setIsOpen(true)
           trackOpenSidePeekEvent({
             name: SidePeekEnum.roomDetails,
             hotelId,
             roomTypeCode,
             includePathname: true,
           })
-        }
+        }}
       >
         {triggerLabel}
         <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
 
-      <SidePeekSelfControlled title={room.name}>
+      <SidePeekSelfControlled
+        title={room.name}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
         <RoomSidePeekContent room={room} />
       </SidePeekSelfControlled>
-    </DialogTrigger>
+    </>
   )
 }