From 2fab1fd91743152d93918e58a5006a715038d035 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 17 Oct 2024 16:07:30 +0200
Subject: [PATCH] fix: handle back button

---
 .../(public)/hotelreservation/[step]/page.tsx |  2 +
 .../HistoryStateManager/index.tsx             | 39 +++++++++++++++++++
 .../HotelReservation/ReadMore/index.tsx       |  9 ++---
 server/routers/hotels/output.ts               |  4 +-
 4 files changed, 46 insertions(+), 8 deletions(-)
 create mode 100644 components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index 8718c8db7..5f2666c8e 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/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}
diff --git a/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx b/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx
new file mode 100644
index 000000000..0ce1b1080
--- /dev/null
+++ b/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
+}
diff --git a/components/HotelReservation/ReadMore/index.tsx b/components/HotelReservation/ReadMore/index.tsx
index 0106709d7..5814eae54 100644
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/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(
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 1d6fc1e8e..5692497f1 100644
--- a/server/routers/hotels/output.ts
+++ b/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(),