diff --git a/src/components/courses/coursesOverview/CourseCard.jsx b/src/components/courses/coursesOverview/CourseCard.jsx index e7c33fe..324eacf 100644 --- a/src/components/courses/coursesOverview/CourseCard.jsx +++ b/src/components/courses/coursesOverview/CourseCard.jsx @@ -31,7 +31,6 @@ const CourseCard = ({ course }) => { /> - {/* Details Course */}
@@ -73,7 +72,6 @@ const CourseCard = ({ course }) => {
- ); diff --git a/src/components/dashboard/PaymentRecordELements.jsx b/src/components/dashboard/PaymentRecordELements.jsx index d6c7813..f6dbd74 100644 --- a/src/components/dashboard/PaymentRecordELements.jsx +++ b/src/components/dashboard/PaymentRecordELements.jsx @@ -4,7 +4,7 @@ import TableBodyCell from "./shard/TableBodyCell"; const PaymentRecordELements = ({ payment }) => { const { _id, - name, + user, email, paymentVerified, paymentAmount, @@ -17,8 +17,8 @@ const PaymentRecordELements = ({ payment }) => { return ( {_id} - {name} - {email} + {user.name} + {user.email} {isPaymentVerified} {paymentAmount} $ {paymentStatus} diff --git a/src/components/index.js b/src/components/index.js index 223aa1e..4cc219d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -18,6 +18,7 @@ export { default as CourseEnrollmentDetails } from "./courses/courseDetails/Cour export { default as CoursesPageIntro } from "./courses/coursesOverview/CoursesPageIntro"; export { default as CourseCard } from "./courses/coursesOverview/CourseCard"; + export { default as FilterCourses } from "./courses/coursesOverview/FilterCourses"; //Blog @@ -84,5 +85,9 @@ export { default as StatsContainer } from "./dashboard/StatsContainer"; export { default as NavigationLink } from "./dashboard/shard/NavigationLink"; export { default as NavBarLink } from "./dashboard/shard/NavBarLink"; +//Payment +export { default as OrderDetails } from "./payment/OrderDetails"; +export { default as PaymentForm } from "./payment/PaymentForm"; + //Global export { default as Pagination } from "./common/Pagination"; diff --git a/src/components/payment/InfoItem.jsx b/src/components/payment/InfoItem.jsx new file mode 100644 index 0000000..b2b0113 --- /dev/null +++ b/src/components/payment/InfoItem.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +const InfoItem = ({ infoTitle, infoDetails }) => { + return ( +
+ + {infoTitle} : {infoDetails} + +
+ ); +}; + +export default InfoItem; diff --git a/src/components/payment/OrderDetails.jsx b/src/components/payment/OrderDetails.jsx new file mode 100644 index 0000000..2d7fc51 --- /dev/null +++ b/src/components/payment/OrderDetails.jsx @@ -0,0 +1,59 @@ +import InfoItem from "./InfoItem"; + +const OrderDetails = ({ course }) => { + return ( +
+
+

+ payment details +

+
+
+
+ + + + + + + +
+
+ {/* price ,taxes ,descount , total payment-amount */} +
+ + + + +
+
+
+
+ ); +}; + +export default OrderDetails; diff --git a/src/components/payment/PaymentForm.jsx b/src/components/payment/PaymentForm.jsx new file mode 100644 index 0000000..ecfb709 --- /dev/null +++ b/src/components/payment/PaymentForm.jsx @@ -0,0 +1,112 @@ +import { useNavigate } from "react-router-dom"; +import { useSelector, useDispatch } from "react-redux"; +import { Formik, Form } from "formik"; +import { toast } from "react-toastify"; +import { enrollUserToCourse } from "../../store/courseEnrollmentsSlice"; +import { customFetch } from "../../utils/customFetch"; +import CustomInput from "../../components/forms/CustomInput"; + +const PaymentForm = ({ coursePrice, courseDiscount, courseId }) => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { token } = useSelector((state) => state.userReducers); + return ( +
+
+

+ Payment method +

+
+ { + try { + await customFetch.post( + "paymentRecords", + { + ...values, + paymentAmount: (coursePrice - courseDiscount).toFixed(2), + course: courseId, + }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + + dispatch(enrollUserToCourse({ course: courseId })); + toast.success("Payment and enrollment Successfull"); + navigate(`/myPaiedCourse/${courseId}`); + window.location.reload(); + } catch (error) { + console.log(error); + toast.error("Payment and enrollment Failed"); + } + actions.setSubmitting(false); + actions.resetForm(); + }} + > + {({ handleSubmit, isSubmitting }) => ( +
+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ )} + +
+ ); +}; + +export default PaymentForm; diff --git a/src/lefted.text b/src/lefted.text index c829737..51b9e93 100644 --- a/src/lefted.text +++ b/src/lefted.text @@ -182,4 +182,116 @@ )} - \ No newline at end of file + + + +
+
+

