Merged in fix/loy-514-fix-validation-tracking-in-signup-form (pull request #3445)

fix(LOY-514): Fix validation error tracking in SignupForm

* Fix issue with form submit handling

* Fix

* Remove browser validation

* Add automatic tracking of validatione rrors


Approved-by: Rasmus Langvad
Approved-by: Matilda Landström

packages/tracking/lib/useFormTracking.ts

@@ -13,8 +13,11 @@ import {
   trackFormAbandonment,
   trackFormCompletion,
   trackFormInputStarted,
+  trackFormValidationError,
 } from "./form"
 
+import type { FieldErrors } from "react-hook-form"
+
 export function useFormTracking<T extends FieldValues>(
   formType: FormType,
   subscribe: UseFormSubscribe<T>,
@@ -66,6 +69,13 @@ export function useFormTracking<T extends FieldValues>(
     }
   }, [formStarted, formType, nameSuffix, formState.isValid])
 
+  useEffect(() => {
+    if (formState.submitCount === 0) return
+    if (formState.isValid) return
+
+    trackErrors(formState.errors, formType, nameSuffix)
+  }, [formState.submitCount, formState.errors, formType, nameSuffix])
+
   const trackFormSubmit = useCallback(() => {
     if (formState.isValid) {
       trackFormCompletion(formType, nameSuffix)
@@ -76,3 +86,24 @@ export function useFormTracking<T extends FieldValues>(
     trackFormSubmit,
   }
 }
+
+function trackErrors<T extends FieldValues>(
+  errors: FieldErrors<T>,
+  formType: FormType,
+  nameSuffix: string
+) {
+  const errorKeys = Object.getOwnPropertyNames(errors)
+
+  errorKeys.forEach((key) => {
+    const msg = errors[key]?.message
+    if (!msg) {
+      // Handle nested errors
+      trackErrors(errors[key] as FieldErrors<T>, formType, nameSuffix)
+      return
+    }
+
+    if (!msg || typeof msg !== "string") return
+
+    trackFormValidationError(formType, nameSuffix, msg)
+  })
+}