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

Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Lightbox/index.tsx

@@ -3,6 +3,8 @@ import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 
+import usePopStateHandler from '@scandic-hotels/common/hooks/usePopStateHandler'
+
 import FullView from './FullView'
 import Gallery from './Gallery'
 
@@ -18,6 +20,7 @@ type LightboxProps = {
   images: LightboxImage[]
   dialogTitle: string /* Accessible title for dialog screen readers */
   onClose: () => void
+  isOpen: boolean
   activeIndex?: number
   hideLabel?: boolean
 }
@@ -26,21 +29,34 @@ export default function Lightbox({
   images,
   dialogTitle,
   onClose,
+  isOpen,
   activeIndex = 0,
   hideLabel,
 }: LightboxProps) {
   const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
   const [isFullView, setIsFullView] = useState(false)
 
+  function handleClose(moveBack = false) {
+    setSelectedImageIndex(0)
+    if (moveBack) {
+      window.history.back()
+    } else {
+      onClose()
+    }
+  }
+
+  usePopStateHandler(() => handleClose(), isOpen)
+
+  useEffect(() => {
+    if (isOpen) {
+      window.history.pushState(null, '', window.location.href)
+    }
+  }, [isOpen])
+
   useEffect(() => {
     setSelectedImageIndex(activeIndex)
   }, [activeIndex])
 
-  function handleClose() {
-    setSelectedImageIndex(0)
-    onClose()
-  }
-
   function handleNext() {
     setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
   }
@@ -51,24 +67,10 @@ export default function Lightbox({
     )
   }
 
-  useEffect(() => {
-    function handlePopState() {
-      handleClose()
-    }
-
-    window.history.pushState(null, '', window.location.href)
-    window.addEventListener('popstate', handlePopState)
-
-    return () => {
-      window.removeEventListener('popstate', handlePopState)
-    }
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [])
-
   return (
     <ModalOverlay
-      isOpen={true}
-      onOpenChange={handleClose}
+      isOpen={isOpen}
+      onOpenChange={() => handleClose(true)}
       className={styles.overlay}
       isDismissable
     >