Added Notification and Started Wallet Withdraw
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import ModalCom from "../../Helpers/ModalCom";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
|
||||
import usersService from "../../../services/UsersService";
|
||||
|
||||
@@ -26,25 +26,30 @@ const initialValues = {
|
||||
comment: "",
|
||||
};
|
||||
|
||||
function NairaWithdraw({ wallet, action, situation, setShowConfirmNairaWithdraw }) {
|
||||
function NairaWithdraw({
|
||||
wallet,
|
||||
action,
|
||||
situation,
|
||||
setShowConfirmNairaWithdraw,
|
||||
}) {
|
||||
const apiCall = new usersService(); // API CLASS CALL
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [tab, setTab] = useState("previous");
|
||||
let [requestStatus, setRequestStatus] = useState(false);
|
||||
|
||||
|
||||
let [recipients, setRecipients] = useState({
|
||||
// FOR COUPON HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false,
|
||||
});
|
||||
|
||||
|
||||
let [sendMoneyFee, setSendMoneyFee] = useState({
|
||||
loading: false,
|
||||
fee: 0,
|
||||
total: 0,
|
||||
}); // HOLD THE VALUE FOR walletSEND MONEY FEE
|
||||
|
||||
|
||||
//FUNCTION TO GET RECIPIENT LIST
|
||||
const getRecipients = () => {
|
||||
apiCall
|
||||
@@ -87,7 +92,7 @@ function NairaWithdraw({ wallet, action, situation, setShowConfirmNairaWithdraw
|
||||
setSendMoneyFee({ loading: false, fee: 0, total: 0 });
|
||||
});
|
||||
};
|
||||
console.log('TESTING', sendMoneyFee)
|
||||
console.log("TESTING", sendMoneyFee);
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = (values, helpers) => {
|
||||
if (!values?.amount && !values.recipientID) return;
|
||||
@@ -104,8 +109,8 @@ console.log('TESTING', sendMoneyFee)
|
||||
setTimeout(() => {
|
||||
setRequestStatus(false);
|
||||
// navigate("confirm-withdraw-naira", { state: stateData });
|
||||
action()
|
||||
setShowConfirmNairaWithdraw({show: true, state: stateData})
|
||||
action();
|
||||
setShowConfirmNairaWithdraw({ show: true, state: stateData });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
@@ -126,12 +131,13 @@ console.log('TESTING', sendMoneyFee)
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className="transfer-fund-info">
|
||||
<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)}`}
|
||||
<h2 className="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)}`}
|
||||
</h2>
|
||||
<div className=" mb-6 gap-4 flex flex-col">
|
||||
{/* Amount Form */}
|
||||
<div className="flex flex-col">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4"
|
||||
@@ -169,13 +175,15 @@ console.log('TESTING', sendMoneyFee)
|
||||
name="fee"
|
||||
direction="rtl"
|
||||
value={
|
||||
sendMoneyFee.loading ? "loading" : (sendMoneyFee.fee * 0.01).toFixed(2)
|
||||
sendMoneyFee.loading
|
||||
? "loading"
|
||||
: (sendMoneyFee.fee * 0.01).toFixed(2)
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
@@ -186,101 +194,219 @@ console.log('TESTING', sendMoneyFee)
|
||||
name="total"
|
||||
direction="rtl"
|
||||
value={
|
||||
sendMoneyFee.loading ? "loading" : (sendMoneyFee.total * 0.01).toFixed(2)
|
||||
sendMoneyFee.loading
|
||||
? "loading"
|
||||
: (sendMoneyFee.total * 0.01).toFixed(2)
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-3 flex gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
||||
Comment:
|
||||
</label>
|
||||
<textarea
|
||||
style={{ resize: "none" }}
|
||||
className="text-base px-4 py-2 rounded-md sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
||||
name="comment"
|
||||
value={props.values.comment}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
cols="30"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3">
|
||||
Recipient:
|
||||
</label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
{/* Account Selector */}
|
||||
<div className=" flex items-center gap-[5rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
To:
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Account
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
New Account{" "}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h[150px]">
|
||||
{tab == "previous" && (
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
{item.recipient}
|
||||
Loading...
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
<Link
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
>
|
||||
{item.recipient}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
{/* <Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
||||
>
|
||||
Add New
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6 flex gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
||||
Comment:
|
||||
</label>
|
||||
<textarea
|
||||
style={{ resize: "none" }}
|
||||
className="text-base px-4 py-2 rounded-md min-h-[100px] sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
||||
name="comment"
|
||||
value={props.values.comment}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
cols="30"
|
||||
rows="2"
|
||||
/>
|
||||
)}
|
||||
{tab == "new" && (
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
>
|
||||
{item.recipient}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
{/* <Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
||||
>
|
||||
Add New
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
|
||||
|
||||
Reference in New Issue
Block a user