From 21843c4bc713aae3a8e8b7273a59424ada82571f Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 16 Oct 2023 13:43:48 +0100 Subject: [PATCH] Changed Naira Wallet Country Display --- src/components/FamilyAcc/Tabs/ProfileInfo.jsx | 2 +- .../MyWallet/Popup/NairaWithdraw.jsx | 96 +++++++++---------- src/components/MyWallet/Wallet.jsx | 40 +++++++- src/components/MyWallet/WalletAction.jsx | 4 +- src/components/MyWallet/WalletBox.jsx | 4 +- src/components/MyWallet/WalletItemCard.jsx | 9 +- 6 files changed, 94 insertions(+), 61 deletions(-) diff --git a/src/components/FamilyAcc/Tabs/ProfileInfo.jsx b/src/components/FamilyAcc/Tabs/ProfileInfo.jsx index 39dded0..a93d4db 100644 --- a/src/components/FamilyAcc/Tabs/ProfileInfo.jsx +++ b/src/components/FamilyAcc/Tabs/ProfileInfo.jsx @@ -8,7 +8,7 @@ export default function ProfileInfo({ browseProfileImg, accountDetails, }) { - console.log(accountDetails.banner) + // console.log(accountDetails.banner) return (
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx index 9f1589b..c5faf10 100644 --- a/src/components/MyWallet/Popup/NairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx @@ -12,8 +12,7 @@ function NairaWithdraw({ state, setShowConfirmNairaWithdraw, }) { - - let MaxNoOfBanks = process.env.REACT_APP_MAX_CREDIT_BANK_ACCOUNT // HOLDS THE VALUE OF THE MAX NUMBER OF BANKS USER CAN ADD + let MaxNoOfBanks = process.env.REACT_APP_MAX_CREDIT_BANK_ACCOUNT; // HOLDS THE VALUE OF THE MAX NUMBER OF BANKS USER CAN ADD const apiCall = new usersService(); const [tab, setTab] = useState("previous"); let [requestStatus, setRequestStatus] = useState(false); @@ -25,7 +24,9 @@ function NairaWithdraw({ recipientID: state?.previousAccount?.recipientID || "", }, newAccount: { - country: state?.newAccount?.amount || "", + country: wallet.walletCountry + ? wallet.walletCountry[0][0] + : wallet.country, bank: state?.newAccount?.amount || "", accountNumber: state?.newAccount?.amount || "", accountType: state?.newAccount?.amount || "", @@ -67,10 +68,14 @@ function NairaWithdraw({ // Handling card change const handleBankOptions = (event) => { - const { value } = event.target; + let bankCountry = wallet.walletCountry + ? wallet.walletCountry[0][0] + : wallet.country setBankName((prev) => ({ loading: true, data: [] })); apiCall - .getCountryBank({ country: value }) + .getCountryBank({ + country: bankCountry + }) .then((res) => { if (res.data.internal_return < 0) { setBankName((prev) => ({ loading: false, data: [] })); @@ -140,6 +145,7 @@ function NairaWithdraw({ }; useEffect(() => { + handleBankOptions() getCountry(); // TO LOAD LIST COUNTRY getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES }, []); @@ -226,7 +232,7 @@ function NairaWithdraw({ setShowConfirmNairaWithdraw({ show: true, state: stateData }); }, 1000); } - + if (tab === "new") { const { accountNumber, accountType, bank, city, country, state } = values?.newAccount; @@ -281,6 +287,8 @@ function NairaWithdraw({ getRecipients(); }, []); + console.log("Testing Wallet Country", wallet?.walletCountry[0][0]); + return (
@@ -424,7 +432,11 @@ function NairaWithdraw({
@@ -523,12 +540,12 @@ function NairaWithdraw({ )} - {tab == "new" && ( - recipients.loading ? + {tab == "new" && + (recipients.loading ? (
- +
- :recipients.data.length < MaxNoOfBanks ? + ) : recipients.data.length < MaxNoOfBanks ? (
@@ -541,7 +558,12 @@ function NairaWithdraw({ Country{" "} * - {allCountries.loading ? ( )} - - {/* {props.errors.country && - props.touched.country && ( -

- {props.errors.country} -

- )} */} + */}
{/* bank name */} @@ -646,11 +662,6 @@ function NairaWithdraw({ )} - {/* {props.errors.bank && props.touched.bank && ( -

- {props.errors.bank} -

- )} */}
@@ -671,16 +682,12 @@ function NairaWithdraw({ name="newAccount.accountNumber" placeholder="Account No" maxLength={10} - value={props.values.newAccount?.accountNumber} + value={ + props.values.newAccount?.accountNumber + } inputHandler={props.handleChange} blurHandler={props.handleBlur} /> - {/* {props.errors.accountNumber && - props.touched.accountNumber && ( -

- {props.errors.accountNumber} -

- )} */}
{/* Account Type */} @@ -732,12 +739,6 @@ function NairaWithdraw({ )} - {/* {props.errors.accountType && - props.touched.accountType && ( -

- {props.errors.accountType} -

- )} */} @@ -748,7 +749,8 @@ function NairaWithdraw({ htmlFor="newAccount.state" className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]" > - State * + State{" "} + * - {/* {props.errors.state && props.touched.state && ( -

- {props.errors.state} -

- )} */} {/* city */} @@ -785,20 +782,15 @@ function NairaWithdraw({ inputHandler={props.handleChange} blurHandler={props.handleBlur} /> - {/* {props.errors.city && props.touched.city && ( -

- {props.errors.city} -

- )} */} {/* end of inputs for new accounts */} - : + ) : (
- )} + ))}
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 5965446..c4db4ca 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -5,7 +5,6 @@ import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; const WalletBox = lazy(() => import("./WalletBox")); - const WalletRoutes = () => { const apiCall = new usersService(); const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE @@ -16,6 +15,12 @@ const WalletRoutes = () => { data: [], }); + const [allCountries, setAllCountries] = useState({ + // STATE TO HOLD LIST OF COUNTRIES + loading: true, + data: [], + }); + const getPaymentHistory = () => { apiCall .getPaymentHx() @@ -31,14 +36,45 @@ const WalletRoutes = () => { }); }; + // FUNCTION TO GET COUNTRIES + const getCountry = () => { + apiCall + .getSignupCountryData() + .then((res) => { + if (res.data.internal_return < 0) { + setAllCountries((prev) => ({ loading: false, data: [] })); + return; + } + setAllCountries((prev) => ({ + loading: false, + data: res.data.signup_country, + })); + }) + .catch((error) => { + setAllCountries((prev) => ({ loading: false, data: [] })); + }); + }; + useEffect(() => { + getCountry(); getPaymentHistory(); }, [walletTable]); + console.log( + "Testing all country: ", + allCountries, + "Testing wallet: ", + walletDetails + ); + return ( }> - + ); diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx index f544471..b897119 100644 --- a/src/components/MyWallet/WalletAction.jsx +++ b/src/components/MyWallet/WalletAction.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from "react"; +import React, { useEffect, useState } from "react"; import usersService from "../../services/UsersService"; import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw"; import NairaWithdraw from "./Popup/NairaWithdraw"; @@ -8,7 +8,7 @@ function WalletAction({ walletItem, payment, openPopUp }) { show: false, state: {}, }); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP - + const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({ show: false, state: {}, diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index 02db619..c6d3dfd 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -4,7 +4,7 @@ import WalletItemCard from "./WalletItemCard"; /** * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object. */ -export default function WalletBox({ wallet, payment }) { +export default function WalletBox({ wallet, payment, countries }) { const { loading, data } = wallet; return ( @@ -18,7 +18,7 @@ export default function WalletBox({ wallet, payment }) { ) : ( data.length > 0 && data.map((item) => (
- +
)) )} diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index 95e5df9..d4d7942 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -10,7 +10,7 @@ import WalletAction from "./WalletAction"; /** * Renders a card displaying information about a wallet item. */ -export default function WalletItemCard({ walletItem, payment }) { +export default function WalletItemCard({ walletItem, payment, countries }) { const { userDetails } = useSelector((state) => state.userDetails); const accountType = userDetails?.account_type === "FAMILY"; const dispatch = useDispatch(); @@ -35,10 +35,15 @@ export default function WalletItemCard({ walletItem, payment }) { dispatch(tableReload({ type: "WALLETTABLE" })); }; + const currentWalletCurrency = countries + .map((country) => country) + .filter((country) => country[0] === walletItem.country); + const image = walletItem.code ? `${walletItem.code.toLowerCase()}.svg` : "default.png"; + return ( <>
-- 2.34.1