site logo size reduced and aligned

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -6,6 +6,7 @@ import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import localImgLoad from "../../lib/localImgLoad";
 
+
 export default function MyPendingJobTable({ MyJobList, className }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 

src/components/MyPendingJobs/index.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MyPendingJobTable from "./MyPendingJobTable";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function MyPendingJobs(props) {
   const [selectTab, setValue] = useState("today");
@@ -35,7 +36,13 @@ export default function MyPendingJobs(props) {
               ></div>
             </div>
           </div>
-          <MyPendingJobTable MyJobList={props.MyJobList} />
+          {props.MyJobList.loading ?
+          <div className="bg-white">
+            <LoadingSpinner size='16' color='sky-blue' height='min-h-[300px]' />
+          </div>
+          :
+          <MyPendingJobTable MyJobList={props.MyJobList.data} />
+          }
         </div>
       </div>
     </Layout>

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -313,7 +313,7 @@ function AddFundDollars(props) {
         )}
 
         {tab === "new" && (
-          <div className="new-details w-full max-h-[23rem]">
+          <div className="new-details w-full max-h-[22rem]">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -527,9 +527,9 @@ function AddFundDollars(props) {
                         </div>
                       </div>
 
-                      <div className="md:px-8 add-fund-btn flex justify-end items-center gap-3">
+                      <div className="add-fund-btn flex justify-end items-center gap-3 mt-4">
                         <button
-                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
                           onClick={handleClose}
                         >
                           Cancel
@@ -558,9 +558,9 @@ function AddFundDollars(props) {
       </div>
 
       {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+        <div className="md:py-8 add-fund-btn flex justify-end items-center gap-4 py-4">
           <button
-            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
             onClick={props.onClose}
           >
             Cancel

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -138,12 +138,12 @@ function AddFundPop({
               </div>
             )}
 
-            {countryWallet == "NG" && <div className="h-[18rem]"></div>}
+            {countryWallet == "NG" && <div className="h-[19rem]"></div>}
 
             {countryWallet == "NG" && (
               <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
                 <button
-                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
                   onClick={onClose}
                 >
                   Cancel

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 function CompleteConfirmCredit({ onClose, confirmCredit }) {
-  const { data } = confirmCredit
+  const { data } = confirmCredit;
   return (
     <div className="logout-modal-body w-full flex flex-col items-center">
       <div className="content-wrapper w-full h-[32rem]">
@@ -17,7 +17,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                 >
                   {/* Success Icon for now */}
                   <div className="flex items-center w-full justify-center">
-                    {data?.result == "Charge success" ? (
+                    {data?.result == "Charge success" ||
+                    data?.status == "successful" ? (
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="100"
@@ -55,13 +56,15 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
                   <div className={`flex items-center`}>
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {data?.result == "Charge success"
+                      {data?.result == "Charge success" ||
+                      data?.status == "successful"
                         ? "Credit was Successful!"
                         : "Credit was Unsuccessful"}
                     </h1>
                   </div>
 
-                  {data?.internal_return >= 0 ? (
+                  {data?.internal_return >= 0 &&
+                  data?.result !== "Charge failed" ? (
                     <>
                       <div className="flex items-center gap-8">
                         <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,8 +1,8 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
+import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
 import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
@@ -102,7 +102,6 @@ function ConfirmAddFund({
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const [requestStatus, setRequestStatus] = useState({
@@ -112,7 +111,7 @@ function ConfirmAddFund({
   });
 
   const config = {
-    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
+    public_key: __confirmData?.flutterwave_key,
     tx_ref: __confirmData?.credit_reference,
     currency: "NGN",
     amount: Number(__confirmData.amount),
@@ -133,10 +132,19 @@ function ConfirmAddFund({
     ...config,
     text: "Proceed",
     callback: (response) => {
-      onSuccessPayment();
+      debouncedSuccessPayment(); //delays the call for 5 secs
+
       setTimeout(() => {
         closePaymentModal();
-      }, 2000);
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: response,
+        }));
+      }, 1500);
     },
   };
 
@@ -153,28 +161,9 @@ function ConfirmAddFund({
             loading: false,
             status: false,
           });
-          toast.success("Opps! something went wrong");
-        } else {
-          setRequestStatus({
-            message: "Topup successful",
-            loading: false,
-            status: true,
-          });
-
-          setConfirmCredit((prev) => ({
-            ...prev,
-            show: {
-              awaitConfirm: { loader: false, state: false },
-              acceptConfirm: { loader: false, state: true },
-            },
-            data: res,
-          }));
-          dispatch(tableReload({ type: "WALLETTABLE" }));
-          navigate("/my-wallet", { replace: true });
-          // setTimeout(() => {
-          //   navigate("/my-wallet", { replace: true });
-          // }, 1000);
         }
+
+        return dispatch(tableReload({ type: "WALLETTABLE" }));
       })
       .catch((err) => {
         setRequestStatus({
@@ -182,10 +171,23 @@ function ConfirmAddFund({
           loading: false,
           status: false,
         });
+
+        setTimeout(() => {
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: err,
+          }));
+        }, 1500);
         toast.success("Opps! something went wrong");
       });
   };
 
+  const debouncedSuccessPayment = debounce(onSuccessPayment, 5000);
+
   const handlePrevCard = async () => {
     const { amount, credit_reference, currency } = __confirmData;
     const { card_uid } = __confirmCardDetails;
@@ -377,7 +379,7 @@ function ConfirmAddFund({
           <hr />
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
-              className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center border-gradient text-base rounded-full"
               onClick={getBack}
             >
               Back

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
+import { useDispatch } from "react-redux";
 import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import ModalCom from "../../Helpers/ModalCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import { useDispatch } from "react-redux";
-import { tableReload } from "../../../store/TableReloads";
 
 function ConfirmNairaWithdraw({
   payment,
@@ -393,7 +393,7 @@ function ConfirmNairaWithdraw({
                     <button
                       type="button"
                       onClick={action}
-                      className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                      className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
                     >
                       <span className="text-gradient">Cancel</span>
                     </button>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -25,7 +25,10 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {confirmCredit?.show?.acceptConfirm?.state &&
-            confirmCredit?.data?.internal_return < 0 ? (
+            (confirmCredit?.data?.internal_return < 0 
+              // ||
+              // confirmCredit?.data?.status !== "successful"
+              ) ? (
               "Credit Unsuccessful"
             ) : (
               <>

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -171,7 +171,7 @@ function NairaWithdraw({
         setErrorMsgs({ amount: "amount required" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
-      }else      if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) {
+      } else if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) {
         setErrorMsgs({ amount: "Withdraw limit has been exceeded" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
@@ -448,7 +448,7 @@ function NairaWithdraw({
                                 {/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
                                 <div className="flex flex-col gap-3 flex-[0.8] items-center">
                                   <select
-                                    className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
+                                    className="sm:w-full w-48 text-dark-gray border-slate-300 outline-0 flex-[0.8] my-3 rounded-full p-2 outline-none text-base dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border appearance-none"
                                     value={
                                       props.values.previousAccount?.recipientID
                                     }
@@ -473,7 +473,7 @@ function NairaWithdraw({
                                             ?.recipientID
                                             ? errorMsgs.previousAccount
                                                 .recipientID
-                                            : "Select..."}
+                                            : "Select an account"}
                                         </option>
                                         {recipients.data.map((item, index) => (
                                           <option
@@ -796,7 +796,7 @@ function NairaWithdraw({
                       <button
                         type="button"
                         onClick={action}
-                        className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                        className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center border-gradient text-base rounded-full"
                       >
                         <span className="text-gradient">Cancel</span>
                       </button>

src/components/Partials/Layout.jsx

@@ -62,7 +62,7 @@ export default function Layout({ children }) {
               drawer
                 ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 "
                 : "w-[70px]"
-            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-8`}
+            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}
           >
             <Sidebar
               logoutModalHandler={logoutModalHandler}

src/components/Partials/Sidebar.jsx

@@ -39,7 +39,7 @@ export default function Sidebar({
       {/* logo-area */}
       <div
         className={`w-full flex items-center transition-all duration-300 ease-in-out ${
-          sidebar ? "justify-between  mb-14" : "justify-center"
+          sidebar ? "justify-start gap-3  mb-14" : "justify-center"
         }`}
       >
         <div className={`sidebar-logo ${sidebar ? "enter" : ""}`}>

src/components/jobPopout/PendingJobsPopout.jsx

@@ -1,10 +1,14 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
-import Detail from "./popoutcomponent/Detail";
-import ModalCom from "../Helpers/ModalCom";
-import usersService from "../../services/UsersService";
 import { toast } from "react-toastify";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import usersService from "../../services/UsersService";
+import ModalCom from "../Helpers/ModalCom";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Detail from "./popoutcomponent/Detail";
+import { useNavigate } from "react-router-dom";
+
+import { useDispatch } from "react-redux";
+import { tableReload } from "../../store/TableReloads";
 
 const showSuccessToast = (message) => {
   toast.success(message, {
@@ -14,48 +18,85 @@ const showSuccessToast = (message) => {
 };
 
 function PendingJobsPopout({ details, onClose, situation }) {
+
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+
   const [pendingJobLoader, setPendingJobLoader] = useState({
     extend: false,
     offer: false,
   });
-  const apiCall = useMemo(() => new usersService(), []);
 
-  const handlePendingJobsBtn = useCallback(
+  let [requestMessage, setRequestMessage] = useState({status: false, message: ''})
-    async ({ target: { name } }) => {
+
+  const apiCall = new usersService();
+
+  const handlePendingJobsBtn = ({ target: { name } }) => {
       let { job_uid, offer_code } = details;
 
       let reqData;
 
       let pendingData = { job_uid, offer_code };
+      if(name=='extend'){ // RUNS THIS TO EXTEND JOB EXPIRY BY ONE WEEK
+        reqData = { ...pendingData };
+        setPendingJobLoader({ extend: true });
+        apiCall.pendingJobExtend(reqData).then(res => {
+          setRequestMessage({status: true, message: res.data.status})
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+            onClose();
+            dispatch(tableReload({ type: "PENDINGTABLE" }));
+          }, 4000);
+        }).catch(error => {
+          setRequestMessage({status: false, message:'Try Again'})
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+          }, 3000);
+        })
+      }else if(name=='offer'){ // RUNS THIS IF JOB IS SENT TO USER
+        reqData = { ...pendingData };
+        setPendingJobLoader({ offer: true });
+        apiCall.pendingJobSendTome(reqData).then(res => {
+          setRequestMessage({status: true, message: res.data.status})
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+          }, 4000);
+        }).catch(error => {
+          setRequestMessage('Try Again')
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+          }, 3000);
+        })
+      } else return
+      // try {
+      //   if (name === "extend") {
+      //     setPendingJobLoader({ extend: true });
+      //     reqData = { ...pendingData };
+      //     // let { data } =
+      //     await apiCall.pendingJobExtend(reqData);
+      //     showSuccessToast("Job has been extended by a week!");
+      //     dispatch(tableReload({ type: "PENDINGTABLE" }));
+      //   } else if (name === "offer") {
+      //     setPendingJobLoader({ offer: true });
+      //     reqData = { ...pendingData };
+      //     // let { data } =
+      //     await apiCall.pendingJobSendTome(reqData);
+      //     showSuccessToast("Offer sent, check your email");
+      //   } else return;
 
-      try {
+      //   setTimeout(() => {
-        if (name === "extend") {
+      //     setPendingJobLoader({ extend: false, offer: false });
-          setPendingJobLoader({ extend: true });
+      //     onClose();
-          reqData = { ...pendingData };
+      //   }, 2700);
-          // let { data } =
+      // } catch (error) {
-          await apiCall.pendingJobExtend(reqData);
+      //   setPendingJobLoader({ extend: false, offer: false });
-          // console.log("This is for extend", data);
+      //   throw new Error(error);
-          showSuccessToast("Job has been extended by a week!");
+      // }
-        } else if (name === "offer") {
+    }
-          setPendingJobLoader({ offer: true });
-          reqData = { ...pendingData };
-          // let { data } =
-          await apiCall.pendingJobSendTome(reqData);
-          // console.log("This is for offer", data);
-          showSuccessToast("Offer sent, check your email");
-        } else return;
-
-        setTimeout(() => {
-          setPendingJobLoader({ extend: false, offer: false });
-          onClose();
-        }, 2700);
-      } catch (error) {
-        setPendingJobLoader({ extend: false, offer: false });
-        throw new Error(error);
-      }
-    },
-    [onClose, apiCall, details]
-  );
 
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
@@ -101,7 +142,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
               </span>
               <div className="">
                 <p className="text-sm">
-                  This Job have been sent to public view
+                  {/* This Job have been sent to public view */}
+                  This Job have been sent to {details.job_to}
                 </p>
                 <p className="text-sm text-slate-600">This Job will expire</p>
               </div>
@@ -153,13 +195,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
               />
             </div>
 
-            <div className="my-2 md:flex">
+            {/* <div className="my-2 md:flex">
               <Detail
                 label="Public Link"
                 value="https://work.wrenchboard.com/plb/viewjob/218B4BWB83"
                 bg="bg-slate-200"
               />
-            </div>
+            </div> */}
           </div>
 
           {/* ACTION SECTION */}
@@ -168,11 +210,11 @@ function PendingJobsPopout({ details, onClose, situation }) {
 
             <div className="mb-3">
               <p className="px-2 py-1 text-sm bg-slate-100">
-                Job sent to public view
+                Job sent to {details.job_to}
               </p>
             </div>
 
-            <div className="my-3">
+            <div className="mt-3 mb-8">
               <button
                 className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                 onClick={handlePendingJobsBtn}
@@ -187,6 +229,11 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 )}
               </button>
             </div>
+            {pendingJobLoader.extend && requestMessage.message &&
+              <div className={`p-1 ${requestMessage.status ? 'bg-green-500':'bg-red-500'} text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+                <p>{requestMessage.message}</p>
+              </div>
+            }
 
             <div className="my-3">
               <button
@@ -204,6 +251,12 @@ function PendingJobsPopout({ details, onClose, situation }) {
               </button>
             </div>
 
+            {pendingJobLoader.offer && requestMessage.message &&
+              <div className={`p-1 ${requestMessage.status ? 'bg-green-500':'bg-red-500'} text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+                <p>{requestMessage.message}</p>
+              </div>
+            }
+
             <div className="mt-10 md:mt-32 md:flex md:justify-center">
               <button
                 className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"

src/index.css

@@ -303,7 +303,7 @@ input[type="text"][dir="rtl"] {
 
 .sidebar-logo.enter {
   transform: scale(1);
-  width: 100%;
+  width: 80%;
 }
 .sidebar-logo {
   transform: scale(0);

src/services/UsersService.js

@@ -595,7 +595,7 @@ class usersService {
   resultTopUp(post) {
     var postData = {
       uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
+      member_id: Number(localStorage.getItem("member_id")),
       sessionid: localStorage.getItem("session_token"),
       action: 11061,
       ...post,

src/views/MyPendingJobsPage.jsx

@@ -5,20 +5,25 @@ import { useSelector } from "react-redux";
 
 export default function MyPendingJobsPage() {
   let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
-  const [MyJobList, setMyJobList] = useState([]);
+  let { pendingListTable } = useSelector((state) => state.tableReload);
+
+  const [MyJobList, setMyJobList] = useState({loading: true, data: []});
   const api = new usersService();
 
   const getMyJobList = async () => {
+    setMyJobList({loading: true, data: []});
     try {
       const res = await api.getMyPendingJobList();
-      setMyJobList(res.data);
+      setMyJobList({loading: false, data: res.data});
     } catch (error) {
+      setMyJobList({loading: false, data: []});
       console.log("Error getting mode");
     }
   };
+  
   useEffect(() => {
     getMyJobList();
-  }, []);
+  }, [pendingListTable]);
 
   // debugger;
   return (