diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx index 4d530cb..10a672a 100644 --- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx +++ b/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 (
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 1c4c0cd..0826462 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -4,98 +4,74 @@ import React, { useCallback, useEffect, useMemo, - useReducer, useState, } from "react"; -import { Navigate, Outlet, Route, Routes } from "react-router-dom"; +import { useSelector } from "react-redux"; import usersService from "../../services/UsersService"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; - -// const AddFund = lazy(() => import("./AddFund")); -// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund")); -// const TransferFund = lazy(() => import("./TransferFund")); const WalletBox = lazy(() => import("./WalletBox")); -// const NairaWithdraw = lazy(() => import("./Popup/NairaWithdraw")); -// const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw")); -// const AddRecipient = lazy(() => import("./AddRecipient")); -// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer")); - -// function Wallet() { -// return ( -// -// -// -// ); -// } - -const initialState = { - loading: true, - data: [], - error: false, -}; - -// Currently learning better about useReducer, so I converted this since it seemed like something complex -const reducer = (state, action) => { - switch (action.type) { - case "FETCH_SUCCESS": - return { - ...state, - loading: false, - data: action.payload, - }; - case "FETCH_ERROR": - return { - ...state, - loading: false, - error: true, - }; - default: - return state; - } -}; const WalletRoutes = () => { - const apiCall = new usersService(); + 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: [], + }); - const [walletList, setWalletList] = useState({loading: true, data: []}); - const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []}); - - const getWalletList = () => { - apiCall + const getWalletList = useCallback(() => { + return apiCall .getUserWallets() .then((res) => { if (res.data.internal_return < 0) { - setWalletList({loading: false, data: []}) + setWalletList({ loading: false, data: [] }); } else { - setWalletList({loading: false, data: res.data?.result_list}) + setWalletList({ loading: true, data: [] }); + + setTimeout( + () => + setWalletList({ loading: false, data: res.data?.result_list }), + 500 + ); } }) .catch(() => { - setWalletList({loading: false, data: []}) + setWalletList({ loading: false, data: [] }); }); - } + }, [apiCall]); - const getPaymentHistory = () => { - apiCall + const getPaymentHistory = useCallback(() => { + return apiCall .getPaymentHx() .then((res) => { if (res.data.internal_return < 0) { - setPaymentHistory({loading: false, data: []}) + setPaymentHistory({ loading: false, data: [] }); } else { - setPaymentHistory({loading: false, data: res.data?.result_list}) + setPaymentHistory({ loading: false, data: res.data?.result_list }); } }) .catch(() => { - setPaymentHistory({loading: false, data: []}) + setPaymentHistory({ loading: false, data: [] }); }); - } + }, [apiCall]); useEffect(() => { - getWalletList(); - getPaymentHistory(); - }, []); + const fetchData = async () => { + await Promise.all([getWalletList(), getPaymentHistory()]); + }; + if (walletList.loading) { + fetchData(); + } + }, [walletTable, walletList.loading]); + + console.log(walletTable); return ( }> diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index 4df028f..73e8dae 100644 --- a/src/components/Partials/Header.jsx +++ b/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 }) {

{firstname}

- {userDetails && userDetails?.account_type !== "FAMILY" &&

@{userEmail}

} + {userDetails && userDetails?.account_type !== "FAMILY" && ( +

@{userEmail}

+ )}
@@ -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" > - profile + profile @@ -513,7 +518,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {

- {`${firstname} ${lastname}`} + {`${firstname} ${lastname}`}

@@ -540,84 +545,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { {userDetails && userDetails?.account_type !== "FAMILY" && ( <> -
  • - -
    -

    - Reports > -

    -
    - - {/* report list items*/} -
    -
      -
    • - -
      -

      - Referrals -

      -
      - -
      • -
    • - -
      -

      - Billing -

      -
      - -
      • -
    • - -
      -

      - Payments -

      -
      - -
      • -
    • - -
      -

      - Completed Jobs -

      -
      - -
      • -
    • - -
      -

      - Previous Task -

      -
      - -
      • -
    -
    -
    -
    -
    -
    -

    - Notifications -

    -
    -
    - {/* end report list items*/} -
  • diff --git a/src/components/Settings/Tabs/PaymentMathodsTab.jsx b/src/components/Settings/Tabs/PaymentMathodsTab.jsx index e58e8ac..e4d779f 100644 --- a/src/components/Settings/Tabs/PaymentMathodsTab.jsx +++ b/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"; diff --git a/src/components/Settings/Tabs/RecipientAccountTab.jsx b/src/components/Settings/Tabs/RecipientAccountTab.jsx new file mode 100644 index 0000000..8010812 --- /dev/null +++ b/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 ( + <> +
    +
    +
      + {recipientAccount?.loading ? ( +
      + +
      + ) : cardList?.length ? ( + currentCardList.map((item) => { + let image = + item.description && + localImgLoad( + `images/settings/${item.description.toLowerCase()}.svg` + ); + let addedDate = item?.added?.split(" ")[0]; + + return ( +
    • +
      +
      + payment +
      +
      +

      + Added: {addedDate} +

      +

      + {item?.recipient} +

      +
      +
      +
      + +
      +
      • + ); + }) + ) : ( +

      + No Cards Found +

      + )} +
    + + {/* PAGINATION BUTTON */} + = + cardList?.length + ? true + : false + } + data={cardList} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
    +
    + + ); +} diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx index 64917b7..012ee71 100644 --- a/src/components/Settings/index.jsx +++ b/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 ( <> @@ -162,6 +220,15 @@ export default function Settings({ faq }) {
    )} + {tab === "recipients-account" && ( +
    + +
    + )} {tab === "notification" && (
    diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js index 592971a..da63d66 100644 --- a/src/store/TableReloads.js +++ b/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; }