diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 11c9cb8..1f76eb7 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -91,8 +91,8 @@ export default function InputCom({ placeholder={placeholder} value={value} onChange={inputHandler} - className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${ - inputBg ? inputBg : "bg-[#FAFAFA]" + className={`input-field placeholder:text-base text-dark-gray w-full h-full ${ + inputBg ? inputBg : "bg-[#FAFAFA] tracking-wide" } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`} type={type} id={name} diff --git a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx index b483cfe..0452182 100644 --- a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx @@ -1,12 +1,19 @@ -import React, { useState } from "react"; +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"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; -import usersService from "../../../services/UsersService"; -function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { +function ConfirmNairaWithdraw({ + payment, + wallet, + action, + situation, + state, + setShowNairaWithdraw, +}) { const apiURL = new usersService(); const navigate = useNavigate(); @@ -23,9 +30,22 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { let reqData = { amount: Number(state.amount * 100), Fee: Number(state.fee), - recipient_uid: state.details?.recipient_uid, wallet_uid: wallet.wallet_uid, }; + + if (state?.choice === "prev") { + reqData.recipient_uid = state.details?.recipient_uid; + } + + if (state?.choice === "new") { + reqData.account_no = state?.accountNumber; + reqData.account_type = state?.accountType; + reqData.bank_uid = state?.bank_uid; + reqData.country = state?.country; + reqData.state = state?.state; + reqData.city = state?.city; + } + apiURL .sendMoney(reqData) .then((res) => { @@ -36,6 +56,14 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { loading: false, status: false, }); + } else if ( + res.data?.status_message?.toLowerCase().includes("not_found") + ) { + setRequestStatus({ + message: "Sorry, wallet not found", + loading: false, + status: false, + }); } else { setRequestStatus({ message: "Could not perform transaction", @@ -73,7 +101,13 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { }); }; - console.log(state); + const getBack = () => { + action(); + setShowNairaWithdraw({ + show: true, + data: state, + }); + }; return ( @@ -129,17 +163,40 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { /> - {/* RECIPIENT ACC: */} -
- -
+ {state?.choice === "prev" && ( + <> + {/* RECIPIENT ACC: */} +
+ +
+ + )} + + {state?.choice === "new" && ( + <> + {/* RECIPIENT ACC: */} +
+ +
+ + )} {/* PROCESSING FEE: */}
@@ -179,33 +236,31 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {

- {requestStatus.message && ( -

- {requestStatus.message} -

- )} +

+ {requestStatus.message && requestStatus.message} +

+ - {requestStatus.loading ? ( - - ) : ( - - )}
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx index 361fd7a..6cbeb1b 100644 --- a/src/components/MyWallet/Popup/NairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx @@ -1,40 +1,39 @@ import { Form, Formik } from "formik"; import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; -import { checkAndSetError } from "../../../lib"; 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, + state, setShowConfirmNairaWithdraw, }) { - const apiCall = new usersService(); // API CLASS CALL - const navigate = useNavigate(); + 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: state?.newAccount?.amount || "", + 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); - const { isNotEmpty, textCount } = checkAndSetError(); let [sendMoneyFee, setSendMoneyFee] = useState({ loading: false, @@ -67,7 +66,7 @@ function NairaWithdraw({ // Handling card change const handleBankOptions = (event) => { - const { name, value } = event.target; + const { value } = event.target; setBankName((prev) => ({ loading: true, data: [] })); apiCall .getCountryBank({ country: value }) @@ -169,13 +168,9 @@ function NairaWithdraw({ //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); + setErrorMsgs({ amount: "amount required" }); + setTimeout(() => setErrorMsgs({ amount: "" }), 3000); return; } if (values?.comment?.length >= 50) { @@ -230,63 +225,40 @@ function NairaWithdraw({ const { accountNumber, accountType, bank, city, country, state } = values?.newAccount; - const isAccountNumberValid = isNotEmpty( - "accountNumber", - accountNumber, - setErrorMsgs, - "Please enter the account number" - ); - const isAccountTypeValid = isNotEmpty( - "accountType", - accountType, - setErrorMsgs, - "Please select an account type" - ); - const isBankValid = isNotEmpty( - "bank", - bank, - setErrorMsgs, - "Please enter the bank name" - ); - const isCityValid = isNotEmpty( - "city", - city, - setErrorMsgs, - "Please enter the city" - ); - const isCountryValid = isNotEmpty( - "country", - country, - setErrorMsgs, - "Please enter the country" - ); - const isStateValid = isNotEmpty( - "state", - state, - setErrorMsgs, - "Please enter the state" - ); - if ( - !isAccountNumberValid || - !isAccountTypeValid || - !isBankValid || - !isCityValid || - !isCountryValid || - !isStateValid + !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 + ); + + console.log(bankDetails); + + // 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, - ...values?.newAccount, + details: { ...bankDetails[0], ...values?.newAccount }, }; return setTimeout(() => { @@ -298,7 +270,6 @@ function NairaWithdraw({ } catch (errors) { // If validation fails, handle the validation errors throw new Error("Validation errors:", errors); - // } }; @@ -343,11 +314,7 @@ function NairaWithdraw({
- + {(props) => { return (
@@ -357,8 +324,8 @@ function NairaWithdraw({ - {/* {errorMsgs?.amount && ( -

- -

- )} */}
@@ -572,14 +534,13 @@ function NairaWithdraw({ * * *
- {showNairaWithdraw && ( + {showNairaWithdraw.show && ( { - setShowNairaWithdraw((prev) => !prev); + setShowNairaWithdraw((prev) => ({ + ...prev, + show: !prev.show, + })); }} - situation={showNairaWithdraw} + situation={showNairaWithdraw.show} + state={showNairaWithdraw.state} setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw} /> )} @@ -78,6 +85,7 @@ function WalletAction({ walletItem, payment, openPopUp }) { show: !prev.show, })); }} + setShowNairaWithdraw={setShowNairaWithdraw} situation={showConfirmNairaWithdraw.show} /> )}