.

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,8 +1,10 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 function ThePaymentText({ value, type }) {
@@ -98,6 +100,7 @@ function ConfirmAddFund({
 
   const apiURL = new usersService();
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   const [requestStatus, setRequestStatus] = useState({
     message: "",
@@ -251,8 +254,9 @@ function ConfirmAddFund({
         }));
         return;
       }
-
+      
       setTimeout(() => {
+        dispatch(tableReload({ type: "WALLETTABLE" }));
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -274,7 +278,7 @@ function ConfirmAddFund({
     }
   };
 
-  console.log(confirmCredit?.data);
+  // console.log(confirmCredit?.data);
 
   return (
     <div className="content-wrapper w-full h-[32rem]">

src/components/MyWallet/Wallet.jsx

@@ -1,13 +1,25 @@
-import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import React, {
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));
 
 const WalletRoutes = () => {
-  const apiCall = new usersService();
-
-  const [walletList, setWalletList] = useState({ loading: true, data: [] });
+  const apiCall = useMemo(() => new usersService(), []);
+  const { walletTable } = useSelector((state) => state.tableReload);
+  const [walletList, setWalletList] = useState({
+    loading: true,
+    data: [],
+    reload: false,
+  });
   const [paymentHistory, setPaymentHistory] = useState({
     loading: true,
     data: [],
@@ -44,26 +56,14 @@ const WalletRoutes = () => {
   }, [apiCall]);
 
   useEffect(() => {
-    let isMounted = true;
-
     const fetchData = async () => {
-      try {
-        await Promise.all([getWalletList(), getPaymentHistory()]);
-      } catch (error) {
-        console.error(error);
-      } finally {
-        if (isMounted) {
-          return (isMounted = false);
-        }
-      }
+      await Promise.all([getWalletList(), getPaymentHistory()]);
     };
 
     fetchData();
+  }, [walletTable, walletList.data]);
 
-    return () => {
-      isMounted = false;
-    };
-  }, [getWalletList, getPaymentHistory]);
+  console.log(walletTable);
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>

src/components/Partials/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -6,16 +6,15 @@ import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
 import profileImg from "../../assets/images/profile-pic.jpg";
 import useToggle from "../../hooks/useToggle";
+import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 import ModalCom from "../Helpers/ModalCom";
-import SearchCom from "../Helpers/SearchCom";
 import WalletHeader from "../MyWallet/WalletHeader";
-import usersService from "../../services/UsersService";
 
-import siteLogo from "../../assets/images/wrenchboard.png";
-import Flag from "../../assets/images/united-states.svg";
 import { useSelector } from "react-redux";
+import Flag from "../../assets/images/united-states.svg";
+import siteLogo from "../../assets/images/wrenchboard.png";
 
 export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [balanceDropdown, setbalanceValue] = useToggle(false);
@@ -489,7 +488,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                   <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
                     {firstname}
                   </h1>
-                 {userDetails && userDetails?.account_type !== "FAMILY" && <p className="text-sm text-thin-light-gray">@{userEmail}</p>}
+                  {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    <p className="text-sm text-thin-light-gray">@{userEmail}</p>
+                  )}
                 </div>
               </div>
 
@@ -499,7 +500,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                   onClick={() => handlerProfile()}
                   className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
                 >
-                  <img src={profileImg} alt="profile" className="w-full h-full" />
+                  <img
+                    src={profileImg}
+                    alt="profile"
+                    className="w-full h-full"
+                  />
                 </div>
               </div>
 
@@ -513,7 +518,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
                 <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
                   <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
-                  {`${firstname} ${lastname}`}
+                    {`${firstname} ${lastname}`}
                   </h3>
                 </div>
                 <div className="content">
@@ -540,84 +545,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                     </li>
                     {userDetails && userDetails?.account_type !== "FAMILY" && (
                       <>
-                        <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                          <Link to="#" className="notifications">
-                            <div className="name">
-                              <p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                <span>Reports</span> <span>&gt;</span>
-                              </p>
-                            </div>
-                          </Link>
-                          {/* report list items*/}
-                          <div
-                            className="inner-list-items absolute rounded-lg"
-                            onClick={setNotification}
-                          >
-                            <ul className="p-3">
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="/referral" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Referrals
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Billing
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Payments
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Completed Jobs
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Previous Task
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                            </ul>
-                            <hr />
-                            <div className="px-7 py-3 cursor-pointer flex items-center">
-                              <div
-                                className={`h-6 w-8 mr-1 p-1 ${
-                                  toggleNotification
-                                    ? "bg-sky-blue flex justify-end items-center"
-                                    : "bg-slate-200"
-                                } rounded-full transition`}
-                              >
-                                <div className="w-4 h-full bg-white rounded-full"></div>
-                              </div>
-                              <p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
-                                Notifications
-                              </p>
-                            </div>
-                          </div>
-                          {/* end report list items*/}
-                        </li>
                         <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                           <Link to="#" className="notifications">
                             <div className="name">

src/components/Settings/Tabs/PaymentMathodsTab.jsx

@@ -1,8 +1,3 @@
-import React, { useEffect, useState } from "react";
-import method1 from "../../../assets/images/payment-method-1.png";
-import method2 from "../../../assets/images/payment-method-2.png";
-import method3 from "../../../assets/images/payment-method-3.png";
-import method4 from "../../../assets/images/payment-method-4.png";
 import CardList from "./CardList";
 
 

src/components/Settings/Tabs/RecipientAccountTab.jsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import method1 from "../../../assets/images/icons/bank.svg";
+import localImgLoad from "../../../lib/localImgLoad";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+export default function RecipientAccountTab({
+  recipientAccount,
+  setRecipientAccount,
+}) {
+  const cardList = recipientAccount?.data?.result_list;
+  const handleDeleteCardModal = () => {
+    setRecipientAccount((prev) => ({ ...prev, state: !prev.state }));
+  };
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentCardList = cardList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  return (
+    <>
+      <div className="payment-method-tab w-full">
+        <div className="payment-item-wrapper w-full">
+          <ul className="payment-items w-full min-h-[400px]">
+            {recipientAccount?.loading ? (
+              <div className="w-full h-[300px] flex justify-center items-center">
+                <LoadingSpinner size="8" color="sky-blue" />
+              </div>
+            ) : cardList?.length ? (
+              currentCardList.map((item) => {
+                let image =
+                  item.description &&
+                  localImgLoad(
+                    `images/settings/${item.description.toLowerCase()}.svg`
+                  );
+                let addedDate = item?.added?.split(" ")[0];
+
+                return (
+                  <li
+                    key={item.recipient_id}
+                    className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] "
+                  >
+                    <div className="flex space-x-5 mb-2 sm:mb-0">
+                      <div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                        <img
+                          src={image ? image : method1}
+                          className="w-[50px] h-[50px]"
+                          alt="payment"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-around">
+                        <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                          Added: {addedDate}
+                        </p>
+                        <p className="text-thin-light-gray sm:text-18 text-base tracking-wide">
+                          {item?.recipient}
+                        </p>
+                      </div>
+                    </div>
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setRecipientAccount({ state: true, data: item });
+                        }}
+                        className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </li>
+                );
+              })
+            ) : (
+              <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                No Cards Found
+              </h1>
+            )}
+          </ul>
+
+          {/* PAGINATION BUTTON */}
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+              cardList?.length
+                ? true
+                : false
+            }
+            data={cardList}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+          />
+          {/* END OF PAGINATION BUTTON */}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Settings/index.jsx

@@ -1,6 +1,13 @@
-import React, { useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
+import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
 import {
@@ -13,11 +20,13 @@ import {
   PrivacyPolicyTab,
   TermsConditionTab,
 } from "./Tabs";
+import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 
 export default function Settings({ faq }) {
   const [profileImg, setProfileImg] = useState(profile);
   const [coverImg, setCoverImg] = useState(cover);
-
+    const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
+    
   // profile img
   const profileImgInput = useRef(null);
   const browseProfileImg = () => {
@@ -47,6 +56,7 @@ export default function Settings({ faq }) {
     }
   };
 
+  const apiCall = useMemo(() => new usersService(), []);
   // Tabs Handling
   const tabs = [
     {
@@ -63,30 +73,36 @@ export default function Settings({ faq }) {
     },
     {
       id: 3,
+      name: "recipients-account",
+      title: "Recipients Account",
+      iconName: "bank-card",
+    },
+    {
+      id: 4,
       name: "notification",
       title: "Notification Setting",
       iconName: "notification-setting",
     },
     {
-      id: 4,
+      id: 5,
       name: "login_activity",
       title: "Login Activity",
       iconName: "login-activity",
     },
     {
-      id: 5,
+      id: 6,
       name: "password",
       title: "Change Password",
       iconName: "password-hover",
     },
     {
-      id: 6,
+      id: 7,
       name: "faq",
       title: "FAQ",
       iconName: "block-question",
     },
     {
-      id: 7,
+      id: 8,
       name: "privacy",
       title: "Privacy Policy",
       iconName: "page-right",
@@ -103,6 +119,48 @@ export default function Settings({ faq }) {
     setTab(value);
   };
 
+  // Recipient Account
+  const [recipientAccount, setRecipientAccount] = useState({
+    state: false,
+    loader: false,
+    msg: "",
+    data: null,
+  });
+
+  const getRecipientAccount = useCallback(async () => {
+    setRecipientAccount((prev) => ({ loader: true }));
+
+    let res;
+    try {
+      res = await apiCall.getRecipient();
+      res = res.data;
+
+      if (res?.internal_return < 0) {
+        setRecipientAccount((prev) => ({
+          loader: false,
+          msg: "Sorry, something went wrong",
+        }));
+        setTimeout(() => setRecipientAccount((prev) => prev), 5000);
+        return;
+      }
+
+      return setTimeout(() => {
+        setRecipientAccount((prev) => ({ loader: false, data: res }));
+      });
+    } catch (error) {
+      setRecipientAccount((prev) => ({
+        loader: false,
+        msg: "Sorry, an error occurred",
+      }));
+      setTimeout(() => setRecipientAccount((prev) => prev), 5000);
+      return;
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
+    getRecipientAccount();
+  }, [reloadCardList]);
+
   return (
     <>
       <Layout>
@@ -162,6 +220,15 @@ export default function Settings({ faq }) {
                       <PaymentMathodsTab />
                     </div>
                   )}
+                  {tab === "recipients-account" && (
+                    <div className="tab-item">
+                      <RecipientAccountTab
+                        recipientAccount={recipientAccount}
+                        setRecipientAccount={setRecipientAccount}
+                        setReloadCardList={setReloadCardList}
+                      />
+                    </div>
+                  )}
                   {tab === "notification" && (
                     <div className="tab-item">
                       <NotificationSettingTab />

src/store/TableReloads.js

@@ -5,7 +5,8 @@ const initialState = {
   pendingListTable: false,
   myTaskTable: false,
   othersInterestedTable: false,
-  couponTable: false
+  couponTable: false,
+  walletTable: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -29,6 +30,9 @@ export const tableReloadSlice = createSlice({
         case "COUPONTABLE":
           state.couponTable = !state.couponTable;
           return;
+        case "WALLETTABLE":
+          state.walletTable = !state.walletTable;
+          return;
         default:
           return state;
       }