filter master integrate

src/feature/PersonalDetailsForm.jsx

@@ -39,6 +39,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
   const dispatch = useDispatch();
   const data = useSelector((state) => state.registerform.personalDetails);
   const nameInputRef = useRef(null);
+  const mobileInputRef = useRef(null);
   const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;
 
   const [showOtp, setShowOtp] = useState(false);
@@ -56,15 +57,23 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
     if (isStep1Update && data.mobileNumber && !data.verifiedMobileNumber) {
       dispatch(updatePersonalDetails({ verifiedMobileNumber: data.mobileNumber }));
       setMobileOtpVerified(true);
+      setMobileNumberError("");
     }
   }, [isStep1Update, data.mobileNumber, data.verifiedMobileNumber, dispatch]);
 
   useEffect(() => {
     if (data.verifiedMobileNumber && data.mobileNumber === data.verifiedMobileNumber) {
       setMobileOtpVerified(true);
+      setMobileNumberError("");
     }
   }, [data.verifiedMobileNumber, data.mobileNumber]);
 
+  useEffect(() => {
+    if (!isStep1Update && !data.religion) {
+      dispatch(updatePersonalDetails({ religion: 1 }));
+    }
+  }, [isStep1Update, data.religion, dispatch]);
+
   const { data: personalMasters, isLoading: isPersonalMastersLoading } =
     usePersonalDetailsMasters();
 
@@ -120,7 +129,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
     const raw = cityQuery.data;
     if (!raw) return [];
     if (Array.isArray(raw)) return raw;
-    return raw.subCaste || raw.district || raw.data || [];
+    return raw.subCaste || raw.sub_caste || raw.district || raw.data || [];
   }, [cityQuery.data]);
 
   const starOptions = useMemo(() => {
@@ -384,12 +393,6 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
     }
   };
 
-  useEffect(() => {
-    if (showOtp && !mobileOtpVerified && isOtpComplete) {
-      handleOtpSubmit();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [otp]);
 
 
 // file upload 
@@ -426,32 +429,31 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
 
 
   const handleSubmit = async () => {  
-  if (showOtp && !isOtpComplete) {
-    setOtpError("OTP is required and must be complete");
-    return;
-  }
-
-  if (showOtp && !mobileOtpVerified) {
-    try {
-      await verifyOtp.mutateAsync({
-        mobile: data.mobileNumber,
-        otp: otp.join(""),
-      });
-      setMobileOtpVerified(true);
-      setOtpError("");
-      console.log("Submitting personal details:", data); // log here
-      onSubmitStep();
-      console.log("OTP verified on submit");
-    } catch (err) {
-      setOtpError(err || "OTP verification failed");
+    // For new registrations, mobile verification is mandatory.
+    // For updates, it's also mandatory if the number was changed.
+    // The `mobileOtpVerified` state covers both scenarios.
+    if (!mobileOtpVerified) {
+      // Provide a more specific error message.
+      if (showOtp) {
+        if (!isOtpComplete) {
+          setOtpError("OTP is required and must be complete");
+        } else {
+          setOtpError("Please submit the OTP to verify your number.");
+        }
+        const firstOtpInput = document.getElementById("otp-0");
+        if (firstOtpInput) {
+          firstOtpInput.focus();
+        }
+      } else {
+        setMobileNumberError("Please verify your mobile number to proceed.");
+        if (mobileInputRef.current) {
+          mobileInputRef.current.focus();
+        }
+      }
+      return;
     }
-    return;
-  }
-
-  // no OTP or already verified
-  console.log("Submitting personal details:", data); // log here
-  onSubmitStep();
-};
+    onSubmitStep();
+  };
 
 
   const formatTimer = (sec) => {
@@ -532,6 +534,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
               <Box sx={{ display: "flex", alignItems: "start", gap: 2 }}>
                 <TextField
                   fullWidth
+                  inputRef={mobileInputRef}
                   name="mobileNumber"
                   label="Mobile Number"
                   type="tel"
@@ -629,15 +632,15 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
                     </Button>
                   </Box>
 
-                  <Typography sx={{ ml: 2, minWidth: 56 }}>
+                  <Typography sx={{ ml: 0, minWidth: 56 }}>
                     {otpTimer > 0 ? (
                      ` ${formatTimer(otpTimer) } Seconds`
                     ) : (
                       <button
-                        component="button"
-                        variant="body2"
+                        type="button"
                         onClick={handleMobileSubmit}
                         disabled={otpTimer > 0}
+                        style={{ background: "none", border: "none", padding: 0, textDecoration: "underline", cursor: "pointer", color: "inherit", font: "inherit" }}
                       >
                         Resend OTP
                       </button>
@@ -712,6 +715,8 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
               fullWidth
               name="height"
               label="Enter Height"
+             
+              max={3}
               type="number"
               value={data.height}
               onChange={(e) => handleChange("height", e.target.value)}