feat: populate session storage on submit

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -27,7 +27,6 @@
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-bottom: var(--Spacing-x3);
-
   transition: 0.4s ease-out;
   grid-template-rows: 2em 0fr;
 }
@@ -79,16 +78,3 @@
 .content {
   overflow: hidden;
 }
-
-@keyframes allowOverflow {
-  0% {
-    overflow: hidden;
-  }
-  100% {
-    overflow: visible;
-  }
-}
-
-.wrapper[data-open="true"] .content {
-  animation: allowOverflow 0.4s 0.4s ease;
-}

components/HotelReservation/ReadMore/index.tsx

@@ -23,9 +23,12 @@ import {
 import { Hotel } from "@/types/hotel"
 
 function getAmenitiesList(hotel: Hotel) {
-  const detailedAmenities: DetailedAmenity[] = Object.entries(
+  const detailedAmenities: DetailedAmenity[] = hotel.hotelFacts
-    hotel.hotelFacts.hotelFacilityDetail
+    .hotelFacilityDetail
-  ).map(([key, value]) => ({ name: key, ...value }))
+    ? 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(

next.config.js

@@ -104,62 +104,6 @@ const nextConfig = {
       //   ],
       //   permanent: false,
       // },
-      {
-        source: "/:lang/hotelreservation/(breakfast|details|payment)",
-        destination: "/:lang/hotelreservation/select-bed",
-        missing: [
-          {
-            key: "bedType",
-            type: "query",
-            value: undefined,
-          },
-        ],
-        permanent: false,
-      },
-      {
-        source: "/:lang/hotelreservation/(details|payment)",
-        destination: "/:lang/hotelreservation/breakfast",
-        missing: [
-          {
-            key: "breakfast",
-            type: "query",
-            value: undefined,
-          },
-        ],
-        permanent: false,
-      },
-      {
-        source: "/:lang/hotelreservation/payment",
-        destination: "/:lang/hotelreservation/details",
-        missing: [
-          {
-            key: "countryCode",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "email",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "firstname",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "lastname",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "phoneNumber",
-            type: "query",
-            value: undefined,
-          },
-        ],
-        permanent: false,
-      },
     ]
   },
 

server/routers/hotels/output.ts

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

stores/enter-details.ts

@@ -12,6 +12,8 @@ import { StepEnum } from "@/types/components/enterDetails/step"
 import { bedTypeEnum } from "@/types/enums/bedType"
 import { breakfastEnum } from "@/types/enums/breakfast"
 
+const SESSION_STORAGE_KEY = "enterDetails"
+
 interface EnterDetailsState {
   data: {
     bedType: bedTypeEnum | undefined
@@ -24,16 +26,18 @@ interface EnterDetailsState {
   completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
   navigate: (
     step: StepEnum,
-    searchParams?: Record<string, string | boolean>
+    updatedData?: Record<string, string | boolean>
   ) => void
+  setCurrentStep: (step: StepEnum) => void
   openSidePeek: (key: SidePeekEnum | null) => void
   closeSidePeek: () => void
 }
 
 export function initEditDetailsState(currentStep: StepEnum) {
   const isBrowser = typeof window !== "undefined"
-  const sessionData = isBrowser ? sessionStorage.getItem("editDetails") : null
+  const sessionData = isBrowser
-  const search = isBrowser ? new URLSearchParams(window.location.search) : null
+    ? sessionStorage.getItem(SESSION_STORAGE_KEY)
+    : null
 
   const defaultData: EnterDetailsState["data"] = {
     bedType: undefined,
@@ -50,19 +54,8 @@ export function initEditDetailsState(currentStep: StepEnum) {
   }
 
   let inputData = {}
-  if (search?.size) {
+  if (sessionData) {
-    const searchParams: Record<string, string | boolean> = {}
+    inputData = JSON.parse(sessionData)
-    search.forEach((value, key) => {
-      // Handle boolean values
-
-      if (value === "true" || value === "false") {
-        searchParams[key] = JSON.parse(value) as true | false
-      } else {
-        searchParams[key] = value
-      }
-    })
-
-    inputData = searchParams
   }
 
   const validPaths = [StepEnum.selectBed]
@@ -98,25 +91,34 @@ export function initEditDetailsState(currentStep: StepEnum) {
   if (!validPaths.includes(currentStep)) {
     currentStep = validPaths.pop()! // We will always have at least one valid path
     if (isBrowser) {
-      window.history.pushState({}, "", currentStep + window.location.search)
+      window.history.pushState(
+        { step: currentStep },
+        "",
+        currentStep + window.location.search
+      )
     }
   }
 
   return create<EnterDetailsState>()((set, get) => ({
     data: initialData,
     steps: Object.values(StepEnum),
-    navigate: (step, searchParams) =>
+    setCurrentStep: (step) => set({ currentStep: step }),
+    navigate: (step, updatedData) =>
       set(
         produce((state) => {
-          const query = new URLSearchParams(window.location.search)
+          const sessionStorage = window.sessionStorage
-          if (searchParams) {
+
-            Object.entries(searchParams).forEach(([key, value]) => {
+          const previousDataString = sessionStorage.getItem(SESSION_STORAGE_KEY)
-              query.set(key, value ? value.toString() : "")
+
-            })
+          const previousData = JSON.parse(previousDataString || "{}")
-          }
+
+          sessionStorage.setItem(
+            SESSION_STORAGE_KEY,
+            JSON.stringify({ ...previousData, ...updatedData })
+          )
 
           state.currentStep = step
-          window.history.pushState({}, "", step + "?" + query.toString())
+          window.history.pushState({ step }, "", step + window.location.search)
         })
       ),
     openSidePeek: (key) => set({ activeSidePeek: key }),