made confirm withdrawal a pop up

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
@@ -1,11 +1,11 @@
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 InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import ModalCom from "../Helpers/ModalCom";
import InputCom from "../../Helpers/Inputs/InputCom";
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 }) {
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="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">
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
wallet.amount * 0.01
).toFixed(2)}`}
{`Withdraw from ${wallet.description} Wallet : ${
wallet.symbol
}${(wallet.amount * 0.01).toFixed(2)}`}
</h2>
</div>
<hr />
+51 -32
View File
@@ -1,37 +1,40 @@
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import NairaWithdraw from './Popup/NairaWithdraw';
import ConfirmNairaWithdraw from './ConfirmNairaWithdraw';
import React, { useState } from "react";
import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
import NairaWithdraw from "./Popup/NairaWithdraw";
function WalletAction({walletItem, payment, openPopUp}) {
const [showNairaWithdraw, setShowNairaWithdraw] = useState(false) // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
function WalletAction({ walletItem, payment, openPopUp }) {
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 (
<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
onClick={()=>{setShowNairaWithdraw(true)}}
className={`${
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`}
} px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
>
Spend
Spend
</button>
</div>
<div className='w-1/2 flex justify-center items-center'>
</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={() => {
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,
payment: payment,
currency: walletItem?.description,
});
}}
}}
>
{/* <span className="">
{/* <span className="">
<svg
xmlns="http://www.w3.org/2000/svg"
width="38"
@@ -46,20 +49,36 @@ function WalletAction({walletItem, payment, openPopUp}) {
></path>
</svg>
</span> */}
<span className="">Add Credit</span>
<span className="">Add Credit</span>
</button>
</div>
{showNairaWithdraw &&
<NairaWithdraw wallet={walletItem} action={()=>{setShowNairaWithdraw(prev => !prev)}} situation={showNairaWithdraw} setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw} />
}
</div>
{showConfirmNairaWithdraw.show &&
<ConfirmNairaWithdraw wallet={walletItem} state={showConfirmNairaWithdraw.state} action={()=>{setShowConfirmNairaWithdraw(prev => ({...prev, show: !prev.show}))}} situation={showConfirmNairaWithdraw.show} />
}
{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
export default WalletAction;