diff --git a/src/Components/FundDrive.css b/src/Components/FundDrive.css index 5856f92..26325ce 100644 --- a/src/Components/FundDrive.css +++ b/src/Components/FundDrive.css @@ -12,7 +12,18 @@ body { justify-content: center; padding: 40px 16px; } - + /* .form-field { + display: block; + margin: 10px 0; + padding: 8px; + width: 100%; + } */ + .section-heading { + font-size: 18px; + font-weight: bold; + color: #1e293b; + margin: 20px 0 10px; + } .container-box { background: #ffffff; border-radius: 16px; diff --git a/src/Components/FundDrive.jsx b/src/Components/FundDrive.jsx index 566b5bd..b5e218d 100644 --- a/src/Components/FundDrive.jsx +++ b/src/Components/FundDrive.jsx @@ -17,6 +17,11 @@ const FundDrive = () => { category: "", pan: "", customCategory: "", + bankHolderName: "", + bankName: "", + ifscCode: "", + fundAmount: "", + accountNumber: "", images: [] }); const [isPanVerified, setIsPanVerified] = useState(false); // To track PAN verification status @@ -103,41 +108,6 @@ const FundDrive = () => { // } // }; - //demoooooooooooooooooooooooooooooooooo// - // const verifyPan = async () => { - // try { - // const formDataForPan = new FormData(); - // formDataForPan.append("pan", formData.pan); - // formDataForPan.append("panImage", panImage); - - // // Using the proxy path - note we removed the full URL - // const response = await axios.post( - // "/api/verify-pan", // Just use the relative path when using a proxy - // formDataForPan, - // { - // headers: { - // "Content-Type": "multipart/form-data", - // }, - // } - // ); - - // console.log("PAN verification response:", response.data); - // const isValid = response.data.verified; - // setIsPanVerified(isValid); - - // if (!isValid) { - // setVerificationError("PAN number and uploaded image do not match."); - // } - - // return isValid; - // } catch (error) { - // console.error("Error verifying PAN:", error); - // setVerificationError("An error occurred during PAN verification."); - // return false; - // } - // }; - - const verifyPan = async () => { try { @@ -360,7 +330,7 @@ const FundDrive = () => { type="button" onClick={handleNext} className="form-button next-button" - disabled={!formData.name || !formData.email || !formData.phone || !formData.age || !formData.dob || !formData.pan} + disabled={!formData.name || !formData.email || !formData.phone || !formData.age || !formData.dob || !formData.pan || !isPanVerified} > Next @@ -410,7 +380,7 @@ const FundDrive = () => { )} - {step === 3 && ( + {/* {step === 3 && (

Step 3:Upload an Image

{formData.category === "Others" ? formData.customCategory : formData.category}

@@ -428,42 +398,186 @@ const FundDrive = () => { {formData.images.map((image, index) => ( {`Proof ))} +
*/} + {step === 3 && ( +
+

Step 3: Upload an Image

+

+ {formData.category === "Others" ? formData.customCategory : formData.category} +

+ + {/* Common image upload */} +
+ +

Click or Drag & Drop to upload images

+
+ + {/* Section-specific forms with headings */} + {formData.category === "Medical Fundraising" && ( + <> +

Upload Medical Details

+ + + + )} + + {formData.category === "Education & Scholarships" && ( + <> +

Upload Student Details

+ + + + )} + + {formData.category === "Disaster Relief & Aid" && ( + <> +

Upload Relief Information

+ + + )} + + {formData.category === "Memorial & Tribute Funds" && ( + <> +

Upload Tribute Details

+ + + )} + + {[ + "Community Development", + "Social Causes", + "Religious & Faith-Based Giving", + "Crowdfunding for Needs", + "Nonprofit & NGO Fundraising", + ].includes(formData.category) && ( + <> +

Upload Cause Information

+ + + )} + + {formData.category === "Others" && ( + <> +

Upload Custom Details

+ + + + )} + + {/* Image preview */} +
+ {formData.images.map((image, index) => ( + {`Proof + ))}
- +
)} + {step === 4 && ( +
+

Step 4: Banking Details

+ +
+ + setFormData({ ...formData, bankHolderName: e.target.value })} + /> +
+ +
+ + setFormData({ ...formData, bankName: e.target.value })} + /> +
+ +
+ + setFormData({ ...formData, accountNumber: e.target.value })} + /> +
+ +
+ + setFormData({ ...formData, ifscCode: e.target.value })} + /> +
+
+ + { + const value = parseInt(e.target.value, 10); + if (!isNaN(value) && value >= 0) { + setFormData({ ...formData, fundAmount: value }); + } + }} + min="1000" + /> + {formData.fundAmount > 0 && formData.fundAmount < 1000 && ( +

Minimum amount should be ₹1000

+ )} +
+
+ + +
+
+)} + - + ); }; export default FundDrive; - - - - - - - - - - - - - - - - - - - - - -