.

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 />