-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: Update CourseCard and PaymentRecordELements components
- Loading branch information
1 parent
d3d9819
commit 5f20d2f
Showing
9 changed files
with
349 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from "react"; | ||
|
|
||
| const InfoItem = ({ infoTitle, infoDetails }) => { | ||
| return ( | ||
| <div className="flex flex-col mx-3 mt-6"> | ||
| <span className="font-bold "> | ||
| {infoTitle} : <span className="font-normal ">{infoDetails}</span> | ||
| </span> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default InfoItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import InfoItem from "./InfoItem"; | ||
|
|
||
| const OrderDetails = ({ course }) => { | ||
| return ( | ||
| <div className="w-[100%] sm:w-[50%] ml-5 "> | ||
| <div className="mb-6"> | ||
| <h3 className="text-center font-bold text-xl italic"> | ||
| payment details | ||
| </h3> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <div className="flex flex-col justify-center"> | ||
| <InfoItem infoTitle="Course Name" infoDetails={course?.title} /> | ||
| <InfoItem | ||
| infoTitle="Course Price" | ||
| infoDetails={`${course?.price} $`} | ||
| /> | ||
| <InfoItem | ||
| infoTitle="Course Duration" | ||
| infoDetails={`${course?.duration} h`} | ||
| /> | ||
| <InfoItem | ||
| infoTitle="Course Category" | ||
| infoDetails={course?.category} | ||
| /> | ||
| <InfoItem | ||
| infoTitle="Course Language" | ||
| infoDetails={course?.language} | ||
| /> | ||
| <InfoItem infoTitle="Course Level" infoDetails={course?.skillLevel} /> | ||
| <InfoItem | ||
| infoTitle="Course Rating" | ||
| infoDetails={course?.averageRating} | ||
| /> | ||
| </div> | ||
| <div> | ||
| {/* price ,taxes ,descount , total payment-amount */} | ||
| <div className="flex flex-col justify-center"> | ||
| <InfoItem infoTitle="Price" infoDetails={`${course?.price} $`} /> | ||
| <InfoItem infoTitle="Taxes" infoDetails={`0 $`} /> | ||
| <InfoItem | ||
| infoTitle="Discount" | ||
| infoDetails={`${course?.discount} $`} | ||
| /> | ||
| <InfoItem | ||
| infoTitle="Total Payment Amount" | ||
| infoDetails={`${(course | ||
| ? course.price - course.discount | ||
| : 0 | ||
| ).toFixed(2)} $`} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default OrderDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="w-[100%] sm:w-[50%]"> | ||
| <div className="mb-6"> | ||
| <h3 className="text-center font-bold text-xl italic"> | ||
| Payment method | ||
| </h3> | ||
| </div> | ||
| <Formik | ||
| initialValues={{ | ||
| cardName: "", | ||
| cardNumber: "", | ||
| cardCvv: "", | ||
| cardExpiryDate: "", | ||
| }} | ||
| onSubmit={async (values, actions) => { | ||
| 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 }) => ( | ||
| <Form onSubmit={handleSubmit}> | ||
| <div className="mt-5"> | ||
| <CustomInput | ||
| name="cardName" | ||
| type="text" | ||
| placeholder="Name on Card" | ||
| label="Name on the card" | ||
| required | ||
| /> | ||
|
|
||
| <CustomInput | ||
| name="cardNumber" | ||
| type="text" | ||
| placeholder="Visa Card Number" | ||
| label="Card Number" | ||
| required | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="mt-5"> | ||
| <CustomInput | ||
| name="cardExpiryDate" | ||
| type="month" | ||
| placeholder="Card Expiry Date" | ||
| label="Card Expiry Date" | ||
| requireds | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="mt-5"> | ||
| <CustomInput | ||
| name="cardCvv" | ||
| type="text" | ||
| placeholder="Card Cvv 123" | ||
| label="Card CVV Number" | ||
| required | ||
| pattern="[0-9]{3}" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="mt-2 flex justify-end"> | ||
| <button | ||
| disabled={isSubmitting} | ||
| type="submit" | ||
| class="mt-5 w-full font-bold bg-blue-500 text-white px-4 py-2 hover:bg-blue-800 dark:text-white text-center" | ||
| > | ||
| Complete payment | ||
| </button> | ||
| </div> | ||
| </Form> | ||
| )} | ||
| </Formik> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PaymentForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.