From 98aef302ded738b11c6fbd673660e53ff4ac8fed Mon Sep 17 00:00:00 2001 From: Ebube Date: Fri, 21 Jul 2023 11:45:42 +0100 Subject: [PATCH] Updated Layout for Withdraw Pop UP --- .../MyWallet/Popup/NairaWithdraw.jsx | 531 ++++++++++++++---- src/components/MyWallet/WalletAction.jsx | 23 +- src/services/UsersService.js | 4 +- 3 files changed, 442 insertions(+), 116 deletions(-) diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx index 6d1750e..112ce2b 100644 --- a/src/components/MyWallet/Popup/NairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx @@ -1,29 +1,70 @@ +import { Form, Formik } from "formik"; import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +import * as Yup from "yup"; +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"; - -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"), + comment: Yup.string().max(50, "Maximum 50 characters"), + choice: Yup.string().required("Please select an option"), + recipientID: Yup.string().when("choice", { + is: "previous", + then: Yup.string().required("Recipient is required"), + }), + country: Yup.string().when("choice", { + is: "new", + then: Yup.string().required("Country is required"), + }), + bank: Yup.string().when("choice", { + is: "new", + then: Yup.string().required("Bank name is required"), + }), + accountNumber: Yup.string().when("choice", { + is: "new", + then: Yup.string() + .matches(/\d/, "must be a number") + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Account Number is required"), + }), + accountType: Yup.string().when("choice", { + is: "new", + then: Yup.string().required("Please select an account type"), + }), + city: Yup.string().when("choice", { + is: "new", + then: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("City is required"), + }), + state: Yup.string().when("choice", { + is: "new", + then: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("State is required"), + }), }); const initialValues = { amount: "", - recipientID: "", comment: "", + choice: "", + recipientID: "", + country: "", + bank: "", + accountNumber: "", + accountType: "", + state: "", + city: "", }; function NairaWithdraw({ @@ -36,19 +77,45 @@ function NairaWithdraw({ const navigate = useNavigate(); const [tab, setTab] = useState("previous"); let [requestStatus, setRequestStatus] = useState(false); - + const [bankNameHandler, setBankNameHandler] = useState({}); + 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: true, + data: [], + }); + let [accType, setAccType] = useState({ + // STATE TO HOLD LIST ACCOUNT TYPE + loading: true, + data: [], + }); - let [sendMoneyFee, setSendMoneyFee] = useState({ - loading: false, - fee: 0, - total: 0, - }); // HOLD THE VALUE FOR walletSEND MONEY FEE + // Handling card change + const handleInputChange = (event) => { + const { name, value } = event.target; + + if (tab === "new") setBankNameHandler((prevState) => ({ + ...prevState, + [name]: value, + })); + }; //FUNCTION TO GET RECIPIENT LIST const getRecipients = () => { @@ -71,6 +138,63 @@ function NairaWithdraw({ }); }; + // 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 COUNTRY BANK + const getCountryBank = () => { + apiCall + .getCountryBank(bankNameHandler) + .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 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 + getCountryBank(); // TO LOAD LIST COUNTRY BANK + getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES + }, []); + //FUNCTION TO GET SEND MONEY FEE const getSendMoneyFee = ({ target: { value } }) => { setSendMoneyFee({ loading: true, fee: 0, total: 0 }); @@ -119,10 +243,10 @@ function NairaWithdraw({ }, []); return ( - -
-
-
+ +
+
+
{/* Account Selector */} -
+

To:

@@ -233,7 +357,7 @@ function NairaWithdraw({
-
+
{tab == "previous" && ( -
-
-
- -
- + {recipients.loading ? ( - {recipients.data.map((item, index) => ( + ) : recipients.data.length ? ( + <> - ))} - - ) : recipients.error ? ( - - ) : ( - - )} - -
- {props.errors.recipientID && - props.touched.recipientID && ( -

- {props.errors.recipientID} -

+ {recipients.data.map((item, index) => ( + + ))} + + ) : recipients.error ? ( + + ) : ( + )} - {/* +
+ {props.errors.recipientID && + props.touched.recipientID && ( +

+ {props.errors.recipientID} +

+ )} + {/* Add New */} +
-
+
+ )} + {tab == "new" && ( -
-
-
- -
+
+
+
+ {/* country */} +
+ -
- {props.errors.recipientID && - props.touched.recipientID && ( -

- {props.errors.recipientID} -

- )} - {/* - Add New - */} -
+ {/* {props.errors.country && + props.touched.country && ( +

+ {props.errors.country} +

+ )} */} +
+ + {/* bank name */} +
+ + + {/* {props.errors.bank && props.touched.bank && ( +

+ {props.errors.bank} +

+ )} */}
+ +
+ {/* ACCOUNT NUMBER */} +
+ + + {/* {props.errors.accountNumber && + props.touched.accountNumber && ( +

+ {props.errors.accountNumber} +

+ )} */} +
+ + {/* Account Type */} +
+ + + {/* {props.errors.accountType && + props.touched.accountType && ( +

+ {props.errors.accountType} +

+ )} */} +
+
+ +
+ {/* state */} +
+ + + {/* {props.errors.state && props.touched.state && ( +

+ {props.errors.state} +

+ )} */} +
+ + {/* city */} +
+ + + {/* {props.errors.city && props.touched.city && ( +

+ {props.errors.city} +

+ )} */} +
+
+ + {/* end of inputs for new accounts */}
)} diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx index af05e95..0fef3e6 100644 --- a/src/components/MyWallet/WalletAction.jsx +++ b/src/components/MyWallet/WalletAction.jsx @@ -1,15 +1,34 @@ -import React, { useState } from "react"; +import React, { useCallback, useState } from "react"; import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw"; import NairaWithdraw from "./Popup/NairaWithdraw"; +import usersService from "../../services/UsersService"; function WalletAction({ walletItem, payment, openPopUp }) { const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP - + const [countries, setCountries] = useState([]); const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({ show: false, state: {}, }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP + const userApi = new usersService(); + + // Get Country Api + const getCountryList = useCallback(async () => { + const res = await userApi.getSignupCountryData(); + + try { + if (res.status === 200) { + const { signup_country } = await res.data; + setCountries(signup_country); + } else if (res.data.result !== 100) { + setCountries("Nothing see here!"); + } + } catch (error) { + throw new Error(error); + } + }, []); + return (
diff --git a/src/services/UsersService.js b/src/services/UsersService.js index f88e682..dba37e3 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -614,13 +614,13 @@ class usersService { } // END POINT TO GET BANK NAME - getCountryBank() { + getCountryBank(value) { var postData = { uid: localStorage.getItem("uid"), member_id: localStorage.getItem("member_id"), sessionid: localStorage.getItem("session_token"), action: 11183, - // country: "NG", + country: value, }; return this.postAuxEnd("/countrybanks", postData); }