bug fixing

src/feature/PersonalDetailsForm.jsx

@@ -33,7 +33,7 @@ import {
 } from "../hooks/useDependentMasters";
 import { useSendOtp, useVerifyOtp } from "../hooks/useAuth";
 const OTP_LENGTH = 4;
-const OTP_TIMER_SEC = 120; // 2 minutes
+const OTP_TIMER_SEC = 60; // 1 minute
 
 const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Update }) => {
   const dispatch = useDispatch();
@@ -51,25 +51,19 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const sendOtp = useSendOtp();
   const verifyOtp = useVerifyOtp();
-  const [verifiedMobileNumber, setVerifiedMobileNumber] = useState(
-    () => localStorage.getItem("registration_verified_mobile") || ""
-  );
-  const initializedVerifiedNumber = useRef(false);
 
   useEffect(() => {
-    if (isStep1Update && data.mobileNumber && !initializedVerifiedNumber.current) {
-      setVerifiedMobileNumber(data.mobileNumber);
-      localStorage.setItem("registration_verified_mobile", data.mobileNumber);
+    if (isStep1Update && data.mobileNumber && !data.verifiedMobileNumber) {
+      dispatch(updatePersonalDetails({ verifiedMobileNumber: data.mobileNumber }));
       setMobileOtpVerified(true);
-      initializedVerifiedNumber.current = true;
     }
-  }, [isStep1Update, data.mobileNumber]);
+  }, [isStep1Update, data.mobileNumber, data.verifiedMobileNumber, dispatch]);
 
   useEffect(() => {
-    if (verifiedMobileNumber && data.mobileNumber === verifiedMobileNumber) {
+    if (data.verifiedMobileNumber && data.mobileNumber === data.verifiedMobileNumber) {
       setMobileOtpVerified(true);
     }
-  }, [verifiedMobileNumber, data.mobileNumber]);
+  }, [data.verifiedMobileNumber, data.mobileNumber]);
 
   const { data: personalMasters, isLoading: isPersonalMastersLoading } =
     usePersonalDetailsMasters();
@@ -282,11 +276,15 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
   };
 
   const handleChange = (field, value) => {
+    if (field === "name" && !/^[a-zA-Z\s]*$/.test(value)) {
+      return;
+    }
+
     const updates = { [field]: value };
     const fieldsToClear = [field];
     if (field === "mobileNumber") {
       setMobileNumberError("");
-      if (verifiedMobileNumber && value === verifiedMobileNumber) {
+      if (data.verifiedMobileNumber && value === data.verifiedMobileNumber) {
         setMobileOtpVerified(true);
         setShowOtp(false);
         setOtpError("");
@@ -373,8 +371,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
         "OTP verified successfully";
       toast.success(successMessage, { position: "top-right" });
       setMobileOtpVerified(true);
-      setVerifiedMobileNumber(data.mobileNumber);
-      localStorage.setItem("registration_verified_mobile", data.mobileNumber);
+      dispatch(updatePersonalDetails({ verifiedMobileNumber: data.mobileNumber }));
       setMobileNumberError("");
       setOtpError("");
     } catch (error) {
@@ -387,6 +384,13 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
     }
   };
 
+  useEffect(() => {
+    if (showOtp && !mobileOtpVerified && isOtpComplete) {
+      handleOtpSubmit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [otp]);
+
 
 // file upload 
 
@@ -583,7 +587,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
             </div>
 
             {/* OTP Inputs */}
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
               {showOtp && !mobileOtpVerified && (
                 <>
                   <Box display="flex" gap={1} alignItems="center">
@@ -595,7 +599,8 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
                           maxLength: 1,
                           style: {
                             textAlign: "center",
-                            width: 40,
+                            width: 20,
+                            height:20,
                             fontSize: 20,
                             borderRadius: 4,
                             backgroundColor:  digit
@@ -628,14 +633,14 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
                     {otpTimer > 0 ? (
                      ` ${formatTimer(otpTimer) } Seconds`
                     ) : (
-                      <Link
+                      <button
                         component="button"
                         variant="body2"
-                        onClick={resetOtp}
+                        onClick={handleMobileSubmit}
                         disabled={otpTimer > 0}
                       >
                         Resend OTP
-                      </Link>
+                      </button>
                     )}
                   </Typography>
 
@@ -1290,6 +1295,11 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
       dispatch(updatePersonalDetails({ profiles: files }));
     }}
   />
+  {errors.profiles && (
+    <p style={{ color: "#d32f2f", fontSize: "0.75rem", margin: "3px 14px 0 14px" }}>
+      {errors.profiles}
+    </p>
+  )}
 </div>