From e4617d84ba8bbabf1fa19f1f13c4d41601535668 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Thu, 17 Oct 2024 16:07:09 +0200 Subject: [PATCH] feat: populate session storage on submit --- .../sectionAccordion.module.css | 14 ----- .../HotelReservation/ReadMore/index.tsx | 9 ++- next.config.js | 56 ------------------- server/routers/hotels/output.ts | 4 +- stores/enter-details.ts | 52 ++++++++--------- 5 files changed, 35 insertions(+), 100 deletions(-) diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css index 3680f5628..93398378d 100644 --- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css +++ b/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; -} diff --git a/components/HotelReservation/ReadMore/index.tsx b/components/HotelReservation/ReadMore/index.tsx index 5814eae54..0106709d7 100644 --- a/components/HotelReservation/ReadMore/index.tsx +++ b/components/HotelReservation/ReadMore/index.tsx @@ -23,9 +23,12 @@ import { import { Hotel } from "@/types/hotel" function getAmenitiesList(hotel: Hotel) { - const detailedAmenities: DetailedAmenity[] = Object.entries( - hotel.hotelFacts.hotelFacilityDetail - ).map(([key, value]) => ({ name: key, ...value })) + const detailedAmenities: DetailedAmenity[] = hotel.hotelFacts + .hotelFacilityDetail + ? 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/next.config.js b/next.config.js index 46f898e2f..f91af6594 100644 --- a/next.config.js +++ b/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, - }, ] }, diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts index 5692497f1..1d6fc1e8e 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, - hotelInformation: hotelInformationSchema, + hotelFacilityDetail: hotelFacilitySchema.optional(), + hotelInformation: hotelInformationSchema.optional(), interior: interiorSchema, receptionHours: receptionHoursSchema, yearBuilt: z.string(), diff --git a/stores/enter-details.ts b/stores/enter-details.ts index 16dd96f96..d4d2666d1 100644 --- a/stores/enter-details.ts +++ b/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) => void navigate: ( step: StepEnum, - searchParams?: Record + updatedData?: Record ) => 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 search = isBrowser ? new URLSearchParams(window.location.search) : null + const sessionData = isBrowser + ? 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) { - const searchParams: Record = {} - 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 + if (sessionData) { + inputData = JSON.parse(sessionData) } 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()((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) - if (searchParams) { - Object.entries(searchParams).forEach(([key, value]) => { - query.set(key, value ? value.toString() : "") - }) - } + const sessionStorage = window.sessionStorage + + const previousDataString = sessionStorage.getItem(SESSION_STORAGE_KEY) + + 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 }),