Merge pull request #1561 from gtech-mulearn/dev

dev-server

src/App.tsx

@@ -45,6 +45,7 @@ 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 Refund from "./modules/Public/Donation/pages/Refund";
+import DonationSuccess from "./modules/Public/Donation/pages/DonationSuccess";
 
 const Profile = lazy(
  () => import("./modules/Dashboard/modules/Profile/pages/Profile")
@@ -268,6 +269,10 @@ function App() {
  path: "donation",
  element: <Donation />
  },
+ {
+ path: "donation/success",
+ element: <DonationSuccess />
+ },
  {
  path: "donation/refund",
  element: <Refund />

src/modules/Dashboard/modules/Wadhwani/index.module.css

@@ -3,45 +3,101 @@
  font-size: 3rem;
 }
 
+.course {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+ gap: 1rem; /* Combines row-gap and column-gap */
+ justify-items: center;
+}
+
+
+
+
+.cardHeading{
+ font-size: bold;
+ size: 10rem;
+}
+
 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
+ max-height: 20v;
 }
 
-.card {
- width: 20vw;
- margin: 1rem;
- padding: 1rem;
- border: 1px solid var(--Primary);
- border-radius: 5px;
- background-color: var(--White);
- color: black;
- cursor: pointer;
-}
 
-.card:hover {
- background-color: aliceblue;
-}
 
 @media screen and (max-width: 1300px) {
- .card {
+ .container {
  width: 30vw;
+ height: 45vw; /* Adjust height to maintain aspect ratio */
  }
 }
 
 @media screen and (max-width: 700px) {
  .wrapper h1 {
  font-size: 2rem;
  }
- .card {
+ .container {
  width: 70vw;
+ height: 105vw; /* Adjust height to maintain aspect ratio */
  }
 }
 
 @media screen and (max-width: 500px) {
- .card {
+ .container {
  width: 85vw;
+ height: 127.5vw; /* Adjust height to maintain aspect ratio */
  }
+}
+
+
+.second_view_container {
+ margin-top: 3rem;
+ padding: 2rem;
+ background-color: #ffffff;
+}
+
+
+
+.containercard {
+ font-family: Poppins, sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ padding: 2rem;
+ border-radius: 10px;
+ gap: 1.5rem;
+
+ box-shadow: 1px 1px 45px -5px rgb(0 0 0 / 8%);
+ -webkit-box-shadow: 1px 1px 45px -5px rgb(0 0 0 / 8%);
+ -moz-box-shadow: 1px 1px 45px -5px rgba(0, 0, 0, 0.08);
+}
+
+.title {
+ font-weight: 500;
+ font-size: 30px;
+ margin-bottom: 0.5rem;
+}
+
+.desc {
+ color: #404d61;
+ font-size: 0.9rem;
+}
+
+.duration {
+ color: #404d61;
+ opacity: 0.5;
+ font-weight: 500;
+ margin-top: 0.5rem;
+ font-size: 0.9rem;
+}
+
+.cta {
+ background: #456ff6;
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 5px;
 }

src/modules/Dashboard/modules/Wadhwani/index.tsx

@@ -1,18 +1,44 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import styles from "./index.module.css";
+import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
+import axios from "axios";
 import {
  getWadhwaniClientToken,
  getWadhwaniCourseLink,
  getWadhwaniCourses
-} from "./services/api";
-import toast from "react-hot-toast";
-import styles from "./index.module.css";
-import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
+} from './services/api'
+
+interface CourseCardProps {
+ title: string;
+ desc: string;
+ duration: string;
+ rootId: string;
+}
+
+interface WadhwaniCourseResponse {
+ courseId: string;
+ courseRootId: string;
+ courseName: string;
+ thumbnail: string;
+ description: string;
+}
 
+interface WadhwaniSheetResponse {
+ courseId: string;
+ courseRootId: string;
+ courseName: string;
+ thumbnail: string;
+ description: string;
+ CourseDuration: string;
+}
 
-const Wadhwani = () => {
- const [data, setData] = useState<wadhwaniCourseResponse[]>([]);
+const Wadhwani: React.FC = () => {
+ const [data, setData] = useState<WadhwaniCourseResponse[]>([]);
  const [clientToken, setClientToken] = useState("");
- const [isLoading,setIsLoading]=useState(true)
+ const [isLoading, setIsLoading] = useState(true);
+ const [sheet, setSheet] = useState<WadhwaniSheetResponse[]>([]);
+
 
  useEffect(() => {
  fetchData();
@@ -30,41 +56,81 @@ const Wadhwani = () => {
  if (error) {
  toast.error(error);
  } else if (courses) {
+ try {
+ setIsLoading(true);
+ const response = await axios.get(
+ "https://opensheet.elk.sh/1LEvZozIVVquXjSvtptQcjiU0_WFaxVuEYBCYyCdsCtY/sheet"
+ );
+ setSheet(response.data);
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setIsLoading(false);
+ }
  setData(courses);
  }
  setIsLoading(false)
  }
  };
 
- const handleCourseSelection = async (course: wadhwaniCourseResponse) => {
- const { response, error } = await getWadhwaniCourseLink(
- clientToken,
- course.courseRootId
- );
+ const handleCourseSelection = async (courseRootId: string) => {
+ const { response, error } = await getWadhwaniCourseLink(clientToken, courseRootId);
  if (error) {
  toast.error(error);
+ return null;
  } else if (response) {
- window.open(response.data, "_blank", "noopener,noreferrer");
+ console.log(response.data)
+ window.open(response.data, "_blank");
  }
  };
 
+
+function getRootIdByTitle(titleToSearch: string): string {
+ const course = data.find(course => course.courseName === titleToSearch);
+ console.log(course?.courseName + titleToSearch)
+ return course ? course.courseRootId : "null";
+}
+
+ function stringSlice(inputString: string): string {
+ return inputString.substring(3, 200);
+ }
+ const CourseCard: React.FC<CourseCardProps> = ({ title, desc, duration, rootId }) => {
+ return (
+ <div className={styles.containercard}>
+ <div className={styles.details}>
+ <p className={styles.title}>{title}</p>
+ <p className={styles.desc}>{desc}</p>
+ <p className={styles.duration}>{duration}hrs</p>
+ </div>
+ <div onClick={() => handleCourseSelection(rootId)} className={styles.cta}>
+ Checkout Courses
+ </div>
+ </div>
+ );
+ };
+
  return (
  <div className={styles.wrapper}>
  <h1>Wadhwani Foundation Courses</h1>
- <div className={styles.container}>
- {isLoading?<MuLoader/>:
- data.map(course => (
- <div
- key={course.courseId}
- className={styles.card}
- onClick={() => handleCourseSelection(course)}
- >
- <h2>{course.courseName}</h2>
+ <div className={styles.second_view_container}>
+ <div className={styles.second_view}>
+ <div className={styles.courses_container}>
+ <div className={styles.course}>
+ {sheet.map((sheet) => (
+ <CourseCard
+ key={sheet.courseId}
+ title={sheet.courseName}
+ desc={stringSlice(sheet.description)}
+ duration={sheet.CourseDuration}
+ rootId={getRootIdByTitle(sheet.courseName)}
+ />
+ ))}
+ </div>
  </div>
- ))}
+ </div>
  </div>
  </div>
  );
 };
 
-export default Wadhwani;
+export default Wadhwani;

src/modules/Public/Donation/Donation.tsx

@@ -255,13 +255,31 @@ const Donation = () => {
  <div className={styles.TermsContainer}>
  <input id="check" type="checkbox" required></input>
  <label htmlFor="check">
- By clicking "Donate", you agree to our <Link to="https://mulearn.org/termsandconditions" target="_blank" rel="noopener noreferrer" >
- <u>
- Terms and
- Conditions
- </u>
- </Link>, <Link to="https://mulearn.org/privacypolicy" target="_blank" rel="noopener noreferrer" ><u>Privacy Policy</u></Link> and <Link to="./refund" target="_blank" rel="noopener noreferrer" ><u>Refund Policy</u></Link>.
- Please read these documents carefully before
+ By clicking "Donate", you agree to our{" "}
+ <Link
+ to="https://mulearn.org/termsandconditions"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <u>Terms and Conditions</u>
+ </Link>
+ ,{" "}
+ <Link
+ to="https://mulearn.org/privacypolicy"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <u>Privacy Policy</u>
+ </Link>{" "}
+ and{" "}
+ <Link
+ to="./refund"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <u>Refund Policy</u>
+ </Link>
+ . Please read these documents carefully before
  completing your donation.
  </label>
  </div>