request message changed

.env

@@ -46,7 +46,7 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
 REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
 
-#developenet Account
+#development Account Social
 REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
 REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
 

src/Routers.jsx

@@ -56,6 +56,8 @@ export default function Routers() {
       <Routes>
         {/* guest routes */}
         <Route exact path="/login" element={<LoginPage />} />
+        <Route exact path="/eoffer" element={<LoginPage />} />
+
         <Route exact path="/signup" element={<SignupPage />} />
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";

src/components/AuthPages/Login/index.jsx

@@ -4,7 +4,7 @@ import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -432,10 +432,12 @@ export default function Login() {
               }
               {/* END of login component */}
 
+              {loginType == "full" &&
               <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                 This site is protected by hCaptcha and the our Privacy Policy
                 and Terms of Service apply.
               </div>
+              }
             </div>
           </div>
         </div>

src/components/AuthPages/SignUp/index.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -69,13 +68,17 @@ export default function SignUp() {
         let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
         if (regEx.test(email) == false) {
           setMsgError("Invalid Email");
-          return setTimeout(()=>{setMsgError("");},3000)
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
         }
 
         //checks if terms and condition is checked
         if (!checked) {
           setMsgError("Terms and condition required");
-          return setTimeout(()=>{setMsgError("");},3000)
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
         }
 
         setSignUpLoading(true);
@@ -95,7 +98,9 @@ export default function SignUp() {
         if (res.status === 200) {
           const { data } = res;
           if (data && data.acc === "DULPICATE") {
-            setMsgError("Unable to use this username. Please try another username.");
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
             setSignUpLoading(false);
           }
           if (data && data.status === "1") {
@@ -211,9 +216,7 @@ export default function SignUp() {
                     name="password"
                     type={showPassword ? "text" : "password"}
                     onClick={togglePasswordVisibility}
-                    passIcon={
+                    passIcon={showPassword ? "show-password" : "hide-password"}
-                      showPassword ? "show-password" : "hide-password"
-                    }
                     value={formData.password}
                     inputHandler={handleInputChange}
                   />
@@ -223,7 +226,48 @@ export default function SignUp() {
                     {msgError}
                   </div>
                 )}
+
                 <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
+                        checked && "text-white bg-[#4687ba]"
+                      }`}
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Forgot Password */}
+                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
                   <div className="remember-checkbox flex items-center space-x-2.5">
                     <button
                       onClick={rememberMe}
@@ -258,7 +302,7 @@ export default function SignUp() {
                       </Link>
                     </span>
                   </div>
-                </div>
+                </div> */}
                 <div className="signin-area mb-1">
                   <div className="flex justify-center">
                     <button

src/components/AuthPages/VerifyLink/index.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";

src/components/AuthPages/VerifyPassword/index.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,6 +1,6 @@
 import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 
 export default function VerifyYou() {
   const navigate = useNavigate();

src/components/Cards/OfferCard.jsx

@@ -19,7 +19,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
               background: `url(${localImgLoad(
-                `images/taskbanners/${datas.banner}`
+                `images/taskbanners/${datas?.banner || "default.jpg"}`
               )}) center / contain no-repeat`,
             }}
           >

src/components/MyJobs/MyJobTable.jsx

@@ -110,7 +110,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     return (
       <tr
         key={index}
-        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+        className="bg-white dark:bg-dark-white  border-b dark:border-[#5356fb29] hover:bg-gray-50"
       >
         <td className="py-9">
           <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
@@ -175,7 +175,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
             }}
             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            Manage
+            Assign
           </button>
         </td>
       </tr>
@@ -204,8 +204,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       {MyJobList.loading ? (
         <LoadingSpinner size="16" color="sky-blue" />
       ) : (
-        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
-          <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400 min-h-[500px]">
+          <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
               <>
                 {MyJobList &&

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
 
@@ -58,7 +59,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                             <div className="flex space-x-2 items-center w-full">
                               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
+                                  src={localImgLoad(`images/taskbanners/${value.banner || "default.jpg"}`)}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/MyPendingJobs/index.jsx

@@ -3,13 +3,14 @@ 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");
   const filterHandler = (value) => {
     setValue(value);
   };
-  console.log("AMEYE LOC1", props.MyJobList);
+  // console.log("AMEYE LOC1", props.MyJobList);
   return (
     <Layout>
       <CommonHead
@@ -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

@@ -136,6 +136,12 @@ function AddFundDollars(props) {
       return;
     }
 
+    if (Number(props.input) * 100 > Number(props.walletItem?.transfer_limit)) {
+      props.setInputError("Credit limit has been exceeded");
+      setTimeout(() => props.setInputError(""), 5000);
+      return;
+    }
+
     if (tab === "previous") {
       // To check if card is empty
       if (Object.keys(prevCardDetails).length === 0) {

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -15,10 +14,9 @@ function AddFundPop({
   setConfirmCredit,
   walletItem,
 }) {
-  const navigate = useNavigate();
   const apiCall = new usersService();
   let countryWallet = walletItem?.country;
-  const { payment, currency } = _payment;
+  const { currency } = _payment;
 
   const [inputError, setInputError] = useState("");
   let __awaitComponent = confirmCredit.show.awaitConfirm;
@@ -44,6 +42,12 @@ function AddFundPop({
       return;
     }
 
+    if (Number(input) * 100 > Number(walletItem?.transfer_limit)) {
+      setInputError("Credit limit has been exceeded");
+      setTimeout(() => setInputError(""), 5000);
+      return;
+    }
+
     if (isNaN(input)) {
       setConfirmCredit((prev) => ({
         ...prev,
@@ -106,14 +110,14 @@ function AddFundPop({
               </h1>
               <div className="field w-full max-w-[250px]">
                 <InputCom
-                  fieldClass="px-6"
+                  fieldClass="px-6 text-right"
                   type="text"
                   name="amount"
                   placeholder="0"
                   value={input}
                   inputHandler={handleChange}
                 />
-                <p className="text-base text-red-500 h-5">
+                <p className="text-base text-red-500 italic h-5">
                   {inputError && inputError}
                 </p>
               </div>

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -2,11 +2,6 @@ import React from "react";
 
 function CompleteConfirmCredit({ onClose, confirmCredit }) {
   const { data } = confirmCredit;
-
-  const backToWallet = () => {
-    onClose();
-    window.location.reload(true);
-  };
   return (
     <div className="logout-modal-body w-full flex flex-col items-center">
       <div className="content-wrapper w-full h-[32rem]">
@@ -22,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"
@@ -60,7 +56,8 @@ 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>
@@ -104,7 +101,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
             <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-white text-base rounded-full w-[100px]"
-                onClick={backToWallet}
+                onClick={onClose}
               >
                 Ok
               </button>

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({
@@ -113,7 +112,7 @@ function ConfirmAddFund({
 
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
-    tx_ref: Date.now(),
+    tx_ref: __confirmData?.credit_reference,
     currency: "NGN",
     amount: Number(__confirmData.amount),
     payment_options: "card,mobilemoney,ussd",
@@ -124,27 +123,37 @@ function ConfirmAddFund({
     },
     customizations: {
       title: "WrenchBoard",
-      description: "Topup Payment",
+      description: "Add Credit Payment",
-      logo: "https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg",
+      logo: "https://www.wrenchboard.com/assets/images/wrench-500-500-icon.png",
     },
   };
-
+  //debugger;
   const fwConfig = {
     ...config,
     text: "Proceed",
     callback: (response) => {
-      onSuccessPayment();
+      debouncedSuccessPayment(); //delays the call for 5 secs
-      closePaymentModal();
+
+      setTimeout(() => {
+        closePaymentModal();
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: response,
+        }));
+      }, 1500);
     },
-    onClose: () => {},
   };
 
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    const reqData = { amount: Number(__confirmData?.amount), currency: "NGN" };
+    const reqData = { tx_ref: __confirmData?.credit_reference };
-
+    console.log("**** onSuccessPayment **** THIS WAS REACHED");
     apiURL
-      .startTopUp(reqData)
+      .resultTopUp(reqData)
       .then((res) => {
         if (res.data.internal_return < 0) {
           setRequestStatus({
@@ -152,21 +161,9 @@ function ConfirmAddFund({
             loading: false,
             status: false,
           });
-          toast.success("Opps! something went wrong");
-        } else {
-          setRequestStatus({
-            message: "Topup successful",
-            loading: false,
-            status: true,
-          });
-          toast.success("Account Topup was successful");
-          onClose()
-          dispatch(tableReload({ type: "WALLETTABLE" }));
-          navigate("/my-wallet", { replace: true });
-          // setTimeout(() => {
-          //   navigate("/my-wallet", { replace: true });
-          // }, 1000);
         }
+
+        return dispatch(tableReload({ type: "WALLETTABLE" }));
       })
       .catch((err) => {
         setRequestStatus({
@@ -174,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;
@@ -267,7 +277,7 @@ function ConfirmAddFund({
         }));
         return;
       }
-      
+
       setTimeout(() => {
         setConfirmCredit((prev) => ({
           ...prev,
@@ -300,7 +310,7 @@ function ConfirmAddFund({
       },
       data: {},
     }));
-  }
+  };
 
   return (
     <div className="content-wrapper w-full h-[32rem]">

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 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,
@@ -14,7 +15,7 @@ function ConfirmNairaWithdraw({
   setShowNairaWithdraw,
 }) {
   const apiURL = new usersService();
-  const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   let [requestStatus, setRequestStatus] = useState({
     message: "",
@@ -90,6 +91,7 @@ function ConfirmNairaWithdraw({
             state: res.data,
           });
         }, 5000);
+        dispatch(tableReload({ type: "WALLETTABLE" }));
         return;
       })
       .catch((error) => {
@@ -101,19 +103,6 @@ function ConfirmNairaWithdraw({
       });
   };
 
-  const getBack = () => {
-    action();
-    setShowNairaWithdraw({
-      show: true,
-      data: {},
-    });
-  };
-
-  const completeWithdrawal = () => {
-    action();
-    window.location.reload(true);
-  };
-
   return (
     <ModalCom action={action} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
@@ -263,6 +252,10 @@ function ConfirmNairaWithdraw({
                                 ?.toLowerCase()
                                 .includes("limit")
                             ? "Transfer limit Error"
+                            : completeNairaWithdraw.state?.bad_param
+                                ?.toLowerCase()
+                                .includes("balance")
+                            ? "Insufficient Balance"
                             : "An Error Occurred"}{" "}
                         </h1>
                       </div>
@@ -283,6 +276,10 @@ function ConfirmNairaWithdraw({
                                 ?.toLowerCase()
                                 .includes("limit")
                             ? "The transfer limit has been exceeded"
+                            : completeNairaWithdraw.state?.bad_param
+                                ?.toLowerCase()
+                                .includes("balance")
+                            ? "Insufficient Balance for Transaction"
                             : "Could not perform transaction"}
                         </span>
                       </div>
@@ -405,7 +402,7 @@ function ConfirmNairaWithdraw({
                   <button
                     onClick={
                       completeNairaWithdraw.show
-                        ? completeWithdrawal
+                        ? action
                         : completeNairaWithdraw?.state?.internal_return < 0
                         ? action
                         : handleSubmit

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -25,7 +25,8 @@ 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,8 +171,8 @@ function NairaWithdraw({
         setErrorMsgs({ amount: "amount required" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
-      } else if (Number(values.amount) > Number(wallet?.transfer_limit)) {
+      }else      if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) {
-        setErrorMsgs({ amount: "transfer limit exceeded" });
+        setErrorMsgs({ amount: "Withdraw limit has been exceeded" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
       }
@@ -326,8 +326,8 @@ function NairaWithdraw({
                         <InputCom
                           fieldClass="px-4 text-end"
                           parentClass="flex items-center gap-1 justify-between"
-                          labelClass="flex-[0.3] mb-0"
+                          labelClass="flex-[0.4] mb-0"
-                          inputClass="flex-[0.7] max-w-[12rem]"
+                          inputClass="flex-[0.6] max-w-[12rem]"
                           label="Amount:"
                           type="number"
                           name="amount"
@@ -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

src/components/MyWallet/Wallet.jsx

@@ -67,9 +67,6 @@ const WalletRoutes = () => {
     getPaymentHistory()
   }, [walletTable]);
 
-
-
-  console.log('TESTING',walletTable);
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>

src/components/MyWallet/WalletAction.jsx

@@ -8,30 +8,12 @@ function WalletAction({ walletItem, payment, openPopUp }) {
     show: false,
     state: {},
   }); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
-  const [countries, setCountries] = useState([]);
+  
   const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
     show: false,
     state: {},
   }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
 
-  const userApi = new usersService();
-
-  // Get Country Api
-  const getCountryList = useCallback(async () => {
-    const res = await userApi.getSignupCountryData();
-
-    try {
-      if (res.status === 200) {
-        const { signup_country } = await res.data;
-        setCountries(signup_country);
-      } else if (res.data.result !== 100) {
-        setCountries("Nothing see here!");
-      }
-    } catch (error) {
-      throw new Error(error);
-    }
-  }, []);
-
   return (
     <div className="counters w-full flex justify-between gap-2">
       <div className="w-1/2 flex justify-center items-center">

src/components/Partials/Header.jsx

@@ -14,7 +14,7 @@ import WalletHeader from "../MyWallet/WalletHeader";
 
 import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
-import siteLogo from "../../assets/images/wrenchboard.png";
+import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
 import formattedDate from "../../lib/fomattedDate";
 import { updateNotifications } from "../../store/notifications";
 import TimeDifference from "../Helpers/TimeDifference";

src/components/Partials/MobileSideBar.jsx

@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 import {
   default as logo,
   default as logo3,
-} from "../../assets/images/wrenchboard.png"; //logo-2.svg";
+} from "../../assets/images/wrenchboard-logo-text.png"; //logo-2.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 

src/components/Partials/Sidebar.jsx

@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 import {
   default as logo,
   default as logo3,
-} from "../../assets/images/wrenchboard.png";
+} from "../../assets/images/wrenchboard-logo-text.png";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 

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})
+          dispatch(tableReload({ type: "PENDINGTABLE" }));
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+            onClose();
+          }, 2700);
+        }).catch(error => {
+          setRequestMessage({status: false, message:'Try Again'})
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+          }, 2700);
+        })
+      }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: ''})
+          }, 2700);
+        }).catch(error => {
+          setRequestMessage('Try Again')
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({status: false, message: ''})
+          }, 2700);
+        })
+      } 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/services/UsersService.js

@@ -577,16 +577,31 @@ class usersService {
     return this.postAuxEnd("/familymanage", postData);
   }
 
-  //END POINT CALL FOR ACCOUNT TOP
+ // END POINT CALL FOR ACCOUNT TOP
   startTopUp(post) {
+    alert("WHY ARE WE CALLING THIS ?");
+    // var postData = {
+    //   uid: localStorage.getItem("uid"),
+    //   member_id: localStorage.getItem("member_id"),
+    //   sessionid: localStorage.getItem("session_token"),
+    //   action: 11062,
+    //   ...post,
+    // };
+    // console.log("starttopup",postData);
+    // return this.postAuxEnd("/starttopup", postData);
+  }
+
+
+  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: 11062,
+      action: 11061,
       ...post,
     };
-    return this.postAuxEnd("/starttopup", postData);
+    console.log("topupresult",postData);
+    return this.postAuxEnd("/topupresult", postData);
   }
 
   //END POINT CALL FOR SENDING REFERRAL MESSAGE

src/views/MyPendingJobsPage.jsx

@@ -5,20 +5,26 @@ 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);
+
+  console.log('TESTING', pendingListTable)
+
+  const [MyJobList, setMyJobList] = useState({loading: true, data: []});
   const api = new usersService();
 
   const getMyJobList = async () => {
     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 (