WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Updated Layout for Withdraw Pop UP

Browse Source
This commit was merged in pull request #341.
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-21 11:45:42 +01:00
parent b3bbf11f0a
commit 98aef302de
3 changed files with 442 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/Popup/NairaWithdraw.jsx
+419 -112
View File
@@ -1,29 +1,70 @@
import { Form, Formik } from "formik";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import * as Yup from "yup";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom"; import InputCom from "../../Helpers/Inputs/InputCom";
import ModalCom from "../../Helpers/ModalCom"; import ModalCom from "../../Helpers/ModalCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner"; 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({ const validationSchema = Yup.object().shape({
amount: Yup.number() amount: Yup.number()
.typeError("you must specify a number") .typeError("you must specify a number")
.min(1, "Amount must be greater than 0") .min(1, "Amount must be greater than 0")
.required("Amount is required"), .required("Amount is required"),
recipientID: Yup.string() comment: Yup.string().max(50, "Maximum 50 characters"),
.min(1, "Minimum 1 characters") choice: Yup.string().required("Please select an option"),
.max(50, "Maximum 50 characters") recipientID: Yup.string().when("choice", {
.required("Recipient is required"), 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 = { const initialValues = {
amount: "", amount: "",
recipientID: "",
comment: "", comment: "",
choice: "",
recipientID: "",
country: "",
bank: "",
accountNumber: "",
accountType: "",
state: "",
city: "",
}; };
function NairaWithdraw({ function NairaWithdraw({
@@ -36,19 +77,45 @@ function NairaWithdraw({
const navigate = useNavigate(); const navigate = useNavigate();
const [tab, setTab] = useState("previous"); const [tab, setTab] = useState("previous");
let [requestStatus, setRequestStatus] = useState(false); 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({ let [recipients, setRecipients] = useState({
// FOR COUPON HISTORY // FOR COUPON HISTORY
loading: true, loading: true,
data: [], data: [],
error: false, 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({ // Handling card change
loading: false, const handleInputChange = (event) => {
fee: 0, const { name, value } = event.target;
total: 0,
}); // HOLD THE VALUE FOR walletSEND MONEY FEE if (tab === "new") setBankNameHandler((prevState) => ({
...prevState,
[name]: value,
}));
};
//FUNCTION TO GET RECIPIENT LIST //FUNCTION TO GET RECIPIENT LIST
const getRecipients = () => { 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 //FUNCTION TO GET SEND MONEY FEE
const getSendMoneyFee = ({ target: { value } }) => { const getSendMoneyFee = ({ target: { value } }) => {
setSendMoneyFee({ loading: true, fee: 0, total: 0 }); setSendMoneyFee({ loading: true, fee: 0, total: 0 });
@@ -119,10 +243,10 @@ function NairaWithdraw({
}, []); }, []);
return ( return (
<ModalCom action={action} situation={situation}> <ModalCom action={action} situation={situation} className="edit-popup">
<div className="content-wrapper w-[90%] md:w-[600px]"> <div className="content-wrapper w-[90%] md:w-[768px]">
<div className="w-full"> <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"> <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow h-full">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@@ -220,7 +344,7 @@ function NairaWithdraw({
</div> </div>
{/* Account Selector */} {/* 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"> <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
To: To:
</h1> </h1>
@@ -233,7 +357,7 @@ function NairaWithdraw({
<input <input
type="radio" type="radio"
id="previous" id="previous"
name="card-option" name="choice"
checked={tab === "previous"} checked={tab === "previous"}
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${ className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
tab == "previous" ? "" : "" tab == "previous" ? "" : ""
@@ -249,7 +373,7 @@ function NairaWithdraw({
<input <input
id="new" id="new"
type="radio" type="radio"
name="card-option" name="choice"
checked={tab === "new"} checked={tab === "new"}
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${ className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
tab == "new" ? "" : "" tab == "new" ? "" : ""
@@ -260,101 +384,111 @@ function NairaWithdraw({
</div> </div>
</div> </div>
<div className="h[150px]"> <div className="">
{tab == "previous" && ( {tab == "previous" && (
<div className="w-full"> <>
<div className="relative my-3 md:flex items-center"> <div className="w-full">
<div className="transfer-input w-full flex items-start gap-1 justify-between"> <div className="relative my-3 md:flex items-center px-4">
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> <div className="transfer-input w-full flex items-center justify-end">
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end"> {/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
<select <div className="flex flex-col gap-3 flex-[0.8] items-center">
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]" <select
value={props.values.recipientID} 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]"
name="recipientID" value={props.values.recipientID}
onChange={props.handleChange} name="recipientID"
onBlur={props.handleBlur} onChange={props.handleChange}
> onBlur={props.handleBlur}
{recipients.loading ? ( >
<option {recipients.loading ? (
className="text-slate-500 text-lg"
value=""
>
Loading...
</option>
) : recipients.data.length ? (
<>
<option <option
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
value="" value=""
> >
Select... Loading...
</option> </option>
{recipients.data.map((item, index) => ( ) : recipients.data.length ? (
<>
<option <option
key={index}
value={item.recipient_id}
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
value=""
> >
{item.recipient} Select...
</option> </option>
))} {recipients.data.map((item, index) => (
</> <option
) : recipients.error ? ( key={index}
<option value={item.recipient_id}
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
value="" >
> {item.recipient}
Could'nt load, try again! </option>
</option> ))}
) : ( </>
<option ) : recipients.error ? (
className="text-slate-500 text-lg" <option
value="" className="text-slate-500 text-lg"
> value=""
No Recipient Found! >
</option> Could'nt load, !
)} </option>
</select> ) : (
<div className="flex justify-end relative w-full"> <option
{props.errors.recipientID && className="text-slate-500 text-lg"
props.touched.recipientID && ( value=""
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]"> >
{props.errors.recipientID} No Recipient Found!
</p> </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" to="add-recipient"
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]" className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
> >
Add New Add New
</Link> */} </Link> */}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="h-[7.6rem]"></div>
</>
)} )}
{tab == "new" && ( {tab == "new" && (
<div className="w-full"> <div className="w-full mt-3 rounded-md bg-slate-100">
<div className="relative my-3 md:flex items-center"> <div className="relative fields w-full flex flex-col p-4">
<div className="transfer-input w-full flex items-start gap-1 justify-between"> <div className="flex flex-[2] min-h-[52px]">
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> {/* country */}
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end"> <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 <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]" 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"
value={props.values.recipientID} name="country"
name="recipientID" value={props.values.country}
onChange={props.handleChange} onChange={
props.handleChange || handleInputChange
}
onBlur={props.handleBlur} onBlur={props.handleBlur}
> >
{recipients.loading ? ( {allCountries.loading ? (
<option <option
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
value="" value=""
> >
Loading... Loading...
</option> </option>
) : recipients.data.length ? ( ) : allCountries.data.length ? (
<> <>
<option <option
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
@@ -362,48 +496,221 @@ function NairaWithdraw({
> >
Select... Select...
</option> </option>
{recipients.data.map((item, index) => ( {allCountries.data.map((item, index) => (
<option <option
key={index} key={index}
value={item.recipient_id}
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
value={item[0]}
> >
{item.recipient} {item[1]}
</option> </option>
))} ))}
</> </>
) : recipients.error ? (
<option
className="text-slate-500 text-lg"
value=""
>
Could'nt load, try again!
</option>
) : ( ) : (
<option <option
className="text-slate-500 text-lg" className="text-slate-500 text-lg"
value="" value=""
> >
No Recipient Found! No Options Found!
</option> </option>
)} )}
</select> </select>
<div className="flex justify-end relative w-full"> {/* {props.errors.country &&
{props.errors.recipientID && props.touched.country && (
props.touched.recipientID && ( <p className="text-sm text-red-500">
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]"> {props.errors.country}
{props.errors.recipientID} </p>
</p> )} */}
)} </div>
{/* <Link
to="add-recipient" {/* bank name */}
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]" <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]">
Add New Bank Name{" "}
</Link> */} <span className="text-red-500">*</span>
</div> </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> </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>
</div> </div>
)} )}
src/components/MyWallet/WalletAction.jsx
+21 -2
View File
@@ -1,15 +1,34 @@
import React, { useState } from "react"; import React, { useCallback, useState } from "react";
import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw"; import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
import NairaWithdraw from "./Popup/NairaWithdraw"; import NairaWithdraw from "./Popup/NairaWithdraw";
import usersService from "../../services/UsersService";
function WalletAction({ walletItem, payment, openPopUp }) { function WalletAction({ walletItem, payment, openPopUp }) {
const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
const [countries, setCountries] = useState([]);
const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({ const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
show: false, show: false,
state: {}, state: {},
}); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP }); // 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 ( return (
<div className="counters w-full flex justify-between gap-2"> <div className="counters w-full flex justify-between gap-2">
<div className="w-1/2 flex justify-center items-center"> <div className="w-1/2 flex justify-center items-center">
src/services/UsersService.js
+2 -2
View File
@@ -614,13 +614,13 @@ class usersService {
} }
// END POINT TO GET BANK NAME // END POINT TO GET BANK NAME
getCountryBank() { getCountryBank(value) {
var postData = { var postData = {
uid: localStorage.getItem("uid"), uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"), member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"), sessionid: localStorage.getItem("session_token"),
action: 11183, action: 11183,
// country: "NG", country: value,
}; };
return this.postAuxEnd("/countrybanks", postData); return this.postAuxEnd("/countrybanks", postData);
} }