razorpay_and_index: Add toast for verification messsage.

Signed-off-by: sayyedarib <sayyedaribhussain4321@gmail.com>
anmode · Dec 28, 2023 · f2f6749 · f2f6749
1 parent 573e4cc
commit f2f6749
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/hook/razorpay.js b/hook/razorpay.js
@@ -10,18 +10,28 @@ const loadRazorpayScript = () => {
   });
 };
 
+const createCustomEvent = (message, number) => {
+  document.dispatchEvent(new CustomEvent('razorpay', {
+    detail: {
+      status: number,
+      message: message 
+    }
+  }));
+}
+
 const verifyOrder = async (orderDetails) => {
   try {
     const response = await axios.post(
       `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/users/payment/verifyOrder`,
       orderDetails,
     );
     if (response.status == 200) {
-      // Add UI to show payment has been verified.
-      console.log("Payment has been verified");
-    } else console.error("Payment could not be verified");
+      createCustomEvent('Payment has been verified', 0);
+    } else {
+      createCustomEvent('Payment could not be verified', 1);
+    }
   } catch (err) {
-    console.error("payment could not be verified due to an error: ", err);
+    createCustomEvent('Payment could not be verified', 1);
   }
 };
 
@@ -42,7 +52,6 @@ const createRazorpayObject = async (sessionDetails) => {
     order_id: id,
     handler: function (response) {
       verifyOrder(response);
-      alert("This step of Payment Succeeded"); // remove this alert after adding UI
     },
     prefill: {
       //user information need to be added here using login info of user
@@ -58,7 +67,7 @@ const createRazorpayObject = async (sessionDetails) => {
   const razorpayObject = new Razorpay(options);
 
   razorpayObject.on("payment.failed", function (response) {
-    alert("This step of Payment Failed");
+    createCustomEvent('Payment failed', 1);
   });
 
   return razorpayObject;

diff --git a/pages/[mentorUsername]/bookSession/index.page.js b/pages/[mentorUsername]/bookSession/index.page.js
@@ -19,7 +19,6 @@ function Index({ mentorDetail, bookSession, sessionID }) {
   const [listDates, setListDates] = useState([]);
   const [availableDays, setAvailableDays] = useState([]);
   const [loading, setLoading] = useState(false);
-
   //User Info
   const user = JSON.parse(localStorage.getItem("userData"));
   const userName = user?.user_name;
@@ -86,12 +85,31 @@ function Index({ mentorDetail, bookSession, sessionID }) {
       fileReader.onerror = (error) => reject(error);
     });
   };
-
-  useEffect(() => {
-    if (localStorage.getItem("paymentIssuePopup") === "0") {
-      setPaymentIssuePopup(false);
+
+  const showToast = (status, message) => {  
+    if(status === 2) {
+      toast.success(message);
+    }else if(status === 1) {
+      toast.error(message); 
+    }
+  }
+const [paymentStatus, setPaymentStatus] = useState({status: 0, message: ''});
+const updatePaymentStatus = (e) => {
+    setPaymentStatus({status: e.detail.status, status: e.detail.message});
+}
+  const status = document.addEventListener('razorpay', updatePaymentStatus);
+  useEffect(() => {  
+    const handleRazorpay = (e) => {
+     showToast(e.detail.status, e.detail.message); 
     }
-  });
+    document.addEventListener('razorpay', handleRazorpay);
+  }, []);
+
+  // useEffect(() => {
+  //   if (localStorage.getItem("paymentIssuePopup") === "0") {
+  //     setPaymentIssuePopup(false);
+  //   }
+  // });
 
   // TODO: MOve this to utils/image file
   const uploadToCloudinary = async (imageSrc) => {
@@ -161,14 +179,14 @@ function Index({ mentorDetail, bookSession, sessionID }) {
     }
 
     // setQrPopup(true);
-    razorpay_object(e, bookSession);
+    razorpay_object(e , bookSession);
   };
 
-  const handleCopy = () => {
-    const paymentDetails = "9368086395@paytm";
-    navigator.clipboard.writeText(paymentDetails);
-    alert("Successfully copied!");
-  };
+  // const handleCopy = () => {
+  //   const paymentDetails = "9368086395@paytm";
+  //   navigator.clipboard.writeText(paymentDetails);
+  //   alert("Successfully copied!");
+  // };
 
   const bookedSession = async (imageCloudinaryUrl) => {
     try {
@@ -253,6 +271,8 @@ function Index({ mentorDetail, bookSession, sessionID }) {
         className="container sessionContainer"
         style={{ marginTop: "100px" }}
       >
+
+        {/* Keep this method in case razorpay faces some issue 
         {paymentIssuePopup && (
           <div className="modal-overlay">
             <div className="modal-content">
@@ -274,7 +294,7 @@ function Index({ mentorDetail, bookSession, sessionID }) {
               </span>
             </div>
           </div>
-        )}
+        )} 
         {qrPopup && (
           <div className="modal-overlay">
             <div className="modal-content">
@@ -295,7 +315,8 @@ function Index({ mentorDetail, bookSession, sessionID }) {
               </div>
             </div>
           </div>
-        )}
+        )} 
+        */}
         <h1>Let's book a session</h1>
 
         <div className="session">