added step 4
This commit is contained in:
parent
cf888f3853
commit
739dfc8700
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
</button>
|
||||
|
|
@ -410,7 +380,7 @@ const FundDrive = () => {
|
|||
)}
|
||||
|
||||
|
||||
{step === 3 && (
|
||||
{/* {step === 3 && (
|
||||
<div className="upload-section-box">
|
||||
<h4>Step 3:Upload an Image</h4>
|
||||
<h3 className="upload-title">{formData.category === "Others" ? formData.customCategory : formData.category}</h3>
|
||||
|
|
@ -428,42 +398,186 @@ const FundDrive = () => {
|
|||
{formData.images.map((image, index) => (
|
||||
<img key={index} src={URL.createObjectURL(image)} alt={`Proof ${index + 1}`} className="uploaded-image" />
|
||||
))}
|
||||
</div> */}
|
||||
{step === 3 && (
|
||||
<div className="upload-section-box">
|
||||
<h4>Step 3: Upload an Image</h4>
|
||||
<h3 className="upload-title">
|
||||
{formData.category === "Others" ? formData.customCategory : formData.category}
|
||||
</h3>
|
||||
|
||||
{/* Common image upload */}
|
||||
<div className="upload-box">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="file-input"
|
||||
/>
|
||||
<p className="upload-placeholder">Click or Drag & Drop to upload images</p>
|
||||
</div>
|
||||
|
||||
{/* Section-specific forms with headings */}
|
||||
{formData.category === "Medical Fundraising" && (
|
||||
<>
|
||||
<h4 className="section-heading">Upload Medical Details</h4>
|
||||
<input type="text" placeholder="Patient Name" className="form-field" />
|
||||
<input type="text" placeholder="Patient Contact Number" className="form-field" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.category === "Education & Scholarships" && (
|
||||
<>
|
||||
<h4 className="section-heading">Upload Student Details</h4>
|
||||
<input type="text" placeholder="Student Name" className="form-field" />
|
||||
<input type="text" placeholder="Standard/Class" className="form-field" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.category === "Disaster Relief & Aid" && (
|
||||
<>
|
||||
<h4 className="section-heading">Upload Relief Information</h4>
|
||||
<input type="text" placeholder="Cause/Place Affected" className="form-field" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.category === "Memorial & Tribute Funds" && (
|
||||
<>
|
||||
<h4 className="section-heading">Upload Tribute Details</h4>
|
||||
<input type="text" placeholder="Person Honored" className="form-field" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{[
|
||||
"Community Development",
|
||||
"Social Causes",
|
||||
"Religious & Faith-Based Giving",
|
||||
"Crowdfunding for Needs",
|
||||
"Nonprofit & NGO Fundraising",
|
||||
].includes(formData.category) && (
|
||||
<>
|
||||
<h4 className="section-heading">Upload Cause Information</h4>
|
||||
<input type="text" placeholder="Cause Details" className="form-field" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.category === "Others" && (
|
||||
<>
|
||||
<h4 className="section-heading">Upload Custom Details</h4>
|
||||
<input type="text" placeholder="Describe your cause" className="form-field" />
|
||||
<input type="file" className="form-field" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Image preview */}
|
||||
<div className="image-preview">
|
||||
{formData.images.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={URL.createObjectURL(image)}
|
||||
alt={`Proof ${index + 1}`}
|
||||
className="uploaded-image"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="button-group">
|
||||
<button type="button" className="form-button back-button" onClick={handleBack}>Back</button>
|
||||
<button type="button" className="form-button submit-button" onClick={handleSubmit} disabled={formData.images.length === 0}>Submit</button>
|
||||
<button
|
||||
type="button"
|
||||
className="form-button next-button"
|
||||
onClick={handleNext}
|
||||
disabled={!formData.category || (formData.category === "Others" && !formData.customCategory.trim())}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<div className="bank-details-section-box">
|
||||
<h4>Step 4: Banking Details</h4>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">Bank Account Holder Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Bank Account Holder Name"
|
||||
className="form-field"
|
||||
value={formData.bankHolderName}
|
||||
onChange={(e) => setFormData({ ...formData, bankHolderName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">Bank Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Bank Name"
|
||||
className="form-field"
|
||||
value={formData.bankName}
|
||||
onChange={(e) => setFormData({ ...formData, bankName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">Bank Account Number</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Bank Account Number"
|
||||
className="form-field"
|
||||
value={formData.accountNumber}
|
||||
onChange={(e) => setFormData({ ...formData, accountNumber: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">IFSC Code</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="IFSC Code"
|
||||
className="form-field"
|
||||
value={formData.ifscCode}
|
||||
onChange={(e) => setFormData({ ...formData, ifscCode: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Fundraising Amount</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Fundraising Amount"
|
||||
className="form-field"
|
||||
value={formData.fundAmount}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value, 10);
|
||||
if (!isNaN(value) && value >= 0) {
|
||||
setFormData({ ...formData, fundAmount: value });
|
||||
}
|
||||
}}
|
||||
min="1000"
|
||||
/>
|
||||
{formData.fundAmount > 0 && formData.fundAmount < 1000 && (
|
||||
<p className="error-message">Minimum amount should be ₹1000</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="button-group">
|
||||
<button type="button" className="form-button back-button" onClick={handleBack}>
|
||||
Back
|
||||
</button>
|
||||
<button type="button" className="form-button submit-button" onClick={handleSubmit}>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default FundDrive;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue