add transperent color

Signed-off-by: Amit Amrutiya <[email protected]>
amitamrutiya · Jun 7, 2024 · 7693c7e · 7693c7e
1 parent cb79941
commit 7693c7e
Show file tree

Hide file tree

Showing 8 changed files with 12,264 additions and 25,813 deletions.
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/yarn.lock b/backend/yarn.lock
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/core/Auth/Template.jsx b/frontend/src/components/core/Auth/Template.jsx
@@ -3,55 +3,71 @@ import LoginForm from "./LoginForm"
 import SignupForm from "./SignupForm"
 import PropTypes from "prop-types"
 
-function Template ({ title, description1, description2, image, formType }) {
+function Template({ title, description1, description2, image, formType }) {
   // let { loading } = useSelector((state) => state.auth);
   const loading = false
 
   return (
     <div className="grid min-h-[calc(100vh-3.5rem)] place-items-center">
       {loading
         ? (
-        <div className="spinner"></div>
-          )
+          <div className="spinner"></div>
+        )
         : (
-        <div className="mx-auto flex w-11/12 max-w-maxContent flex-col-reverse justify-between gap-y-12 py-12 md:flex-row md:gap-y-0 md:gap-x-12">
-          <div className="mx-auto w-11/12 max-w-[450px] md:mx-0">
-            <h1 className="text-[1.875rem] font-semibold leading-[2.375rem] text-richblack-5">
-              {" "}
-              {title}{" "}
-            </h1>
-            <p className="mt-4 text-[1.125rem] leading-[1.625rem]">
-              <span className="text-richblack-100">{description1}</span>{" "}
-              <span className="font-edu-sa font-bold italic text-blue-100">
+          <div className="mx-auto flex w-11/12 max-w-maxContent flex-col-reverse justify-between gap-y-12 py-12 md:flex-row md:gap-y-0 md:gap-x-12">
+            <div className="mx-auto w-11/12 max-w-[450px] md:mx-0">
+              <h1 className="text-[1.875rem] font-semibold leading-[2.375rem] text-richblack-5">
                 {" "}
-                {description2}{" "}
-              </span>
-            </p>
+                {title}{" "}
+              </h1>
+              <p className="mt-4 text-[1.125rem] leading-[1.625rem]">
+                <span className="text-richblack-100">{description1}</span>{" "}
+                <span className="font-edu-sa font-bold italic text-blue-100">
+                  {" "}
+                  {description2}{" "}
+                </span>
+              </p>
 
-            {formType === "signup" ? <SignupForm /> : <LoginForm />}
-          </div>
+              {formType === "signup" ? <SignupForm /> : <LoginForm />}
+            </div>
+            <div className="flex flex-col space-y-10">
+              <div className="border-2 border-white bg-blue-500 bg-opacity-50 rounded-lg shadow-lg p-4 text-white max-w-[450px] mx-auto ">
+                <h1 className="text-2xl font-bold mb-4">Sample Account</h1>
+                <div className="flex sm:flex-row flex-col sm:space-x-4 space-y-2"> <div className="mb-2">
+                  <h3 className="text-xl font-semibold">Student:</h3>
+                  <p className="text-sm">Email: [email protected]</p>
+                  <p className="text-sm">Password: password</p>
+                </div>
+                  <div>
+                    <h3 className="text-xl font-semibold">Instructor:</h3>
+                    <p className="text-sm">Email: [email protected]</p>
+                    <p className="text-sm">Password: password</p>
+                  </div>
+                </div></div>
+
+              <div className="relative mx-auto w-11/12 max-w-[450px] md:mx-0">
+                <img
+                  src={frameImg}
+                  alt="Pattern"
+                  width={558}
+                  height={504}
+                  loading="lazy"
+                />{" "}
+                {/* image of bg-cart */}
+                <img
+                  src={image}
+                  alt="Students"
+                  width={558}
+                  height={490}
+                  loading="lazy"
+                  className="absolute -top-4 right-4 z-10"
+                />{" "}
+                {/* image of girl */}
+              </div>
+            </div>
 
-          <div className="relative mx-auto w-11/12 max-w-[450px] md:mx-0">
-            <img
-              src={frameImg}
-              alt="Pattern"
-              width={558}
-              height={504}
-              loading="lazy"
-            />{" "}
-            {/* image of bg-cart */}
-            <img
-              src={image}
-              alt="Students"
-              width={558}
-              height={490}
-              loading="lazy"
-              className="absolute -top-4 right-4 z-10"
-            />{" "}
-            {/* image of girl */}
           </div>
-        </div>
-          )}
+        )}
     </div>
   )
 }

diff --git a/frontend/src/services/operations/studentFeaturesAPI.js b/frontend/src/services/operations/studentFeaturesAPI.js
@@ -1,60 +1,62 @@
-import { toast } from "react-hot-toast"
-import { studentEndpoints } from "../apis"
-import { apiConnector } from "../apiconnector"
-import rzpLogo from "../../assets/Logo/rzp_logo.png"
-import { setPaymentLoading } from "../../slices/courseSlice"
-import { resetCart } from "../../slices/cartSlice"
+import { toast } from "react-hot-toast";
+import { studentEndpoints } from "../apis";
+import { apiConnector } from "../apiconnector";
+import rzpLogo from "../../assets/Logo/rzp_logo.png";
+import { setPaymentLoading } from "../../slices/courseSlice";
+import { resetCart } from "../../slices/cartSlice";
 
 const {
   COURSE_PAYMENT_API,
   COURSE_VERIFY_API,
   SEND_PAYMENT_SUCCESS_EMAIL_API,
-} = studentEndpoints
+} = studentEndpoints;
 
