Updated Layout for Withdraw Pop UP
This commit was merged in pull request #341.
This commit is contained in:
@@ -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 (
|
||||
<ModalCom action={action} situation={situation}>
|
||||
<div className="content-wrapper w-[90%] md:w-[600px]">
|
||||
<div className="w-full">
|
||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<ModalCom action={action} situation={situation} className="edit-popup">
|
||||
<div className="content-wrapper w-[90%] md:w-[768px]">
|
||||
<div className="w-full h-[38.313rem]">
|
||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow h-full">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
@@ -220,7 +344,7 @@ function NairaWithdraw({
|
||||
</div>
|
||||
|
||||
{/* Account Selector */}
|
||||
<div className=" flex items-center gap-[5rem]">
|
||||
<div className=" flex items-center gap-[8rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
To:
|
||||
</h1>
|
||||
@@ -233,7 +357,7 @@ function NairaWithdraw({
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
name="card-option"
|
||||
name="choice"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
@@ -249,7 +373,7 @@ function NairaWithdraw({
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
name="choice"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
@@ -260,101 +384,111 @@ function NairaWithdraw({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h[150px]">
|
||||
<div className="">
|
||||
{tab == "previous" && (
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<>
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center px-4">
|
||||
<div className="transfer-input w-full flex items-center justify-end">
|
||||
{/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
|
||||
<div className="flex flex-col gap-3 flex-[0.8] items-center">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
Loading...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
{item.recipient}
|
||||
Select...
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
{recipients.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
>
|
||||
{item.recipient}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, !
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
{/* <Link
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
{/* <Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
||||
>
|
||||
Add New
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[7.6rem]"></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab == "new" && (
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<div className="w-full mt-3 rounded-md bg-slate-100">
|
||||
<div className="relative fields w-full flex flex-col p-4">
|
||||
<div className="flex flex-[2] min-h-[52px]">
|
||||
{/* country */}
|
||||
<div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]">
|
||||
Country{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
onChange={
|
||||
props.handleChange || handleInputChange
|
||||
}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
{allCountries.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
) : allCountries.data.length ? (
|
||||
<>
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
@@ -362,48 +496,221 @@ function NairaWithdraw({
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
{allCountries.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item[0]}
|
||||
>
|
||||
{item.recipient}
|
||||
{item[1]}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
No Options Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
{/* <Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
||||
>
|
||||
Add New
|
||||
</Link> */}
|
||||
</div>
|
||||
{/* {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 flex items-center flex-1">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]">
|
||||
Bank Name{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
|
||||
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!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{/* {props.errors.bank && props.touched.bank && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.bank}
|
||||
</p>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-[2] gap-4">
|
||||
{/* ACCOUNT NUMBER */}
|
||||
<div className="field w-full flex-[1.4] flex items-center gap-2">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1">
|
||||
Account Number{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
inputClass="flex items-center max-w-[15rem]"
|
||||
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>
|
||||
|
||||
{/* Account Type */}
|
||||
<div className="add-recipient w-full flex flex-1 items-center">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]">
|
||||
Type <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow"
|
||||
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!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{/* {props.errors.accountType &&
|
||||
props.touched.accountType && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.accountType}
|
||||
</p>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-1">
|
||||
{/* state */}
|
||||
<div className="field w-full flex items-center gap-4 flex-[0.4]">
|
||||
<label
|
||||
htmlFor="state"
|
||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
|
||||
>
|
||||
State <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
inputClass="max-w-[10rem]"
|
||||
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 flex items-center flex-[0.4]">
|
||||
<label
|
||||
htmlFor="city"
|
||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
|
||||
>
|
||||
City <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
type="text"
|
||||
inputClass="max-w-[10rem]"
|
||||
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 for new accounts */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -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 (
|
||||
<div className="counters w-full flex justify-between gap-2">
|
||||
<div className="w-1/2 flex justify-center items-center">
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user