diff --git a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx index 6c0d0f769..260b4b01d 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx @@ -7,6 +7,7 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" +import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Modal from "@scandic-hotels/design-system/Modal" import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions" @@ -62,10 +63,14 @@ export default function GuestDetails({ defaultValues: { firstName: guest.firstName, lastName: guest.lastName, - email: guest.email, - phoneNumber: guest.phoneNumber, + email: "", + phoneNumber: "", + // Default country code to guest country code since we don't have anything better to default to + phoneNumberCC: guest.countryCode.toLowerCase(), countryCode: guest.countryCode, }, + mode: "all", + reValidateMode: "onChange", }) const isFirstStep = currentStep === MODAL_STEPS.INITIAL @@ -116,7 +121,7 @@ export default function GuestDetails({ refId, guest: { email: data.email, - phoneNumber: data.phoneNumber, + phoneNumber: formatPhoneNumber(data.phoneNumber, data.phoneNumberCC), countryCode: data.countryCode, }, language: lang, diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx index 12a788333..ab2adfe1f 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx @@ -1,12 +1,14 @@ "use client" -import { useEffect } from "react" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone" -import Body from "@scandic-hotels/design-system/Body" +import { + formatPhoneNumber, + getDefaultCountryFromLang, +} from "@scandic-hotels/common/utils/phone" import CountrySelect from "@scandic-hotels/design-system/Form/Country" import Phone from "@scandic-hotels/design-system/Form/Phone" +import { Typography } from "@scandic-hotels/design-system/Typography" import Input from "@/components/TempDesignSystem/Form/Input" import useLang from "@/hooks/useLang" @@ -30,17 +32,13 @@ export default function ModifyContact({ const lang = useLang() const { getValues, - setValue, formState: { errors }, } = useFormContext() - useEffect(() => { - setValue("firstName", guest.firstName ?? "") - setValue("lastName", guest.lastName ?? "") - setValue("email", guest.email ?? "") - setValue("phoneNumber", guest.phoneNumber ?? "") - setValue("countryCode", guest.countryCode ?? "") - }, [guest, setValue]) + const phoneNumber = formatPhoneNumber( + getValues("phoneNumber"), + getValues("phoneNumberCC") + ) return ( <> @@ -115,19 +113,27 @@ export default function ModifyContact({ ) : ( <> - - {intl.formatMessage({ - id: "myStay.modifyContact.confirmationMessage", - defaultMessage: - "Are you sure you want to change your guest details?", - })} - + +

+ {intl.formatMessage({ + id: "myStay.modifyContact.confirmationMessage", + defaultMessage: + "Are you sure you want to change your guest details?", + })} +

+
- - {getValues("firstName")} {getValues("lastName")} - - {getValues("email")} - {getValues("phoneNumber")} + +

+ {getValues("firstName")} {getValues("lastName")} +

+ + +

{getValues("email")}

+ + +

{phoneNumber}

+
)} diff --git a/apps/scandic-web/types/components/hotelReservation/myStay/modifyContact.ts b/apps/scandic-web/types/components/hotelReservation/myStay/modifyContact.ts index 17bca9efd..0ced4f9d8 100644 --- a/apps/scandic-web/types/components/hotelReservation/myStay/modifyContact.ts +++ b/apps/scandic-web/types/components/hotelReservation/myStay/modifyContact.ts @@ -1,10 +1,27 @@ import { z } from "zod" +import { phoneValidator } from "@scandic-hotels/common/utils/zod/phoneValidator" + +export const editGuestDetailsErrors = { + EMAIL_REQUIRED: "EMAIL_REQUIRED", + EMAIL_INVALID: "EMAIL_INVALID", + PHONE_REQUIRED: "PHONE_REQUIRED", + PHONE_REQUESTED: "PHONE_REQUESTED", +} as const + export const modifyContactSchema = z.object({ firstName: z.string(), lastName: z.string(), - email: z.string().email(), - phoneNumber: z.string(), + email: z + .string() + .min(1, editGuestDetailsErrors.EMAIL_REQUIRED) + .email(editGuestDetailsErrors.EMAIL_INVALID), + + phoneNumber: phoneValidator( + editGuestDetailsErrors.PHONE_REQUIRED, + editGuestDetailsErrors.PHONE_REQUESTED + ), + phoneNumberCC: z.string(), countryCode: z.string(), }) diff --git a/apps/scandic-web/utils/getErrorMessage.ts b/apps/scandic-web/utils/getErrorMessage.ts index 890462177..124439b55 100644 --- a/apps/scandic-web/utils/getErrorMessage.ts +++ b/apps/scandic-web/utils/getErrorMessage.ts @@ -12,6 +12,8 @@ import { ancillaryError } from "@/components/HotelReservation/MyStay/Ancillaries import type { IntlShape } from "react-intl" +import { editGuestDetailsErrors } from "@/types/components/hotelReservation/myStay/modifyContact" + export function getErrorMessage(intl: IntlShape, errorCode?: string) { switch (errorCode) { case ancillaryError.MIN_QUANTITY_NOT_REACHED: @@ -72,11 +74,13 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) { case multiroomErrors.EMAIL_REQUIRED: case roomOneErrors.EMAIL_REQUIRED: case signupErrors.EMAIL_REQUIRED: + case editGuestDetailsErrors.EMAIL_REQUIRED: return intl.formatMessage({ id: "error.emailRequired", defaultMessage: "Email address is required", }) case signupErrors.EMAIL_INVALID: + case editGuestDetailsErrors.EMAIL_INVALID: return intl.formatMessage({ id: "error.emailInvalid", defaultMessage: "Email address is invalid", @@ -93,6 +97,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) { case multiroomErrors.PHONE_REQUIRED: case roomOneErrors.PHONE_REQUIRED: case editProfileErrors.PHONE_REQUIRED: + case editGuestDetailsErrors.PHONE_REQUIRED: return intl.formatMessage({ id: "error.phoneRequired", defaultMessage: "Phone is required", @@ -107,6 +112,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) { case multiroomErrors.PHONE_REQUESTED: case roomOneErrors.PHONE_REQUESTED: case editProfileErrors.PHONE_REQUESTED: + case editGuestDetailsErrors.PHONE_REQUESTED: return intl.formatMessage({ id: "error.phoneRequested", defaultMessage: "Please enter a valid phone number",