-function loadScript (src) {
+function loadScript(src) {
   return new Promise((resolve) => {
-    const script = document.createElement("script")
-    script.src = src
+    const script = document.createElement("script");
+    script.src = src;
 
     script.onload = () => {
-      resolve(true)
-    }
+      resolve(true);
+    };
     script.onerror = () => {
-      resolve(false)
-    }
-    document.body.appendChild(script)
-  })
+      resolve(false);
+    };
+    document.body.appendChild(script);
+  });
 }
 
-export async function buyCourse (
+export async function buyCourse(
   token,
   courses,
   userDetails,
   navigate,
-  dispatch,
+  dispatch
 ) {
-  const toastId = toast.loading("Loading...")
+  const toastId = toast.loading("Loading...");
   try {
+    console.log("This called");
     // load the script
     const res = await loadScript(
-      "https://checkout.razorpay.com/v1/checkout.js",
-    )
+      "https://checkout.razorpay.com/v1/checkout.js"
+    );
 
     if (!res) {
-      toast.error("RazorPay SDK failed to load")
-      return
+      toast.error("RazorPay SDK failed to load");
+      return;
     }
 
     // initiate the order
     const orderResponse = await apiConnector(
       "POST",
       COURSE_PAYMENT_API,
       { courses },
-      { Authorization: `Bearer ${token}` },
-    )
-
+      { Authorization: `Bearer ${token}` }
+    );
+    console.log("ORDER RESPONSE....", orderResponse);
     if (!orderResponse.data.success) {
-      throw new Error(orderResponse.data.message)
+      console.log("ORDER RESPONSE ERROR....", orderResponse.data.message);
+      throw new Error(orderResponse.data.message);
     }
 
     // options
@@ -75,26 +77,26 @@ export async function buyCourse (
         sendPaymentSuccessEmail(
           response,
           orderResponse.data.message.amount,
-          token,
-        )
+          token
+        );
         // verifyPayment
-        verifyPayment({ ...response, courses }, token, navigate, dispatch)
+        verifyPayment({ ...response, courses }, token, navigate, dispatch);
       },
-    }
-    const paymentObject = new window.Razorpay(options)
-    paymentObject.open()
+    };
+    const paymentObject = new window.Razorpay(options);
+    paymentObject.open();
     paymentObject.on("payment.failed", function (response) {
-      toast.error("oops, payment failed")
-      console.log(response.error)
-    })
+      toast.error("oops, payment failed");
+      console.log(response.error);
+    });
   } catch (error) {
-    console.log("PAYMENT API ERROR.....", error)
-    toast.error("Could not make Payment")
+    console.log("PAYMENT API ERROR.....", error);
+    toast.error("Could not make Payment");
   }
-  toast.dismiss(toastId)
+  toast.dismiss(toastId);
 }
 
-async function sendPaymentSuccessEmail (response, amount, token) {
+async function sendPaymentSuccessEmail(response, amount, token) {
   try {
     await apiConnector(
       "POST",
@@ -106,31 +108,31 @@ async function sendPaymentSuccessEmail (response, amount, token) {
       },
       {
         Authorization: `Bearer ${token}`,
-      },
-    )
+      }
+    );
   } catch (error) {
-    console.log("PAYMENT SUCCESS EMAIL ERROR....", error)
+    console.log("PAYMENT SUCCESS EMAIL ERROR....", error);
   }
 }
 
 // verify payment
-async function verifyPayment (bodyData, token, navigate, dispatch) {
-  const toastId = toast.loading("Verifying Payment....")
-  dispatch(setPaymentLoading(true))
+async function verifyPayment(bodyData, token, navigate, dispatch) {
+  const toastId = toast.loading("Verifying Payment....");
+  dispatch(setPaymentLoading(true));
   try {
     const response = await apiConnector("POST", COURSE_VERIFY_API, bodyData, {
       Authorization: `Bearer ${token}`,
-    })
+    });
     if (!response.data.success) {
-      throw new Error(response.data.message)
+      throw new Error(response.data.message);
     }
-    toast.success("Payment Successful, you are addded to the course")
-    navigate("/dashboard/enrolled-courses")
-    dispatch(resetCart())
+    toast.success("Payment Successful, you are addded to the course");
+    navigate("/dashboard/enrolled-courses");
+    dispatch(resetCart());
   } catch (error) {
-    console.log("PAYMENT VERIFY ERROR....", error)
-    toast.error("Could not verify Payment")
+    console.log("PAYMENT VERIFY ERROR....", error);
+    toast.error("Could not verify Payment");
   }
-  toast.dismiss(toastId)
-  dispatch(setPaymentLoading(false))
+  toast.dismiss(toastId);
+  dispatch(setPaymentLoading(false));
 }