diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md deleted file mode 100644 index c3dd9cfaa..000000000 --- a/.github/ISSUE_TEMPLATE/feature.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -name: Mulearn Frontend -about: MuLearn Community Issues Template -title: "[Mulearn] Button for likes" -labels: MuLearn Community -assignees: '' - ---- - -## Description -[Provide a brief description of the feature, including why it is needed and what it will accomplish. You can skip any of Goals, Expected Outcome, Implementation Details, Mockups / Wireframes if they are irrelevant. Please note that this section of the ticket is suggestive & you can structure it as per your prerogative.] - -## Goals -- [ ] [Goal 1] -- [ ] [Goal 2] -- [ ] [Goal 3] -- [ ] [Goal 4] -- [ ] [Goal 5] - -## Expected Outcome -[Describe in detail what the final product or result should look like and how it should behave.] - -## Acceptance Criteria -- [ ] [Criteria 1] -- [ ] [Criteria 2] -- [ ] [Criteria 3] -- [ ] [Criteria 4] -- [ ] [Criteria 5] - -## Implementation Details -[List any technical details about the proposed implementation, including any specific technologies that will be used.] - -## Mockups / Wireframes -[Include links to any visual aids, mockups, wireframes, or diagrams that help illustrate what the final product should look like. This is not always necessary, but can be very helpful in many cases.] - ---- -[Please note that the below section of the ticket ****has to be in the format as mentioned as it is key to enabling proper listing of the project.**** Please only choose the options mentioned under the headings wherever applicable.] - -### Product Name -[Product Name: For eg: Beckn, Sunbird Obsrv etc] - - -### Project Name -[Project Name: Descriptive of the ticket] - - -### Tech Skills Needed: -[Required technical skills for the project] - -### Mentor(s) -[@Mentor1] [@Mentor2] [@Mentor3] - -### Complexity -Pick one of [High]/[Medium]/[Low] - -### Category -Pick one or more of [CI/CD], [Integrations], [Performance Improvement], [Security], [UI/UX/Design], [Bug], [Feature], [Documentation], [Deployment], [Test], [PoC] - -### Sub Category -Pick one or more of [API], [Database], [Analytics], [Refactoring], [Data Science], [Machine Learning], [Accessibility], [Internationalization], [Localization], [Frontend], [Backend], [Mobile], [SEO], [Configuration], [Deprecation], [Breaking Change], [Maintenance], [Support], [Question], [Technical Debt], [Beginner friendly], [Research], [Reproducible], [Needs Reproduction]. diff --git a/.github/ISSUE_TEMPLATE/feature_form.yml b/.github/ISSUE_TEMPLATE/feature_form.yml index c8deb9e95..1caa6b5e4 100644 --- a/.github/ISSUE_TEMPLATE/feature_form.yml +++ b/.github/ISSUE_TEMPLATE/feature_form.yml @@ -1,73 +1,46 @@ -name: Mulearn Ticket Form -description: Create a new Ticket for MuLearn Community -title: "[MuLearn Community]: " -labels: ["New Login Page"] +name: Mulearn Feature Request +description: Create a new Feature Request for MuLearn Community +labels: ["enhancement"] body: + - type: markdown + attributes: + value: | + Please fill out the sections below to properly describe the new feature you are suggesting. + - type: textarea - id: ticket-description + id: description validations: required: true attributes: - label: Ticket Contents - value: | - ## Description - [Provide a brief description of the feature, including why it is needed and what it will accomplish.] + label: Description + placeholder: | + A button in the screen X that allows to do Y - type: textarea - id: ticket-goals + id: goals validations: required: true attributes: label: Goals description: List the goals of the feature. - value: | - ## Goals - - [ ] Goal 1 - - [ ] Goal 2 - - [ ] Goal 3 - - - type: textarea - id: ticket-expected-outcome - attributes: - label: Expected Outcome - description: Describe in detail what the final product or result should look like and how it should behave. - - - type: textarea - id: ticket-acceptance-criteria - attributes: - label: Acceptance Criteria - description: List the acceptance criteria for this feature. + placeholder: | + - Goal 1 + - Goal 2 - type: textarea - id: ticket-implementation-details + id: implementation-details validations: required: true attributes: label: Implementation Details description: List any technical details about the proposed implementation, including any specific technologies that will be used. - - - type: textarea - id: ticket-mockups - attributes: - label: Mockups/Wireframes - description: Include links to any visual aids, mockups, wireframes, or diagrams that help illustrate what the final product should look like. This is not always necessary, but can be very helpful in many cases. - - - type: input - id: ticket-product - attributes: - label: Product Name - placeholder: Enter Product Name - validations: - required: true - - - type: input - id: ticket-governance-domain - attributes: - label: Domain - placeholder: Enter Area of Governance + placeholder: | + - Implementation Detail 1 + - Implementation Detail 2 + - also add images is possible - type: dropdown - id: ticket-technical-skills-required + id: skills-required attributes: label: Tech Skills Needed description: Select the technologies needed for this ticket (use Ctrl or Command to select multiple) @@ -163,6 +136,8 @@ body: attributes: label: Mentor(s) description: Please tag relevant mentors for the ticket + placeholder: | + @Jenin82 validations: required: true @@ -180,21 +155,22 @@ body: required: true - type: dropdown - id: ticket-category + id: category attributes: label: Category description: Choose the categories that best describe your ticket multiple: true options: - API - - Analytics - - Accessibility - Backend - Database - Documentation - Delpoyment - Frontend - Testing + - Bot + - UI + - UX - Other validations: required: true diff --git a/.github/ISSUE_TEMPLATE/new-feature.yml b/.github/ISSUE_TEMPLATE/new-feature.yml deleted file mode 100644 index 24ee489d9..000000000 --- a/.github/ISSUE_TEMPLATE/new-feature.yml +++ /dev/null @@ -1,36 +0,0 @@ -name: New feature -description: Suggest or request a new feature -labels: ["enhancement"] -body: - - type: markdown - attributes: - value: | - Please fill out the sections below to properly describe the new feature you are suggesting. - - type: textarea - id: description - attributes: - label: Describe the feature - placeholder: A button in the screen X that allows to do Y - validations: - required: true - - type: textarea - id: rationale - attributes: - label: It should be implemented because - placeholder: It will allow to do Y that is needed for Z - - type: textarea - id: context - attributes: - label: Additional context - placeholder: | - Add any other context or screenshots about the feature request here. - - type: dropdown - id: assign - attributes: - label: "Would you like to work on this issue?" - options: - - "Yes" - - type: markdown - attributes: - value: | - Thanks for your suggestion! Let's see together if it can be implemented. diff --git a/package-lock.json b/package-lock.json index a69d89f04..ccb8b324c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mulearnfrontend", - "version": "0.0.0", + "version": "0.0.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mulearnfrontend", - "version": "0.0.0", + "version": "0.0.4", "dependencies": { "@chakra-ui/react": "^2.6.1", "@emotion/react": "^11.10.6", diff --git a/src/App.tsx b/src/App.tsx index 926761885..db9644c89 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,6 +44,10 @@ 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") ); @@ -266,6 +270,14 @@ function App() { path: "donation", element: }, + { + path: "donation-test", + element: + }, + { + path: "donation/refund", + element: + }, { path: "/", element: , diff --git a/src/modules/Dashboard/modules/ManageUsers/UserForm.tsx b/src/modules/Dashboard/modules/ManageUsers/UserForm.tsx index b0cd91b5b..28e333040 100644 --- a/src/modules/Dashboard/modules/ManageUsers/UserForm.tsx +++ b/src/modules/Dashboard/modules/ManageUsers/UserForm.tsx @@ -33,7 +33,7 @@ type InitialLocationData = { state: { label: string; value: string }; district: { label: string; value: string }; } | null; -const requiredFields = ["full_name", "email", "mobile"]; +const requiredFields = ["full_name", "email"]; const UserForm = forwardRef( (props: Props & { closeModal: () => void }, ref: any) => { const [initialData, setInitialData] = diff --git a/src/modules/Dashboard/modules/Wadhwani/index.tsx b/src/modules/Dashboard/modules/Wadhwani/index.tsx index 4a4784d63..7196b6d71 100644 --- a/src/modules/Dashboard/modules/Wadhwani/index.tsx +++ b/src/modules/Dashboard/modules/Wadhwani/index.tsx @@ -6,10 +6,13 @@ import { } from "./services/api"; import toast from "react-hot-toast"; import styles from "./index.module.css"; +import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader"; + const Wadhwani = () => { const [data, setData] = useState([]); const [clientToken, setClientToken] = useState(""); + const [isLoading,setIsLoading]=useState(true) useEffect(() => { fetchData(); @@ -29,6 +32,7 @@ const Wadhwani = () => { } else if (courses) { setData(courses); } + setIsLoading(false) } }; @@ -48,7 +52,8 @@ const Wadhwani = () => {

