feat(SW-2262): Added functionality to support browsers back functionality to close SidePeek

Approved-by: Linus Flood

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

@@ -1,5 +1,7 @@
 "use client"
 
+import { useEffect } from "react"
+
 import { trpc } from "@/lib/trpc/client"
 import useSidePeekStore from "@/stores/sidepeek"
 
@@ -17,7 +19,7 @@ export default function HotelReservationSidePeek() {
       showCTA: state.showCTA,
     })
   )
-  const close = useSidePeekStore((state) => state.closeSidePeek)
+  const closeFn = useSidePeekStore((state) => state.closeSidePeek)
   const lang = useLang()
 
   const { data: hotelData } = trpc.hotel.get.useQuery(
@@ -35,6 +37,30 @@ export default function HotelReservationSidePeek() {
     room.roomTypes.some((type) => type.code === roomTypeCode)
   )
 
+  function handleCloseClick() {
+    window.history.back()
+  }
+
+  useEffect(() => {
+    if (activeSidePeek) {
+      window.history.pushState(null, "", window.location.href)
+    }
+  }, [activeSidePeek])
+
+  useEffect(() => {
+    function handlePopState() {
+      if (activeSidePeek) {
+        closeFn()
+      }
+    }
+
+    window.addEventListener("popstate", handlePopState)
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState)
+    }
+  }, [activeSidePeek, closeFn])
+
   if (activeSidePeek) {
     return (
       <>
@@ -45,7 +71,7 @@ export default function HotelReservationSidePeek() {
               hotel={hotelData.hotel}
               restaurants={hotelData.restaurants}
               activeSidePeek={activeSidePeek}
-              close={close}
+              close={handleCloseClick}
               showCTA={showCTA}
             />
             <AmenitiesSidePeek
@@ -53,7 +79,7 @@ export default function HotelReservationSidePeek() {
               restaurants={hotelData.restaurants}
               additionalHotelData={hotelData.additionalData}
               activeSidePeek={activeSidePeek}
-              close={close}
+              close={handleCloseClick}
             />
           </>
         )}
@@ -61,7 +87,7 @@ export default function HotelReservationSidePeek() {
           <RoomSidePeek
             room={selectedRoom}
             activeSidePeek={activeSidePeek}
-            close={close}
+            close={handleCloseClick}
           />
         )}
       </>