diff --git a/apps/scandic-web/components/Forms/Signup/schema.ts b/apps/scandic-web/components/Forms/Signup/schema.ts index 71b7e56a7..b8296861c 100644 --- a/apps/scandic-web/components/Forms/Signup/schema.ts +++ b/apps/scandic-web/components/Forms/Signup/schema.ts @@ -7,11 +7,14 @@ export const signupErrors = { COUNTRY_REQUIRED: "COUNTRY_REQUIRED", FIRST_NAME_REQUIRED: "FIRST_NAME_REQUIRED", LAST_NAME_REQUIRED: "LAST_NAME_REQUIRED", + EMAIL_INVALID: "EMAIL_INVALID", + EMAIL_REQUIRED: "EMAIL_REQUIRED", PHONE_REQUIRED: "PHONE_REQUIRED", PHONE_REQUESTED: "PHONE_REQUESTED", BIRTH_DATE_REQUIRED: "BIRTH_DATE_REQUIRED", PASSWORD_REQUIRED: "PASSWORD_REQUIRED", TERMS_REQUIRED: "TERMS_REQUIRED", + ZIP_CODE_REQUIRED: "ZIP_CODE_REQUIRED", } as const export const signUpSchema = z.object({ @@ -21,7 +24,11 @@ export const signUpSchema = z.object({ .trim() .min(1, signupErrors.FIRST_NAME_REQUIRED), lastName: z.string().max(250).trim().min(1, signupErrors.LAST_NAME_REQUIRED), - email: z.string().max(250).email(), + email: z + .string() + .max(250) + .min(1, signupErrors.EMAIL_REQUIRED) + .email({ message: signupErrors.EMAIL_INVALID }), phoneNumber: phoneValidator( signupErrors.PHONE_REQUIRED, signupErrors.PHONE_REQUESTED @@ -36,7 +43,7 @@ export const signUpSchema = z.object({ invalid_type_error: signupErrors.COUNTRY_REQUIRED, }) .min(1, signupErrors.COUNTRY_REQUIRED), - zipCode: z.string().min(1), + zipCode: z.string().min(1, signupErrors.ZIP_CODE_REQUIRED), }), password: passwordValidator(signupErrors.PASSWORD_REQUIRED), termsAccepted: z diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts new file mode 100644 index 000000000..4dbd514e5 --- /dev/null +++ b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts @@ -0,0 +1,15 @@ +import { signupErrors } from "@/components/Forms/Signup/schema" + +import type { IntlShape } from "react-intl" + +export function getErrorMessage(intl: IntlShape, errorCode?: string) { + switch (errorCode) { + case signupErrors.TERMS_REQUIRED: + return intl.formatMessage({ + defaultMessage: "Terms & conditions must be accepted", + }) + default: + console.warn("Error code not supported:", errorCode) + return errorCode + } +} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx index 446203796..e9eef1df6 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx @@ -3,11 +3,14 @@ import { forwardRef } from "react" import { Checkbox as AriaCheckbox } from "react-aria-components" import { useController, useFormContext } from "react-hook-form" +import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Caption from "@/components/TempDesignSystem/Text/Caption" +import { getErrorMessage } from "./errors" + import styles from "./checkbox.module.css" import type { CheckboxProps } from "@/types/components/checkbox" @@ -32,6 +35,7 @@ const Checkbox = forwardRef< name, rules: registerOptions, }) + const intl = useIntl() return ( - {fieldState.error.message} + {getErrorMessage(intl, fieldState.error.message)} ) : null} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/errors.ts b/apps/scandic-web/components/TempDesignSystem/Form/Input/errors.ts index 60b77c5e9..98f9175d6 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/errors.ts +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/errors.ts @@ -53,9 +53,14 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) { case findMyBookingErrors.EMAIL_REQUIRED: case multiroomErrors.EMAIL_REQUIRED: case roomOneErrors.EMAIL_REQUIRED: + case signupErrors.EMAIL_REQUIRED: return intl.formatMessage({ defaultMessage: "Email address is required", }) + case signupErrors.EMAIL_INVALID: + return intl.formatMessage({ + defaultMessage: "Email address is invalid", + }) case signupErrors.COUNTRY_REQUIRED: case multiroomErrors.COUNTRY_REQUIRED: case roomOneErrors.COUNTRY_REQUIRED: @@ -88,6 +93,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) { }) case roomOneErrors.ZIP_CODE_REQUIRED: case editProfileErrors.ZIP_CODE_REQUIRED: + case signupErrors.ZIP_CODE_REQUIRED: return intl.formatMessage({ defaultMessage: "Zip code is required", }) @@ -111,10 +117,6 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) { return intl.formatMessage({ defaultMessage: "Retype new password does not match new password", }) - case signupErrors.TERMS_REQUIRED: - return intl.formatMessage({ - defaultMessage: "You must accept the terms and conditions", - }) case multiroomErrors.MEMBERSHIP_NO_ONLY_DIGITS: case roomOneErrors.MEMBERSHIP_NO_ONLY_DIGITS: return intl.formatMessage({