diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx similarity index 100% rename from apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx rename to apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/modal.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/modal.module.css similarity index 100% rename from apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/modal.module.css rename to apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/modal.module.css diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx index b72122485..ed020cbfb 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx @@ -1,5 +1,6 @@ "use client" +import { useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" @@ -9,6 +10,8 @@ import Caption from "@/components/TempDesignSystem/Text/Caption" import { useRoomContext } from "@/contexts/Details/Room" import { formatPrice } from "@/utils/numberFormatting" +import MemberPriceModal from "../../MemberPriceModal" + import styles from "./joinScandicFriendsCard.module.css" import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details" @@ -18,7 +21,19 @@ export default function JoinScandicFriendsCard({ name = "join", }: JoinScandicFriendsCardProps) { const intl = useIntl() - const { room, roomNr } = useRoomContext() + const { + room, + roomNr, + actions: { updateJoin }, + } = useRoomContext() + const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false) + + function onChange(event: { target: { value: boolean } }) { + updateJoin(event.target.value) + if (event.target.value) { + setIsMemberPriceModalOpen(true) + } + } if (!("member" in room.roomRate) || !room.roomRate.member) { return null @@ -58,7 +73,11 @@ export default function JoinScandicFriendsCard({ return (
- +
{saveOnJoiningLabel} @@ -88,6 +107,10 @@ export default function JoinScandicFriendsCard({ ))}
+
) } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx index 556e6c2cf..fa6613c70 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx @@ -1,5 +1,6 @@ "use client" +import { useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" @@ -15,6 +16,8 @@ import { useRoomContext } from "@/contexts/Details/Room" import useLang from "@/hooks/useLang" import { formatPrice } from "@/utils/numberFormatting" +import MemberPriceModal from "../../MemberPriceModal" + import styles from "./joinScandicFriendsCard.module.css" import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details" @@ -25,7 +28,18 @@ export default function JoinScandicFriendsCard({ }: JoinScandicFriendsCardProps) { const lang = useLang() const intl = useIntl() - const { room } = useRoomContext() + const { + room, + actions: { updateJoin }, + } = useRoomContext() + const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false) + + function onChange(event: { target: { value: boolean } }) { + updateJoin(event.target.value) + if (event.target.value) { + setIsMemberPriceModalOpen(true) + } + } if (!("member" in room.roomRate) || !room.roomRate.member) { return null @@ -64,7 +78,11 @@ export default function JoinScandicFriendsCard({ return (
- +
{saveOnJoiningLabel} @@ -138,6 +156,10 @@ export default function JoinScandicFriendsCard({ )}
+
) } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx index 64bb00b6f..75b0a1915 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx @@ -1,6 +1,6 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { useCallback, useState } from "react" +import { useCallback } from "react" import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" @@ -17,7 +17,6 @@ import { useRoomContext } from "@/contexts/Details/Room" import { trackPaymentSectionOpen } from "@/utils/tracking/booking" import JoinScandicFriendsCard from "./JoinScandicFriendsCard" -import MemberPriceModal from "./MemberPriceModal" import { guestDetailsSchema, signedInDetailsSchema } from "./schema" import Signup from "./Signup" @@ -31,7 +30,6 @@ import type { const formID = "enter-details" export default function Details({ user }: DetailsProps) { const intl = useIntl() - const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false) const { canProceedToPayment, lastRoom, isMultiRoom } = useEnterDetailsStore( (state) => ({ @@ -76,12 +74,9 @@ export default function Details({ user }: DetailsProps) { const onSubmit = useCallback( (values: DetailsSchema) => { - if ((values.join || values.membershipNo) && memberRate && !user) { - setIsMemberPriceModalOpen(true) - } updateDetails(values) }, - [updateDetails, setIsMemberPriceModalOpen, memberRate, user] + [updateDetails] ) return ( @@ -187,10 +182,6 @@ export default function Details({ user }: DetailsProps) { ) : null} - ) diff --git a/apps/scandic-web/stores/enter-details/index.ts b/apps/scandic-web/stores/enter-details/index.ts index 648643326..871c93e23 100644 --- a/apps/scandic-web/stores/enter-details/index.ts +++ b/apps/scandic-web/stores/enter-details/index.ts @@ -223,6 +223,40 @@ export function createDetailsStore( }) ) }, + updateJoin(join) { + return set( + produce((state: DetailsState) => { + const currentRoom = state.rooms[idx].room + + currentRoom.guest.join = join + + if (join) { + currentRoom.guest.membershipNo = undefined + } + + currentRoom.roomPrice = getRoomPrice( + currentRoom.roomRate, + Boolean( + join || + currentRoom.guest.membershipNo || + (idx === 0 && isMember) + ) + ) + + const nights = dt(state.booking.toDate).diff( + state.booking.fromDate, + "days" + ) + + state.totalPrice = calcTotalPrice( + state.rooms, + state.totalPrice.local.currency, + isMember, + nights + ) + }) + ) + }, updateDetails(data) { return set( produce((state: DetailsState) => { @@ -281,56 +315,6 @@ export function createDetailsStore( state.rooms[idx].isComplete = true } - writeToSessionStorage({ - booking: state.booking, - rooms: state.rooms, - }) - }) - ) - }, - updateMultiroomDetails(data) { - return set( - produce((state: DetailsState) => { - state.rooms[idx].steps[StepEnum.details].isValid = true - - state.rooms[idx].room.guest.countryCode = data.countryCode - state.rooms[idx].room.guest.email = data.email - state.rooms[idx].room.guest.firstName = data.firstName - state.rooms[idx].room.guest.join = data.join - state.rooms[idx].room.guest.lastName = data.lastName - - if (data.join) { - state.rooms[idx].room.guest.membershipNo = undefined - } else { - state.rooms[idx].room.guest.membershipNo = data.membershipNo - } - state.rooms[idx].room.guest.phoneNumber = data.phoneNumber - - const getMemberPrice = Boolean(data.join || data.membershipNo) - state.rooms[idx].room.roomPrice = getRoomPrice( - state.rooms[idx].room.roomRate, - getMemberPrice - ) - - const nights = dt(state.booking.toDate).diff( - state.booking.fromDate, - "days" - ) - - state.totalPrice = calcTotalPrice( - state.rooms, - state.totalPrice.local.currency, - getMemberPrice, - nights - ) - - const isAllStepsCompleted = checkRoomProgress( - state.rooms[idx].steps - ) - if (isAllStepsCompleted) { - state.rooms[idx].isComplete = true - } - writeToSessionStorage({ booking: state.booking, rooms: state.rooms, diff --git a/apps/scandic-web/types/contexts/details/room.ts b/apps/scandic-web/types/contexts/details/room.ts index 453e8604a..5222b387c 100644 --- a/apps/scandic-web/types/contexts/details/room.ts +++ b/apps/scandic-web/types/contexts/details/room.ts @@ -7,6 +7,7 @@ export interface RoomContextValue { actions: { updateBedType: (data: BedTypeSchema) => void updateBreakfast: (data: BreakfastPackage | false) => void + updateJoin: (join: boolean) => void updateDetails: (data: DetailsSchema) => void } isComplete: RoomState["isComplete"] diff --git a/apps/scandic-web/types/stores/enter-details.ts b/apps/scandic-web/types/stores/enter-details.ts index b5f5118ae..f35a2bc6d 100644 --- a/apps/scandic-web/types/stores/enter-details.ts +++ b/apps/scandic-web/types/stores/enter-details.ts @@ -61,8 +61,8 @@ export interface RoomState { actions: { updateBedType: (data: BedTypeSchema) => void updateBreakfast: (data: BreakfastPackage | false) => void + updateJoin: (join: boolean) => void updateDetails: (data: DetailsSchema) => void - updateMultiroomDetails: (data: MultiroomDetailsSchema) => void } isComplete: boolean room: Room