import { Form, Formik } from "formik"; import React, { useEffect, useState } from "react"; 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"; const initialValues = { amount: "", comment: "", previousAccount: { recipientID: "", }, newAccount: { country: "", bank: "", accountNumber: "", accountType: "", state: "", city: "", }, }; 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); 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) => { const { name, value } = event.target; setBankName((prev) => ({ loading: true, data: [] })); apiCall .getCountryBank({ country: value }) .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.signup_country, })); }) .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(() => { 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 { // Validate the form using Yup validation schema // await validationSchema.validate(values, { abortEarly: false }); // If validation passes, proceed with form submission console.log("Form data is valid!", values); if (!values?.amount) { setErrorMsgs({ amount: "Please enter an amount" }); setTimeout(() => setErrorMsgs({ amount: "" }), 1000); 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, wallet_uid: wallet.wallet_uid, ...sendMoneyFee, details: { ...recipientDetails[0] }, }; 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; } } catch (errors) { // If validation fails, handle the validation errors throw new Error("Validation errors:", errors); // } }; useEffect(() => { getRecipients(); }, []); return (

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

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

{errorMsgs.amount}

)}