diff --git a/src/components/MyWallet/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/ConfirmNairaWithdraw.jsx new file mode 100644 index 0000000..30c8210 --- /dev/null +++ b/src/components/MyWallet/ConfirmNairaWithdraw.jsx @@ -0,0 +1,210 @@ +import React, { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import { toast } from "react-toastify"; +import InputCom from "../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import RecentActivityTable from "./WalletComponent/RecentActivityTable"; + +import usersService from "../../services/UsersService"; + +function ConfirmNairaWithdraw({ payment, wallet }) { + const apiURL = new usersService(); + + const navigate = useNavigate(); + + let { state } = useLocation(); + + let [requestStatus, setRequestStatus] = useState({ + message: "", + loading: false, + status: false, + }); + let [pageLoading, setPageLoading] = useState(true); + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = () => { + setRequestStatus({ message: "", loading: true, status: false }); + let reqData = { + amount: Number(state.amount), + Fee: Number(state.fee), + recipientid: Number(state.recipientID), + }; + apiURL + .sendMoney(reqData) + .then((res) => { + if (res.data.internal_return < 0) { + setRequestStatus({ + message: "Could not perform transaction", + loading: false, + status: false, + }); + return; + } + setRequestStatus({ + message: "transfer successful", + loading: false, + status: true, + }); + toast.success("Transfer sucessful"); + setTimeout(() => { + navigate("/my-wallet", { replace: true }); + window.location.reload(true); + }, 1000); + }) + .catch((error) => { + setRequestStatus({ + message: "Opps! something went wrong! Try Again", + loading: false, + status: false, + }); + }); + }; + + useEffect(() => { + // what happens if not state redirect user + if (!state) { + navigate("/my-wallet/withdraw-naira", { replace: true }); + } else { + setPageLoading(false); + } + }, []); + return ( +
+ {pageLoading ? ( + + ) : ( +
+
+
+ {wallet.loading ? ( + + ) : wallet.data.length ? ( +

+ {wallet.data.map((item) => { + if (item.description == "Naira") { + return `Withdraw from Naira Wallet : ${item.symbol}${( + item.amount * 0.01 + ).toFixed(2)}`; + } + })} +

+ ) : wallet.error ? ( +

+ Opps! An Error Occured +

+ ) : ( +

+ No Wallet Information Found! +

+ )} +
+
+
+

+ Confirm Withdraw to Account +

+ {/* AMOUNT */} +
+ +
+ + {/* RECIPIENT ACC: */} +
+ +
+ + {/* PROCESSING FEE: */} +
+ +
+ + {/* TOTAL */} +
+ +
+ + {/* COMMENT/NOTE */} +
+ +
+
+ +
+ {requestStatus.message && ( +

+ {requestStatus.message} +

+ )} +
+ {requestStatus.loading ? ( + + ) : ( + + )} +
+
+
+ )} + +
+
+

+ Recent Activity +

+ {/*

Activity Report

*/} + {payment.loading ? ( + + ) : ( + + )} +
+
+
+ ); +} + +export default ConfirmNairaWithdraw; diff --git a/src/components/MyWallet/NairaWithdraw.jsx b/src/components/MyWallet/NairaWithdraw.jsx new file mode 100644 index 0000000..b9b768c --- /dev/null +++ b/src/components/MyWallet/NairaWithdraw.jsx @@ -0,0 +1,337 @@ +import React, { useEffect, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import InputCom from "../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import RecentActivityTable from "./WalletComponent/RecentActivityTable"; + +import usersService from "../../services/UsersService"; + +import { Form, Formik } from "formik"; +import * as Yup from "yup"; + +const validationSchema = Yup.object().shape({ + amount: Yup.number() + .typeError("you must specify a number") + .min(1, "Amount must be greater than 0") + .required("Amount is required"), + recipientID: Yup.string() + .min(1, "Minimum 1 characters") + .max(50, "Maximum 50 characters") + .required("Recipient is required"), +}); + +const initialValues = { + amount: "", + recipientID: "", + comment: "", +}; + +function NairaWithdraw({ payment, wallet }) { + const apiCall = new usersService(); // API CLASS CALL + + const navigate = useNavigate(); + + 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 SEND MONEY FEE + + //FUNCTION TO GET RECIPIENT LIST + const getRecipients = () => { + apiCall + .getRecipient() + .then((res) => { + if (res.data.internal_return < 0) { + // success but no data + setRecipients((prev) => ({ ...prev, loading: false })); + return; + } + setRecipients((prev) => ({ + ...prev, + loading: false, + data: res.data.result_list, + })); + }) + .catch((error) => { + setRecipients((prev) => ({ ...prev, loading: false, error: true })); + }); + }; + + //FUNCTION TO GET SEND MONEY FEE + const getSendMoneyFee = ({ target: { value } }) => { + setSendMoneyFee({ loading: true, fee: 0, total: 0 }); + let amount = value; + if (Number(amount) <= 0 || amount == "" || isNaN(amount)) { + setSendMoneyFee({ loading: false, fee: 0, total: 0 }); + return; + } + apiCall + .getSendMoneyFee(Number(amount)) + .then((res) => { + setSendMoneyFee({ + loading: false, + fee: res.data.processing_fee, + total: res.data.total_amount, + }); + }) + .catch((error) => { + setSendMoneyFee({ loading: false, fee: 0, total: 0 }); + }); + }; + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = (values, helpers) => { + if(!values?.amount && !values.recipientID) return + setRequestStatus(true); + let recipientDetails = recipients.data?.filter( + (item) => item.recipient_id == values.recipientID + ); + let stateData = { + ...values, + ...sendMoneyFee, + details: { ...recipientDetails[0] }, + }; + + setTimeout(() => { + setRequestStatus(false); + navigate("confirm-withdraw-naira", { state: stateData }); + }, 1000); + }; + + useEffect(() => { + getRecipients(); + }, []); + + return ( +
+
+
+ + {(props) => { + return ( +
+ {wallet.loading ? ( + + ) : wallet.data.length ? ( +

+ {wallet.data.map((item) => { + if (item.description == "Naira") { + return `Withdraw from Naira Wallet : ${item.symbol}${( + item.amount * 0.01 + ).toFixed(2)}`; + } + })} +

+ ) : wallet.error ? ( +

+ Opps! An Error Occurred +

+ ) : ( +

+ No Wallet Information Found! +

+ )} +
+
+ { + getSendMoneyFee(e); + }} + // props.handleBlur + // onMouseLeave={(e)=>{getSendMoneyFee(e)}} + /> + {props.errors.amount && props.touched.amount && ( +

+ {props.errors.amount} +

+ )} +
+ +
+ +
+ +
+ +
+
+ +
+
+
+ +
+ +
+ {props.errors.recipientID && + props.touched.recipientID && ( +

+ {props.errors.recipientID} +

+ )} + + Add New + +
+
+
+
+
+ +
+ +