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

Completed conversion to popup

Browse Source
This commit was merged in pull request #288.
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-10 23:21:59 +01:00
parent d274a5c56a
commit cc22e1a458
10 changed files with 819 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFund.jsx
+95 -112
View File
@@ -1,53 +1,48 @@
import React, { useState } from "react"; import React, {useState} from 'react'
import RecentActivityTable from "./WalletComponent/RecentActivityTable"; import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from '../Spinners/LoadingSpinner'
import { useNavigate } from "react-router-dom"; import { useNavigate, useLocation } from 'react-router-dom'
import InputCom from "../Helpers/Inputs/InputCom"; import InputCom from '../Helpers/Inputs/InputCom'
import AddFundDollars from "./AddFundDollars"; import AddFundDollars from './AddFundDollars'
function AddFund({ paymentHistory, currency }) { function AddFund({payment}) {
const navigate = useNavigate();
// const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
//STATE FOR CONTROLLED INPUT const navigate = useNavigate()
let [input, setInput] = useState(""); const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
let [inputError, setInputError] = useState(""); //STATE FOR CONTROLLED INPUT
let [input, setInput] = useState('')
// FUNCTION TO HANDLE INPUT CHANGE let [inputError, setInputError] = useState('')
const handleChange = ({ target: { name, value } }) => {
setInput(value);
};
//FUNCTION TO HANDLE SUBMIT // FUNCTION TO HANDLE INPUT CHANGE
const handleSubmit = () => { const handleChange = ({target:{name, value}}) => {
setInputError(""); setInput(value)
if (!input || input == "0") {
setInputError("Please Enter Amount");
return setTimeout(() => {
setInputError("");
}, 5000);
} }
if (isNaN(input)) { //FUNCTION TO HANDLE SUBMIT
setInputError("Amount must be a Number"); const handleSubmit = () => {
return setTimeout(() => { setInputError('')
setInputError(""); if(!input || input == '0'){
}, 5000); setInputError('Please Enter Amount')
return setTimeout(()=>{setInputError('')}, 5000)
}
if(isNaN(input)){
setInputError('Amount must be a Number')
return setTimeout(()=>{setInputError('')}, 5000)
}
const stateData = {amount: Number(input), currency: 'naira'}
navigate('confirm-add-fund', {state: stateData})
setInput('')
} }
return (
const stateData = { amount: Number(input), currency: "naira" }; <div>
navigate("confirm-add-fund", { state: stateData }); {/* heading */}
{/* <div className="sm:flex justify-between items-center mb-6">
setInput("");
};
console.log("walletItem >>", paymentHistory);
return (
<div>
{/* heading */}
{/* <div className="sm:flex justify-between items-center mb-6">
<div className="w-full flex justify-start space-x-3 items-center"> <div className="w-full flex justify-start space-x-3 items-center">
<button <button
type="button" type="button"
@@ -78,80 +73,68 @@ function AddFund({ paymentHistory, currency }) {
</div> </div>
</div> */} </div> */}
<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 shadow"> <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
{/*<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"> <form className='md:p-8 p-4 add-fund-info'>
<div className="field w-full mb-6"> <div className="field w-full mb-6">
<InputCom <InputCom
fieldClass="px-6" fieldClass="px-6"
label={ label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)" type="text"
} name="amount"
type="text" placeholder="0"
name="amount" value={input}
placeholder="0" inputHandler={handleChange}
value={input} />
inputHandler={handleChange} {inputError && <p className='text-base text-red-500'>{inputError}</p>}
/> </div>
{inputError && ( </form>
<p className="text-base text-red-500">{inputError}</p> <hr />
)}
</div>
</form>
<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 shadow"> <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
<AddFundDollars <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
setInputError={setInputError} </div>
input={input} }
setInput={setInput}
/>
</div>
)}
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
{currency != "US Dollars" && ( {currency != 'US Dollars' &&
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4"> <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
<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">Continue</span> <span className="text-white">Continue</span>
</button> </button>
</div> </div>
)} }
</div> </div>
</div> </div>
</div>
{/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
{currency != "US Dollars" && (
<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="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
<h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
{/* Recent Activity */}Working in Progress
</h2>
<p>This popup has taking time because of the prop drilling. I have got it right now</p>
{/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
{paymentHistory?.loading ? (
<LoadingSpinner size="16" color="sky-blue" />
) : (
// <RecentActivityTable payment={paymentHistory} />
""
)}
</div> </div>
</div>
{/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
{currency != 'US Dollars' &&
<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="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
<h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
{/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
{payment.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<RecentActivityTable payment={payment}/>
}
</div>
</div>
</div>
}
</div> </div>
)} )
</div>
);
} }
export default AddFund; export default AddFund
src/components/MyWallet/AddFundDollars.jsx
+491 -409
View File
@@ -1,402 +1,472 @@
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 InputCom from '../Helpers/Inputs/InputCom'; import usersService from "../../services/UsersService";
import PaginatedList from '../Pagination/PaginatedList'; import InputCom from "../Helpers/Inputs/InputCom";
import { handlePagingFunc } from '../Pagination/HandlePagination'; import { handlePagingFunc } from "../Pagination/HandlePagination";
import LoadingSpinner from '../Spinners/LoadingSpinner'; import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from '../../services/UsersService';
import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
name: Yup.string() name: Yup.string()
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(50, "Maximum 50 characters") .max(50, "Maximum 50 characters")
.required("Name is required"), .required("Name is required"),
cardNum: Yup.string() cardNum: Yup.string()
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(25, "Maximum 25 characters") .max(25, "Maximum 25 characters")
.required("Card Number is required"), .required("Card Number is required"),
code: Yup.string() code: Yup.string()
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(25, "Maximum 25 characters") .max(25, "Maximum 25 characters")
.required("Postal Code is required"), .required("Postal Code is required"),
state: Yup.string() state: Yup.string()
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(25, "Maximum 25 characters") .max(25, "Maximum 25 characters")
.required("State is required"), .required("State is required"),
address: Yup.string() address: Yup.string()
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(50, "Maximum 50 characters") .max(50, "Maximum 50 characters")
.required("Address is required"), .required("Address is required"),
expirationYear: Yup.string() expirationYear: Yup.string()
.min(4, "Minimum 4 characters") .min(4, "Minimum 4 characters")
.max(4, "Maximum 4 characters") .max(4, "Maximum 4 characters")
.required("Expiration Year is required"), .required("Expiration Year is required"),
expirationMonth: Yup.string() expirationMonth: Yup.string()
.min(1, "Minimum 1 characters") .min(1, "Minimum 1 characters")
.max(2, "Maximum 2 characters") .max(2, "Maximum 2 characters")
.required("Expiration Month is required"), .required("Expiration Month is required"),
cvv: Yup.string() cvv: Yup.string()
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(4, "Maximum 4 characters") .max(4, "Maximum 4 characters")
.required("CVV Year is required"), .required("CVV Year is required"),
}); });
const initialValues = { const initialValues = {
name: '', name: "",
cardNum: '', cardNum: "",
code: '', code: "",
state: '', state: "",
address: '', address: "",
expirationYear: '', expirationYear: "",
expirationMonth: '', expirationMonth: "",
cvv: '' cvv: "",
}; };
function AddFundDollars(props) { function AddFundDollars(props) {
const navigate = useNavigate() const navigate = useNavigate();
let apiCall = new usersService() let apiCall = new usersService();
let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
let [payListCard, setPayListCard] = useState({loading: true, data:[]}) //USER PREVIOUS CARDS let [payListCard, setPayListCard] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
const [currentPage, setCurrentPage] = useState(0); const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage); const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); const indexOfLastItem =
const currentPreviousCards = payListCard?.data?.slice(indexOfFirstItem, indexOfLastItem); Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentPreviousCards = payListCard?.data?.slice(
indexOfFirstItem,
indexOfLastItem
);
const handlePagination = (e) => { const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage) handlePagingFunc(e, setCurrentPage);
};
// FUNCTION TO SUBMIT
const handleSubmit = (values, helpers) => {
props.setInputError("");
if (!props.input || props.input == "0") {
props.setInputError("Please Enter Amount");
return setTimeout(() => {
props.setInputError("");
}, 5000);
} }
// FUNCTION TO SUBMIT if (isNaN(props.input)) {
const handleSubmit = (values, helpers) => { props.setInputError("Amount must be a Number");
props.setInputError('') return setTimeout(() => {
if(!props.input || props.input == '0'){ props.setInputError("");
props.setInputError('Please Enter Amount') }, 5000);
return setTimeout(()=>{props.setInputError('')}, 5000)
}
if(isNaN(props.input)){
props.setInputError('Amount must be a Number')
return setTimeout(()=>{props.setInputError('')}, 5000)
}
if(tab == 'previous'){
const stateData = {amount: Number(props.input), currency: 'dollars'}
navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
}
if(tab == 'new'){
const stateData = {amount: Number(props.input), currency: 'dollars', ...values}
navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
}
props.setInput('')
} }
if (tab == "previous") {
const stateData = { amount: Number(props.input), currency: "dollars" };
navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
}
if (tab == "new") {
const stateData = {
amount: Number(props.input),
currency: "dollars",
...values,
};
navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
}
props.setInput("");
};
useEffect(()=>{ useEffect(() => {
apiCall.payListCard().then(res => { apiCall
setPayListCard({loading: false, data: res.data.result_list}) .payListCard()
}).catch(err => { .then((res) => {
console.log('PAYCARDLIST ERROR', err) setPayListCard({ loading: false, data: res.data.result_list });
setPayListCard({loading: false, data: []}) })
}) .catch((err) => {
}, []) console.log("PAYCARDLIST ERROR", err);
setPayListCard({ loading: false, data: [] });
});
}, []);
return ( return (
<> <>
<h1 className='mb-2 text-xl font-bold text-dark-gray dark:text-white'>Payment Method</h1> <div className="w-full">
<div className="w-full"> {/* switch button */}
{/* switch button */} <div className="my-1 flex items-center gap-2">
<div className="my-1 flex items-center border-b border-slate-300"> <label
<button onClick={() => setTab("previous")}
name="previous" htmlFor="previous"
onClick={(e) => setTab(e.target.name)} className="cursor-pointer flex items-center gap-1"
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${ >
tab == "previous" ? "border-sky-blue" : "border-slate-300" <input
} tracking-wide transition duration-200`} type="radio"
> id="previous"
Previous Cards name="card-option"
</button> checked={tab === "previous"}
<button className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
name="new" tab == "previous" ? "" : ""
onClick={(e) => setTab(e.target.name)} } tracking-wide transition duration-200`}
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${ />
tab == "new" ? "border-sky-blue" : "border-slate-300" Previous Cards
} tracking-wide transition duration-200`} </label>
> <label
Add New Card onClick={() => setTab("new")}
</button> htmlFor="new"
</div> className="cursor-pointer flex items-center gap-1"
{/* END OF switch button */} >
<input
id="new"
type="radio"
name="card-option"
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" ? "" : ""
} tracking-wide transition duration-200`}
/>
Add New Card
</label>
</div>
{/* END OF switch button */}
{/* previous tab */} {/* previous tab */}
{tab == 'previous' ? {tab == "previous" ? (
<div className="p-4 previous-details w-full border min-h-[300px] flex flex-col justify-between items-center"> <div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
{ payListCard.loading ? {payListCard.loading ? (
<LoadingSpinner size='10' color='sky-blue' /> <LoadingSpinner size="10" color="sky-blue" />
: ) : payListCard?.data?.length ? (
payListCard?.data?.length ? <select className="my-3 w-full rounded-full p-4 outline-none border-none">
<table className="my-3 w-full"> <option value="">Select a card</option>
<tbody> {currentPreviousCards.map((item, index) => (
{currentPreviousCards.map((item, index)=>( <option key={index} className={index != 0 && "border-t-2"}>
<tr key={index} className={index != 0 && 'border-t-2'}> <div className="my-2 flex items-center gap-5">
<td> {/* <input
<div className='my-2 flex items-center gap-5'> type="radio"
<input type="radio" className='w-8 h-8' name='card' value='value' /> className="w-8 h-8"
<div className='card-details'> name="card"
<h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>{item.description} Card</h1> value="value"
<p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************{item.digits}</p> /> */}
<div className='w-full sm:flex items-center gap-5'> <div className="card-details">
<p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>{item.added}</p> <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
<p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p> {item.description} Card
</div> </h1>
</div> <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
</div> Bank **************{item.digits}
</td> </p>
<td> {/* <div className="w-full sm:flex items-center gap-5">
<button <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
// onClick={handleSubmit} {item.added}
type="button" </p>
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" <p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
> Verified
<span className="text-white">Manage</span> </p>
</button> </div> */}
</td> </div>
</tr> </div>
)) {/* <td>
} <button
</tbody> // onClick={handleSubmit}
</table> type="button"
: className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
<div className='w-full flex flex-col items-center'> >
<p className='my-5 text-base font-bold text-dark-gray dark:text-white tracking-wide'>No Previous Card Found!</p> <span className="text-white">Manage</span>
<button </button>
onClick={()=> setTab('new')} </td> */}
type="button" </option>
className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" ))}
> </select>
<span className="text-white">Add Card</span> ) : (
</button> <div className="w-full flex flex-col items-center">
</div> <p className="my-5 text-base font-bold text-dark-gray dark:text-white tracking-wide">
No Previous Card Found!
</p>
<button
onClick={() => setTab("new")}
type="button"
className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
<span className="text-white">Add Card</span>
</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
} }
{/* PAGINATION BUTTON */} data={payListCard?.data}
<div className='w-full'> start={indexOfFirstItem}
<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} /> stop={indexOfLastItem}
</div> />
{/* END OF PAGINATION BUTTON */} </div> */}
</div> {/* END OF PAGINATION BUTTON */}
: </div>
<div className="new-details w-full min-h-[300px] border-t"> ) : (
<div className="w-full flex flex-col justify-between"> <div className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
<Formik <div className="w-full flex flex-col justify-between">
initialValues={initialValues} <Formik
validationSchema={validationSchema} initialValues={initialValues}
onSubmit={handleSubmit} validationSchema={validationSchema}
> onSubmit={handleSubmit}
{(props) => { >
return ( {(props) => {
<Form> return (
<div className="flex flex-col-reverse sm:flex-row"> <Form>
<div className="flex-1 sm:mr-10"> <div className="flex flex-col-reverse sm:flex-row">
<div className="fields w-full"> <div className="flex-1 sm:mr-10">
{/* inputs starts here */} <div className="fields w-full">
{/* Name */} {/* inputs starts here */}
<div className="field w-full my-6"> {/* Name */}
<InputCom <div className="field w-full my-6">
fieldClass="px-6" <InputCom
spanTag='*' fieldClass="px-6"
label="Name on Card" spanTag="*"
type="text" label="Name on Card"
name="name" type="text"
placeholder="DUMMY NAME" name="name"
value={props.values.name} placeholder="DUMMY NAME"
inputHandler={props.handleChange} value={props.values.name}
blurHandler={props.handleBlur} inputHandler={props.handleChange}
/> blurHandler={props.handleBlur}
{props.errors.name && props.touched.name && ( />
<p className="text-sm text-red-500"> {props.errors.name && props.touched.name && (
{props.errors.name} <p className="text-sm text-red-500">
</p> {props.errors.name}
)} </p>
</div> )}
{/* CARD NUMBER */}
<div className="field w-full mb-6">
<InputCom
fieldClass="px-6"
spanTag='*'
iconName='master-card visa-card atm-card'
label="Card Number"
type="text"
name="cardNum"
placeholder="Enter Card Number"
value={props.values.cardNum}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.cardNum && props.touched.cardNum && (
<p className="text-sm text-red-500">
{props.errors.cardNum}
</p>
)}
</div>
{/* EXPIRE YEAR, YEAR AND CVV */}
<div className="sm:grid gap-5 grid-cols-3 mb-6">
<div className="field w-full mb-6 xl:mb-0 col-span-1">
<div className="select-option">
<div className={`flex items-center justify-between mb-2.5`}>
<label
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
htmlFor='expiration'
>Expiration Month <span className="text-red-700 text-sm tracking-wide">*</span></label>
</div>
<div
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
>
<select
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
value={props.values.expirationMonth}
onChange={props.handleChange}
onBlur={props.handleBlur}
name='expirationMonth'
>
<option value=''>Select...</option>
{expireMonth?.length &&
expireMonth.map((item, index) => (
<option key={index} value={item.value}>{item.name}</option>
))
}
</select>
</div>
</div>
{props.errors.expirationMonth && props.touched.expirationMonth && (
<p className="text-sm text-red-500">
{props.errors.expirationMonth}
</p>
)}
</div>
<div className="field w-full mb-6 xl:mb-0 col-span-1">
<div className="select-option">
<div className={`flex items-center justify-between mb-2.5`}>
<label
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
htmlFor='expiration'
>Expiration Year <span className="text-red-700 text-sm tracking-wide">*</span>
</label>
</div>
<div
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
>
<select
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
value={props.values.expirationYear}
onChange={props.handleChange}
onBlur={props.handleBlur}
name='expirationYear'
>
<option value=''>Select...</option>
{expireYear?.length &&
expireYear.map((item, index) => (
<option key={index} value={item}>{item}</option>
))
}
</select>
</div>
</div>
{props.errors.expirationYear && props.touched.expirationYear && (
<p className="text-sm text-red-500">
{props.errors.expirationYear}
</p>
)}
</div>
<div className="field w-full col-span-1">
<InputCom
fieldClass="px-6"
spanTag='*'
iconName='atm-card'
label="CVV"
type="text"
name="cvv"
placeholder="CVV"
value={props.values.cvv}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.cvv && props.touched.cvv && (
<p className="text-sm text-red-500">
{props.errors.cvv}
</p>
)}
</div>
</div>
{/* Address */}
<div className="field w-full my-6">
<InputCom
fieldClass="px-6"
spanTag='*'
label="Billing Address"
type="text"
name="address"
placeholder="Billing Address"
value={props.values.Address}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.address && props.touched.address && (
<p className="text-sm text-red-500">
{props.errors.address}
</p>
)}
</div>
{/* postal code and state */}
<div className="sm:grid gap-5 grid-cols-3 mb-6">
<div className="field w-full mb-6 xl:mb-0 col-span-1">
<InputCom
fieldClass="px-6"
spanTag='*'
label="Postal Code"
type="text"
name="code"
placeholder="Postal Code"
value={props.values.code}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.code && props.touched.code && (
<p className="text-sm text-red-500">
{props.errors.code}
</p>
)}
</div>
<div className="field w-full col-span-1">
<InputCom
fieldClass="px-6"
spanTag='*'
label="State"
type="text"
name="state"
placeholder="State"
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>
</div>
</div>
</div>
</div> </div>
{/* <div className="w-full"> {/* CARD NUMBER */}
<div className="field w-full mb-6">
<InputCom
fieldClass="px-6"
spanTag="*"
iconName="master-card visa-card atm-card"
label="Card Number"
type="text"
name="cardNum"
placeholder="Enter Card Number"
value={props.values.cardNum}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.cardNum &&
props.touched.cardNum && (
<p className="text-sm text-red-500">
{props.errors.cardNum}
</p>
)}
</div>
{/* EXPIRE YEAR, YEAR AND CVV */}
<div className="sm:grid gap-5 grid-cols-3 mb-6">
<div className="field w-full mb-6 xl:mb-0 col-span-1">
<div className="select-option">
<div
className={`flex items-center justify-between mb-2.5`}
>
<label
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
htmlFor="expiration"
>
Expiration Month{" "}
<span className="text-red-700 text-sm tracking-wide">
*
</span>
</label>
</div>
<div
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
>
<select
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
value={props.values.expirationMonth}
onChange={props.handleChange}
onBlur={props.handleBlur}
name="expirationMonth"
>
<option value="">Select...</option>
{expireMonth?.length &&
expireMonth.map((item, index) => (
<option
key={index}
value={item.value}
>
{item.name}
</option>
))}
</select>
</div>
</div>
{props.errors.expirationMonth &&
props.touched.expirationMonth && (
<p className="text-sm text-red-500">
{props.errors.expirationMonth}
</p>
)}
</div>
<div className="field w-full mb-6 xl:mb-0 col-span-1">
<div className="select-option">
<div
className={`flex items-center justify-between mb-2.5`}
>
<label
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
htmlFor="expiration"
>
Expiration Year{" "}
<span className="text-red-700 text-sm tracking-wide">
*
</span>
</label>
</div>
<div
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
>
<select
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
value={props.values.expirationYear}
onChange={props.handleChange}
onBlur={props.handleBlur}
name="expirationYear"
>
<option value="">Select...</option>
{expireYear?.length &&
expireYear.map((item, index) => (
<option key={index} value={item}>
{item}
</option>
))}
</select>
</div>
</div>
{props.errors.expirationYear &&
props.touched.expirationYear && (
<p className="text-sm text-red-500">
{props.errors.expirationYear}
</p>
)}
</div>
<div className="field w-full col-span-1">
<InputCom
fieldClass="px-6"
spanTag="*"
iconName="atm-card"
label="CVV"
type="text"
name="cvv"
placeholder="CVV"
value={props.values.cvv}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.cvv && props.touched.cvv && (
<p className="text-sm text-red-500">
{props.errors.cvv}
</p>
)}
</div>
</div>
{/* Address */}
<div className="field w-full my-6">
<InputCom
fieldClass="px-6"
spanTag="*"
label="Billing Address"
type="text"
name="address"
placeholder="Billing Address"
value={props.values.Address}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.address &&
props.touched.address && (
<p className="text-sm text-red-500">
{props.errors.address}
</p>
)}
</div>
{/* postal code and state */}
<div className="sm:grid gap-5 grid-cols-3 mb-6">
<div className="field w-full mb-6 xl:mb-0 col-span-1">
<InputCom
fieldClass="px-6"
spanTag="*"
label="Postal Code"
type="text"
name="code"
placeholder="Postal Code"
value={props.values.code}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
/>
{props.errors.code && props.touched.code && (
<p className="text-sm text-red-500">
{props.errors.code}
</p>
)}
</div>
<div className="field w-full col-span-1">
<InputCom
fieldClass="px-6"
spanTag="*"
label="State"
type="text"
name="state"
placeholder="State"
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>
</div>
</div>
</div>
</div>
{/* <div className="w-full">
{requestStatus.message != "" && ( {requestStatus.message != "" && (
<p <p
className={`text-center text-base ${ className={`text-center text-base ${
@@ -431,50 +501,62 @@ function AddFundDollars(props) {
</div> </div>
</div> </div>
</div> */} </div> */}
<div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'> <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
<button <button
type="submit" type="submit"
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
<span className="text-white">Continue</span> <span className="text-white">Continue</span>
</button> </button>
</div> </div>
</Form> </Form>
); );
}} }}
</Formik> </Formik>
</div>
</div> </div>
} </div>
)}
</div>
{tab == "previous" && (
<div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center py-4">
<button
onClick={handleSubmit}
type="button"
className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
<span className="text-white">Continue</span>
</button>
</div> </div>
{ tab == 'previous' && )}
<div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
<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">Continue</span>
</button>
</div>
}
</> </>
) );
} }
export default AddFundDollars export default AddFundDollars;
// FORMS ARRAY OF EXPIRATION YEAR FOR CARD // FORMS ARRAY OF EXPIRATION YEAR FOR CARD
const expireYear = [] const expireYear = [];
let currentYear = new Date().getFullYear() let currentYear = new Date().getFullYear();
for(let i=0; i<=6; i++){ for (let i = 0; i <= 6; i++) {
expireYear.push(currentYear + i) expireYear.push(currentYear + i);
} }
// FORMS ARRAY OF EXPIRATION MONTH FOR CARD // FORMS ARRAY OF EXPIRATION MONTH FOR CARD
let month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] let month = [
const expireMonth = [] "January",
for(let i=0; i<month.length; i++){ "February",
expireMonth.push({name:month[i], value:i+1}) "March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const expireMonth = [];
for (let i = 0; i < month.length; i++) {
expireMonth.push({ name: month[i], value: i + 1 });
} }
src/components/MyWallet/AddFundPop.jsx
+131
View File
@@ -0,0 +1,131 @@
import React, { useState } from "react";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import { useNavigate } from "react-router-dom";
import InputCom from "../Helpers/Inputs/InputCom";
import AddFundDollars from "./AddFundDollars";
function AddFundPop({ _payment }) {
const navigate = useNavigate();
// const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
let { payment, currency } = _payment;
//STATE FOR CONTROLLED INPUT
let [input, setInput] = useState("");
let [inputError, setInputError] = useState("");
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({ target: { name, value } }) => {
setInput(value);
};
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = () => {
setInputError("");
if (!input || input == "0") {
setInputError("Please Enter Amount");
return setTimeout(() => {
setInputError("");
}, 5000);
}
if (isNaN(input)) {
setInputError("Amount must be a Number");
return setTimeout(() => {
setInputError("");
}, 5000);
}
const stateData = { amount: Number(input), currency: "naira" };
navigate("confirm-add-fund", { state: stateData });
setInput("");
};
console.log("walletItem details >>", payment, currency);
return (
<div className="h-[36rem] w-full">
<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="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>*/}
{/*<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>
{currency == "US Dollars" && (
<h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4">
Payment Method
</h1>
)}
<hr />
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
{currency == "US Dollars" && (
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
<AddFundDollars
setInputError={setInputError}
input={input}
setInput={setInput}
/>
</div>
)}
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
{currency != "US Dollars" && (
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
<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">Continue</span>
</button>
</div>
)}
</div>
</div>
</div>
{/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
{currency != "US Dollars" &&
// <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="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
// <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
// Recent Activity
// </h2>
// {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
// {payment?.loading ? (
// <LoadingSpinner size="16" color="sky-blue" />
// ) : (
// <RecentActivityTable payment={payment} />
// )}
// </div>
// </div>
// </div>
null}
</div>
);
}
export default AddFundPop;
src/components/MyWallet/Popup/CreditPopup.jsx
+10 -5
View File
@@ -7,8 +7,9 @@ import usersService from "../../../services/UsersService";
import Icons from "../../Helpers/Icons"; import Icons from "../../Helpers/Icons";
import AddFund from "../AddFund"; import AddFund from "../AddFund";
import ModalCom from "../../Helpers/ModalCom"; import ModalCom from "../../Helpers/ModalCom";
import AddFundPop from "../AddFundPop";
const CreditPopup = ({ details, onClose, situation}) => { const CreditPopup = ({ details, onClose, situation }) => {
const { pathname, state } = useLocation(); const { pathname, state } = useLocation();
const [submitTask, setSubmitTask] = useState({ const [submitTask, setSubmitTask] = useState({
loading: false, loading: false,
@@ -33,10 +34,14 @@ const CreditPopup = ({ details, onClose, situation}) => {
}; };
return ( return (
<ModalCom action={onClose} situation={situation}> <ModalCom
action={onClose}
situation={situation}
className="assign-task-popup"
>
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"> <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple"> <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
Add Credit Add Credit
</h1> </h1>
<button <button
@@ -65,8 +70,8 @@ const CreditPopup = ({ details, onClose, situation}) => {
</svg> </svg>
</button> </button>
</div> </div>
<div className="logout-modal-body w-full flex flex-col items-center px-10 py-8"> <div className="logout-modal-body w-full flex flex-col items-center">
<AddFund payment={details} /> <AddFundPop _payment={details} />
</div> </div>
</div> </div>
</ModalCom> </ModalCom>
src/components/MyWallet/TransferFund.jsx
+2
View File
@@ -91,6 +91,7 @@ function TransferFund({ payment, wallet }) {
//FUNCTION TO HANDLE SUBMIT //FUNCTION TO HANDLE SUBMIT
const handleSubmit = (values, helpers) => { const handleSubmit = (values, helpers) => {
if(!values?.amount && !values.recipientID) return
setRequestStatus(true); setRequestStatus(true);
let recipientDetails = recipients.data?.filter( let recipientDetails = recipients.data?.filter(
(item) => item.recipient_id == values.recipientID (item) => item.recipient_id == values.recipientID
@@ -302,6 +303,7 @@ function TransferFund({ payment, wallet }) {
) : ( ) : (
<button <button
type="submit" type="submit"
disabled={props.isSubmitting}
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md" className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
> >
Continue Continue
src/components/MyWallet/Wallet.jsx
+2 -2
View File
@@ -119,14 +119,14 @@ const WalletRoutes = () => {
</Suspense> </Suspense>
} }
> >
{/* <Route <Route
path="add-fund" path="add-fund"
element={ element={
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}> <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<AddFund payment={paymentHistory} /> <AddFund payment={paymentHistory} />
</Suspense> </Suspense>
} }
/> */} />
<Route <Route
path="add-fund/confirm-add-fund" path="add-fund/confirm-add-fund"
element={ element={
src/components/MyWallet/WalletBox.jsx
+1 -1
View File
@@ -18,7 +18,7 @@ export default function WalletBox({ wallet, coupon, payment }) {
) : wallet.data.length ? ( ) : wallet.data.length ? (
wallet.data.map((item, index) => ( wallet.data.map((item, index) => (
<div className="lg:w-1/2 h-full mb-10 lg:mb-0"> <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
<WalletItemCard walletItem={item} paymentHistory={payment} /> <WalletItemCard walletItem={item} payment={payment} />
</div> </div>
)) ))
) : null} ) : null}
src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+68 -47
View File
@@ -1,66 +1,87 @@
import React, {useState} from 'react' import React, { useState } from "react";
import PaginatedList from '../../Pagination/PaginatedList'; import PaginatedList from "../../Pagination/PaginatedList";
import {handlePagingFunc} from '../../Pagination/HandlePagination'; import { handlePagingFunc } from "../../Pagination/HandlePagination";
function RecentActivityTable({payment}) { function RecentActivityTable({ payment }) {
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem =
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentActivity = payment?.data?.slice(
indexOfFirstItem,
indexOfLastItem
);
const [currentPage, setCurrentPage] = useState(0); const handlePagination = (e) => {
const indexOfFirstItem = Number(currentPage); handlePagingFunc(e, setCurrentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); };
const currentActivity = payment?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
return ( return (
<div className='flex flex-col justify-between min-h-[500px]'> <div className="flex flex-col justify-between overflow-y-auto">
<table className="wallet-activity w-full table-auto border-collapse text-left"> <table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'> <thead className="border-b-2">
<tr className='text-slate-600'> <tr className="text-slate-600">
<th className="p-2">Date</th> <th className="p-2">Date</th>
<th className="p-4">Trx.</th> <th className="p-4">Trx.</th>
<th className="p-2">Amnt./Fee</th> <th className="p-2">Amnt./Fee</th>
<th className="p-2">Status</th> <th className="p-2">Status</th>
</tr> </tr>
</thead> </thead>
{payment.data.length ? {payment?.data?.length > 0 ? (
( <tbody>
<tbody>
{currentActivity.map((item, index) => ( {currentActivity.map((item, index) => (
<tr key={index} className='text-slate-500'> <tr key={index} className="text-slate-500">
<td className="p-2">{item.trx_date}</td> <td className="p-2">{item.trx_date}</td>
<td className="p-4" dangerouslySetInnerHTML={{__html:item.recipient}}></td> <td
<td className="p-2">{item.amount}<br />{item.fee}</td> className="p-4"
dangerouslySetInnerHTML={{ __html: item.recipient }}
></td>
<td className="p-2">
{item.amount}
<br />
{item.fee}
</td>
<td className="p-2">{item.status}</td> <td className="p-2">{item.status}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
) ) : payment?.error ? (
: <tbody>
payment.error ? <tr className="text-slate-500">
( <td className="p-2" colSpan={4}>
<tbody> Opps! an error occurred. Please try again!
<tr className='text-slate-500'> </td>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</tr> </tr>
</tbody> </tbody>
) ) : (
: <tbody>
<tbody> <tr className="text-slate-500">
<tr className='text-slate-500'> <td className="p-2" colSpan={4}>
<td className="p-2" colSpan={4}>No Payment History Found!</td> No Payment History Found!
</td>
</tr> </tr>
</tbody> </tbody>
} )}
</table> </table>
{/* PAGINATION BUTTON */} {/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payment?.data?.length ? true : false} data={payment?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> <PaginatedList
{/* END OF PAGINATION BUTTON */} onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
payment?.data?.length
? true
: false
}
data={payment?.data}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
{/* END OF PAGINATION BUTTON */}
</div> </div>
) );
} }
export default RecentActivityTable export default RecentActivityTable;
src/components/MyWallet/WalletItemCard.jsx
+5 -2
View File
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import CreditPopup from "./Popup/CreditPopup"; import CreditPopup from "./Popup/CreditPopup";
export default function WalletItemCard({ walletItem, paymentHistory }) { export default function WalletItemCard({ walletItem, payment }) {
// const [eth] = useState(90); // const [eth] = useState(90);
// const [btc] = useState(85); // const [btc] = useState(85);
// const [ltc] = useState(20); // const [ltc] = useState(20);
@@ -26,6 +26,9 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
const closePopUp = () => { const closePopUp = () => {
setCreditPopup({ show: false, data: {} }); setCreditPopup({ show: false, data: {} });
}; };
console.log("walletItem >>", walletItem, payment);
return ( return (
<> <>
<div <div
@@ -92,7 +95,7 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white" className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white"
onClick={() => { onClick={() => {
openPopUp({ openPopUp({
paymentHistory: paymentHistory, payment: payment,
currency: walletItem?.description, currency: walletItem?.description,
}); });
}} }}
src/components/Pagination/PaginatedList.jsx
+11 -5
View File
@@ -1,12 +1,14 @@
const PaginatedList = ({ onClick, prev, next, data, start, stop }) => { const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
if (data.length > process.env.REACT_APP_ITEM_PER_PAGE) { if (data?.length > process.env.REACT_APP_ITEM_PER_PAGE) {
return ( return (
<div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2"> <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2">
{/* Render pagination buttons */} {/* Render pagination buttons */}
{!prev && ( {!prev && (
<button <button
className={`p-2 border ${ className={`p-2 border ${
prev ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white" prev
? "border-black dark:border-white dark:text-white"
: "border-transparent dark:text-white"
} btn-shine rounded-full h-11 w-11`} } btn-shine rounded-full h-11 w-11`}
name="prev" name="prev"
onClick={onClick} onClick={onClick}
@@ -15,7 +17,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
</button> </button>
)} )}
{data.map((item, index) => { {data?.map((item, index) => {
if ( if (
index % process.env.REACT_APP_ITEM_PER_PAGE == 0 && index % process.env.REACT_APP_ITEM_PER_PAGE == 0 &&
index >= start && index >= start &&
@@ -26,7 +28,9 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
key={index} key={index}
value={index} value={index}
className={`p-2 border ${ className={`p-2 border ${
index === start ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white" index === start
? "border-black dark:border-white dark:text-white"
: "border-transparent dark:text-white"
} btn-shine rounded-full h-11 w-11`} } btn-shine rounded-full h-11 w-11`}
onClick={onClick} onClick={onClick}
name="page_num" name="page_num"
@@ -43,7 +47,9 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
{!next && ( {!next && (
<button <button
className={`p-2 border ${ className={`p-2 border ${
next ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white" next
? "border-black dark:border-white dark:text-white"
: "border-transparent dark:text-white"
} btn-shine rounded-full h-11 w-11`} } btn-shine rounded-full h-11 w-11`}
name="next" name="next"
onClick={onClick} onClick={onClick}