import { Form, Formik } from "formik"; import React, { useEffect, useState } from "react"; import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; import ModalCom from "../../Helpers/ModalCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; function NairaWithdraw({ wallet, action, situation, state, setShowConfirmNairaWithdraw, }) { let MaxNoOfBanks = process.env.REACT_APP_MAX_CREDIT_BANK_ACCOUNT; // HOLDS THE VALUE OF THE MAX NUMBER OF BANKS USER CAN ADD const apiCall = new usersService(); const [tab, setTab] = useState("previous"); let [requestStatus, setRequestStatus] = useState(false); const initialValues = { amount: state?.amount || "", comment: state?.comment || "", previousAccount: { recipientID: state?.previousAccount?.recipientID || "", }, newAccount: { country: wallet.walletCountry ? wallet.walletCountry[0]?.code : wallet.country, bank: state?.newAccount?.amount || "", accountNumber: state?.newAccount?.amount || "", accountType: state?.newAccount?.amount || "", state: state?.newAccount?.amount || "", city: state?.newAccount?.amount || "", }, }; const [errorMsgs, setErrorMsgs] = useState(initialValues); let [sendMoneyFee, setSendMoneyFee] = useState({ loading: false, fee: 0, total: 0, }); // HOLD THE VALUE FOR walletSEND MONEY FEE // Previous Account let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY loading: true, data: [], error: false, }); // New Account let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES loading: true, data: [], }); let [bankName, setBankName] = useState({ // STATE TO HOLD LIST OF BANK NAME loading: false, data: [], }); let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE loading: true, data: [], }); // Handling card change const handleBankOptions = (event) => { let bankCountry = wallet.walletCountry ? wallet.walletCountry[0]?.code : wallet.country setBankName((prev) => ({ loading: true, data: [] })); apiCall .getCountryBank({ country: bankCountry }) .then((res) => { if (res.data.internal_return < 0) { setBankName((prev) => ({ loading: false, data: [] })); return; } setBankName((prev) => ({ loading: false, data: res.data.result_list })); }) .catch((error) => { setBankName((prev) => ({ loading: false, data: [] })); }); }; //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 COUNTRIES const getCountry = () => { apiCall .getSignupCountryData() .then((res) => { if (res.data.internal_return < 0) { setAllCountries((prev) => ({ loading: false, data: [] })); return; } setAllCountries((prev) => ({ loading: false, data: res.data.result_list, })); }) .catch((error) => { setAllCountries((prev) => ({ loading: false, data: [] })); }); }; // FUNCTION TO GET ACCOUNT TYPES const getAccountTypes = () => { apiCall .getAccountTypes() .then((res) => { if (res.data.internal_return < 0) { setAccType((prev) => ({ loading: false, data: [] })); return; } setAccType((prev) => ({ loading: false, data: res.data.result_list })); }) .catch((error) => { setAccType((prev) => ({ loading: false, data: [] })); }); }; useEffect(() => { handleBankOptions() getCountry(); // TO LOAD LIST COUNTRY getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES }, []); //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 * 100)) .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 = async (values, helpers) => { try { if (!values?.amount) { setErrorMsgs({ amount: "amount required" }); setTimeout(() => setErrorMsgs({ amount: "" }), 3000); return; } else if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) { setErrorMsgs({ amount: "Withdraw limit has been exceeded" }); setTimeout(() => setErrorMsgs({ amount: "" }), 3000); return; } if (values?.comment?.length >= 50) { setErrorMsgs({ comment: "50 chars max" }); setTimeout(() => setErrorMsgs({ comment: "" }), 1000); } // form submission logic here if (tab === "previous") { if (!values?.previousAccount?.recipientID) { setErrorMsgs({ previousAccount: { recipientID: "Please select an option" }, }); setTimeout( () => setErrorMsgs({ previousAccount: { recipientID: "" } }), 1000 ); } setRequestStatus(true); // Ensure recipientDetails is an array and not undefined const recipientDetails = recipients.data?.filter( (item) => item.recipient_uid === values.previousAccount?.recipientID ); // Ensure recipientDetails is not empty if (!recipientDetails || recipientDetails.length === 0) { // Handle the case when recipientDetails is empty or undefined setRequestStatus(false); return; } const stateData = { amount: values.amount, comment: values.comment, choice: "prev", wallet_uid: wallet.wallet_uid, ...sendMoneyFee, details: { ...recipientDetails[0] }, }; return setTimeout(() => { setRequestStatus(false); // navigate("confirm-withdraw-naira", { state: stateData }); action(); setShowConfirmNairaWithdraw({ show: true, state: stateData }); }, 1000); } if (tab === "new") { const { accountNumber, accountType, bank, city, country, state } = values?.newAccount; if ( !accountNumber || !accountType || !bank || !city || !country || !state ) { return; } setRequestStatus(true); // Ensure bankDetails is an array and not undefined const bankDetails = bankName.data?.filter( (item) => item.bank_uid === bank ); // Ensure bankDetails is not empty if (!bankDetails || bankDetails.length === 0) { // Handle the case when bankDetails is empty or undefined setRequestStatus(false); return; } const stateData = { amount: values.amount, comment: values.comment, choice: "new", wallet_uid: wallet.wallet_uid, ...sendMoneyFee, details: { ...bankDetails[0], ...values?.newAccount }, }; return setTimeout(() => { setRequestStatus(false); action(); setShowConfirmNairaWithdraw({ show: true, state: stateData }); }, 1000); } } catch (errors) { // If validation fails, handle the validation errors throw new Error("Validation errors:", errors); } }; useEffect(() => { getRecipients(); }, []); console.log("Testing Wallet Country", wallet?.walletCountry[0]?.code); return (

{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${( wallet.amount * 0.01 ).toFixed(2)}`}

{(props) => { return (
{/* Amount Form */}
{ getSendMoneyFee(e); }} error={errorMsgs.amount && errorMsgs.amount} />