From 421021885242d52a108c2a960561f3003b393cf5 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 4 Dec 2024 16:16:32 +0100
Subject: [PATCH] fix: persist selection of bed and breakfast if same room

---
 .../EnterDetails/BedType/index.tsx            |   8 +-
 .../EnterDetails/Breakfast/index.tsx          |  17 +-
 .../EnterDetails/Details/index.tsx            |   5 +-
 .../Payment/PaymentCallback/index.tsx         |   9 +-
 .../Form/ChoiceCard/_Card/card.ts             |   1 -
 .../Form/ChoiceCard/_Card/index.tsx           |   7 +-
 providers/EnterDetailsProvider.tsx            |  95 ++-
 server/routers/hotels/query.ts                |   8 +-
 stores/enter-details/helpers.ts               |  54 +-
 stores/enter-details/index.ts                 | 634 +++++++-----------
 types/stores/enter-details.ts                 |  11 +
 11 files changed, 410 insertions(+), 439 deletions(-)

diff --git a/components/HotelReservation/EnterDetails/BedType/index.tsx b/components/HotelReservation/EnterDetails/BedType/index.tsx
index 0b5dca2aa..4f89eb2f0 100644
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -22,10 +22,7 @@ export default function BedType({ bedTypes }: BedTypeProps) {
   const initialBedType = useEnterDetailsStore(
     (state) => state.formValues?.bedType?.roomTypeCode
   )
-  const bedType = useEnterDetailsStore((state) => state.bedType?.roomTypeCode)
-  const completeStep = useEnterDetailsStore(
-    (state) => state.actions.completeStep
-  )
+
   const updateBedType = useEnterDetailsStore(
     (state) => state.actions.updateBedType
   )
@@ -81,9 +78,6 @@ export default function BedType({ bedTypes }: BedTypeProps) {
               subtitle={width}
               title={roomType.description}
               value={roomType.value}
-              handleSelectedOnClick={
-                bedType === roomType.value ? completeStep : undefined
-              }
             />
           )
         })}
diff --git a/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
index bae37071c..f413b841d 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -31,16 +31,7 @@ export default function Breakfast({ packages }: BreakfastProps) {
         ? "false"
         : undefined
   )
-  const breakfast = useEnterDetailsStore((state) =>
-    state.breakfast
-      ? state.breakfast.code
-      : state.breakfast === false
-        ? "false"
-        : undefined
-  )
-  const completeStep = useEnterDetailsStore(
-    (state) => state.actions.completeStep
-  )
+
   const updateBreakfast = useEnterDetailsStore(
     (state) => state.actions.updateBreakfast
   )
@@ -119,9 +110,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
               })}
               title={intl.formatMessage({ id: "Breakfast buffet" })}
               value={pkg.code}
-              handleSelectedOnClick={
-                breakfast === pkg.code ? completeStep : undefined
-              }
             />
           ))}
           <RadioCard
@@ -138,9 +126,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
             })}
             title={intl.formatMessage({ id: "No breakfast" })}
             value="false"
-            handleSelectedOnClick={
-              breakfast === "false" ? completeStep : undefined
-            }
           />
         </form>
       </div>
diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx
index 2aef91185..4dc55859c 100644
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -26,8 +26,7 @@ import type {
 const formID = "enter-details"
 export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
-  const initialData = useEnterDetailsStore((state) => state.formValues.guest)
-  const join = useEnterDetailsStore((state) => state.guest.join)
+  const initialData = useEnterDetailsStore((state) => state.guest)
   const updateDetails = useEnterDetailsStore(
     (state) => state.actions.updateDetails
   )
@@ -42,7 +41,7 @@ export default function Details({ user, memberPrice }: DetailsProps) {
       dateOfBirth: initialData.dateOfBirth,
       email: user?.email ?? initialData.email,
       firstName: user?.firstName ?? initialData.firstName,
-      join,
+      join: initialData.join,
       lastName: user?.lastName ?? initialData.lastName,
       membershipNo: initialData.membershipNo,
       phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
index 2ad17ac12..8fd613d5e 100644
--- a/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
@@ -8,7 +8,7 @@ import { detailsStorageName } from "@/stores/enter-details"
 import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
-import type { DetailsState } from "@/types/stores/enter-details"
+import type { PersistedState } from "@/types/stores/enter-details"
 
 export default function PaymentCallback({
   returnUrl,
@@ -23,12 +23,9 @@ export default function PaymentCallback({
     const bookingData = window.sessionStorage.getItem(detailsStorageName)
 
     if (bookingData) {
-      const detailsStorage: Record<
-        "state",
-        Pick<DetailsState, "booking">
-      > = JSON.parse(bookingData)
+      const detailsStorage: PersistedState = JSON.parse(bookingData)
       const searchParams = createQueryParamsForEnterDetails(
-        detailsStorage.state.booking,
+        detailsStorage.booking,
         searchObject
       )
 
diff --git a/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
index c733dac50..7d24e46d7 100644
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
@@ -12,7 +12,6 @@ interface BaseCardProps
   title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
-  handleSelectedOnClick?: () => void
 }
 
 interface ListCardProps extends BaseCardProps {
diff --git a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
index 013f1a373..6c604f725 100644
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -24,21 +24,20 @@ export default function Card({
   title,
   type,
   value,
-  handleSelectedOnClick,
 }: CardProps) {
-  const { register } = useFormContext()
+  const { register, setValue } = useFormContext()
 
   function onLabelClick(event: React.MouseEvent) {
     // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
     event.preventDefault()
-    handleSelectedOnClick?.()
+    setValue(name, value)
   }
   return (
     <label
       className={styles.label}
       data-declined={declined}
+      onClick={onLabelClick}
       tabIndex={0}
-      onClick={handleSelectedOnClick ? onLabelClick : undefined}
     >
       <Caption className={styles.title} color="burgundy" type="label" uppercase>
         {title}
diff --git a/providers/EnterDetailsProvider.tsx b/providers/EnterDetailsProvider.tsx
index 025fe14d5..17bbf76c3 100644
--- a/providers/EnterDetailsProvider.tsx
+++ b/providers/EnterDetailsProvider.tsx
@@ -1,13 +1,26 @@
 "use client"
-import { useRef } from "react"
+import { useEffect, useRef } from "react"
 
 import { createDetailsStore } from "@/stores/enter-details"
+import {
+  calcTotalMemberPrice,
+  calcTotalPublicPrice,
+  navigate,
+  writeToSessionStorage,
+} from "@/stores/enter-details/helpers"
 
+import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
+import { breakfastStoreSchema } from "@/components/HotelReservation/EnterDetails/Breakfast/schema"
+import {
+  guestDetailsSchema,
+  signedInDetailsSchema,
+} from "@/components/HotelReservation/EnterDetails/Details/schema"
 import { DetailsContext } from "@/contexts/Details"
 
 import type { DetailsStore } from "@/types/contexts/enter-details"
+import { StepEnum } from "@/types/enums/step"
 import type { DetailsProviderProps } from "@/types/providers/enter-details"
-import type { InitialState } from "@/types/stores/enter-details"
+import type { DetailsState, InitialState } from "@/types/stores/enter-details"
 
 export default function EnterDetailsProvider({
   bedTypes,
@@ -42,6 +55,84 @@ export default function EnterDetailsProvider({
     )
   }
 
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.setState((state) => {
+        const newState: DetailsState = { ...state }
+
+        newState.bedType = state.formValues.bedType
+        newState.breakfast = state.formValues.breakfast
+
+        if (state.formValues.guest && !user) {
+          newState.guest = state.formValues.guest
+        }
+
+        if (
+          (newState.guest!.join || newState.guest!.membershipNo || user) &&
+          state.roomRate.memberRate
+        ) {
+          const memberPrice = calcTotalMemberPrice(newState)
+          newState.roomPrice = memberPrice.roomPrice
+          newState.totalPrice = memberPrice.totalPrice
+        } else {
+          const publicPrice = calcTotalPublicPrice(newState)
+          newState.roomPrice = publicPrice.roomPrice
+          newState.totalPrice = publicPrice.totalPrice
+        }
+
+        const isValid = { ...newState.isValid }
+
+        const validateBooking = state.formValues
+        const validPaths = [StepEnum.selectBed]
+        const validatedBedType = bedTypeSchema.safeParse(validateBooking)
+        if (validatedBedType.success) {
+          isValid[StepEnum.selectBed] = true
+          validPaths.push(state.steps[1])
+        }
+
+        const validatedBreakfast =
+          breakfastStoreSchema.safeParse(validateBooking)
+        if (validatedBreakfast.success) {
+          isValid[StepEnum.breakfast] = true
+          validPaths.push(StepEnum.details)
+        }
+
+        const detailsSchema = user ? signedInDetailsSchema : guestDetailsSchema
+        const validatedDetails = detailsSchema.safeParse(validateBooking.guest)
+        /**
+         * Need to add the breakfast check here too since
+         * when a member comes into the flow, their data is
+         * already added and valid, and thus to avoid showing a
+         * step the user hasn't been on yet as complete
+         */
+        if (isValid.breakfast && validatedDetails.success) {
+          isValid[StepEnum.details] = true
+          validPaths.push(StepEnum.payment)
+        }
+
+        if (!validPaths.includes(newState.currentStep!)) {
+          newState.currentStep = validPaths.at(-1)!
+        }
+
+        if (step !== newState.currentStep) {
+          const stateCurrentStep = newState.currentStep!
+          setTimeout(() => {
+            navigate(stateCurrentStep, searchParamsStr)
+          })
+        }
+
+        writeToSessionStorage({
+          bedType: newState.bedType,
+          booking: newState.booking,
+          breakfast: newState.breakfast,
+          guest: newState.guest,
+        })
+
+        return { ...newState, isValid }
+      })
+    }
+  }, [searchParamsStr, step, user])
+
   return (
     <DetailsContext.Provider value={storeRef.current}>
       {children}
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 4296ed8c0..4b40ecc33 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -547,7 +547,7 @@ export const hotelQueryRouter = router({
         const hotelData = await getHotelData(
           {
             hotelId,
-            language: ctx.lang,
+            language: toApiLang(ctx.lang),
           },
           ctx.serviceToken
         )
@@ -607,7 +607,11 @@ export const hotelQueryRouter = router({
         const bedTypes = availableRoomsInCategory
           .map((availRoom) => {
             const matchingRoom = hotelData?.included
-              ?.find((room) => room.name === availRoom.roomType)
+              ?.find((room) =>
+                room.roomTypes
+                  .map((roomType) => roomType.code)
+                  .includes(availRoom.roomTypeCode)
+              )
               ?.roomTypes.find(
                 (roomType) => roomType.code === availRoom.roomTypeCode
               )
diff --git a/stores/enter-details/helpers.ts b/stores/enter-details/helpers.ts
index f76caeb19..02b670248 100644
--- a/stores/enter-details/helpers.ts
+++ b/stores/enter-details/helpers.ts
@@ -1,13 +1,22 @@
+import deepmerge from "deepmerge"
 import isEqual from "fast-deep-equal"
 
 import { Lang } from "@/constants/languages"
 
 import { getLang } from "@/i18n/serverContext"
+import { arrayMerge } from "@/utils/merge"
+
+import { detailsStorageName } from "."
 
 import type { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData"
 import { CurrencyEnum } from "@/types/enums/currency"
 import { StepEnum } from "@/types/enums/step"
-import type { DetailsState, RoomRate } from "@/types/stores/enter-details"
+import type {
+  DetailsState,
+  PersistedState,
+  PersistedStatePart,
+  RoomRate,
+} from "@/types/stores/enter-details"
 import type { SafeUser } from "@/types/user"
 
 export function langToCurrency() {
@@ -44,8 +53,28 @@ export function navigate(step: StepEnum, searchParams: string) {
   window.history.pushState({ step }, "", `${step}?${searchParams}`)
 }
 
-export function checkIsSameBooking(prev: BookingData, next: BookingData) {
-  return isEqual(prev, next)
+export function checkIsSameRoom(prev: BookingData, next: BookingData) {
+  const { rooms: prevRooms, ...prevBooking } = prev
+
+  const prevRoomsWithoutRateCodes = prevRooms.map(
+    ({ rateCode, counterRateCode, ...room }) => room
+  )
+  const { rooms: nextRooms, ...nextBooking } = next
+
+  const nextRoomsWithoutRateCodes = nextRooms.map(
+    ({ rateCode, counterRateCode, ...room }) => room
+  )
+
+  return isEqual(
+    {
+      ...prevBooking,
+      rooms: prevRoomsWithoutRateCodes,
+    },
+    {
+      ...nextBooking,
+      rooms: nextRoomsWithoutRateCodes,
+    }
+  )
 }
 
 export function add(...nums: (number | string | undefined)[]) {
@@ -160,9 +189,11 @@ export function calcTotalPrice(
   > &
     DetailsState["roomRate"]["publicRate"]
 ) {
+  // state is sometimes read-only, thus we
+  // need to create a copy of the values
   const roomAndTotalPrice = {
-    roomPrice: state.roomPrice,
-    totalPrice: state.totalPrice,
+    roomPrice: { ...state.roomPrice },
+    totalPrice: { ...state.totalPrice },
   }
   if (state.requestedPrice?.pricePerStay) {
     roomAndTotalPrice.roomPrice.requested = {
@@ -222,3 +253,16 @@ export function calcTotalPrice(
 
   return roomAndTotalPrice
 }
+
+export function writeToSessionStorage(part: PersistedStatePart) {
+  const unparsedData = sessionStorage.getItem(detailsStorageName)
+  if (unparsedData) {
+    const data: PersistedState = JSON.parse(unparsedData)
+    // @ts-expect-error - deepmerge is not to happy with
+    // the part type
+    const updated = deepmerge(data, part, { arrayMerge })
+    sessionStorage.setItem(detailsStorageName, JSON.stringify(updated))
+  } else {
+    sessionStorage.setItem(detailsStorageName, JSON.stringify(part))
+  }
+}
diff --git a/stores/enter-details/index.ts b/stores/enter-details/index.ts
index 4b70fb254..a469eb4f0 100644
--- a/stores/enter-details/index.ts
+++ b/stores/enter-details/index.ts
@@ -2,35 +2,28 @@ import deepmerge from "deepmerge"
 import { produce } from "immer"
 import { useContext } from "react"
 import { create, useStore } from "zustand"
-import { createJSONStorage, persist } from "zustand/middleware"
 
-import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
-import { breakfastStoreSchema } from "@/components/HotelReservation/EnterDetails/Breakfast/schema"
-import {
-  guestDetailsSchema,
-  signedInDetailsSchema,
-} from "@/components/HotelReservation/EnterDetails/Details/schema"
 import { DetailsContext } from "@/contexts/Details"
-import { arrayMerge } from "@/utils/merge"
 
 import {
   add,
   calcTotalMemberPrice,
   calcTotalPublicPrice,
-  checkIsSameBooking,
+  checkIsSameRoom,
   extractGuestFromUser,
   getInitialRoomPrice,
   getInitialTotalPrice,
   langToCurrency,
   navigate,
+  writeToSessionStorage,
 } from "./helpers"
 
-import { CurrencyEnum } from "@/types/enums/currency"
 import { StepEnum } from "@/types/enums/step"
 import type {
   DetailsState,
   FormValues,
   InitialState,
+  PersistedState,
 } from "@/types/stores/enter-details"
 import type { SafeUser } from "@/types/user"
 
@@ -54,59 +47,63 @@ export function createDetailsStore(
   user: SafeUser
 ) {
   const isMember = !!user
-  const isBrowser = typeof window !== "undefined"
 
-  // Spread is done on purpose since we want
-  // a copy of initialState and not alter the
-  // original
   const formValues: FormValues = {
     bedType: initialState.bedType,
     booking: initialState.booking,
-    breakfast: undefined,
+    /** TODO: Needs adjustment when breakfast included in rate is added */
+    breakfast:
+      initialState.breakfast === false ? initialState.breakfast : undefined,
     guest: isMember
       ? deepmerge(defaultGuestState, extractGuestFromUser(user))
       : defaultGuestState,
   }
-  if (isBrowser) {
-    /**
-     * We need to initialize the store from sessionStorage ourselves
-     * since `persist` does it first after render and therefore
-     * we cannot use the data as `defaultValues` for our forms.
-     * RHF caches defaultValues on mount.
-     */
-    const detailsStorageUnparsed = sessionStorage.getItem(detailsStorageName)
-    if (detailsStorageUnparsed) {
-      const detailsStorage: Record<"state", FormValues> = JSON.parse(
-        detailsStorageUnparsed
-      )
-
-      const isSameBooking = checkIsSameBooking(
-        detailsStorage.state.booking,
-        initialState.booking
-      )
-
-      if (isSameBooking) {
-        if (!initialState.bedType && detailsStorage.state.bedType) {
-          formValues.bedType = detailsStorage.state.bedType
-        }
-
-        if ("breakfast" in detailsStorage.state) {
-          formValues.breakfast = detailsStorage.state.breakfast
-        }
-
-        if ("guest" in detailsStorage.state) {
-          if (!user) {
-            formValues.guest = deepmerge(
-              defaultGuestState,
-              detailsStorage.state.guest,
-              { arrayMerge }
-            )
-          }
-        }
+  if (typeof window !== "undefined") {
+    const unparsedStorage = sessionStorage.getItem(detailsStorageName)
+    if (unparsedStorage) {
+      const detailsStorage: PersistedState = JSON.parse(unparsedStorage)
+      const isSameRoom = detailsStorage.booking
+        ? checkIsSameRoom(initialState.booking, detailsStorage.booking)
+        : false
+      if (isSameRoom) {
+        formValues.bedType = detailsStorage.bedType
+        formValues.breakfast = detailsStorage.breakfast
+      }
+      if (!isMember) {
+        formValues.guest = detailsStorage.guest
       }
     }
   }
 
+  let steps = [
+    StepEnum.selectBed,
+    StepEnum.breakfast,
+    StepEnum.details,
+    StepEnum.payment,
+  ]
+  /**
+   * TODO:
+   * - when included in rate, can packages still be received?
+   * - no hotels yet with breakfast included in the rate so
+   *   impossible to build for atm.
+   *
+   * checking against initialState since that means the
+   * hotel doesn't offer breakfast
+   *
+   * matching breakfast first so the steps array is altered
+   * before the bedTypes possible step altering
+   */
+  if (initialState.breakfast === false) {
+    steps = steps.filter((step) => step !== StepEnum.breakfast)
+    if (currentStep === StepEnum.breakfast) {
+      currentStep = steps[1]
+    }
+  }
+
+  if (initialState.bedType && currentStep === StepEnum.selectBed) {
+    currentStep = steps[1]
+  }
+
   const initialRoomPrice = getInitialRoomPrice(initialState.roomRate, isMember)
   const initialTotalPrice = getInitialTotalPrice(
     initialState.roomRate,
@@ -128,362 +125,213 @@ export function createDetailsStore(
     })
   }
 
-  return create<DetailsState>()(
-    persist(
-      (set) => ({
-        actions: {
-          completeStep() {
-            return set(
-              produce((state: DetailsState) => {
-                const currentStepIndex = state.steps.indexOf(state.currentStep)
-                const nextStep = state.steps[currentStepIndex + 1]
-                state.currentStep = nextStep
-                navigate(nextStep, searchParams)
-              })
-            )
-          },
-          navigate(step: StepEnum) {
-            return set(
-              produce((state) => {
-                state.currentStep = step
-                navigate(step, searchParams)
-              })
-            )
-          },
-          setIsSubmittingDisabled(isSubmittingDisabled) {
-            return set(
-              produce((state: DetailsState) => {
-                state.isSubmittingDisabled = isSubmittingDisabled
-              })
-            )
-          },
-          setStep(step: StepEnum) {
-            return set(
-              produce((state: DetailsState) => {
-                state.currentStep = step
-              })
-            )
-          },
-          setTotalPrice(totalPrice) {
-            return set(
-              produce((state: DetailsState) => {
-                state.totalPrice.requested = totalPrice.requested
-                state.totalPrice.local = totalPrice.local
-              })
-            )
-          },
-          toggleSummaryOpen() {
-            return set(
-              produce((state: DetailsState) => {
-                state.isSummaryOpen = !state.isSummaryOpen
-              })
-            )
-          },
-          updateBedType(bedType) {
-            return set(
-              produce((state: DetailsState) => {
-                state.isValid["select-bed"] = true
-                state.bedType = bedType
+  return create<DetailsState>()((set) => ({
+    actions: {
+      completeStep() {
+        return set(
+          produce((state: DetailsState) => {
+            const currentStepIndex = state.steps.indexOf(state.currentStep)
+            const nextStep = state.steps[currentStepIndex + 1]
+            state.currentStep = nextStep
+            navigate(nextStep, searchParams)
+          })
+        )
+      },
+      navigate(step: StepEnum) {
+        return set(
+          produce((state) => {
+            state.currentStep = step
+            navigate(step, searchParams)
+          })
+        )
+      },
+      setIsSubmittingDisabled(isSubmittingDisabled) {
+        return set(
+          produce((state: DetailsState) => {
+            state.isSubmittingDisabled = isSubmittingDisabled
+          })
+        )
+      },
+      setStep(step: StepEnum) {
+        return set(
+          produce((state: DetailsState) => {
+            state.currentStep = step
+          })
+        )
+      },
+      setTotalPrice(totalPrice) {
+        return set(
+          produce((state: DetailsState) => {
+            state.totalPrice.requested = totalPrice.requested
+            state.totalPrice.local = totalPrice.local
+          })
+        )
+      },
+      toggleSummaryOpen() {
+        return set(
+          produce((state: DetailsState) => {
+            state.isSummaryOpen = !state.isSummaryOpen
+          })
+        )
+      },
+      updateBedType(bedType) {
+        return set(
+          produce((state: DetailsState) => {
+            state.isValid["select-bed"] = true
+            state.bedType = bedType
 
-                const currentStepIndex = state.steps.indexOf(state.currentStep)
-                const nextStep = state.steps[currentStepIndex + 1]
-                state.currentStep = nextStep
-                navigate(nextStep, searchParams)
-              })
-            )
-          },
-          updateBreakfast(breakfast) {
-            return set(
-              produce((state: DetailsState) => {
-                state.isValid.breakfast = true
-                const stateTotalRequestedPrice =
-                  state.totalPrice.requested?.price || 0
-                const stateTotalLocalPrice = state.totalPrice.local.price
+            writeToSessionStorage({ bedType })
 
-                const addToTotalPrice =
-                  (state.breakfast === undefined ||
-                    state.breakfast === false) &&
-                  !!breakfast
-                const subtractFromTotalPrice =
-                  (state.breakfast === undefined || state.breakfast) &&
-                  breakfast === false
+            const currentStepIndex = state.steps.indexOf(state.currentStep)
+            const nextStep = state.steps[currentStepIndex + 1]
+            state.currentStep = nextStep
+            navigate(nextStep, searchParams)
+          })
+        )
+      },
+      updateBreakfast(breakfast) {
+        return set(
+          produce((state: DetailsState) => {
+            state.isValid.breakfast = true
+            const stateTotalRequestedPrice =
+              state.totalPrice.requested?.price || 0
+            const stateTotalLocalPrice = state.totalPrice.local.price
 
-                if (addToTotalPrice) {
-                  const breakfastTotalRequestedPrice = parseInt(
-                    breakfast.requestedPrice.totalPrice
-                  )
-                  const breakfastTotalPrice = parseInt(
-                    breakfast.localPrice.totalPrice
-                  )
+            const addToTotalPrice =
+              (state.breakfast === undefined || state.breakfast === false) &&
+              !!breakfast
+            const subtractFromTotalPrice =
+              (state.breakfast === undefined || state.breakfast) &&
+              breakfast === false
 
-                  state.totalPrice = {
-                    requested: state.totalPrice.requested && {
-                      currency: state.totalPrice.requested.currency,
-                      price:
-                        stateTotalRequestedPrice + breakfastTotalRequestedPrice,
-                    },
-                    local: {
-                      currency: breakfast.localPrice.currency,
-                      price: stateTotalLocalPrice + breakfastTotalPrice,
-                    },
-                  }
-                }
+            if (addToTotalPrice) {
+              const breakfastTotalRequestedPrice = parseInt(
+                breakfast.requestedPrice.totalPrice
+              )
+              const breakfastTotalPrice = parseInt(
+                breakfast.localPrice.totalPrice
+              )
 
-                if (subtractFromTotalPrice) {
-                  let currency =
-                    state.totalPrice.local.currency ?? langToCurrency()
-                  let currentBreakfastTotalPrice = 0
-                  let currentBreakfastTotalRequestedPrice = 0
-                  if (state.breakfast) {
-                    currentBreakfastTotalPrice = parseInt(
-                      state.breakfast.localPrice.totalPrice
-                    )
-                    currentBreakfastTotalRequestedPrice = parseInt(
-                      state.breakfast.requestedPrice.totalPrice
-                    )
-                    currency = state.breakfast.localPrice.currency
-                  }
-
-                  let requestedPrice =
-                    stateTotalRequestedPrice -
-                    currentBreakfastTotalRequestedPrice
-                  if (requestedPrice < 0) {
-                    requestedPrice = 0
-                  }
-                  let localPrice =
-                    stateTotalLocalPrice - currentBreakfastTotalPrice
-                  if (localPrice < 0) {
-                    localPrice = 0
-                  }
-
-                  state.totalPrice = {
-                    requested: state.totalPrice.requested && {
-                      currency: state.totalPrice.requested.currency,
-                      price: requestedPrice,
-                    },
-                    local: {
-                      currency,
-                      price: localPrice,
-                    },
-                  }
-                }
-
-                state.breakfast = breakfast
-
-                const currentStepIndex = state.steps.indexOf(state.currentStep)
-                const nextStep = state.steps[currentStepIndex + 1]
-                state.currentStep = nextStep
-                navigate(nextStep, searchParams)
-              })
-            )
-          },
-          updateDetails(data) {
-            return set(
-              produce((state: DetailsState) => {
-                state.isValid.details = true
-
-                state.guest.countryCode = data.countryCode
-                state.guest.dateOfBirth = data.dateOfBirth
-                state.guest.email = data.email
-                state.guest.firstName = data.firstName
-                state.guest.join = data.join
-                state.guest.lastName = data.lastName
-                if (data.join) {
-                  state.guest.membershipNo = undefined
-                } else {
-                  state.guest.membershipNo = data.membershipNo
-                }
-                state.guest.phoneNumber = data.phoneNumber
-                state.guest.zipCode = data.zipCode
-
-                if (data.join || data.membershipNo || isMember) {
-                  const memberPrice = calcTotalMemberPrice(state)
-                  state.roomPrice = memberPrice.roomPrice
-                  state.totalPrice = memberPrice.totalPrice
-                } else {
-                  const publicPrice = calcTotalPublicPrice(state)
-                  state.roomPrice = publicPrice.roomPrice
-                  state.totalPrice = publicPrice.totalPrice
-                }
-
-                const currentStepIndex = state.steps.indexOf(state.currentStep)
-                const nextStep = state.steps[currentStepIndex + 1]
-                state.currentStep = nextStep
-                navigate(nextStep, searchParams)
-              })
-            )
-          },
-        },
-
-        bedType: initialState.bedType ?? undefined,
-        booking: initialState.booking,
-        breakfast: undefined,
-        currentStep,
-        formValues,
-        guest: isMember
-          ? deepmerge(defaultGuestState, extractGuestFromUser(user))
-          : defaultGuestState,
-        isSubmittingDisabled: false,
-        isSummaryOpen: false,
-        isValid: {
-          [StepEnum.selectBed]: false,
-          [StepEnum.breakfast]: false,
-          [StepEnum.details]: false,
-          [StepEnum.payment]: false,
-        },
-        packages: initialState.packages,
-        roomPrice: initialRoomPrice,
-        roomRate: initialState.roomRate,
-        steps: [
-          StepEnum.selectBed,
-          StepEnum.breakfast,
-          StepEnum.details,
-          StepEnum.payment,
-        ],
-        totalPrice: initialTotalPrice,
-      }),
-      {
-        name: detailsStorageName,
-        merge(persistedState, currentState) {
-          if (
-            persistedState &&
-            Object.prototype.hasOwnProperty.call(persistedState, "booking")
-          ) {
-            const isSameBooking = checkIsSameBooking(
-              // @ts-expect-error - persistedState cannot be typed
-              persistedState.booking,
-              currentState.booking
-            )
-
-            if (!isSameBooking) {
-              // We get the booking data from query params, and the "newest" booking data should always be used.
-              // Merging the two states can lead to issues since some params or values in arrays might be removed.
-              // @ts-expect-error - persistedState cannot be typed
-              delete persistedState.booking
-              return deepmerge(persistedState, currentState, {
-                arrayMerge,
-              })
-            }
-          }
-          return deepmerge(currentState, persistedState ?? {}, { arrayMerge })
-        },
-        onRehydrateStorage(initState) {
-          return function (state) {
-            if (state) {
-              if (
-                (state.guest.join || state.guest.membershipNo || isMember) &&
-                state.roomRate.memberRate
-              ) {
-                const memberPrice = calcTotalMemberPrice(state)
-
-                state.roomPrice = memberPrice.roomPrice
-                state.totalPrice = memberPrice.totalPrice
-              } else {
-                const publicPrice = calcTotalPublicPrice(state)
-
-                state.roomPrice = publicPrice.roomPrice
-                state.totalPrice = publicPrice.totalPrice
+              state.totalPrice = {
+                requested: state.totalPrice.requested && {
+                  currency: state.totalPrice.requested.currency,
+                  price:
+                    stateTotalRequestedPrice + breakfastTotalRequestedPrice,
+                },
+                local: {
+                  currency: breakfast.localPrice.currency,
+                  price: stateTotalLocalPrice + breakfastTotalPrice,
+                },
               }
+            }
 
-              /**
-               * TODO:
-               * - when included in rate, can packages still be received?
-               * - no hotels yet with breakfast included in the rate so
-               *   impossible to build for atm.
-               *
-               * checking against initialState since that means the
-               * hotel doesn't offer breakfast
-               *
-               * matching breakfast first so the steps array is altered
-               * before the bedTypes possible step altering
-               */
-              if (initialState.breakfast === false) {
-                state.steps = state.steps.filter(
-                  (step) => step === StepEnum.breakfast
+            if (subtractFromTotalPrice) {
+              let currency = state.totalPrice.local.currency ?? langToCurrency()
+              let currentBreakfastTotalPrice = 0
+              let currentBreakfastTotalRequestedPrice = 0
+              if (state.breakfast) {
+                currentBreakfastTotalPrice = parseInt(
+                  state.breakfast.localPrice.totalPrice
                 )
-                if (state.currentStep === StepEnum.breakfast) {
-                  state.currentStep = state.steps[1]
-                }
+                currentBreakfastTotalRequestedPrice = parseInt(
+                  state.breakfast.requestedPrice.totalPrice
+                )
+                currency = state.breakfast.localPrice.currency
               }
 
-              if (initialState.bedType) {
-                if (state.currentStep === StepEnum.selectBed) {
-                  state.currentStep = state.steps[1]
-                }
+              let requestedPrice =
+                stateTotalRequestedPrice - currentBreakfastTotalRequestedPrice
+              if (requestedPrice < 0) {
+                requestedPrice = 0
+              }
+              let localPrice = stateTotalLocalPrice - currentBreakfastTotalPrice
+              if (localPrice < 0) {
+                localPrice = 0
               }
 
-              const isSameBooking = checkIsSameBooking(
-                initState.booking,
-                state.booking
-              )
-
-              const validateBooking = isSameBooking ? state : initState
-
-              const validPaths = [StepEnum.selectBed]
-              const validatedBedType = bedTypeSchema.safeParse(validateBooking)
-              if (validatedBedType.success) {
-                state.isValid["select-bed"] = true
-                validPaths.push(state.steps[1])
-              }
-
-              const validatedBreakfast =
-                breakfastStoreSchema.safeParse(validateBooking)
-              if (validatedBreakfast.success) {
-                state.isValid.breakfast = true
-                validPaths.push(StepEnum.details)
-              }
-
-              const detailsSchema = isMember
-                ? signedInDetailsSchema
-                : guestDetailsSchema
-              const validatedDetails = detailsSchema.safeParse(
-                validateBooking.guest
-              )
-              // Need to add the breakfast check here too since
-              // when a member comes into the flow, their data is
-              // already added and valid, and thus to avoid showing a
-              // step the user hasn't been on yet as complete
-              if (state.isValid.breakfast && validatedDetails.success) {
-                state.isValid.details = true
-                validPaths.push(StepEnum.payment)
-              }
-
-              if (!validPaths.includes(state.currentStep)) {
-                state.currentStep = validPaths.at(-1)!
-              }
-
-              if (currentStep !== state.currentStep) {
-                const stateCurrentStep = state.currentStep
-                setTimeout(() => {
-                  navigate(stateCurrentStep, searchParams)
-                })
-              }
-
-              if (isSameBooking) {
-                state = deepmerge<DetailsState>(initState, state, {
-                  arrayMerge,
-                })
-              } else {
-                state = deepmerge<DetailsState>(state, initState, {
-                  arrayMerge,
-                })
+              state.totalPrice = {
+                requested: state.totalPrice.requested && {
+                  currency: state.totalPrice.requested.currency,
+                  price: requestedPrice,
+                },
+                local: {
+                  currency,
+                  price: localPrice,
+                },
               }
             }
-          }
-        },
-        partialize(state) {
-          return {
-            bedType: state.bedType,
-            booking: state.booking,
-            breakfast: state.breakfast,
-            guest: state.guest,
-            totalPrice: state.totalPrice,
-          }
-        },
-        storage: createJSONStorage(() => sessionStorage),
-      }
-    )
-  )
+
+            state.breakfast = breakfast
+            writeToSessionStorage({ breakfast })
+            const currentStepIndex = state.steps.indexOf(state.currentStep)
+            const nextStep = state.steps[currentStepIndex + 1]
+            state.currentStep = nextStep
+            navigate(nextStep, searchParams)
+          })
+        )
+      },
+      updateDetails(data) {
+        return set(
+          produce((state: DetailsState) => {
+            state.isValid.details = true
+
+            state.guest.countryCode = data.countryCode
+            state.guest.dateOfBirth = data.dateOfBirth
+            state.guest.email = data.email
+            state.guest.firstName = data.firstName
+            state.guest.join = data.join
+            state.guest.lastName = data.lastName
+            if (data.join) {
+              state.guest.membershipNo = undefined
+            } else {
+              state.guest.membershipNo = data.membershipNo
+            }
+            state.guest.phoneNumber = data.phoneNumber
+            state.guest.zipCode = data.zipCode
+
+            if (data.join || data.membershipNo || isMember) {
+              const memberPrice = calcTotalMemberPrice(state)
+              state.roomPrice = memberPrice.roomPrice
+              state.totalPrice = memberPrice.totalPrice
+            } else {
+              const publicPrice = calcTotalPublicPrice(state)
+              state.roomPrice = publicPrice.roomPrice
+              state.totalPrice = publicPrice.totalPrice
+            }
+
+            writeToSessionStorage({ guest: data })
+
+            const currentStepIndex = state.steps.indexOf(state.currentStep)
+            const nextStep = state.steps[currentStepIndex + 1]
+            state.currentStep = nextStep
+            navigate(nextStep, searchParams)
+          })
+        )
+      },
+    },
+    bedType: initialState.bedType ?? undefined,
+    booking: initialState.booking,
+    breakfast:
+      initialState.breakfast === false ? initialState.breakfast : undefined,
+    currentStep,
+    formValues,
+    guest: isMember
+      ? deepmerge(defaultGuestState, extractGuestFromUser(user))
+      : defaultGuestState,
+    isSubmittingDisabled: false,
+    isSummaryOpen: false,
+    isValid: {
+      [StepEnum.selectBed]: false,
+      [StepEnum.breakfast]: false,
+      [StepEnum.details]: false,
+      [StepEnum.payment]: false,
+    },
+    packages: initialState.packages,
+    roomPrice: initialRoomPrice,
+    roomRate: initialState.roomRate,
+    steps,
+    totalPrice: initialTotalPrice,
+  }))
 }
 
 export function useEnterDetailsStore<T>(selector: (store: DetailsState) => T) {
diff --git a/types/stores/enter-details.ts b/types/stores/enter-details.ts
index 85270217f..9793d902a 100644
--- a/types/stores/enter-details.ts
+++ b/types/stores/enter-details.ts
@@ -61,3 +61,14 @@ export type InitialState = Pick<DetailsState, "booking" | "packages"> &
   }
 
 export type RoomRate = DetailsProviderProps["roomRate"]
+
+export type PersistedState = Pick<
+  DetailsState,
+  "bedType" | "booking" | "breakfast" | "guest"
+>
+
+export type PersistedStatePart =
+  | Pick<DetailsState, "bedType">
+  | Pick<DetailsState, "booking">
+  | Pick<DetailsState, "breakfast">
+  | Pick<DetailsState, "guest">