From 8720dc73fd7d0a1bc9d2cb5cdff5b74eeb021b73 Mon Sep 17 00:00:00 2001 From: Sridhar260802 Date: Fri, 16 May 2025 18:31:05 +0530 Subject: [PATCH] setting fundraisng and donor --- src/App.jsx | 4 +- src/Components/AboutUs.jsx | 13 +- src/Components/CustomerCountCard.jsx | 6 +- src/Components/Donate.jsx | 11 +- src/Components/FormBuilder.jsx | 1 - src/Components/FundDrive.css | 12 + src/Components/FundDrive.jsx | 563 ++++++++++++-------- src/Components/Home-Section-1.jsx | 2 +- src/Components/Home.jsx | 2 - src/Components/HomeMockSection.jsx | 3 +- src/Components/Marquee.jsx | 1 - src/Components/Navbar.jsx | 6 +- src/Components/StatsCard.jsx | 3 +- src/Components/Supporter.jsx | 759 ++++++++++++++++----------- src/Components/form-step2.css | 86 +++ src/Components/upi.png | Bin 0 -> 43587 bytes src/vvvetApi.js | 2 +- 17 files changed, 916 insertions(+), 558 deletions(-) create mode 100644 src/Components/form-step2.css create mode 100644 src/Components/upi.png diff --git a/src/App.jsx b/src/App.jsx index 5eeda6f..bf2cbab 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,8 @@ -import React from 'react'; +//import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Navbar from './Components/Navbar'; import Contact from './Components/Contact'; -import Footer from './Components/Footer'; import FormBuilder from './Components/FormBuilder'; import AboutUs from './Components/AboutUs'; import './App.css'; @@ -17,6 +16,7 @@ function App() { + } /> } /> } /> diff --git a/src/Components/AboutUs.jsx b/src/Components/AboutUs.jsx index 71a6e39..d1b1a32 100644 --- a/src/Components/AboutUs.jsx +++ b/src/Components/AboutUs.jsx @@ -1,17 +1,14 @@ -import React from "react"; import { Container, Typography, Box, Grid, - Paper, + Button, - Icon, + } from "@mui/material"; -import { useNavigate } from "react-router-dom"; const AboutUs = () => { - const navigate = useNavigate(); return (
@@ -25,7 +22,7 @@ const AboutUs = () => { Our History - + Vertivel Educational Trust was founded in 2010 with a vision to provide quality education to underprivileged children in rural and underserved areas. Over the years, the trust has grown into @@ -43,14 +40,14 @@ const AboutUs = () => { Our Achievements - + - Provided scholarships to over 100 students.
- Established 10 schools across rural regions.
- Partnered with top universities to offer vocational training.
- - Awarded "Best Educational NGO" in 2018. + - Awarded "Best Educational NGO" in 2018.
diff --git a/src/Components/CustomerCountCard.jsx b/src/Components/CustomerCountCard.jsx index 551c9d4..a27f9a3 100644 --- a/src/Components/CustomerCountCard.jsx +++ b/src/Components/CustomerCountCard.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Box, Typography, Grid, Paper } from "@mui/material"; +//import React from "react"; +import { Typography, Grid, Paper } from "@mui/material"; import './CustomerCountCard.css' const CustomerCountCard = () => { @@ -27,7 +27,7 @@ const CustomerCountCard = () => { { margin: 'auto' }} > -

- Your Donation Can Make a Difference -

+ +

Your Donation Can Make a Difference

+ Join us in our mission to help those in need. By becoming a donor, you can contribute to creating a positive impact in the lives of many. diff --git a/src/Components/FormBuilder.jsx b/src/Components/FormBuilder.jsx index 5d1b40c..38668ce 100644 --- a/src/Components/FormBuilder.jsx +++ b/src/Components/FormBuilder.jsx @@ -1,4 +1,3 @@ -import React from "react"; import { Model } from "survey-core"; import { Survey } from "survey-react-ui"; import "survey-core/defaultV2.min.css"; diff --git a/src/Components/FundDrive.css b/src/Components/FundDrive.css index 26325ce..ef3642f 100644 --- a/src/Components/FundDrive.css +++ b/src/Components/FundDrive.css @@ -200,6 +200,18 @@ input:focus { .form-button:hover:not(:disabled) { opacity: 0.9; } + .bank-details { + text-align: left; + background-color: #f9f9f9; + padding: 15px; + margin: 15px 0; + border: 1px solid #ccc; + border-radius: 8px; + line-height: 1.6; + font-size: 0.95rem; + font-family: Arial, sans-serif; + } + @media (max-width: 600px) { .container-box { diff --git a/src/Components/FundDrive.jsx b/src/Components/FundDrive.jsx index b5e218d..177db4d 100644 --- a/src/Components/FundDrive.jsx +++ b/src/Components/FundDrive.jsx @@ -1,28 +1,50 @@ import { useState } from "react"; import "./FundDrive.css"; // Inside src/Components/FundDrive.jsx -import { submitVvvetForm } from "../vvvetApi"; +//import { submitVvvetForm } from "../vvvetApi"; import axios from "axios"; +import './form-step2.css'; const FundDrive = () => { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ - name: "", - email: "", - phone: "", - age: "", - dob: "", - category: "", - pan: "", - customCategory: "", - bankHolderName: "", - bankName: "", - ifscCode: "", - fundAmount: "", - accountNumber: "", - images: [] + name: "", + email: "", + phone: "", + age: "", + dob: "", + category: "", + customCategory: "", + pan: "", + images: [], + bankHolderName: "", + bankName: "", + accountNumber: "", + ifscCode: "", + fundAmount: "", + paymentMethod: "", + studentName: "", + standard: "", + parentName: "", + parentPhone: "", + feeDocument: null, + patientName: "", + cause: "", + hospitalName: "", + location: "", + attenderName: "", + medicalCertificate: null, + medicalDocument: null, + disasterName: "", + disasterPlace: "", + disasterPhone: "", + disasterDocument: null, + generalName: "", + generalPlace: "", + generalPhone: "", + generalDocument: null }); const [isPanVerified, setIsPanVerified] = useState(false); // To track PAN verification status const [verificationError, setVerificationError] = useState(""); @@ -49,10 +71,7 @@ const FundDrive = () => { }); }; - const handleImageUpload = (event) => { - const files = Array.from(event.target.files); - setFormData({ ...formData, images: [...formData.images, ...files] }); - }; + const handleNext = () => { setStep(step + 1); @@ -70,86 +89,37 @@ const FundDrive = () => { setPanImage(file); // Store PAN image in state }; + - - - - - // const verifyPan = async () => { - // try { - // const formDataForPan = new FormData(); - // formDataForPan.append("pan", formData.pan); - // formDataForPan.append("panImage", panImage); // panImage must be a File object - - // const response = await axios.post( - // "http://localhost:5002/api/verify-pan", - // formDataForPan, - // { - // headers: { - // "Content-Type": "multipart/form-data", - // }, - // withCredentials: true, // Ensures credentials (cookies) are sent - // } - // ); - // console.log("vathuten da punda",response.data); // Check the backend response - - // const isValid = response.data.verified; - // setIsPanVerified(isValid); - - // if (!isValid) { - // setVerificationError("PAN number and uploaded image do not match."); - // } - - // return isValid; - // } catch (error) { - // setVerificationError("An error occurred during PAN verification."); - // console.error(error); - // return false; - // } - // }; - - const verifyPan = async () => { try { - // Validate PAN format client-side first const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/; if (!panRegex.test(formData.pan)) { - setVerificationError("Invalid PAN format. It should be in the format ABCDE1234F."); + setVerificationError("Invalid PAN format."); setIsPanVerified(false); return false; } - if (!panImage) { setVerificationError("Please upload a PAN card image."); setIsPanVerified(false); return false; } - + const formDataForPan = new FormData(); formDataForPan.append("pan", formData.pan); formDataForPan.append("panImage", panImage); - - // Show loading state if needed - // setIsLoading(true); - + const response = await axios.post( "http://localhost:5002/api/verify-pan", formDataForPan, { - headers: { - "Content-Type": "multipart/form-data", - }, + headers: { "Content-Type": "multipart/form-data" }, } ); - - // Hide loading state - // setIsLoading(false); - - console.log("PAN verification response:", response.data); - + if (response.data.verified) { setIsPanVerified(true); - setVerificationError(""); // Clear any previous errors + setVerificationError(""); return true; } else { setIsPanVerified(false); @@ -157,68 +127,123 @@ const FundDrive = () => { return false; } } catch (error) { - // Hide loading state - // setIsLoading(false); - - console.error("Error verifying PAN:", error); - - // Handle specific error cases - if (error.response) { - // The server responded with an error status - setVerificationError(error.response.data.message || "PAN verification failed. Server returned an error."); - } else if (error.request) { - // The request was made but no response was received - setVerificationError("Cannot connect to the verification service. Please try again later."); - } else { - // Something else caused the error - setVerificationError("An error occurred during PAN verification."); - } - + setVerificationError( + error.response?.data?.message || "Error connecting to PAN verification service." + ); setIsPanVerified(false); return false; } }; + // const handleSubmit = async (e) => { // e.preventDefault(); // if (!isPanVerified) { // const verified = await verifyPan(); - // if (!verified) { - // alert("PAN not verified. Please verify before submitting."); - // return; - // } + // if (!verified) return; // } // try { - // await submitVvvetForm(formData); - // alert('Form submitted successfully'); + // await submitVvvetForm(formData); + // await axios.post("http://localhost:5002/api/users/add", formData); + // // Ensure this sends the form data to your backend + // setStep(5); // Show the thank-you screen // } catch (error) { // console.error("Error submitting form:", error); - // alert('Error submitting form'); + // // You can optionally show an inline error message instead of alert // } // }; const handleSubmit = async (e) => { e.preventDefault(); + // Verify PAN first if not verified if (!isPanVerified) { const verified = await verifyPan(); - if (!verified) { - alert("PAN not verified. Please verify before submitting."); - return; - } + if (!verified) return; } - // Proceed with form submission (assuming `submitVvvetForm` is defined) try { - await submitVvvetForm(formData); // Make sure this function is defined elsewhere - alert("Form submitted successfully!"); + const formSubmissionData = new FormData(); + + // Append all string fields except files + for (const key in formData) { + const value = formData[key]; + if (value !== null && value !== undefined) { + // Check if value is a File or object, skip files here + if (value instanceof File) continue; + if (typeof value === "object") continue; + + formSubmissionData.append(key, value); + } + } + + // Append files (file inputs) separately + const fileFields = ["feeDoc", "medicalPhoto", "medicalDoc", "document"]; + fileFields.forEach((field) => { + if (formData[field]) { + formSubmissionData.append(field, formData[field]); + } + }); + + // Also append panImage again if you want backend to receive it on form submit + if (panImage) { + formSubmissionData.append("panImage", panImage); + } + + const response = await axios.post( + "http://localhost:5002/api/fundraising/submit", + formSubmissionData, + { + headers: { "Content-Type": "multipart/form-data" }, + } + ); + + console.log("Form submission response:", response.data); + + // On success, move to thank-you step + setStep(4); } catch (error) { console.error("Error submitting form:", error); - alert("Error submitting form"); + alert("Error submitting form. Please try again."); } }; + const isStep2Valid = () => { + const { category, customCategory, customReason } = formData; + + if (!category) return false; + + if (category === "Others") { + return customCategory?.trim() && customReason?.trim(); + } + + const requiredFieldsByCategory = { + "Medical Fundraising": ["patientName", "cause", "hospitalName", "location", "phoneNumber", "attenderName", "amount", "medicalPhoto", "medicalDoc"], + "Education & Scholarships": ["studentName", "standard", "parentsName", "parentsPhone", "amount", "feeDoc"], + "Disaster Relief & Aid": ["name", "place", "phoneNumber", "amount", "document"], + "Memorial & Tribute Funds": ["name", "place", "phoneNumber", "amount", "document"], + "Community Development": ["name", "place", "phoneNumber", "amount", "document"], + "Social Causes": ["name", "place", "phoneNumber", "amount", "document"], + "Religious & Faith-Based Giving": ["name", "place", "phoneNumber", "amount", "document"], + "Crowdfunding for Needs": ["name", "place", "phoneNumber", "amount", "document"], + "Nonprofit & NGO Fundraising": ["name", "place", "phoneNumber", "amount", "document"] + }; + + const fields = requiredFieldsByCategory[category]; + if (!fields) return true; + + return fields.every(field => { + const value = formData[field]; + return value && (typeof value === "string" ? value.trim() : true); + }); + }; + const handleFileChange = (e) => { + const { name, files } = e.target; + setFormData(prev => ({ ...prev, [name]: files[0] })); + }; + + return ( @@ -339,7 +364,7 @@ const FundDrive = () => { )} - {step === 2 && ( + {/* {step === 2 && (

Step 2:Select a category

{categories.map((item, index) => ( @@ -377,8 +402,175 @@ const FundDrive = () => {
- )} - + )} */} + {step === 2 && ( +
+

Step 2: Select a category

+ + + + {formData.category === "Others" && ( + <> + + + + )} + + {/* Medical Fundraising */} + {formData.category === "Medical Fundraising" && ( + <> +
Medical Fundraising Details
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + )} + + {/* Education & Scholarships */} + {formData.category === "Education & Scholarships" && ( + <> +
Education & Scholarships Details
+ + + + + + + + + + + + + + + + + + + )} + + {/* Disaster Relief */} + {formData.category === "Disaster Relief & Aid" && ( + <> +
Disaster Relief Details
+ + + + + + + + + + + + + + + + )} + + {/* Common template for general categories */} + {[ + "Memorial & Tribute Funds", + "Community Development", + "Social Causes", + "Religious & Faith-Based Giving", + "Crowdfunding for Needs", + "Nonprofit & NGO Fundraising" + ].includes(formData.category) && ( + <> +
Fundraising Details
+ + + + + + + + + + + + + + + + )} + + {/* Others Reason */} + {formData.category === "Others" && ( + <> +
Other Fundraising Reason
+ +