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

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -249,8 +249,8 @@ export default function SignupForm({
                   defaultMessage: "Email address",
                 })}
                 name="email"
-                registerOptions={{ required: true }}
                 type="email"
+                registerOptions={{ required: true }}
               />
               <Phone
                 countryLabel={intl.formatMessage({
@@ -307,9 +307,7 @@ export default function SignupForm({
               </header>
               <Checkbox
                 name="profilingConsent"
-                registerOptions={{
-                  required: false,
-                }}
+                registerOptions={{ required: true }}
               >
                 {intl.formatMessage({
                   id: "signup.yesConsent",
@@ -344,9 +342,7 @@ export default function SignupForm({
             </header>
             <Checkbox
               name="termsAccepted"
-              registerOptions={{
-                required: true,
-              }}
+              registerOptions={{ required: true }}
               errorCodeMessages={{
                 [signupErrors.TERMS_REQUIRED]: intl.formatMessage({
                   id: "common.mustAcceptTermsError",
@@ -394,33 +390,15 @@ export default function SignupForm({
             </Typography>
           </section>
 
-          {/*
-            This is a manual validation trigger workaround:
-            - The Controller component (which Input uses) doesn't re-render on submit,
-              which prevents automatic error display.
-            - Future fix requires Input component refactoring (out of scope for now).
-          */}
-          {!methods.formState.isValid ? (
-            <Button
-              className={styles.signUpButton}
-              type="submit"
-              variant="Primary"
-              onPress={() => methods.trigger()}
-              data-testid="trigger-validation"
-            >
-              {signupButtonText}
-            </Button>
-          ) : (
-            <Button
-              className={styles.signUpButton}
-              type="submit"
-              variant="Primary"
-              isDisabled={methods.formState.isSubmitting || signup.isPending}
-              data-testid="submit"
-            >
-              {signupButtonText}
-            </Button>
-          )}
+          <Button
+            className={styles.signUpButton}
+            type="submit"
+            variant="Primary"
+            isDisabled={methods.formState.isSubmitting || signup.isPending}
+            data-testid="submit"
+          >
+            {signupButtonText}
+          </Button>
         </form>
       </FormProvider>
     </div>