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