diff --git a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx
index de9166049..6c6011ec6 100644
--- a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx
+++ b/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}
/>
>
)}
@@ -61,7 +87,7 @@ export default function HotelReservationSidePeek() {
)}
>