From fd51027a67ed547fdeb62543ca5241f1fda3c230 Mon Sep 17 00:00:00 2001 From: George Emmanuel Thomas Date: Sun, 19 May 2024 22:09:43 +0530 Subject: [PATCH 1/5] fix(donation): integrated UI and logic --- .../Public/Donation/Donation.module.css | 355 +++++++++++++++++- src/modules/Public/Donation/Donation.tsx | 309 +++++++++++---- 2 files changed, 588 insertions(+), 76 deletions(-) diff --git a/src/modules/Public/Donation/Donation.module.css b/src/modules/Public/Donation/Donation.module.css index a1a21f775..90fd1c359 100644 --- a/src/modules/Public/Donation/Donation.module.css +++ b/src/modules/Public/Donation/Donation.module.css @@ -1,16 +1,349 @@ -.fieldsContainer{ +.LClandingPage { + position: relative; + overflow-x: hidden; +} + +.joinCircle { + background: var(--blue); + border-radius: var(--borderRadius); + padding: 0.5rem 1rem; + font-size: 0.8rem; + margin-top: 1rem; + width: 6rem; + color: #fff; +} + +.backgroundImage { + top: 0; + position: absolute; + + z-index: -2; +} + +.backgroundImage img { + width: 100vw; + height: 110vh; +} + +.LClandingPageHero { + /* background-image: url(https://i.ibb.co/cCvB4r6/Learning-BG.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; */ + position: relative; + height: 100vh; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 1rem; + padding-top: 5rem; +} + +.LClandingPageHero span { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + font-size: 3.5rem; + color: #000; +} + +.LClandingPageHero span img { + position: relative; + top: 0.75rem; + height: 3rem; +} + +.LClandingPageHero .dash { + position: absolute; + top: -50%; + width: 120%; + height: 100%; + border: 5px solid #accaf6; + border-style: dashed; + border-radius: 45%; +} + +.LClandingPageHero .heroTitle b:nth-child(2) { + font-size: 4rem; + color: var(--blue); + position: relative; + top: -1rem; + background-image: linear-gradient(to right, #ddecff, #eaf3ff); + border-radius: 10%; + height: -1rem; + padding: 0rem 0.5rem; +} + +.LClandingPageHero p { + width: 75%; + font-weight: 600; + font-size: 1.1rem; +} + +.DonationSection { + position: relative; + max-width: 100vw; + display: flex; + justify-content: center; + margin-bottom: 6rem; +} + +.DonationFormElement { + background: #fff; + box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15); + width: 80%; + top: -25%; + padding: 1.5rem 3rem; + display: flex; + gap: 2rem; +} + +.DetailsContainer { + width: 100%; display: flex; flex-direction: column; - gap: 10px; - margin-bottom: 10px; + padding: 1rem 0; + gap: 0.2rem; +} + +.DetailsContainer h1, +.DonationInputStyles { + margin-bottom: 0.7rem; +} + +.DetailsContainer label { + margin: 0.2rem 0.5rem; +} + +.DetailsContainer h1 { + font-weight: 600; + font-size: 1.7rem; } -.inputStyles{ - padding: 10px; - border-radius: 4px; - outline: none; - background-color: #f3f3f4; - font-size: 14px; +.DonateButtonContainer { + display: flex; + justify-content: center; + gap: 1rem; +} + +.DonateButtonContainer button { + background-color: #fff; + width: 100%; + color: var(--blue); + border: 2px solid var(--blue); + border-radius: 0.5rem; + padding: 0.9rem 1.4rem; + margin-bottom: 1rem; +} + +.DonateButtonContainer button:hover { + background-color: var(--blue); + color: #fff; +} + +.DonateButtonContainer button.selectedButton { + background-color: var(--blue); + color: #fff; +} + +.DonationInputStyles { + border-radius: 0.4rem; + border: 1.12px solid rgba(45, 191, 252, 0.25); + box-shadow: 0px 1.6px 6.4px 0px rgba(0, 0, 0, 0.1); + padding: 0.4rem 1rem; width: 100%; - box-sizing: border-box; -} \ No newline at end of file +} + +.AmountField { + font-size: 1.8rem; + font-weight: 500; + padding: 0.5rem 1rem; +} + +.CurrencyContainer { + position: relative; +} + +.CurrencyContainer p { + position: absolute; + cursor: default; + font-weight: 200; + color: rgba(0, 0, 0, 0.5); + right: 1rem; + top: 20%; +} + +.TermsContainer { + display: flex; + align-items: center; +} + +.TermsContainer input { + width: 1rem; +} + +.TermsContainer label { + cursor: default; + font-size: 0.7rem; + color: rgba(0, 0, 0, 0.8); +} + +.SubmitButton { + margin-top: 1rem; + font-size: 1.4rem; + width: 60%; + align-self: center; +} + +.SubmitButton button { + padding: 0.7rem 1rem; +} + +/* Refund Page */ + +.refundSection { + display: flex; + margin-top: 30vh; + justify-content: center; + margin-bottom: 5rem; +} + +.textContainer { + width: 95%; + box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15); + background-color: #fff; + padding: 2rem 10rem; +} + +@media (width<=955px) { + .LClandingPageHero .dash { + top: -46%; + border-radius: 38%; + } + + .textContainer { + padding: 2rem 6rem; + } +} + +@media (width <=820px) { + .LClandingPageHero span { + font-size: 1.7rem; + gap: 0.5rem; + } + + .LClandingPageHero span img { + top: 0.5rem; + height: 2.2rem; + } + + .LClandingPageHero .heroTitle b:nth-child(2) { + font-size: 2.5rem; + top: 0rem; + } + + .LClandingPageHero p { + width: 90%; + font-size: 0.8rem; + } + + .LClandingPageHero button { + padding: 0.5rem 1rem; + } + + .DonationFormElement { + flex-direction: column; + gap: 1rem; + } + + .SubmitButton { + width: 100%; + align-items: center; + } +} + +@media (width<=550px) { + .LClandingPageHero .dash { + top: -48%; + border-radius: 35%; + } + + .LClandingPageHero .heroTitle b:nth-child(2) { + font-size: 1.75rem; + top: 0rem; + } + + .LClandingPageHero span { + font-size: 1.8rem; + gap: 0.7rem; + } + .LClandingPageHero span img { + top: 0.18rem; + height: 1.7rem; + } + + .DonationFormElement { + top: -10%; + width: 96%; + } + + .DonateButtonContainer { + /* flex-direction: column; */ + align-items: center; + gap: 0.3rem; + } + .DonateButtonContainer button { + width: 100%; + padding: 0.4rem 0.8rem; + margin-bottom: 0.6rem; + font-size: 0.8rem; + } + + .CurrencyContainer p, + .DetailsContainer label { + font-size: 0.9rem; + } + + .DonationInputStyles { + font-size: 0.9rem; + padding: 0.6rem 0.9rem; + } + + .DetailsContainer h1 { + font-size: 1.5rem; + } + + .AmountField { + font-size: 1.4rem; + } + + .TermsContainer label { + font-size: 0.6rem; + } + + .SubmitButton { + font-size: 1rem; + } + + .textContainer { + padding: 2rem; + width: 100%; + box-shadow: -1.6px -6.4px 62px 3.2px rgba(0, 0, 0, 0.15); + } +} + +@media (width<=380px) { + .LClandingPageHero .dash { + top: -47%; + border-radius: 35%; + } + + .LClandingPageHero span { + font-size: 1.7rem; + padding: 0; + } +} diff --git a/src/modules/Public/Donation/Donation.tsx b/src/modules/Public/Donation/Donation.tsx index 3c0ad76e6..7296b62f0 100644 --- a/src/modules/Public/Donation/Donation.tsx +++ b/src/modules/Public/Donation/Donation.tsx @@ -1,14 +1,18 @@ -import React, { useState, useRef } from "react"; -import MuModal from "@/MuLearnComponents/MuModal/MuModal"; +import { useEffect, useRef, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import toast from "react-hot-toast"; +import Footer from "./components/Footer"; +import Navbar from "./components/Navbar"; import { submitForm } from "./services/api"; import styles from "./Donation.module.css"; -import toast from "react-hot-toast"; + const Donation = () => { - const [amount, setAmount] = useState(); + const [amount, setAmount] = useState(10000); const [name, setName] = useState(""); const [email, setEmail] = useState(""); - const [mobile, setMobile] = useState(); + const [mobile, setMobile] = useState(""); const [pan, setPan] = useState(""); + const [selectedAmount, setSelectedAmount] = useState(10000); const callRazorpay = () => { if (!amount || !name || !email || !mobile || !pan) { @@ -16,74 +20,249 @@ const Donation = () => { return; } + if (!validatePAN(pan)) { + toast.error("Invalid PAN number"); + return; + } + submitForm({ - amount: amount, + amount: Number(amount), name: name, email: email, - mobile: mobile, + mobile: Number(mobile), pan: pan }); }; + const validatePAN = (pan: string) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(pan); + + const navigate = useNavigate(); + const customStyles: any = { + control: (provided: any) => ({ + ...provided, + backgroundColor: "#F3F3F4", + border: "none", + borderRadius: "10px", + fontSize: "12px", + fontWeight: "bold", + color: "#000", + width: "100%", + padding: ".3rem .4rem", + minWidth: "200px" + }), + placeholder: (provided: any) => ({ + ...provided, + color: "#000" + }), + indicatorSeparator: (provided: any) => ({ + ...provided, + display: "none" + }) + }; + + const [counters, setCounters] = useState([0, 0, 0, 0, 0]); // Initialize counters + const durationInSeconds = 3; // Duration in seconds + + const targetRef = useRef(null); // Create a ref + + const isElementInViewport = (el: HTMLElement | null) => { + if (!el) { + return false; + } + const rect = el.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= + (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= + (window.innerWidth || document.documentElement.clientWidth) + ); + }; + + useEffect(() => { + const handleScroll = () => { + if (isElementInViewport(targetRef.current)) { + // Start counter logic here + } + }; + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const handleAmountClick = (amount: number) => { + setSelectedAmount(amount); + setAmount(amount); + }; + return ( - <> - console.log("closed")} - title="Donation" - type="success" - onDone={() => callRazorpay()} - > - - setAmount(Number(e.target.value))} - required - /> - - - setName(e.target.value)} - required - /> - - - setEmail(e.target.value)} - required - /> - - - setMobile(Number(e.target.value))} - required - /> - - setPan(e.target.value)} - required - /> - - +
+ + +
+
+ textured background +
+
+
+ + Donate to{" "} + + + Let's grow together +
+

+ An informal mechanism for bringing together learners who are + interested in the same topic from across different fields + and disciplines. A fantastic way to spend a small amount of + time learning about new things with a group of people with + same interests! +

+
+ +
+
+
{ + e.preventDefault(); + callRazorpay(); + }} + > +
+

Details

+ + setName(e.target.value)} + required + /> + + setEmail(e.target.value)} + required + /> + + setMobile(e.target.value)} + required + /> + + setPan(e.target.value)} + required + /> +
+ +
+

