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

Added loading height

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-25 20:46:46 +01:00
parent 706cf141e7
commit cb1259d2c8
1 changed files with 76 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
+76 -43
View File
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import ModalCom from "../../Helpers/ModalCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
function ConfirmNairaWithdraw({
payment,
@@ -23,12 +24,14 @@ function ConfirmNairaWithdraw({
const [completeNairaWithdraw, setShowCompleteNairaWithdraw] = useState({
show: false,
load: false,
state: {},
}); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = () => {
setRequestStatus({ message: "", loading: true, status: false });
setShowCompleteNairaWithdraw({ load: true });
let reqData = {
amount: Number(state.amount * 100),
Fee: Number(state.fee),
@@ -61,22 +64,32 @@ function ConfirmNairaWithdraw({
// status: false,
// });
// }
return setTimeout(
() =>
setRequestStatus({
message: "",
loading: false,
status: false,
}),
setShowCompleteNairaWithdraw({ show: true, state: res.data }),
5000
);
return setTimeout(() => {
setRequestStatus({
message: "",
loading: false,
status: false,
});
setShowCompleteNairaWithdraw({
show: true,
load: false,
state: res.data,
});
}, 5000);
}
setTimeout(() => {
setShowCompleteNairaWithdraw({ show: true, state: res.data });
}, 1000);
console.log(res.data);
setRequestStatus({
message: "",
loading: false,
status: false,
});
setShowCompleteNairaWithdraw({
show: true,
load: false,
state: res.data,
});
}, 5000);
return;
})
.catch((error) => {
@@ -108,7 +121,7 @@ function ConfirmNairaWithdraw({
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
{completeNairaWithdraw.show
? completeNairaWithdraw?.state?.internal_return > 0
? completeNairaWithdraw?.state?.internal_return >= 0
? "Transfer Success"
: "Transfer Error"
: `Withdraw from ${wallet.description} Wallet : ${
@@ -143,7 +156,11 @@ function ConfirmNairaWithdraw({
</div>
<hr />
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
{completeNairaWithdraw.show ? (
{completeNairaWithdraw.load ? (
<div className="h-[35rem] flex items-center justify-center">
<LoadingSpinner size="12" color="sky-blue" />
</div>
) : completeNairaWithdraw.show ? (
<div className="px-4 md:p-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[23rem]">
<div className="flex items-center w-full justify-center mb-3">
@@ -356,35 +373,51 @@ function ConfirmNairaWithdraw({
</div>
)}
<hr />
<p
className={`text-base ${
requestStatus.status ? "text-green-500" : "text-red-500"
} px-4 md:px-8 py-4 h-5`}
>
{requestStatus.message && requestStatus.message}
</p>
<div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
{!completeNairaWithdraw.show && (
<button
type="button"
onClick={state?.choice === "prev" ? getBack : action}
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
{!completeNairaWithdraw.load && (
<>
{" "}
<hr />
<p
className={`text-base ${
requestStatus.status ? "text-green-500" : "text-red-500"
} px-4 md:px-8 py-4 h-5`}
>
<span className="text-gradient">
{state?.choice === "prev" ? "Back" : "Cancel"}
</span>
</button>
)}
<button
onClick={
completeNairaWithdraw.show ? completeWithdrawal : handleSubmit
}
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
>
{completeNairaWithdraw.show ? "Okay" : "Transfer"}
</button>
</div>
{requestStatus.message && requestStatus.message}
</p>
<div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
{!completeNairaWithdraw.show && (
<button
type="button"
onClick={action}
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
>
<span className="text-gradient">Cancel</span>
</button>
)}
<button
onClick={
completeNairaWithdraw.show
? completeWithdrawal
: completeNairaWithdraw?.state?.internal_return < 0
? action
: handleSubmit
}
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : completeNairaWithdraw.show ? (
"Okay"
) : completeNairaWithdraw?.state?.internal_return < 0 ? (
"Cancel"
) : (
"Transfer"
)}
</button>
</div>
</>
)}
</div>
</div>
</div>