Merge branch 'coupon-page-cleanup' of WrenchBoard/Users-Wrench into master

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

@@ -1,6 +1,44 @@
-
+import { useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import usersService from "../../services/UsersService";
 
 const CouponPopup = ({ popUpHandler, data }) => {
+  const [loader, setLoader] = useState(false);
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const redeemCouponHandler = async () => {
+    setLoader(true);
+
+    try {
+      const { code, coupon_id } = data;
+      const reqData = { code_id: Number(coupon_id), code };
+
+      const res = await apiCall.getCouponRedeem(reqData);
+      if (res.statusText === "OK") {
+        toast.success("Great news! Your coupon has been redeemed.", {
+          autoClose: 3000,
+          hideProgressBar: true,
+        });
+      }
+
+      setTimeout(() => {
+        popUpHandler();
+        setLoader(false);
+      }, 3000);
+      throw new Response(res);
+    } catch (error) {
+      // error &&
+      //   toast.warn("An error occurred while processing your coupon.", {
+      //     autoClose: 3000,
+      //     hideProgressBar: true,
+      //   });
+      setLoader(false);
+      console.log(error);
+      return;
+      // throw new Error(error);
+    }
+  };
+
   return (
     <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
       <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
@@ -45,14 +83,17 @@ const CouponPopup = ({ popUpHandler, data }) => {
         <div className="signin-area w-full">
           <div className="flex justify-end">
             <button
-              //   type="button"
+              type="button"
-              className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+              onClick={redeemCouponHandler}
+              className="text-white lg:w-[167px] btn-gradient flex justify-center items-center text-lg tracking-wide px-6 py-2 rounded-full"
             >
-              {/* {loader ? (
+              {loader ? (
                 <div className="signup btn-loader"></div>
               ) : (
-                    )} */}
+                <span className="font-semibold tracking-wider">
-              <span className="font-semibold tracking-wider">Redeem Now!</span>
+                  Redeem Now!
+                </span>
+              )}
             </button>
           </div>
         </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/services/UsersService.js

@@ -455,13 +455,13 @@ class usersService {
     return this.postAuxEnd("/stepresetpass", reqData);
   }
 
-  getCouponRedeem() {
+  getCouponRedeem(reqData) {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      page: 0,
+      action: 85020,
-      limit: 100,
+      ...reqData
     };
     return this.postAuxEnd("/couponredeem", postData);
   }

src/views/MyPendingJobsPage.jsx

@@ -1,12 +1,10 @@
-import React, { useContext,useState, useEffect } from "react";
+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();