added the redeem coupon api

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, forwardRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useSelector } from "react-redux";
 import Layout from "../Partials/Layout";
 import { useNavigate } from "react-router-dom";

src/components/MyCoupons/CouponPopup.jsx

@@ -21,17 +21,20 @@ const CouponPopup = ({ popUpHandler, data }) => {
         });
       }
 
+      setTimeout(() => {
         popUpHandler();
         setLoader(false);
+      }, 3000);
       throw new Response(res);
     } catch (error) {
-      error &&
+      // error &&
-        toast.warn("An error occurred while processing your coupon.", {
+      //   toast.warn("An error occurred while processing your coupon.", {
-          autoClose: 3000,
+      //     autoClose: 3000,
-          hideProgressBar: true,
+      //     hideProgressBar: true,
-        });
+      //   });
       setLoader(false);
-      console.log(error)
+      console.log(error);
+      return;
       // throw new Error(error);
     }
   };
@@ -82,7 +85,7 @@ const CouponPopup = ({ popUpHandler, data }) => {
             <button
               type="button"
               onClick={redeemCouponHandler}
-              className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+              className="text-white lg:w-[167px] btn-gradient flex justify-center items-center text-lg tracking-wide px-6 py-2 rounded-full"
             >
               {loader ? (
                 <div className="signup btn-loader"></div>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -1,13 +1,10 @@
 import React, { useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
 import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
-
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 export default function MyPendingJobTable({ MyJobList, className }) {
-  const filterCategories = ["All Categories", "Explore", "Featured"];
-  const [selectedCategory, setCategory] = useState(filterCategories[0]);
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -42,8 +39,10 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                 <>
                   {MyJobList &&
                   MyJobList?.result_list &&
-                      MyJobList.result_list.length > 0 ?
+                  MyJobList.result_list.length > 0 ? (
-                      currentActiveJobList.map((value, index) => (
+                    currentActiveJobList.map((value, index) => {
+                      let deliveryDate = value?.expire?.split(" ")[0];
+                      return (
                         <tr
                           key={index}
                           className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
@@ -68,6 +67,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                     {value.price * 0.01}
                                   </span>
                                 </span>
+                                <div className="flex items-center gap-4">
                                   <span className="text-sm text-thin-light-gray">
                                     Duration:{" "}
                                     <span className="text-purple">
@@ -79,7 +79,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                     Expire:{" "}
                                     <span className="text-purple">
                                       {" "}
-                                    {value.expire}
+                                      {deliveryDate}
                                     </span>
                                   </span>
                                   <span className="text-sm text-thin-light-gray">
@@ -91,6 +91,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                   </span>
                                 </div>
                               </div>
+                            </div>
                           </td>
   
                           <td className="text-right py-4 px-2">
@@ -105,14 +106,13 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                             </button>
                           </td>
                         </tr>
-                      ))
+                      )
-                    :
+                    })
+                  ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2">
+                      <td className="p-2">No Pending Task!</td>
-                        No Pending Task!
-                      </td>
                     </tr>
-                    }
+                  )}
                 </>
               }
             </tbody>

src/components/MyTasks/MyJobTable.jsx

@@ -85,6 +85,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                           {Number(task?.price) * 0.01}
                         </span>
                       </span>
+                      
                       <span className="text-sm text-thin-light-gray">
                         Duration:
                         <span className="text-purple ml-1">

src/views/MyPendingJobsPage.jsx

@@ -1,12 +1,10 @@
 import React, { useContext, useState, useEffect } from "react";
 import usersService from "../services/UsersService";
-//import MyJobs from "../components/MyJobs";
-import MyActiveJobs from "../components/MyActiveJobs";
 import MyPendingJobs from "../components/MyPendingJobs";
 import { useSelector } from "react-redux";
 
 export default function MyPendingJobsPage() {
-    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
   const [MyJobList, setMyJobList] = useState([]);
   const api = new usersService();