Merged in fix/LOY-105-signupform-error-messages (pull request #2121)

feat(LOY-105): update signup form validation messages

* feat(LOY-105): improve signup form validation messages


Approved-by: Erik Tiekstra

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

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

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 (
     <AriaCheckbox
@@ -61,7 +65,7 @@ const Checkbox = forwardRef<
           {fieldState.error && !hideError ? (
             <Caption className={styles.error} fontOnly>
               <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-              {fieldState.error.message}
+              {getErrorMessage(intl, fieldState.error.message)}
             </Caption>
           ) : null}
         </>

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({