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

fix: persist selection of bed and breakfast if same room

Browse Source
This commit is contained in:
Christel Westerberg
2024-12-04 16:16:32 +01:00
parent f075521421
commit 4210218852
11 changed files with 410 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/HotelReservation/EnterDetails/BedType/index.tsx
View File

@@ -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
}
/>
)
})}

17
components/HotelReservation/EnterDetails/Breakfast/index.tsx
View File

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

5
components/HotelReservation/EnterDetails/Details/index.tsx
View File

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

9
components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
View File

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

1
components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
View File

@@ -12,7 +12,6 @@ interface BaseCardProps
title: React.ReactNode
type: "checkbox" | "radio"
value?: string
handleSelectedOnClick?: () => void
}
interface ListCardProps extends BaseCardProps {

7
components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
View File

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

95
providers/EnterDetailsProvider.tsx
View File

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

8
server/routers/hotels/query.ts
View File

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

54
stores/enter-details/helpers.ts
View File

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

634
stores/enter-details/index.ts
View File

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

11
types/stores/enter-details.ts
View File

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