scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: populate session storage on submit

Browse Source
This commit is contained in:
Christel Westerberg
2024-10-17 16:07:09 +02:00
parent 5bddaff04d
commit e4617d84ba
5 changed files with 35 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
View File

@@ -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;
}

9
components/HotelReservation/ReadMore/index.tsx
View File

@@ -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(

56
next.config.js
View File

@@ -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,
},
]
},

4
server/routers/hotels/output.ts
View File

@@ -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(),

52
stores/enter-details.ts
View File

@@ -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 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<string, string | boolean> = {}
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<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)
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 }),