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