diff --git a/client/src/components/pages/course-pages/payment-confirmation-modal.tsx b/client/src/components/pages/course-pages/payment-confirmation-modal.tsx index 470c12d..bcd0fb5 100644 --- a/client/src/components/pages/course-pages/payment-confirmation-modal.tsx +++ b/client/src/components/pages/course-pages/payment-confirmation-modal.tsx @@ -1,4 +1,4 @@ -import React, { useState, Fragment } from "react"; +import React, { useState, useEffect, Fragment } from "react"; import { Button, Dialog, @@ -9,7 +9,7 @@ import { } from "@material-tailwind/react"; import { useNavigate, useParams } from "react-router-dom"; import { ExclamationCircleIcon } from "@heroicons/react/24/outline"; -import { formatToINR } from "../../../utils/helpers"; +import { formatToINR, formatTime } from "../../../utils/helpers"; import { enrollStudent } from "../../../api/endpoints/course/course"; import { toast } from "react-toastify"; import { FaSpinner } from "react-icons/fa"; @@ -35,7 +35,11 @@ const PaymentConfirmationModal: React.FC = ({ const { courseId } = useParams(); const [isLoading, setIsLoading] = useState(false); const navigate = useNavigate(); - const handleClose = () => setOpen(false); + const handleClose = () => setOpen(false); + const offerExpiration = "2023-08-13T22:59:59.000Z"; + + const [timeLeft, setTimeLeft] = useState(0); + const handleConfirmPayment = async () => { try { setIsLoading(true); @@ -64,57 +68,94 @@ const PaymentConfirmationModal: React.FC = ({ } }; const isFreeCourse = courseDetails?.isPaid === false; + + useEffect(() => { + if (!isFreeCourse) { + const offerEndTime = new Date(offerExpiration).getTime(); + const currentTime = new Date().getTime(); + + const timeRemaining = offerEndTime - currentTime; + setTimeLeft(timeRemaining); + + const timer = setInterval(() => { + setTimeLeft((prevTime) => (prevTime > 1000 ? prevTime - 1000 : 0)); + }, 1000); + + return () => { + clearInterval(timer); + }; + } + }, [isFreeCourse, offerExpiration]); + return (
- - Payment Confirmation + + {isFreeCourse + ? "Explore Your Free Learning Adventure" + : "Payment Confirmation"}
- + Please review the details before proceeding: - - {isFreeCourse - ? "This course is free!" - : `Course Price: ${formatToINR(courseDetails?.price)}`} + + {isFreeCourse ? ( + + This course is free! + + ) : ( +
+

🎉 Limited Time Offer 🎉

+

+ Price:{" "} + + {formatToINR(courseDetails?.price)} + {" "} + + {formatToINR(courseDetails?.price + 100)} + +

+

+ Offer Expires in: + + {formatTime(timeLeft)} + +

+
+ + )}
- Course Overview: {courseDetails?.overview} + Course Overview:{" "} + {courseDetails?.overview}
- {isFreeCourse ? ( - - ) : ( - - )}