Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -181,8 +181,6 @@ export default function FamilyManageTabs({
|
||||
|
||||
const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
|
||||
|
||||
console.log(details)
|
||||
|
||||
useEffect(() => {
|
||||
let __manageFamily = true;
|
||||
if (__manageFamily) {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import ModalCom from "../../Helpers/ModalCom";
|
||||
@@ -23,9 +22,16 @@ function ConfirmNairaWithdraw({
|
||||
status: false,
|
||||
});
|
||||
|
||||
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),
|
||||
@@ -51,57 +57,40 @@ function ConfirmNairaWithdraw({
|
||||
.sendMoney(reqData)
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
if (res.data?.status_message?.toLowerCase().includes("limit")) {
|
||||
// if (res.data?.status_message?.toLowerCase().includes("limit")) {
|
||||
// setRequestStatus({
|
||||
// message: ,
|
||||
// loading: false,
|
||||
// status: false,
|
||||
// });
|
||||
// }
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({
|
||||
message: "You have exceeded the transfer limit",
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
} else if (
|
||||
res.data?.status_message?.toLowerCase().includes("not_found")
|
||||
) {
|
||||
setRequestStatus({
|
||||
message: "Sorry, wallet not found",
|
||||
loading: false,
|
||||
status: false,
|
||||
setShowCompleteNairaWithdraw({
|
||||
show: true,
|
||||
load: false,
|
||||
state: res.data,
|
||||
});
|
||||
} else if (
|
||||
res.data?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("recipient_add_error")
|
||||
) {
|
||||
setRequestStatus({
|
||||
message: res.data?.error,
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
} else {
|
||||
setRequestStatus({
|
||||
message: "Could not perform transaction",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
}
|
||||
return setTimeout(
|
||||
() =>
|
||||
setRequestStatus({
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
}),
|
||||
5000
|
||||
);
|
||||
}, 5000);
|
||||
}
|
||||
setRequestStatus({
|
||||
message: "Transfer Successful!",
|
||||
loading: false,
|
||||
status: true,
|
||||
});
|
||||
toast.success("Transfer sucessful");
|
||||
|
||||
setTimeout(() => {
|
||||
navigate("/my-wallet", { replace: true });
|
||||
window.location.reload(true);
|
||||
}, 1000);
|
||||
setRequestStatus({
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
setShowCompleteNairaWithdraw({
|
||||
show: true,
|
||||
load: false,
|
||||
state: res.data,
|
||||
});
|
||||
}, 5000);
|
||||
return;
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
@@ -120,15 +109,31 @@ function ConfirmNairaWithdraw({
|
||||
});
|
||||
};
|
||||
|
||||
const completeWithdrawal = () => {
|
||||
action();
|
||||
window.location.reload(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalCom action={action} situation={situation} className="edit-popup">
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="w-full">
|
||||
<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">
|
||||
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
|
||||
wallet.amount * 0.01
|
||||
).toFixed(2)}`}
|
||||
{completeNairaWithdraw.load ? (
|
||||
"Confirming..."
|
||||
) : (
|
||||
<>
|
||||
{" "}
|
||||
{completeNairaWithdraw.show
|
||||
? completeNairaWithdraw?.state?.internal_return >= 0
|
||||
? "Transfer Success"
|
||||
: "Transfer Error"
|
||||
: `Withdraw from ${wallet.description} Wallet : ${
|
||||
wallet.symbol
|
||||
}${(wallet.amount * 0.01).toFixed(2)}`}
|
||||
</>
|
||||
)}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
@@ -158,123 +163,268 @@ function ConfirmNairaWithdraw({
|
||||
</div>
|
||||
<hr />
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
||||
<h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
|
||||
{/* Confirm Withdraw to Account */}
|
||||
</h2>
|
||||
{/* AMOUNT */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Amount:"
|
||||
type="text"
|
||||
name="amount"
|
||||
value={state?.amount || ""}
|
||||
disable={true}
|
||||
/>
|
||||
{completeNairaWithdraw.load ? (
|
||||
<div className="h-[35rem] flex items-center justify-center">
|
||||
<LoadingSpinner size="12" color="sky-blue" />
|
||||
</div>
|
||||
|
||||
{state?.choice === "prev" && (
|
||||
<>
|
||||
{/* RECIPIENT ACC: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Recipient Acc:"
|
||||
type="text"
|
||||
name="recipient"
|
||||
value={state?.details?.recipient || ""}
|
||||
disable={true}
|
||||
/>
|
||||
) : 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">
|
||||
{completeNairaWithdraw.state?.sendmoney_message
|
||||
?.toLowerCase()
|
||||
?.includes("completed") ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="green"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="feather feather-check-circle"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
width="100"
|
||||
height="100"
|
||||
stroke="red"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="feather feather-x-circle"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{state?.choice === "new" && (
|
||||
<>
|
||||
{/* RECIPIENT ACC: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Bank Acc:"
|
||||
type="text"
|
||||
name="bank"
|
||||
value={
|
||||
`${state?.details?.name} ${state?.details?.country}` ||
|
||||
""
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* PROCESSING FEE: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Processing Fee:"
|
||||
type="text"
|
||||
name="processingFee"
|
||||
value={(state?.fee * 0.01).toFixed(2) || ""}
|
||||
disable={true}
|
||||
/>
|
||||
{completeNairaWithdraw.state?.internal_return >= 0 ? (
|
||||
<>
|
||||
<div className={`flex items-center`}>
|
||||
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{completeNairaWithdraw.state?.sendmoney_message || ""}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Amount(
|
||||
{completeNairaWithdraw.state
|
||||
?.terminatingcountrycode || ""}
|
||||
)
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{Number(
|
||||
completeNairaWithdraw.state?.TerminatingAmount *
|
||||
0.01
|
||||
).toLocaleString() || ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Recipient
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{completeNairaWithdraw.state?.recitient}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Confirmation Number
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{completeNairaWithdraw.state?.confirmation}
|
||||
</span>
|
||||
</div>{" "}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className={`flex items-center`}>
|
||||
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{completeNairaWithdraw.state?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("not_found")
|
||||
? "Wallet Error Occurred"
|
||||
: completeNairaWithdraw.state?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("recipient_add_error")
|
||||
? "Recipient Error Occurred"
|
||||
: completeNairaWithdraw.state?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("limit")
|
||||
? "Transfer limit Error"
|
||||
: "An Error Occurred"}{" "}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Message:
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{completeNairaWithdraw.state?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("not_found")
|
||||
? "This Wallet is not Found"
|
||||
: completeNairaWithdraw.state?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("recipient_add_error")
|
||||
? "No Recipient Found"
|
||||
: completeNairaWithdraw.state?.status_message
|
||||
?.toLowerCase()
|
||||
.includes("limit")
|
||||
? "The transfer limit has been exceeded"
|
||||
: "Could not perform transaction"}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
||||
<h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
|
||||
{/* Confirm Withdraw to Account */}
|
||||
</h2>
|
||||
{/* AMOUNT */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Amount:"
|
||||
type="text"
|
||||
name="amount"
|
||||
value={state?.amount || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* TOTAL */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Total"
|
||||
type="text"
|
||||
name="total"
|
||||
value={(state?.total * 0.01).toFixed(2) || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* COMMENT/NOTE */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Comment/Note:"
|
||||
type="text"
|
||||
name="comment"
|
||||
value={state?.comment || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<button
|
||||
type="button"
|
||||
onClick={state?.choice === "prev" ? getBack : action}
|
||||
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">
|
||||
{state?.choice === "prev" ? "Back" : "Cancel"}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={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" />
|
||||
) : (
|
||||
"Transfer"
|
||||
{state?.choice === "prev" && (
|
||||
<>
|
||||
{/* RECIPIENT ACC: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Recipient Acc:"
|
||||
type="text"
|
||||
name="recipient"
|
||||
value={state?.details?.recipient || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{state?.choice === "new" && (
|
||||
<>
|
||||
{/* RECIPIENT ACC: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Bank Acc:"
|
||||
type="text"
|
||||
name="bank"
|
||||
value={
|
||||
`${state?.details?.name} ${state?.details?.country}` ||
|
||||
""
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* PROCESSING FEE: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Processing Fee:"
|
||||
type="text"
|
||||
name="processingFee"
|
||||
value={(state?.fee * 0.01).toFixed(2) || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* TOTAL */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Total"
|
||||
type="text"
|
||||
name="total"
|
||||
value={(state?.total * 0.01).toFixed(2) || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* COMMENT/NOTE */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Comment/Note:"
|
||||
type="text"
|
||||
name="comment"
|
||||
value={state?.comment || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!completeNairaWithdraw.load && (
|
||||
<>
|
||||
{" "}
|
||||
<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={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>
|
||||
|
||||
@@ -171,7 +171,12 @@ function NairaWithdraw({
|
||||
setErrorMsgs({ amount: "amount required" });
|
||||
setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
|
||||
return;
|
||||
} else if (Number(values.amount) > Number(wallet?.transfer_limit)) {
|
||||
setErrorMsgs({ amount: "transfer limit exceeded" });
|
||||
setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (values?.comment?.length >= 50) {
|
||||
setErrorMsgs({ comment: "50 chars max" });
|
||||
setTimeout(() => setErrorMsgs({ comment: "" }), 1000);
|
||||
@@ -319,7 +324,7 @@ function NairaWithdraw({
|
||||
<div className="flex flex-col">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4"
|
||||
fieldClass="px-4 text-end"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.3] mb-0"
|
||||
inputClass="flex-[0.7] max-w-[12rem]"
|
||||
@@ -327,7 +332,6 @@ function NairaWithdraw({
|
||||
type="number"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
direction="rtl"
|
||||
value={props.values.amount}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={(e) => {
|
||||
|
||||
Reference in New Issue
Block a user