Donate

+ +
+

{"INR"}

+ setAmount(e.target.value)} + required + /> +
+ +
+ + +
+
+ +
+
+
+
+ +
+
); }; From d9b110db13d9743235700903c8db89df7cdcddac Mon Sep 17 00:00:00 2001 From: BlazeSN860 Date: Sun, 19 May 2024 22:21:13 +0530 Subject: [PATCH 2/5] fix(App): Removed test donation page. --- src/App.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index db9644c89..0a9ee81e8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,10 +44,8 @@ import DiscordModeration from "./modules/Dashboard/modules/DiscordModeration/Dis import Test from "./modules/Dashboard/modules/Test/Test"; import Analytics from "./modules/Dashboard/modules/UrlShortener/Pages/Analytics"; import Donation from "./modules/Public/Donation/Donation"; -import DonationTest from "./modules/Public/Donation/pages/Donate"; import Refund from "./modules/Public/Donation/pages/Refund"; - const Profile = lazy( () => import("./modules/Dashboard/modules/Profile/pages/Profile") ); @@ -270,10 +268,6 @@ function App() { path: "donation", element: }, - { - path: "donation-test", - element: - }, { path: "donation/refund", element: From fdd68171d5255599576d3c3f553f702827362cc6 Mon Sep 17 00:00:00 2001 From: BlazeSN860 Date: Sun, 19 May 2024 22:21:42 +0530 Subject: [PATCH 3/5] chore(donation): deleted test donation pages. --- .../Public/Donation/pages/Donate.module.css | 349 ------------------ src/modules/Public/Donation/pages/Donate.tsx | 197 ---------- 2 files changed, 546 deletions(-) delete mode 100644 src/modules/Public/Donation/pages/Donate.module.css delete mode 100644 src/modules/Public/Donation/pages/Donate.tsx diff --git a/src/modules/Public/Donation/pages/Donate.module.css b/src/modules/Public/Donation/pages/Donate.module.css deleted file mode 100644 index 90fd1c359..000000000 --- a/src/modules/Public/Donation/pages/Donate.module.css +++ /dev/null @@ -1,349 +0,0 @@ -.LClandingPage { - position: relative; - overflow-x: hidden; -} - -.joinCircle { - background: var(--blue); - border-radius: var(--borderRadius); - padding: 0.5rem 1rem; - font-size: 0.8rem; - margin-top: 1rem; - width: 6rem; - color: #fff; -} - -.backgroundImage { - top: 0; - position: absolute; - - z-index: -2; -} - -.backgroundImage img { - width: 100vw; - height: 110vh; -} - -.LClandingPageHero { - /* background-image: url(https://i.ibb.co/cCvB4r6/Learning-BG.png); - background-repeat: no-repeat; - background-size: cover; - background-position: center; */ - position: relative; - height: 100vh; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; - gap: 1rem; - padding-top: 5rem; -} - -.LClandingPageHero span { - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - font-size: 3.5rem; - color: #000; -} - -.LClandingPageHero span img { - position: relative; - top: 0.75rem; - height: 3rem; -} - -.LClandingPageHero .dash { - position: absolute; - top: -50%; - width: 120%; - height: 100%; - border: 5px solid #accaf6; - border-style: dashed; - border-radius: 45%; -} - -.LClandingPageHero .heroTitle b:nth-child(2) { - font-size: 4rem; - color: var(--blue); - position: relative; - top: -1rem; - background-image: linear-gradient(to right, #ddecff, #eaf3ff); - border-radius: 10%; - height: -1rem; - padding: 0rem 0.5rem; -} - -.LClandingPageHero p { - width: 75%; - font-weight: 600; - font-size: 1.1rem; -} - -.DonationSection { - position: relative; - max-width: 100vw; - display: flex; - justify-content: center; - margin-bottom: 6rem; -} - -.DonationFormElement { - background: #fff; - box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15); - width: 80%; - top: -25%; - padding: 1.5rem 3rem; - display: flex; - gap: 2rem; -} - -.DetailsContainer { - width: 100%; - display: flex; - flex-direction: column; - padding: 1rem 0; - gap: 0.2rem; -} - -.DetailsContainer h1, -.DonationInputStyles { - margin-bottom: 0.7rem; -} - -.DetailsContainer label { - margin: 0.2rem 0.5rem; -} - -.DetailsContainer h1 { - font-weight: 600; - font-size: 1.7rem; -} - -.DonateButtonContainer { - display: flex; - justify-content: center; - gap: 1rem; -} - -.DonateButtonContainer button { - background-color: #fff; - width: 100%; - color: var(--blue); - border: 2px solid var(--blue); - border-radius: 0.5rem; - padding: 0.9rem 1.4rem; - margin-bottom: 1rem; -} - -.DonateButtonContainer button:hover { - background-color: var(--blue); - color: #fff; -} - -.DonateButtonContainer button.selectedButton { - background-color: var(--blue); - color: #fff; -} - -.DonationInputStyles { - border-radius: 0.4rem; - border: 1.12px solid rgba(45, 191, 252, 0.25); - box-shadow: 0px 1.6px 6.4px 0px rgba(0, 0, 0, 0.1); - padding: 0.4rem 1rem; - width: 100%; -} - -.AmountField { - font-size: 1.8rem; - font-weight: 500; - padding: 0.5rem 1rem; -} - -.CurrencyContainer { - position: relative; -} - -.CurrencyContainer p { - position: absolute; - cursor: default; - font-weight: 200; - color: rgba(0, 0, 0, 0.5); - right: 1rem; - top: 20%; -} - -.TermsContainer { - display: flex; - align-items: center; -} - -.TermsContainer input { - width: 1rem; -} - -.TermsContainer label { - cursor: default; - font-size: 0.7rem; - color: rgba(0, 0, 0, 0.8); -} - -.SubmitButton { - margin-top: 1rem; - font-size: 1.4rem; - width: 60%; - align-self: center; -} - -.SubmitButton button { - padding: 0.7rem 1rem; -} - -/* Refund Page */ - -.refundSection { - display: flex; - margin-top: 30vh; - justify-content: center; - margin-bottom: 5rem; -} - -.textContainer { - width: 95%; - box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15); - background-color: #fff; - padding: 2rem 10rem; -} - -@media (width<=955px) { - .LClandingPageHero .dash { - top: -46%; - border-radius: 38%; - } - - .textContainer { - padding: 2rem 6rem; - } -} - -@media (width <=820px) { - .LClandingPageHero span { - font-size: 1.7rem; - gap: 0.5rem; - } - - .LClandingPageHero span img { - top: 0.5rem; - height: 2.2rem; - } - - .LClandingPageHero .heroTitle b:nth-child(2) { - font-size: 2.5rem; - top: 0rem; - } - - .LClandingPageHero p { - width: 90%; - font-size: 0.8rem; - } - - .LClandingPageHero button { - padding: 0.5rem 1rem; - } - - .DonationFormElement { - flex-direction: column; - gap: 1rem; - } - - .SubmitButton { - width: 100%; - align-items: center; - } -} - -@media (width<=550px) { - .LClandingPageHero .dash { - top: -48%; - border-radius: 35%; - } - - .LClandingPageHero .heroTitle b:nth-child(2) { - font-size: 1.75rem; - top: 0rem; - } - - .LClandingPageHero span { - font-size: 1.8rem; - gap: 0.7rem; - } - .LClandingPageHero span img { - top: 0.18rem; - height: 1.7rem; - } - - .DonationFormElement { - top: -10%; - width: 96%; - } - - .DonateButtonContainer { - /* flex-direction: column; */ - align-items: center; - gap: 0.3rem; - } - .DonateButtonContainer button { - width: 100%; - padding: 0.4rem 0.8rem; - margin-bottom: 0.6rem; - font-size: 0.8rem; - } - - .CurrencyContainer p, - .DetailsContainer label { - font-size: 0.9rem; - } - - .DonationInputStyles { - font-size: 0.9rem; - padding: 0.6rem 0.9rem; - } - - .DetailsContainer h1 { - font-size: 1.5rem; - } - - .AmountField { - font-size: 1.4rem; - } - - .TermsContainer label { - font-size: 0.6rem; - } - - .SubmitButton { - font-size: 1rem; - } - - .textContainer { - padding: 2rem; - width: 100%; - box-shadow: -1.6px -6.4px 62px 3.2px rgba(0, 0, 0, 0.15); - } -} - -@media (width<=380px) { - .LClandingPageHero .dash { - top: -47%; - border-radius: 35%; - } - - .LClandingPageHero span { - font-size: 1.7rem; - padding: 0; - } -} diff --git a/src/modules/Public/Donation/pages/Donate.tsx b/src/modules/Public/Donation/pages/Donate.tsx deleted file mode 100644 index 6f6fe639f..000000000 --- a/src/modules/Public/Donation/pages/Donate.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { useEffect, useRef, useState } from "react"; -import styles from "./Donate.module.css"; -import { Form, Link, useNavigate } from "react-router-dom"; -import { submitForm } from "../services/api"; -import MuModal from "@/MuLearnComponents/MuModal/MuModal"; -import Select from "react-select"; -import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader"; -import { MuButton } from "@/MuLearnComponents/MuButtons/MuButton"; -import toast from "react-hot-toast"; -import Modal from "@/MuLearnComponents/Modal/Modal"; -import { style } from "d3"; -import Footer from "../components/Footer"; -import Navbar from "../components/Navbar"; - -interface Option { - value: string; - label: string; -} -const DonationTest = () => { - const [amount, setAmount] = useState(); - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); - const [mobile, setMobile] = useState(); - const [pan, setPan] = useState(""); - - const callRazorpay = () => { - if (!amount || !name || !email || !mobile || !pan) { - toast.error("Please fill all the fields"); - return; - } - - submitForm({ - amount: amount, - name: name, - email: email, - mobile: mobile, - pan: pan - }); - }; - - const navigate = useNavigate(); - const customStyles: any = { - control: (provided: any) => ({ - ...provided, - backgroundColor: "#F3F3F4", - border: "none", - borderRadius: "10px", - fontSize: "12px", - fontWeight: "bold", - color: "#000", - width: "100%", - padding: ".3rem .4rem", - minWidth: "200px" - }), - placeholder: (provided: any) => ({ - ...provided, - color: "#000" - }), - indicatorSeparator: (provided: any) => ({ - ...provided, - display: "none" - }) - }; - - const [counters, setCounters] = useState([0, 0, 0, 0, 0]); // Initialize counters - const durationInSeconds = 3; // Duration in seconds - - const targetRef = useRef(null); // Create a ref - - const isElementInViewport = (el: HTMLElement | null) => { - if (!el) { - return false; - } - const rect = el.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= - (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= - (window.innerWidth || document.documentElement.clientWidth) - ); - }; - - return ( -
- - -
-
textured background
-
-
- - Donate to{" "} - - - Let's grow together -
-

