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

Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-12 15:04:53 +00:00
committed by Gogs
parent afe6a1afcb ae8ada33f4
commit 26647b088f
4 changed files with 158 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFundDollars.jsx
+125 -91
View File
@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import InputCom from "../Helpers/Inputs/InputCom"; import InputCom from "../Helpers/Inputs/InputCom";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import { useSelector } from "react-redux";
import * as Yup from "yup"; import * as Yup from "yup";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
@@ -60,24 +60,28 @@ function AddFundDollars(props) {
let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
const [loader, setLoader] = useState(false); const [loader, setLoader] = useState(false);
const { userDetails } = useSelector((state) => state?.userDetails);
let { firstname, lastname } = userDetails;
let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
// const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED const handleInputChange = (event) => {
const { name, value } = event.target;
setPrevCardDetails((prevState) => ({
...prevState,
[name]: value,
}));
};
let [payListCard, setPayListCard] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS const indexOfFirstItem = 0;
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = const indexOfLastItem =
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentPreviousCards = payListCard?.data?.slice( const currentPreviousCards = payListCards?.data?.slice(
indexOfFirstItem, indexOfFirstItem,
indexOfLastItem indexOfLastItem
); );
const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage);
};
// FUNCTION TO SUBMIT // FUNCTION TO SUBMIT
const handleSubmit = (values, helpers) => { const handleSubmit = (values, helpers) => {
props.setInputError(""); props.setInputError("");
@@ -95,10 +99,17 @@ function AddFundDollars(props) {
}, 5000); }, 5000);
} }
if (tab == "previous") { if (tab == "previous") {
if (!prevCardDetails) {
// return setTimeout(() => {
// props.setInputError("");
// }, 5000);
return;
}
setLoader(true); setLoader(true);
const stateData = { const stateData = {
amount: Number(props.input), amount: Number(props.input),
currency: props.currency, currency: props.currency,
card: prevCardDetails["payment-card"],
}; };
setTimeout(() => { setTimeout(() => {
@@ -111,7 +122,7 @@ function AddFundDollars(props) {
const stateData = { const stateData = {
amount: Number(props.input), amount: Number(props.input),
currency: props.currency, currency: props.currency,
...values, values,
}; };
// navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
} }
@@ -121,11 +132,11 @@ function AddFundDollars(props) {
apiCall apiCall
.payListCard() .payListCard()
.then((res) => { .then((res) => {
setPayListCard({ loading: false, data: res.data.result_list }); setPayListCards({ loading: false, data: res.data.result_list });
}) })
.catch((err) => { .catch((err) => {
console.log("PAYCARDLIST ERROR", err); console.log("PAYCARDLIST ERROR", err);
setPayListCard({ loading: false, data: [] }); setPayListCards({ loading: false, data: [] });
}); });
}, []); }, []);
@@ -133,63 +144,97 @@ function AddFundDollars(props) {
<> <>
<div className="w-full"> <div className="w-full">
{/* switch button */} {/* switch button */}
<div className="my-1 flex items-center gap-2"> <div className="flex justify-between">
<label <form className="add-fund-info flex items-center gap-3">
onClick={() => setTab("previous")} <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
htmlFor="previous" {props.currency == "US Dollars" && "Payment Method"}
className="cursor-pointer flex items-center gap-1" </h1>
> <div className="my-1 flex items-center gap-2">
<input <label
type="radio" onClick={() => setTab("previous")}
id="previous" htmlFor="previous"
name="card-option" className="cursor-pointer flex items-center gap-1"
checked={tab === "previous"} >
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${ <input
tab == "previous" ? "" : "" type="radio"
} tracking-wide transition duration-200`} id="previous"
/> name="card-option"
Previous Cards checked={tab === "previous"}
</label> className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
<label tab == "previous" ? "" : ""
onClick={() => setTab("new")} } tracking-wide transition duration-200`}
htmlFor="new" />
className="cursor-pointer flex items-center gap-1" Previous Cards
> </label>
<input <label
id="new" onClick={() => setTab("new")}
type="radio" htmlFor="new"
name="card-option" className="cursor-pointer flex items-center gap-1"
checked={tab === "new"} >
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${ <input
tab == "new" ? "" : "" id="new"
} tracking-wide transition duration-200`} type="radio"
/> name="card-option"
Add New Card checked={tab === "new"}
</label> className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
tab == "new" ? "" : ""
} tracking-wide transition duration-200`}
/>
Add New Card
</label>
</div>
</form>
<form className="add-fund-info flex items-center gap-3">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{props.currency == "US Dollars"
? "Amount (USD)"
: "Amount (Naira)"}
</h1>
<div className="field w-full max-w-[8rem]">
<InputCom
fieldClass="px-6"
type="text"
name="amount"
placeholder="0"
value={props.input}
inputHandler={props.handleChange}
/>
<p className="text-base text-red-500 h-5">
{props.inputError && props.inputError}
</p>
</div>
</form>
</div> </div>
<hr />
{/* END OF switch button */} {/* END OF switch button */}
{/* previous tab */} {/* previous tab */}
{tab == "previous" ? ( {tab == "previous" ? (
<div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center"> <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
{payListCard.loading ? ( {payListCards.loading ? (
<LoadingSpinner size="10" color="sky-blue" /> <LoadingSpinner size="10" color="sky-blue" />
) : payListCard?.data?.length ? ( ) : payListCards?.data?.length ? (
<select className="my-3 w-full rounded-full p-4 outline-none border-none"> <select
className="my-3 w-full rounded-full p-4 outline-none border-none"
value={prevCardDetails["payment-card"]?.card_uid}
id="payment-card"
name="payment-card"
onChange={handleInputChange}
>
<option value="">Select a card</option> <option value="">Select a card</option>
{currentPreviousCards.map((item, index) => ( {currentPreviousCards.map((item, index) => (
<option <option
key={index} key={index}
className={index != 0 && "border-t-2"} className={index != 0 && "border-t-2"}
value={item} value={JSON.stringify(item)}
> >
<div className="my-2 flex items-center gap-5"> <div className="my-2 flex items-center gap-5">
{/* <input {/* <input
type="radio" type="radio"
className="w-8 h-8" className="w-8 h-8"
name="card" name="card"
value="value" value="value"
/> */} /> */}
<div className="card-details"> <div className="card-details">
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
{item.description} Card {item.description} Card
@@ -198,24 +243,24 @@ function AddFundDollars(props) {
Bank **************{item.digits} Bank **************{item.digits}
</p> </p>
{/* <div className="w-full sm:flex items-center gap-5"> {/* <div className="w-full sm:flex items-center gap-5">
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide"> <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
{item.added} {item.added}
</p> </p>
<p className="text-sm font-bold text-green-700 dark:text-white tracking-wide"> <p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
Verified Verified
</p> </p>
</div> */} </div> */}
</div> </div>
</div> </div>
{/* <td> {/* <td>
<button <button
// onClick={handleSubmit} // onClick={handleSubmit}
type="button" type="button"
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
<span className="text-white">Manage</span> <span className="text-white">Manage</span>
</button> </button>
</td> */} </td> */}
</option> </option>
))} ))}
</select> </select>
@@ -233,26 +278,9 @@ function AddFundDollars(props) {
</button> </button>
</div> </div>
)} )}
{/* PAGINATION BUTTON */}
{/* <div className="w-full">
<PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
payListCard?.data?.length
? true
: false
}
data={payListCard?.data}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
</div> */}
{/* END OF PAGINATION BUTTON */}
</div> </div>
) : ( ) : (
<div className="new-details w-full max-h-[19.063rem] overflow-y-scroll"> <div className="new-details w-full max-h-[23rem] overflow-y-scroll">
<div className="w-full flex flex-col justify-between"> <div className="w-full flex flex-col justify-between">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
@@ -267,6 +295,12 @@ function AddFundDollars(props) {
<div className="fields w-full"> <div className="fields w-full">
{/* inputs starts here */} {/* inputs starts here */}
{/* Name */} {/* Name */}
<div className="flex items-center field w-full my-6 gap-3">
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
Name:
</label>
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
</div>
<div className="field w-full my-6"> <div className="field w-full my-6">
<InputCom <InputCom
fieldClass="px-6" fieldClass="px-6"
src/components/MyWallet/AddFundPop.jsx
+2 -24
View File
@@ -53,35 +53,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
}; };
return ( return (
<div className="h-[36rem] w-full"> <div className="h-[32rem] w-full">
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin"> <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="lg:w-2/2 w-full mb-10 lg:mb-0"> <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl"> <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
{/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/} {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
{/*<hr />*/} {/*<hr />*/}
<form className="md:p-8 p-4 add-fund-info">
<div className="field w-full">
<InputCom
fieldClass="px-6"
label={
currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
}
type="text"
name="amount"
placeholder="0"
value={input}
inputHandler={handleChange}
/>
{inputError && (
<p className="text-base text-red-500">{inputError}</p>
)}
</div>
</form>
<h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
{currency == "US Dollars" && "Payment Method"}
</h1>
<hr />
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */} {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
{currency == "US Dollars" && ( {currency == "US Dollars" && (
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl"> <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
@@ -91,6 +68,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
setInput={setInput} setInput={setInput}
currency={currency} currency={currency}
onClose={onClose} onClose={onClose}
handleChange={handleChange}
setConfirmCredit={setConfirmCredit} setConfirmCredit={setConfirmCredit}
/> />
</div> </div>
src/components/MyWallet/ConfirmAddFund.jsx
+30 -18
View File
@@ -96,30 +96,39 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
// } // }
// }, []); // }, []);
console.log("data on confirm", confirmCredit); let __confirmCard = JSON.parse(confirmCredit?.data.card);
const ThePaymentText = ({ value }) => (
<div className="my-2 flex items-center gap-5">
<div className="card-details flex items-center gap-3">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{value.description} Card
</h1>
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
Bank **************{value.digits}
</p>
</div>
</div>
);
return ( return (
<div className="content-wrapper w-full h-[36rem]"> <div className="content-wrapper w-full h-[32rem]">
<div className="w-full mb-10"> <div className="w-full mb-10">
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow"> <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
{/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium"> {/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
Confirm Add Fund To Account Confirm Add Fund To Account
</h2> </h2>
<hr /> */} <hr /> */}
<div className="px-4 md:px-8 py-4 add-fund-info"> <div className="px-4 md:p-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[45px] flex items-center"> <div className="field w-full mb-3 min-h-[45px]">
{confirmCredit?.show ? ( {confirmCredit?.show ? (
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<label <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
htmlFor="amount"
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
>
{confirmCredit?.data?.currency == "naira" {confirmCredit?.data?.currency == "naira"
? "Amount (Naira):" ? "Amount (Naira):"
: "Amount (Dollars):"} : "Amount (Dollars):"}
</label> </h1>
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold"> <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{`${walletItem?.symbol} ${ {`${walletItem?.symbol} ${
Number(confirmCredit?.data?.amount).toLocaleString() || Number(confirmCredit?.data?.amount).toLocaleString() ||
"" ""
@@ -127,14 +136,17 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
</span> </span>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
<label <label
htmlFor="payment" htmlFor="payment"
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1" className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
> >
{confirmCredit?.data?.currency && "Payment Method"} {confirmCredit?.data?.currency && "Payment Method:"}
</label> </label>
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold"> <span className="text-[#181c32] dark:text-white ">
Coming Soon... {__confirmCard && (
<ThePaymentText value={__confirmCard} />
)}
</span> </span>
</div> </div>
</div> </div>
@@ -158,10 +170,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
{confirmCredit?.data?.currency && "Payment Method"} {confirmCredit?.data?.currency && "Payment Method"}
</h1> */} </h1> */}
{/* <hr /> */} {/* <hr /> */}
<div className="min-h-[350px]"></div> <div className="min-h-[220px]"></div>
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4"> <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
<button <button
className="px-2 h-11 flex justify-center items-center border-gradient text-base rounded-full" className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
onClick={onClose} onClick={onClose}
> >
Cancel Cancel
src/components/MyWallet/Popup/CreditPopup.jsx
+1 -1
View File
@@ -47,7 +47,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
onClose(); onClose();
}; };
console.log("prop drills >> ", confirmCredit); console.log("prop drills >> ", state);
return ( return (
<ModalCom <ModalCom