Wadhwani Foundation Courses

- {data.map(course => ( + {isLoading?: + data.map(course => (
{ try { const response = await privateGateway.post( @@ -47,6 +47,7 @@ export const getWadhwaniCourseLink = async ( clientToken: string, courseId: string ) => { + const toastId=toast.loading("Fetching course link...") try { const response = await privateGateway.post( dashboardRoutes.getWadhwaniCourseLink, @@ -61,12 +62,16 @@ export const getWadhwaniCourseLink = async ( const message: wadhwaniCourseRedirectResponse = response?.data?.response; if (message.data?.error?.code) { return { response: null, error: message.data.error.description }; + }else{ + toast.success("Course link opened successfully!",{id:toastId}) } return { response: message, error: null }; - } catch (err: unknown) { + } catch (err: unknown) { + toast.error("Please try again later.",{id:toastId}) const error = err as AxiosError; if (error?.response) { throw error; + } else { return { response: null, error: error.message }; } diff --git a/src/modules/Public/Donation/assets/LC3.webp b/src/modules/Public/Donation/assets/LC3.webp new file mode 100644 index 000000000..1a7aa4982 Binary files /dev/null and b/src/modules/Public/Donation/assets/LC3.webp differ diff --git "a/src/modules/Public/Donation/assets/\302\265.webp" "b/src/modules/Public/Donation/assets/\302\265.webp" new file mode 100644 index 000000000..e1f19d2d7 Binary files /dev/null and "b/src/modules/Public/Donation/assets/\302\265.webp" differ diff --git "a/src/modules/Public/Donation/assets/\302\265Learn.webp" "b/src/modules/Public/Donation/assets/\302\265Learn.webp" new file mode 100644 index 000000000..d180566f7 Binary files /dev/null and "b/src/modules/Public/Donation/assets/\302\265Learn.webp" differ diff --git a/src/modules/Public/Donation/components/Footer.module.css b/src/modules/Public/Donation/components/Footer.module.css new file mode 100644 index 000000000..cdc22543f --- /dev/null +++ b/src/modules/Public/Donation/components/Footer.module.css @@ -0,0 +1,125 @@ +.footer { + padding: 5rem; + background: #e0eeff; + color: #000; +} +.footer > hr { + border: 1px solid #000; + opacity: 0.2; + margin: 5rem 0; +} +.container { + display: flex; + gap: 7rem; +} + +.centerContainer { + justify-content: center; +} + +.footerSection { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.footerLogo { + display: flex; + flex-direction: column; + width: 25%; + padding: 0 2rem; + gap: 2rem; + font-size: 0.8rem; +} + +.footerLogo img { + width: 60%; +} + +.footerLogo p { + text-align: left; +} + +.title { + font-weight: 600; +} +.links { + display: flex; + flex-direction: column; + gap: 1rem; + font-size: 0.8rem; +} +.links > a:hover { + color: #2e85fe; +} +.socialMedia { + display: flex; + gap: 2rem; + font-size: x-large; +} +.legal { + display: flex; + gap: 1.5rem; + font-size: 0.8rem; +} +.copyRight { + font-size: 0.9rem; +} +@media screen and (max-width: 1000px) { + .container { + flex-direction: column; + align-items: center; + gap: 4rem; + } + + .footerLogo { + width: 100%; + max-width: 30rem; + align-items: center; + margin: 3rem; + } + + .footerLogo p { + text-align: center; + } + + .footerSection { + display: none; + } + .footer > hr { + display: none; + } + .socialMedia { + justify-content: center; + } + .legal { + justify-content: center; + flex-direction: column; + align-items: center; + } + .copyRight { + text-align: center; + } +} +@media screen and (max-width: 800px) { + .container { + gap: 2rem; + } + + .footerLogo { + width: 19rem; + } + + .footerLogo p { + display: none; + } +} +@media screen and (max-width: 380px) { + .socialMedia { + font-size: large; + } + + .footerLogo { + width: 15rem; + } +} diff --git a/src/modules/Public/Donation/components/Footer.tsx b/src/modules/Public/Donation/components/Footer.tsx new file mode 100644 index 000000000..6b0c441cf --- /dev/null +++ b/src/modules/Public/Donation/components/Footer.tsx @@ -0,0 +1,116 @@ +import styles from "./Footer.module.css"; +import { footerData } from "../services/footerData"; +import { + RiWhatsappFill, + RiTwitterFill, + RiInstagramFill, + RiLinkedinBoxFill, + RiYoutubeFill, + RiFacebookBoxFill +} from "react-icons/ri"; +export default function Footer() { + return ( + + ); +} diff --git a/src/modules/Public/Donation/components/Navbar.module.css b/src/modules/Public/Donation/components/Navbar.module.css new file mode 100644 index 000000000..9f546d4a9 --- /dev/null +++ b/src/modules/Public/Donation/components/Navbar.module.css @@ -0,0 +1,39 @@ +.LClandingPageNav { + position: absolute; + top: 0; + width: 100%; + z-index: 1; + display: flex; + justify-content: space-between; + padding: 3rem 5rem; +} + +.LClandingPageNav .navLinks, +.LClandingPageNav .navLinks div { + display: flex; + align-items: center; + gap: 2rem; +} + +.LClandingPageNav .navLinks div { + font-weight: 600; + color: #00204c; +} + +.LClandingPageNav .navLinks button { + background: var(--blue); + border-radius: var(--borderRadius); + padding: 0.5rem 1rem; + font-size: 0.8rem; + color: #fff; +} + +@media (width <=820px) { + .LClandingPageNav { + padding: 3rem 2rem; + } + + .LClandingPageNav .navLinks { + display: none; + } +} diff --git a/src/modules/Public/Donation/components/Navbar.tsx b/src/modules/Public/Donation/components/Navbar.tsx new file mode 100644 index 000000000..e90544b5b --- /dev/null +++ b/src/modules/Public/Donation/components/Navbar.tsx @@ -0,0 +1,30 @@ +import styles from "./Navbar.module.css"; +import { Link, useNavigate} from "react-router-dom"; + + +export default function Navbar(){ + const navigate = useNavigate(); + + return( + + ) +} \ No newline at end of file diff --git a/src/modules/Public/Donation/components/RefundText.module.css b/src/modules/Public/Donation/components/RefundText.module.css new file mode 100644 index 000000000..6164d26ec --- /dev/null +++ b/src/modules/Public/Donation/components/RefundText.module.css @@ -0,0 +1,138 @@ +h1, +h2, +h3 { + letter-spacing: -0.01em; + line-height: 1.2; + font-weight: 600; + margin-bottom: 1rem; +} + +.pageTitle { + font-size: 2.5rem; + font-weight: 700; + margin-top: 0; + margin-bottom: 0.75em; +} + +h1 { + font-size: 1.875rem; + margin-top: 1.875rem; +} + +h2 { + font-size: 1.5rem; + margin-top: 1.5rem; +} + +h3 { + font-size: 1.25rem; + margin-top: 1.25rem; +} + +ol, +ul { + margin: 0; + margin-block-start: 0.6em; + margin-block-end: 0.6em; +} + +li > ol:first-child, +li > ul:first-child { + margin-block-start: 0.6em; +} + +ul > li { + list-style: disc; +} + +ul.to-do-list { + padding-inline-start: 0; +} + +ul.to-do-list > li { + list-style: none; +} + +.to-do-children-checked { + text-decoration: line-through; + opacity: 0.375; +} + +ul.toggle > li { + list-style: none; +} + +ul { + padding-inline-start: 1.7em; +} + +ul > li { + padding-left: 0.1em; +} + +ol { + padding-inline-start: 1.6em; +} + +ol > li { + padding-left: 0.2em; +} + +.mono ol { + padding-inline-start: 2em; +} + +.mono ol > li { + text-indent: -0.4em; +} + +.toggle { + padding-inline-start: 0em; + list-style-type: none; +} + +/* Indent toggle children */ +.toggle > li > details { + padding-left: 1.7em; +} + +.toggle > li > details > summary { + margin-left: -1.1em; +} +.pageDescription { + margin-bottom: 2em; +} +.sans { + font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", + Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", + "Segoe UI Symbol"; +} + +@media (width<=550px) { + .pageTitle { + font-size: 1.6rem; + } + + h1 { + font-size: 1.4rem; + margin-top: 1.875rem; + } + + h2 { + font-size: 1.1rem; + margin-top: 1.5rem; + } + + h3 { + font-size: 0.9rem; + margin-top: 1.25rem; + } + + p { + font-size: 0.9rem; + } + + li { + font-size: 0.8rem; + } +} diff --git a/src/modules/Public/Donation/components/RefundText.tsx b/src/modules/Public/Donation/components/RefundText.tsx new file mode 100644 index 000000000..393252393 --- /dev/null +++ b/src/modules/Public/Donation/components/RefundText.tsx @@ -0,0 +1,191 @@ +import styles from "./RefundText.module.css"; + + +export default function RefundPage(){ + return( +
+
+

+ Donation Refund Policy +

+

+
+
+

+ At Mulearn Foundation, we are dedicated to maintaining + transparency and integrity in all our interactions, + including donation processing. We deeply value the support + of our donors and are committed to handling all donations + with care and accountability. While we do not typically + offer refunds on donations, we understand that circumstances + may arise where a donor may request a refund. +

+

+ Receipt Issuance and Verification +

+
    +
  1. + Receipts: Upon making a donation, donors will receive a + receipt from Mulearn Foundation acknowledging their + contribution. This receipt serves as proof of donation. +
    2. +
+
    +
  1. + Verification: In the event of a refund request, donors + must provide the receipt received at the time of + donation for verification purposes. +
    2. +
+

+ Refund Eligibility +

+
    +
  1. + Notification Period: Donors seeking a refund must + contact Mulearn Foundation within 7 days of the donation + date to initiate the refund process. Refund requests + made after this period may not be considered. +
    2. +
+
    +
  1. + Valid Reasons: Refunds may be considered under the + following circumstances: +
    2. +
+

+ - Unauthorized transactions or fraudulent activity. +

+

+ - Errors in the donation amount. +

+

+ - Dissatisfaction with the services provided under a + subscription-based donation (see below for + subscription-based donations policy). +

+

+ Subscription-Based Donations +

+
    +
  1. + Subscription Terms: Mulearn Foundation offers + subscription-based donation options where donors commit + to regular contributions over a specified period. +
    2. +
+
    +
  1. + Cancellation: Donors subscribed to recurring donations + have the option to cancel their subscription at any + time. Upon cancellation, future donations will be + discontinued, but previous donations are generally + non-refundable. +
    2. +
+

+ Refund Process +

+
    +
  1. + Request Submission: Donors must submit their refund + request to Mulearn Foundation via refunds@mulearn.org, + providing details of the donation, the reason for the + refund request, and a copy of the donation receipt. +
    2. +
+
    +
  1. + Review and Approval: Mulearn Foundation will review the + refund request and may require additional information + for verification purposes. Refunds will be approved at + the discretion of the Foundation. +
    2. +
+
    +
  1. + Refund Issuance: Upon approval, refunds will be + processed using the original payment method, unless + otherwise specified by the donor. +
    2. +
+

+ Contact Information +

+

+ For any inquiries or refund requests, please contact us at: +

+

+ Mulearn Foundation +

+

+ GTech Nila Building, +

+

+ Phase 1, Technopark, +

+

+ Karyavattom, Trivandrum +

+

+ Policy Revision +

+

+ Mulearn Foundation reserves the right to modify or update + this donation refund policy at any time without prior + notice. Any revisions will be effective immediately upon + posting on our website or other communication channels. +

+

+ Last Updated: 15 May 2024 +

+
+
+ ) +}; \ No newline at end of file diff --git a/src/modules/Public/Donation/pages/Donate.module.css b/src/modules/Public/Donation/pages/Donate.module.css new file mode 100644 index 000000000..90fd1c359 --- /dev/null +++ b/src/modules/Public/Donation/pages/Donate.module.css @@ -0,0 +1,349 @@ +.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 new file mode 100644 index 000000000..6f6fe639f --- /dev/null +++ b/src/modules/Public/Donation/pages/Donate.tsx @@ -0,0 +1,197 @@ +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; diff --git a/src/modules/Public/Donation/pages/Refund.tsx b/src/modules/Public/Donation/pages/Refund.tsx new file mode 100644 index 000000000..27d2e64c8 --- /dev/null +++ b/src/modules/Public/Donation/pages/Refund.tsx @@ -0,0 +1,21 @@ +import styles from "./Donate.module.css"; +import Footer from "../components/Footer"; +import Navbar from "../components/Navbar"; +import RefundPage from "../components/RefundText"; + +const Refund = () => { + return( +
+ +
textured background
+
+
+ +
+
+
+ ) +}; + +export default Refund \ No newline at end of file diff --git a/src/modules/Public/Donation/services/footerData.ts b/src/modules/Public/Donation/services/footerData.ts new file mode 100644 index 000000000..ac786c993 --- /dev/null +++ b/src/modules/Public/Donation/services/footerData.ts @@ -0,0 +1,32 @@ +export const footerData = [ + { + name: "Connect", + links: [ + { + name: "About", + url: "https://mulearn.org/" + }, + { + name: "Mentors", + url: "https://learn.mulearn.org/mentors" + }, + { + name: "Careers", + url: "https://mulearn.org/careers" + } + ] + }, + { + name: "Legal", + links: [ + { + name: "Terms and Conditions", + url: "https://mulearn.org/termsandconditions" + }, + { + name: "Privacy Policy", + url: "https://mulearn.org/privacypolicy" + } + ] + } +];