fix onboarding form abstraction (#944)

Author: gabrielseco

src/flows/Onboarding/components/OnboardingForm.tsx

@@ -2,8 +2,6 @@ import { JSONSchemaFormFields } from '@/src/components/form/JSONSchemaForm';
 import { Form } from '@/src/components/ui/form';
 import { useEffect } from 'react';
 import { useOnboardingContext } from '@/src/flows/Onboarding/context';
-import { useForm } from 'react-hook-form';
-import { useJsonSchemasValidationFormResolver } from '@/src/components/form/validationResolver';
 import { JSFFields } from '@/src/types/remoteFlows';
 import {
   BasicInformationFormPayload,
@@ -12,6 +10,7 @@ import {
 } from '@/src/flows/Onboarding/types';
 import { $TSFixMe, Components } from '@/src/types/remoteFlows';
 import { normalizeFieldErrors } from '@/src/lib/mutations';
+import { useJSONSchemaForm } from '@/src/components/form/useJSONSchemaForm';
 
 type OnboardingFormProps = {
   onSubmit: (
@@ -32,15 +31,10 @@ export function OnboardingForm({
 }: OnboardingFormProps) {
   const { formId, onboardingBag } = useOnboardingContext();
 
-  const resolver = useJsonSchemasValidationFormResolver(
-    onboardingBag.handleValidation,
-  );
-
-  const form = useForm({
-    resolver,
-    defaultValues,
-    shouldUnregister: false,
-    mode: 'onBlur',
+  const form = useJSONSchemaForm({
+    handleValidation: onboardingBag.handleValidation,
+    defaultValues: defaultValues,
+    checkFieldUpdates: onboardingBag.checkFieldUpdates,
   });
 
   useEffect(() => {
@@ -52,20 +46,6 @@ export function OnboardingForm({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    const subscription = form?.watch((values) => {
-      const isAnyFieldDirty = Object.keys(values).some(
-        (key) =>
-          values[key as keyof unknown] !== defaultValues[key as keyof unknown],
-      );
-      if (isAnyFieldDirty) {
-        onboardingBag?.checkFieldUpdates(values);
-      }
-    });
-    return () => subscription?.unsubscribe();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleSubmit = async (
     values: Record<string, unknown>,
     event?: React.BaseSyntheticEvent,