89 lines
2.7 KiB
React
89 lines
2.7 KiB
React
import React, { useCallback, useState } from "react";
|
|
import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
|
|
import NairaWithdraw from "./Popup/NairaWithdraw";
|
|
import usersService from "../../services/UsersService";
|
|
|
|
function WalletAction({ walletItem, payment, openPopUp }) {
|
|
const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // 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">
|
|
<button
|
|
onClick={() => {
|
|
setShowNairaWithdraw(true);
|
|
}}
|
|
className={`${
|
|
walletItem.code != "NAIRA" && "invisible"
|
|
} px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
|
|
>
|
|
Spend
|
|
</button>
|
|
</div>
|
|
<div className="w-1/2 flex justify-center items-center">
|
|
<button
|
|
className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
onClick={() => {
|
|
openPopUp({
|
|
payment: payment,
|
|
currency: walletItem?.description,
|
|
});
|
|
}}
|
|
>
|
|
<span className="">Add Credit</span>
|
|
</button>
|
|
</div>
|
|
|
|
{showNairaWithdraw && (
|
|
<NairaWithdraw
|
|
wallet={walletItem}
|
|
action={() => {
|
|
setShowNairaWithdraw((prev) => !prev);
|
|
}}
|
|
situation={showNairaWithdraw}
|
|
setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
|
|
/>
|
|
)}
|
|
|
|
{showConfirmNairaWithdraw.show && (
|
|
<ConfirmNairaWithdraw
|
|
wallet={walletItem}
|
|
state={showConfirmNairaWithdraw.state}
|
|
action={() => {
|
|
setShowConfirmNairaWithdraw((prev) => ({
|
|
...prev,
|
|
show: !prev.show,
|
|
}));
|
|
}}
|
|
situation={showConfirmNairaWithdraw.show}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WalletAction;
|