Fixed : Disable Submit Button

package.json

@@ -56,6 +56,7 @@
     "@googlemaps/typescript-guards": "^2.0.3",
     "@headlessui/react": "^2.2.0",
     "@hello-pangea/dnd": "^17.0.0",
+    "@hookform/resolvers": "^3.9.1",
     "@pnotify/core": "^5.2.0",
     "@pnotify/mobile": "^5.2.0",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -95,7 +96,9 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.3.1",
     "react-google-recaptcha": "^3.1.0",
+
     "react-i18next": "^15.2.0",
+
     "react-infinite-scroll-component": "^6.1.0",
     "react-pdf": "^9.2.1",
     "react-webcam": "^7.2.0",
@@ -152,7 +155,7 @@
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-static-copy": "^2.0.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "browserslist": {
     "production": [

src/components/Form/Form.tsx

@@ -1,6 +1,9 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
 import { FieldValidator } from "@/components/Form/FieldValidators";
 import {
   FormContextValue,
@@ -43,45 +46,61 @@ const Form = <T extends FormDetails>({
   hideCancelButton = false,
   ...props
 }: Props<T>) => {
+  const { t } = useTranslation();
   const initial = { form: props.defaults, errors: {} };
   const [isLoading, setIsLoading] = useState(!!asyncGetDefaults);
   const [state, dispatch] = useAutoSaveReducer<T>(formReducer, initial);
   const formVals = useRef(props.defaults);
 
+  interface FormData extends FormDetails {
+    [key: string]: unknown;
+  }
+
+  const methods = useForm<FormData>({
+    defaultValues: props.defaults,
+    mode: "onChange",
+  });
+
+  const { formState } = methods;
+
   useEffect(() => {
     if (!asyncGetDefaults) return;
 
     asyncGetDefaults().then((form) => {
       dispatch({ type: "set_form", form });
+      methods.reset(form);
       setIsLoading(false);
     });
-  }, [asyncGetDefaults]);
+  }, [asyncGetDefaults, methods, dispatch]);
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
+  const handleSubmit = async (data: T) => {
+    try {
+      if (validate) {
+        const errors = omitBy(validate(data), isEmpty) as FormErrors<T>;
 
-    if (validate) {
-      const errors = omitBy(validate(state.form), isEmpty) as FormErrors<T>;
+        if (Object.keys(errors).length) {
+          dispatch({ type: "set_errors", errors });
 
-      if (Object.keys(errors).length) {
-        dispatch({ type: "set_errors", errors });
-
-        if (errors.$all) {
-          Notification.Error({ msg: errors.$all });
+          if (errors.$all) {
+            Notification.Error({ msg: errors.$all });
+          }
+          return;
         }
-        return;
       }
-    }
 
-    const errors = await props.onSubmit(state.form);
-    if (errors) {
-      dispatch({
-        type: "set_errors",
-        errors: { ...state.errors, ...errors },
-      });
-    } else if (props.resetFormValsOnSubmit) {
-      dispatch({ type: "set_form", form: formVals.current });
+      const errors = await props.onSubmit(data);
+      if (errors) {
+        dispatch({
+          type: "set_errors",
+          errors: { ...state.errors, ...errors },
+        });
+      } else if (props.resetFormValsOnSubmit) {
+        dispatch({ type: "set_form", form: formVals.current });
+        methods.reset(formVals.current);
+      }
+    } catch (error) {
+      console.error("Form submission error:", error);
+      Notification.Error({ msg: t("errors.form.submission") });
     }
   };
 
@@ -97,10 +116,11 @@ const Form = <T extends FormDetails>({
 
   return (
     <form
-      onSubmit={handleSubmit}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
-          handleSubmit(e);
+      onSubmit={methods.handleSubmit((data) => handleSubmit(data as T))}
+      onKeyDown={(e: React.KeyboardEvent<HTMLFormElement>) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          methods.handleSubmit((data) => handleSubmit(data as T))();
         }
       }}
       className={classNames(
@@ -113,6 +133,12 @@ const Form = <T extends FormDetails>({
       <DraftSection
         handleDraftSelect={(newState: FormState<T>) => {
           dispatch({ type: "set_state", state: newState });
+          Object.entries(newState.form).forEach(([key, value]) => {
+            methods.setValue(key, value, {
+              shouldDirty: true,
+              shouldTouch: true,
+            });
+          });
           props.onDraftRestore?.(newState);
         }}
         formData={state.form}
@@ -123,13 +149,18 @@ const Form = <T extends FormDetails>({
             return {
               name,
               id: name,
-              onChange: ({ name, value }: FieldChangeEvent<T[keyof T]>) =>
+              onChange: ({ name, value }: FieldChangeEvent<T[keyof T]>) => {
                 dispatch({
                   type: "set_field",
                   name,
                   value,
                   error: validate?.(value),
-                }),
+                });
+                methods.setValue(name as string, value, {
+                  shouldDirty: true,
+                  shouldTouch: true,
+                });
+              },
               value: state.form[name],
               error: state.errors[name],
               disabled,
@@ -141,17 +172,22 @@ const Form = <T extends FormDetails>({
           </div>
           <div className="flex flex-col-reverse justify-end gap-3 sm:flex-row">
             {!hideCancelButton && (
-              <Cancel
+              <Button
                 onClick={handleCancel}
-                label={props.cancelLabel ?? "Cancel"}
-              />
+                variant="secondary"
+                disabled={disabled}
+              >
+                {props.cancelLabel ?? t("Cancel")}
+              </Button>
             )}
-            <Submit
+            <Button
               data-testid="submit-button"
               type="submit"
-              disabled={disabled}
-              label={props.submitLabel ?? "Submit"}
-            />
+              disabled={disabled || !formState.isDirty}
+              variant="primary"
+            >
+              {props.submitLabel ?? t("Submit")}
+            </Button>
           </div>
         </Provider>
       </DraftSection>