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

@@ -22,8 +22,10 @@ export default function useScrollToActiveSection(
       document.querySelector<HTMLElement>(`[data-open="true"]`)
 
     const currentStepIndex = steps.indexOf(step)
-    const prevStep = prevOpenElement?.dataset.step as StepEnum
+    const prevStep = prevOpenElement
-    const prevStepIndex = steps.indexOf(prevStep)
+      ? (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
       }
 

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) {
+  if (roomStatus.currentStep === null) {
-    throw new Error("getNextStep: currentStep is undefined")
+    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

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) {

types/enums/step.ts

@@ -1,5 +1,5 @@
 export enum StepEnum {
-  selectBed = "select-bed",
+  selectBed = 0,
-  breakfast = "breakfast",
+  breakfast = 1,
-  details = "details",
+  details = 2,
 }