Files
Users-Wrench/src/components/MyWallet/WalletAction.jsx
T

79 lines
2.4 KiB
React

import React, { useCallback, useState } from "react";
import usersService from "../../services/UsersService";
import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
import NairaWithdraw from "./Popup/NairaWithdraw";
function WalletAction({ walletItem, payment, openPopUp }) {
const [showNairaWithdraw, setShowNairaWithdraw] = useState({
show: false,
state: {},
}); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
show: false,
state: {},
}); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
return (
<div className="counters w-full flex justify-between gap-2">
<div className="w-1/2 flex justify-center items-center">
<button
onClick={() => {
setShowNairaWithdraw((prev) => ({ ...prev, show: 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.show && (
<NairaWithdraw
wallet={walletItem}
action={() => {
setShowNairaWithdraw((prev) => ({
...prev,
show: !prev.show,
}));
}}
situation={showNairaWithdraw.show}
state={showNairaWithdraw.state}
setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
/>
)}
{showConfirmNairaWithdraw.show && (
<ConfirmNairaWithdraw
wallet={walletItem}
state={showConfirmNairaWithdraw.state}
action={() => {
setShowConfirmNairaWithdraw((prev) => ({
...prev,
show: !prev.show,
}));
}}
setShowNairaWithdraw={setShowNairaWithdraw}
situation={showConfirmNairaWithdraw.show}
/>
)}
</div>
);
}
export default WalletAction;