- An informal mechanism for bringing together learners who are - interested in the same topic from across different fields - and disciplines. A fantastic way to spend a small amount of - time learning about new things with a group of people with - same interests! -

-
- -
-
-
callRazorpay()} - > - -
-

Details

- - setName(e.target.value)} - required - /> - - setEmail(e.target.value)} - required - /> - - setMobile(Number(e.target.value))} - required - /> - - setPan(e.target.value)} - required - /> -
- -
-

Donate

- -
- -

{"INR"}

- setAmount(Number(e.target.value))} - required - /> -
- -
- - -
-
- -
-
-
-
- -
-
- ); -}; - -export default DonationTest; From 5303c892da257dddac8a7483c7d6c7805733eb6c Mon Sep 17 00:00:00 2001 From: BlazeSN860 Date: Sun, 19 May 2024 22:22:30 +0530 Subject: [PATCH 4/5] fix(donation): added organization field. --- src/modules/Public/Donation/Donation.tsx | 106 +++++++++++--------- src/modules/Public/Donation/services/api.ts | 5 +- 2 files changed, 65 insertions(+), 46 deletions(-) diff --git a/src/modules/Public/Donation/Donation.tsx b/src/modules/Public/Donation/Donation.tsx index 7296b62f0..98f189baa 100644 --- a/src/modules/Public/Donation/Donation.tsx +++ b/src/modules/Public/Donation/Donation.tsx @@ -1,5 +1,4 @@ import { useEffect, useRef, useState } from "react"; -import { useNavigate } from "react-router-dom"; import toast from "react-hot-toast"; import Footer from "./components/Footer"; import Navbar from "./components/Navbar"; @@ -7,12 +6,14 @@ import { submitForm } from "./services/api"; import styles from "./Donation.module.css"; const Donation = () => { - const [amount, setAmount] = useState(10000); + const [amount, setAmount] = useState(); const [name, setName] = useState(""); const [email, setEmail] = useState(""); - const [mobile, setMobile] = useState(""); + const [mobile, setMobile] = useState(); const [pan, setPan] = useState(""); const [selectedAmount, setSelectedAmount] = useState(10000); + const [isOrganisation, setIsOrganisation] = useState(false); + const [company, setCompany] = useState(""); const callRazorpay = () => { if (!amount || !name || !email || !mobile || !pan) { @@ -20,48 +21,32 @@ const Donation = () => { return; } - if (!validatePAN(pan)) { - toast.error("Invalid PAN number"); - return; - } - - submitForm({ - amount: Number(amount), - name: name, - email: email, - mobile: Number(mobile), - pan: pan - }); - }; - - const validatePAN = (pan: string) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(pan); + // if (!validatePAN(pan)) { + // toast.error("Invalid PAN number"); + // return; + // } - const navigate = useNavigate(); - const customStyles: any = { - control: (provided: any) => ({ - ...provided, - backgroundColor: "#F3F3F4", - border: "none", - borderRadius: "10px", - fontSize: "12px", - fontWeight: "bold", - color: "#000", - width: "100%", - padding: ".3rem .4rem", - minWidth: "200px" - }), - placeholder: (provided: any) => ({ - ...provided, - color: "#000" - }), - indicatorSeparator: (provided: any) => ({ - ...provided, - display: "none" - }) + if (isOrganisation) { + submitForm({ + amount: amount, + name: name, + company: company, + email: email, + mobile: mobile, + pan: pan + }); + } else { + submitForm({ + amount: amount, + name: name, + email: email, + mobile: mobile, + pan: pan + }); + } }; - const [counters, setCounters] = useState([0, 0, 0, 0, 0]); // Initialize counters - const durationInSeconds = 3; // Duration in seconds + // const validatePAN = (pan: string) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(pan); const targetRef = useRef(null); // Create a ref @@ -147,6 +132,32 @@ const Donation = () => { onChange={e => setName(e.target.value)} required /> +
+ + setIsOrganisation(!isOrganisation) + } + > + +
+ {isOrganisation && ( + <> + + setCompany(e.target.value)} + required + /> + + )} { setMobile(e.target.value)} + onChange={e => setMobile(Number(e.target.value))} required /> @@ -189,6 +200,7 @@ const Donation = () => { className={styles.DonateButtonContainer} >