refactor(SW-360): trigger validation on submnission

components/Forms/Signup/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -37,15 +36,13 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
-  const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
-
   const methods = useForm<SignUpSchema>({
     defaultValues: {
       firstName: "",
       lastName: "",
       email: "",
       phoneNumber: "",
-      dateOfBirth: "",
+      dateOfBirth: "1995-01-01",
       address: {
         countryCode: "",
         zipCode: "",
@@ -59,16 +56,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
     reValidateMode: "onChange",
   })
 
-  // Trigger validation for all fields upon invalid submissions.
-  useEffect(() => {
-    if (
-      isSubmitAttempted &&
-      (!methods.formState.isValid || !methods.formState.isSubmitting)
-    ) {
-      methods.trigger()
-    }
-  }, [isSubmitAttempted, methods])
-
   async function onSubmit(data: SignUpSchema) {
     try {
       const result = await registerUser(data)
@@ -184,17 +171,35 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
               </Body>
             </Checkbox>
           </section>
-          <Button
+
-            className={styles.signUpButton}
+          {/* 
-            type="submit"
+            We use this approach to trigger validation for all invalid inputs upon submission.
-            theme="base"
+            To handle this programmatically in the future, we would need some major refactoring
-            intent="primary"
+            of the Input component, which is out of scope for now.
-            disabled={methods.formState.isSubmitting}
+          */}
-            data-testid="submit"
+          {!methods.formState.isValid ? (
-            onClick={() => setIsSubmitAttempted(true)}
+            <Button
-          >
+              className={styles.signUpButton}
-            {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+              type="button"
-          </Button>
+              theme="base"
+              intent="primary"
+              onClick={() => methods.trigger()}
+              data-testid="trigger-validation"
+            >
+              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+            </Button>
+          ) : (
+            <Button
+              className={styles.signUpButton}
+              type="submit"
+              theme="base"
+              intent="primary"
+              disabled={methods.formState.isSubmitting}
+              data-testid="submit"
+            >
+              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+            </Button>
+          )}
         </form>
       </FormProvider>
     </section>