fix: handle back button

app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx

@@ -6,6 +6,7 @@ import { serverClient } from "@/lib/trpc/server"
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import { getIntl } from "@/i18n"
@@ -37,6 +38,7 @@ export default async function StepPage({
 
   return (
     <section>
+      <HistoryStateManager />
       <SectionAccordion
         header="Select bed"
         step={StepEnum.selectBed}

components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+export default function HistoryStateManager() {
+  const setCurrentStep = useEnterDetailsStore((state) => state.setCurrentStep)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
+
+  const handleBackButton = useCallback(
+    (event: PopStateEvent) => {
+      if (event.state.step) {
+        setCurrentStep(event.state.step)
+      }
+    },
+    [setCurrentStep]
+  )
+
+  useEffect(() => {
+    window.addEventListener("popstate", handleBackButton)
+
+    return () => {
+      window.removeEventListener("popstate", handleBackButton)
+    }
+  }, [handleBackButton])
+
+  useEffect(() => {
+    if (!window.history.state.step) {
+      window.history.replaceState(
+        { step: currentStep },
+        "",
+        document.location.href
+      )
+    }
+  }, [currentStep])
+
+  return null
+}

components/HotelReservation/ReadMore/index.tsx

@@ -23,12 +23,9 @@ import {
 import { Hotel } from "@/types/hotel"
 
 function getAmenitiesList(hotel: Hotel) {
-  const detailedAmenities: DetailedAmenity[] = hotel.hotelFacts
-    .hotelFacilityDetail
-    ? Object.entries(hotel.hotelFacts.hotelFacilityDetail).map(
-        ([key, value]) => ({ name: key, ...value })
-      )
-    : []
+  const detailedAmenities: DetailedAmenity[] = Object.entries(
+    hotel.hotelFacts.hotelFacilityDetail
+  ).map(([key, value]) => ({ name: key, ...value }))
 
   // Remove Parking facilities since parking accordion is based on hotel.parking
   const simpleAmenities = hotel.detailedFacilities.filter(

server/routers/hotels/output.ts

@@ -394,8 +394,8 @@ export const getHotelDataSchema = z.object({
       hotelFacts: z.object({
         checkin: checkinSchema,
         ecoLabels: ecoLabelsSchema,
-        hotelFacilityDetail: hotelFacilitySchema.optional(),
-        hotelInformation: hotelInformationSchema.optional(),
+        hotelFacilityDetail: hotelFacilitySchema,
+        hotelInformation: hotelInformationSchema,
         interior: interiorSchema,
         receptionHours: receptionHoursSchema,
         yearBuilt: z.string(),