WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

made confirm withdrawal a pop up

Browse Source
This commit was merged in pull request #329.
This commit is contained in:
victorAnumudu
2023-07-17 11:07:11 +01:00
parent d75b6ee26c
commit 7bedf76945
2 changed files with 59 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/ConfirmNairaWithdraw.jsx → src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
+8 -8
View File
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import InputCom from "../Helpers/Inputs/InputCom"; import InputCom from "../../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import ModalCom from "../../Helpers/ModalCom";
import ModalCom from "../Helpers/ModalCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService"; import usersService from "../../../services/UsersService";
function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
const apiURL = new usersService(); const apiURL = new usersService();
@@ -73,9 +73,9 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow"> <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
<div className="px-4 md:px-8 py-4"> <div className="px-4 md:px-8 py-4">
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium"> <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${( {`Withdraw from ${wallet.description} Wallet : ${
wallet.amount * 0.01 wallet.symbol
).toFixed(2)}`} }${(wallet.amount * 0.01).toFixed(2)}`}
</h2> </h2>
</div> </div>
<hr /> <hr />
src/components/MyWallet/WalletAction.jsx
+51 -32
View File
@@ -1,37 +1,40 @@
import React, { useState } from 'react' import React, { useState } from "react";
import { Link } from 'react-router-dom'; import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
import NairaWithdraw from './Popup/NairaWithdraw'; import NairaWithdraw from "./Popup/NairaWithdraw";
import ConfirmNairaWithdraw from './ConfirmNairaWithdraw';
function WalletAction({walletItem, payment, openPopUp}) { function WalletAction({ walletItem, payment, openPopUp }) {
const [showNairaWithdraw, setShowNairaWithdraw] = useState(false) // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({show: false, state: {}}) // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
show: false,
state: {},
}); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
return ( return (
<div className="counters w-full flex justify-between gap-2"> <div className="counters w-full flex justify-between gap-2">
<div className='w-1/2 flex justify-center items-center'> <div className="w-1/2 flex justify-center items-center">
<button <button
onClick={()=>{setShowNairaWithdraw(true)}} onClick={() => {
className={`${ setShowNairaWithdraw(true);
}}
className={`${
walletItem.code != "NAIRA" && "invisible" walletItem.code != "NAIRA" && "invisible"
} px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`} } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
> >
Spend Spend
</button> </button>
</div> </div>
<div className='w-1/2 flex justify-center items-center'> <div className="w-1/2 flex justify-center items-center">
<button <button
className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white' className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
onClick={() => { onClick={() => {
openPopUp({ openPopUp({
payment: payment, payment: payment,
currency: walletItem?.description, currency: walletItem?.description,
}); });
}} }}
> >
{/* <span className=""> {/* <span className="">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="38" width="38"
@@ -46,20 +49,36 @@ function WalletAction({walletItem, payment, openPopUp}) {
></path> ></path>
</svg> </svg>
</span> */} </span> */}
<span className="">Add Credit</span> <span className="">Add Credit</span>
</button> </button>
</div> </div>
{showNairaWithdraw &&
<NairaWithdraw wallet={walletItem} action={()=>{setShowNairaWithdraw(prev => !prev)}} situation={showNairaWithdraw} setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw} />
}
{showConfirmNairaWithdraw.show && {showNairaWithdraw && (
<ConfirmNairaWithdraw wallet={walletItem} state={showConfirmNairaWithdraw.state} action={()=>{setShowConfirmNairaWithdraw(prev => ({...prev, show: !prev.show}))}} situation={showConfirmNairaWithdraw.show} /> <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> </div>
) );
} }
export default WalletAction export default WalletAction;