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

Passed values to confirm add fund

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-12 10:08:26 +01:00
parent e899e5eb2a
commit 7990959e9f
2 changed files with 76 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFundDollars.jsx
+56 -55
View File
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import usersService from "../../services/UsersService";
import InputCom from "../Helpers/Inputs/InputCom";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import { Form, Formik } from "formik";
@@ -61,23 +60,27 @@ function AddFundDollars(props) {
let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
const [loader, setLoader] = useState(false);
let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
let [payListCard, setPayListCard] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
// const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const handleInputChange = (event) => {
const { name, value } = event.target;
setPrevCardDetails((prevState) => ({
...prevState,
[name]: value,
}));
};
const indexOfFirstItem = 0;
const indexOfLastItem =
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentPreviousCards = payListCard?.data?.slice(
indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentPreviousCards = payListCards?.data?.slice(
indexOfFirstItem,
indexOfLastItem
);
const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage);
};
// FUNCTION TO SUBMIT
const handleSubmit = (values, helpers) => {
props.setInputError("");
@@ -95,10 +98,17 @@ function AddFundDollars(props) {
}, 5000);
}
if (tab == "previous") {
if (!prevCardDetails) {
// return setTimeout(() => {
// props.setInputError("");
// }, 5000);
return;
}
setLoader(true);
const stateData = {
amount: Number(props.input),
currency: props.currency,
card: prevCardDetails["payment-card"],
};
setTimeout(() => {
@@ -111,7 +121,7 @@ function AddFundDollars(props) {
const stateData = {
amount: Number(props.input),
currency: props.currency,
...values,
values,
};
// navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
}
@@ -121,14 +131,16 @@ function AddFundDollars(props) {
apiCall
.payListCard()
.then((res) => {
setPayListCard({ loading: false, data: res.data.result_list });
setPayListCards({ loading: false, data: res.data.result_list });
})
.catch((err) => {
console.log("PAYCARDLIST ERROR", err);
setPayListCard({ loading: false, data: [] });
setPayListCards({ loading: false, data: [] });
});
}, []);
console.log("Annoying card>>", prevCardDetails["payment-card"]);
return (
<>
<div className="w-full">
@@ -172,24 +184,30 @@ function AddFundDollars(props) {
{/* previous tab */}
{tab == "previous" ? (
<div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
{payListCard.loading ? (
{payListCards.loading ? (
<LoadingSpinner size="10" color="sky-blue" />
) : payListCard?.data?.length ? (
<select className="my-3 w-full rounded-full p-4 outline-none border-none">
) : payListCards?.data?.length ? (
<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>
{currentPreviousCards.map((item, index) => (
<option
key={index}
className={index != 0 && "border-t-2"}
value={item}
value={JSON.stringify(item)}
>
<div className="my-2 flex items-center gap-5">
{/* <input
type="radio"
className="w-8 h-8"
name="card"
value="value"
/> */}
type="radio"
className="w-8 h-8"
name="card"
value="value"
/> */}
<div className="card-details">
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
{item.description} Card
@@ -198,24 +216,24 @@ function AddFundDollars(props) {
Bank **************{item.digits}
</p>
{/* <div className="w-full sm:flex items-center gap-5">
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
{item.added}
</p>
<p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
Verified
</p>
</div> */}
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
{item.added}
</p>
<p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
Verified
</p>
</div> */}
</div>
</div>
{/* <td>
<button
// onClick={handleSubmit}
type="button"
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>
</button>
</td> */}
<button
// onClick={handleSubmit}
type="button"
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>
</button>
</td> */}
</option>
))}
</select>
@@ -233,23 +251,6 @@ function AddFundDollars(props) {
</button>
</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 className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
src/components/MyWallet/ConfirmAddFund.jsx
+20 -7
View File
@@ -96,18 +96,31 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
// }
// }, []);
console.log("data on confirm", confirmCredit);
const ThePaymentText = ({value}) => (
<div className="my-2 flex items-center gap-5">
<div className="card-details">
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
{value.description} Card
</h1>
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
Bank **************{value.digits}
</p>
</div>
</div>
);
console.log("data on confirm", confirmCredit?.data?.card.card_uid);
return (
<div className="content-wrapper w-full h-[36rem]">
<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">
Confirm Add Fund To Account
</h2>
<hr /> */}
<div className="px-4 md:px-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[45px] flex items-center">
<div className="px-4 md:p-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[45px]">
{confirmCredit?.show ? (
<div className="flex flex-col items-center gap-4">
<div className="flex items-center gap-4">
@@ -131,10 +144,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
htmlFor="payment"
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
>
{confirmCredit?.data?.currency && "Payment Method"}
{confirmCredit?.data?.currency && "Payment Method:"}
</label>
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
Coming Soon...
{/* {confirmCredit?.data?.card && <ThePaymentText value={confirmCredit?.data?.card} />} */}
</span>
</div>
</div>
@@ -161,7 +174,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
<div className="min-h-[350px]"></div>
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
<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}
>
Cancel