Ebube
500 lines
18 KiB
React
500 lines
18 KiB
React
import React, { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import usersService from "../../services/UsersService";
|
|
import Icons from "../Helpers/Icons";
|
|
import InputCom from "../Helpers/Inputs/InputCom";
|
|
|
|
import { toast } from "react-toastify";
|
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|
|
|
import { Form, Formik } from "formik";
|
|
import * as Yup from "yup";
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
firstname: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Firstname is required"),
|
|
lastname: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Lastname is required"),
|
|
country: Yup.string()
|
|
.min(1, "Minimum 1 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Country is required"),
|
|
bank: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Bank name is required"),
|
|
accountNumber: Yup.string()
|
|
.matches(/\d/, "must be a number")
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Account Number is required"),
|
|
repeatAccountNumber: Yup.string()
|
|
.required("Repeat Account Number is required")
|
|
.oneOf([Yup.ref("accountNumber"), null], "Must match Account Number"),
|
|
accountType: Yup.string()
|
|
.min(1, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Account Type is required"),
|
|
city: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("City is required"),
|
|
state: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("State is required"),
|
|
});
|
|
|
|
const initialValues = {
|
|
firstname: "",
|
|
lastname: "",
|
|
country: "",
|
|
bank: "",
|
|
accountNumber: "",
|
|
repeatAccountNumber: "",
|
|
accountType: "",
|
|
state: "",
|
|
city: "",
|
|
};
|
|
|
|
function AddRecipient() {
|
|
const apiURL = new usersService();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
let [requestStatus, setRequestStatus] = useState({
|
|
message: "",
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
|
|
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: [],
|
|
});
|
|
|
|
//FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
|
|
const handleSubmit = (values, helpers) => {
|
|
setRequestStatus({ message: "", loading: true, status: false });
|
|
|
|
let reqData = {
|
|
//REQUEST DATA FOR API CALL
|
|
firstname: values.firstname,
|
|
lastname: values.lastname,
|
|
bank_code: values.bank,
|
|
account_no: values.accountNumber,
|
|
account_type: values.accountType,
|
|
country: values.country,
|
|
state: values.state,
|
|
city: values.city,
|
|
};
|
|
|
|
//CALL TO ADD RECIPIENT API
|
|
apiURL
|
|
.addRecipient(reqData)
|
|
.then((res) => {
|
|
if (res.data.internal_return < 0) {
|
|
setRequestStatus({
|
|
message: "could not add recipient, try again!",
|
|
loading: false,
|
|
status: true,
|
|
});
|
|
return;
|
|
}
|
|
// setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
|
|
toast.success("Recipient Added Successfully!");
|
|
setTimeout(() => {
|
|
navigate("/my-wallet/transfer-fund", { replace: true });
|
|
}, 1000);
|
|
})
|
|
.catch((error) => {
|
|
setRequestStatus({
|
|
message: "Opps! an error occured! Try again later",
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
});
|
|
};
|
|
|
|
// FUNCTION TO GET COUNTRIES
|
|
const getCountry = () => {
|
|
apiURL
|
|
.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: [] }));
|
|
});
|
|
};
|
|
// END OF FUNCTION TO GET COUNTRIES
|
|
|
|
// FUNCTION TO GET COUNTRY BANK
|
|
const getCountryBank = () => {
|
|
apiURL
|
|
.getCountryBank()
|
|
.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: [] }));
|
|
});
|
|
};
|
|
// END OF FUNCTION TO GET COUNTRY BANK
|
|
|
|
// FUNCTION TO GET ACCOUNT TYPES
|
|
const getAccountTypes = () => {
|
|
apiURL
|
|
.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: [] }));
|
|
});
|
|
};
|
|
// END OF FUNCTION TO GET ACCOUNT TYPES
|
|
|
|
useEffect(() => {
|
|
getCountry(); // TO LOAD LIST COUNTRY
|
|
getCountryBank(); // TO LOAD LIST COUNTRY BANK
|
|
getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES
|
|
}, []);
|
|
|
|
return (
|
|
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
|
<div className="w-full mb-10 lg:mb-0">
|
|
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
<h2 className="my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold">
|
|
ADD BANK ACCOUNT
|
|
</h2>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{(props) => (
|
|
<Form className="add-recipient-info px-1 md:px-[50px] lg:px-[100px]">
|
|
{/* inputs starts here */}
|
|
{/* firstname */}
|
|
<div className="xl:flex xl:space-x-7 mb-6">
|
|
<div className="field w-full mb-6 xl:mb-0">
|
|
<InputCom
|
|
fieldClass="px-6"
|
|
label="Firstname"
|
|
type="text"
|
|
name="firstname"
|
|
placeholder="Account Firstname"
|
|
value={props.values.firstname}
|
|
inputHandler={props.handleChange}
|
|
blurHandler={props.handleBlur}
|
|
/>
|
|
{props.errors.firstname && props.touched.firstname && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.firstname}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* lastname */}
|
|
<div className="field w-full">
|
|
<InputCom
|
|
fieldClass="px-6"
|
|
label="Lastname"
|
|
type="text"
|
|
name="lastname"
|
|
placeholder="Account Lastname"
|
|
value={props.values.lastname}
|
|
inputHandler={props.handleChange}
|
|
blurHandler={props.handleBlur}
|
|
/>
|
|
{props.errors.lastname && props.touched.lastname && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.lastname}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="xl:flex xl:space-x-7 mb-6">
|
|
{/* country */}
|
|
<div className="add-recipient w-full mb-6 xl:mb-0">
|
|
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
|
Country <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
|
name="country"
|
|
value={props.values.country}
|
|
onChange={props.handleChange}
|
|
onBlur={props.handleBlur}
|
|
>
|
|
{allCountries.loading ? (
|
|
<option className="text-slate-500 text-lg" value="">
|
|
Loading...
|
|
</option>
|
|
) : allCountries.data.length ? (
|
|
<>
|
|
<option className="text-slate-500 text-lg" value="">
|
|
Select...
|
|
</option>
|
|
{allCountries.data.map((item, index) => (
|
|
<option
|
|
key={index}
|
|
className="text-slate-500 text-lg"
|
|
value={item[0]}
|
|
>
|
|
{item[1]}
|
|
</option>
|
|
))}
|
|
</>
|
|
) : (
|
|
<option className="text-slate-500 text-lg" value="">
|
|
No Options Found! Try Again
|
|
</option>
|
|
)}
|
|
</select>
|
|
{props.errors.country && props.touched.country && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.country}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* bank name */}
|
|
<div className="add-recipient w-full">
|
|
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
|
Bank Name <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
|
name="bank"
|
|
value={props.values.bank}
|
|
onChange={props.handleChange}
|
|
onBlur={props.handleBlur}
|
|
>
|
|
{bankName.loading ? (
|
|
<option className="text-slate-500 text-lg" value="">
|
|
Loading...
|
|
</option>
|
|
) : bankName.data.length ? (
|
|
<>
|
|
<option className="text-slate-500 text-lg" value="">
|
|
Select...
|
|
</option>
|
|
{bankName.data.map((item, index) => (
|
|
<option
|
|
key={index}
|
|
className="text-slate-500 text-lg"
|
|
value={item.code}
|
|
>
|
|
{item.name}
|
|
</option>
|
|
))}
|
|
</>
|
|
) : (
|
|
<option className="text-slate-500 text-lg" value="">
|
|
No Options Found! Try Again
|
|
</option>
|
|
)}
|
|
</select>
|
|
{props.errors.bank && props.touched.bank && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.bank}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ACCOUNT NUMBER */}
|
|
<div className="xl:flex xl:space-x-7 mb-6">
|
|
<div className="field w-full mb-6 xl:mb-0">
|
|
<InputCom
|
|
fieldClass="px-6"
|
|
label="Account Number"
|
|
type="text"
|
|
name="accountNumber"
|
|
placeholder="Account No"
|
|
value={props.values.accountNumber}
|
|
inputHandler={props.handleChange}
|
|
blurHandler={props.handleBlur}
|
|
/>
|
|
{props.errors.accountNumber &&
|
|
props.touched.accountNumber && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.accountNumber}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* REPEAT ACCT. NUMBER */}
|
|
<div className="field w-full">
|
|
<InputCom
|
|
fieldClass="px-6"
|
|
label="Repeat Account Number"
|
|
type="text"
|
|
name="repeatAccountNumber"
|
|
placeholder="Repeat Account Number"
|
|
value={props.values.repeatAccountNumber}
|
|
inputHandler={props.handleChange}
|
|
blurHandler={props.handleBlur}
|
|
/>
|
|
{props.errors.repeatAccountNumber &&
|
|
props.touched.repeatAccountNumber && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.repeatAccountNumber}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="xl:flex xl:space-x-7 mb-6">
|
|
{/* Account Type */}
|
|
<div className="add-recipient w-full">
|
|
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
|
Account Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
|
name="accountType"
|
|
value={props.values.accountType}
|
|
onChange={props.handleChange}
|
|
onBlur={props.handleBlur}
|
|
>
|
|
{accType.loading ? (
|
|
<option className="text-slate-500 text-lg" value="">
|
|
Loading...
|
|
</option>
|
|
) : accType.data.length ? (
|
|
<>
|
|
<option className="text-slate-500 text-lg" value="">
|
|
Select...
|
|
</option>
|
|
{accType.data.map((item, index) => (
|
|
<option
|
|
key={index}
|
|
className="text-slate-500 text-lg"
|
|
value={item.value}
|
|
>
|
|
{item.name}
|
|
</option>
|
|
))}
|
|
</>
|
|
) : (
|
|
<option className="text-slate-500 text-lg" value="">
|
|
No Options Found! Try Again
|
|
</option>
|
|
)}
|
|
</select>
|
|
{props.errors.accountType && props.touched.accountType && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.accountType}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* state */}
|
|
<div className="xl:flex xl:space-x-7 mb-6">
|
|
<div className="field w-full mb-6 xl:mb-0">
|
|
<InputCom
|
|
fieldClass="px-6"
|
|
label="State"
|
|
type="text"
|
|
name="state"
|
|
placeholder="State/Province"
|
|
value={props.values.state}
|
|
inputHandler={props.handleChange}
|
|
blurHandler={props.handleBlur}
|
|
/>
|
|
{props.errors.state && props.touched.state && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.state}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* city */}
|
|
<div className="field w-full">
|
|
<InputCom
|
|
fieldClass="px-6"
|
|
label="City"
|
|
type="text"
|
|
name="city"
|
|
placeholder="City"
|
|
value={props.values.city}
|
|
inputHandler={props.handleChange}
|
|
blurHandler={props.handleBlur}
|
|
/>
|
|
{props.errors.city && props.touched.city && (
|
|
<p className="text-sm text-red-500">
|
|
{props.errors.city}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* end of inputs starts here */}
|
|
|
|
{/* REQUEST ERROR DISPLAY */}
|
|
{requestStatus.message && (
|
|
<p className="text-sm text-red-500">
|
|
{requestStatus.message}
|
|
</p>
|
|
)}
|
|
|
|
<div className="add-recipient-btn flex justify-end items-center py-4">
|
|
{requestStatus.loading ? (
|
|
<LoadingSpinner size={6} color="sky-blue" />
|
|
) : (
|
|
<button
|
|
type="submit"
|
|
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1"
|
|
>
|
|
<span className="pr-2">ADD RECIPIENT</span>
|
|
<Icons name="arrows" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AddRecipient;
|