From d46a85a529a934f744112244c8c81eac09e501a2 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Thu, 13 Feb 2025 08:39:43 +0000 Subject: [PATCH] Merged in fix/handle-bed-reselect-navigation (pull request #1321) fix: adjust allowed step navigation condition * fix: adjust allowed step navigation condition Approved-by: Tobias Johansson --- hooks/booking/useScrollToActiveSection.ts | 12 +++++++--- stores/enter-details/helpers.ts | 28 ++++++++++++++++++++--- stores/enter-details/index.ts | 13 +++++++---- types/enums/step.ts | 6 ++--- 4 files changed, 45 insertions(+), 14 deletions(-) diff --git a/hooks/booking/useScrollToActiveSection.ts b/hooks/booking/useScrollToActiveSection.ts index a2b05badb..c329034a9 100644 --- a/hooks/booking/useScrollToActiveSection.ts +++ b/hooks/booking/useScrollToActiveSection.ts @@ -22,8 +22,10 @@ export default function useScrollToActiveSection( document.querySelector(`[data-open="true"]`) const currentStepIndex = steps.indexOf(step) - const prevStep = prevOpenElement?.dataset.step as StepEnum - const prevStepIndex = steps.indexOf(prevStep) + const prevStep = prevOpenElement + ? (Number(prevOpenElement?.dataset.step) as StepEnum) + : null + const prevStepIndex = prevStep ? steps.indexOf(prevStep) : null if (currentElement) { const BOOKING_WIDGET_OFFSET = 71 @@ -31,7 +33,11 @@ export default function useScrollToActiveSection( const prevElementContent = prevOpenElement?.querySelector("header + div") let collapsedSpace = 0 - if (prevElementContent && prevStepIndex < currentStepIndex) { + if ( + prevElementContent && + prevStepIndex && + prevStepIndex < currentStepIndex + ) { collapsedSpace = prevElementContent.clientHeight } diff --git a/stores/enter-details/helpers.ts b/stores/enter-details/helpers.ts index 11527514c..93832c7ff 100644 --- a/stores/enter-details/helpers.ts +++ b/stores/enter-details/helpers.ts @@ -11,6 +11,7 @@ import type { PersistedState, RoomState, RoomStatus, + RoomStep, } from "@/types/stores/enter-details" import type { SafeUser } from "@/types/user" @@ -242,9 +243,30 @@ export const selectRoomSteps = (state: DetailsState, index?: number) => index ?? state.bookingProgress.currentRoomIndex ].steps +export const selectPreviousSteps = ( + state: DetailsState, + index?: number +): { + [StepEnum.selectBed]?: RoomStep + [StepEnum.breakfast]?: RoomStep + [StepEnum.details]?: RoomStep +} => { + const roomStatus = + state.bookingProgress.roomStatuses[ + index ?? state.bookingProgress.currentRoomIndex + ] + const stepKeys = Object.keys(roomStatus.steps) + const currentStepIndex = stepKeys.indexOf(`${roomStatus.currentStep}`) + return Object.entries(roomStatus.steps) + .slice(0, currentStepIndex) + .reduce((acc, [key, value]) => { + return { ...acc, [key]: value } + }, {}) +} + export const selectNextStep = (roomStatus: RoomStatus) => { - if (!roomStatus.currentStep) { - throw new Error("getNextStep: currentStep is undefined") + if (roomStatus.currentStep === null) { + throw new Error("getNextStep: currentStep is null") } if (!roomStatus.steps[roomStatus.currentStep]?.isValid) { @@ -307,7 +329,7 @@ export function handleStepProgression(state: DetailsState) { } const nextStep = selectNextStep(roomStatus) - if (nextStep && roomStatus.currentStep) { + if (nextStep !== null && roomStatus.currentStep !== null) { roomStatus.lastCompletedStep = roomStatus.currentStep roomStatus.currentStep = nextStep return diff --git a/stores/enter-details/index.ts b/stores/enter-details/index.ts index 032568498..e4d14be2f 100644 --- a/stores/enter-details/index.ts +++ b/stores/enter-details/index.ts @@ -13,6 +13,7 @@ import { getRoomPrice, getTotalPrice, handleStepProgression, + selectPreviousSteps, selectRoom, selectRoomStatus, writeToSessionStorage, @@ -24,6 +25,7 @@ import type { InitialState, RoomState, RoomStatus, + RoomStep, } from "@/types/stores/enter-details" import type { SafeUser } from "@/types/user" @@ -138,7 +140,7 @@ export function createDetailsStore( actions: { setStep(step: StepEnum | null, roomIndex?: number) { - if (!step) { + if (step === null) { return } @@ -146,15 +148,16 @@ export function createDetailsStore( produce((state: DetailsState) => { const currentRoomIndex = roomIndex ?? state.bookingProgress.currentRoomIndex - + const previousSteps = selectPreviousSteps(state, roomIndex) + const arePreviousStepsCompleted = Object.values( + previousSteps + ).every((step: RoomStep) => step.isValid) const arePreviousRoomsCompleted = state.bookingProgress.roomStatuses .slice(0, currentRoomIndex) .every((room) => room.isComplete) - const roomStatus = selectRoomStatus(state, roomIndex) - const roomStep = roomStatus.steps[step] - if (arePreviousRoomsCompleted && roomStep?.isValid) { + if (arePreviousRoomsCompleted && arePreviousStepsCompleted) { roomStatus.currentStep = step if (roomIndex !== undefined) { diff --git a/types/enums/step.ts b/types/enums/step.ts index c1dd14960..93befb4e1 100644 --- a/types/enums/step.ts +++ b/types/enums/step.ts @@ -1,5 +1,5 @@ export enum StepEnum { - selectBed = "select-bed", - breakfast = "breakfast", - details = "details", + selectBed = 0, + breakfast = 1, + details = 2, }