+ Payment method +

+
+ { + try { + await customFetch.post( + "paymentRecords", + { + ...values, + course: courseId, + }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + + dispatch(enrollUserToCourse({ course: courseId })); + toast.success("Payment and enrollment Successfull"); + navigate(`/courses/${courseId}`); + } catch (error) { + console.log(error); + toast.error("Payment and enrollment Failed"); + } + actions.setSubmitting(false); + actions.resetForm(); + }} + > + {({ handleSubmit, isSubmitting }) => ( +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ )} + +
+ + + + + + + + + + + + diff --git a/src/pages/mainLayout/MyPaiedCourse.jsx b/src/pages/mainLayout/MyPaiedCourse.jsx index 4738714..dc02522 100644 --- a/src/pages/mainLayout/MyPaiedCourse.jsx +++ b/src/pages/mainLayout/MyPaiedCourse.jsx @@ -1,7 +1,6 @@ import { useSelector } from "react-redux"; import { useState, useEffect } from "react"; -import { useParams } from "react-router-dom"; - +import { useParams, Link } from "react-router-dom"; import { customFetch } from "../../utils/customFetch"; import RenderBox from "../../components/courses/courseContent/RenderBox"; import ReviewsContainer from "../../components/courses/courseReviews/ReviewsContainer"; @@ -28,19 +27,25 @@ function MyPaiedCourse() { }; fetchEnrolledCourse(); }, [courseId, token, user]); - - if (!isEnrolled) { - return ( -
-

You are not enrolled in this course

-
- ); - } - + console.log(isEnrolled); return ( <> - - + {isEnrolled ? ( + <> + + + + ) : ( +
+

You are not enrolled in this course

+ + Enroll now + +
+ )} ); } diff --git a/src/pages/mainLayout/PaymentGatWay.jsx b/src/pages/mainLayout/PaymentGatWay.jsx index a4aa4af..286c41c 100644 --- a/src/pages/mainLayout/PaymentGatWay.jsx +++ b/src/pages/mainLayout/PaymentGatWay.jsx @@ -7,9 +7,10 @@ import { useEffect, useState } from "react"; import { enrollUserToCourse } from "../../store/courseEnrollmentsSlice"; import { customFetch } from "../../utils/customFetch"; import CustomInput from "../../components/forms/CustomInput"; - +import { OrderDetails, PaymentForm } from "../../components"; const PaymentGatWay = () => { const dispatch = useDispatch(); + const [course, setCourse] = useState(null); const navigate = useNavigate(); const { courseId } = useParams(); const { token, user } = useSelector((state) => state.userReducers); @@ -18,113 +19,33 @@ const PaymentGatWay = () => { if (!user) { return navigate("/login"); } + const fetchCourseData = async () => { + try { + const res = await customFetch.get(`courses/${courseId}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + console.log(res); + setCourse(res.data.data.course); + } catch (error) { + console.log(error.response.data.message); + } + }; + fetchCourseData(); }, [user, navigate, courseId, token]); return ( -
-

Checkout

- { - try { - const res = await customFetch.post("paymentRecords", values, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - dispatch(enrollUserToCourse({ course: courseId })); - toast.success("Payment and enrollment Successfull"); - navigate(`/myPaiedCourse/${courseId}`); - } catch (error) { - console.log(error); - toast.error("Payment and enrollment Failed"); - } - actions.setSubmitting(false); - actions.resetForm(); - }} - > - {({ handleSubmit, isSubmitting }) => ( -
-
- -
- -
- -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
-
- )} - +
+

Checkout

+
+ + {course && } +
); };