From cc22e1a458ba8e8eeba2dfad367086d39851c93f Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 10 Jul 2023 23:21:59 +0100 Subject: [PATCH] Completed conversion to popup --- src/components/MyWallet/AddFund.jsx | 209 ++-- src/components/MyWallet/AddFundDollars.jsx | 904 ++++++++++-------- src/components/MyWallet/AddFundPop.jsx | 131 +++ src/components/MyWallet/Popup/CreditPopup.jsx | 15 +- src/components/MyWallet/TransferFund.jsx | 2 + src/components/MyWallet/Wallet.jsx | 4 +- src/components/MyWallet/WalletBox.jsx | 2 +- .../WalletComponent/RecentActivityTable.jsx | 115 ++- src/components/MyWallet/WalletItemCard.jsx | 7 +- src/components/Pagination/PaginatedList.jsx | 16 +- 10 files changed, 819 insertions(+), 586 deletions(-) create mode 100644 src/components/MyWallet/AddFundPop.jsx diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx index 6aa4cf9..cb5e464 100644 --- a/src/components/MyWallet/AddFund.jsx +++ b/src/components/MyWallet/AddFund.jsx @@ -1,53 +1,48 @@ -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 React, {useState} from 'react' +import RecentActivityTable from './WalletComponent/RecentActivityTable' +import LoadingSpinner from '../Spinners/LoadingSpinner' +import { useNavigate, useLocation } from 'react-router-dom' +import InputCom from '../Helpers/Inputs/InputCom' -import AddFundDollars from "./AddFundDollars"; +import AddFundDollars from './AddFundDollars' -function AddFund({ paymentHistory, currency }) { - const navigate = useNavigate(); - // const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND +function AddFund({payment}) { + + const navigate = useNavigate() + const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND - //STATE FOR CONTROLLED INPUT - let [input, setInput] = useState(""); + //STATE FOR CONTROLLED INPUT + let [input, setInput] = useState('') - let [inputError, setInputError] = 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); + // FUNCTION TO HANDLE INPUT CHANGE + const handleChange = ({target:{name, value}}) => { + setInput(value) } - if (isNaN(input)) { - setInputError("Amount must be a Number"); - return setTimeout(() => { - setInputError(""); - }, 5000); + //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('') } - - const stateData = { amount: Number(input), currency: "naira" }; - navigate("confirm-add-fund", { state: stateData }); - - setInput(""); - }; - console.log("walletItem >>", paymentHistory); - - return ( -
- {/* heading */} - {/*
+ return ( +
+ {/* heading */} + {/*
*/} -
-
-
- {/*

Add Credit with Account Deposit

*/} - {/*
*/} -
-
- - {inputError && ( -

{inputError}

- )} -
-
-
+
+
+
+ {/*

Add Credit with Account Deposit

*/} + {/*
*/} +
+
+ + {inputError &&

{inputError}

} +
+
+
- {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */} - {currency == "US Dollars" && ( -
- -
- )} + {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */} + {currency == 'US Dollars' && +
+ +
+ } - {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} - {currency != "US Dollars" && ( -
- -
- )} -
-
-
- - {/* HIDES THIS SECTION IF CURENCY IS NAIRA */} - {currency != "US Dollars" && ( -
-
-
-

- {/* Recent Activity */}Working in Progress -

-

This popup has taking time because of the prop drilling. I have got it right now

- {/*

Activity Report

*/} - {paymentHistory?.loading ? ( - - ) : ( - // - "" - )} + {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} + {currency != 'US Dollars' && +
+ +
+ } +
+
-
+ + {/* HIDES THIS SECTION IF CURENCY IS NAIRA */} + {currency != 'US Dollars' && +
+
+
+

Recent Activity

+ {/*

Activity Report

*/} + {payment.loading ? + + : + + } +
+
+
+ }
- )} -
- ); + ) } -export default AddFund; +export default AddFund \ No newline at end of file diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx index bc2ab23..b463d8a 100644 --- a/src/components/MyWallet/AddFundDollars.jsx +++ b/src/components/MyWallet/AddFundDollars.jsx @@ -1,402 +1,472 @@ -import React,{useEffect, useState} from 'react' -import { useNavigate } from 'react-router-dom' -import InputCom from '../Helpers/Inputs/InputCom'; -import PaginatedList from '../Pagination/PaginatedList'; -import { handlePagingFunc } from '../Pagination/HandlePagination'; -import LoadingSpinner from '../Spinners/LoadingSpinner'; -import usersService from '../../services/UsersService'; +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"; import * as Yup from "yup"; const validationSchema = Yup.object().shape({ - name: Yup.string() - .min(3, "Minimum 3 characters") - .max(50, "Maximum 50 characters") - .required("Name is required"), - cardNum: Yup.string() - .min(3, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("Card Number is required"), - code: Yup.string() - .min(3, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("Postal Code is required"), - state: Yup.string() - .min(3, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("State is required"), - address: Yup.string() - .min(3, "Minimum 3 characters") - .max(50, "Maximum 50 characters") - .required("Address is required"), - expirationYear: Yup.string() - .min(4, "Minimum 4 characters") - .max(4, "Maximum 4 characters") - .required("Expiration Year is required"), - expirationMonth: Yup.string() - .min(1, "Minimum 1 characters") - .max(2, "Maximum 2 characters") - .required("Expiration Month is required"), - cvv: Yup.string() - .min(3, "Minimum 3 characters") - .max(4, "Maximum 4 characters") - .required("CVV Year is required"), + name: Yup.string() + .min(3, "Minimum 3 characters") + .max(50, "Maximum 50 characters") + .required("Name is required"), + cardNum: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Card Number is required"), + code: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Postal Code is required"), + state: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("State is required"), + address: Yup.string() + .min(3, "Minimum 3 characters") + .max(50, "Maximum 50 characters") + .required("Address is required"), + expirationYear: Yup.string() + .min(4, "Minimum 4 characters") + .max(4, "Maximum 4 characters") + .required("Expiration Year is required"), + expirationMonth: Yup.string() + .min(1, "Minimum 1 characters") + .max(2, "Maximum 2 characters") + .required("Expiration Month is required"), + cvv: Yup.string() + .min(3, "Minimum 3 characters") + .max(4, "Maximum 4 characters") + .required("CVV Year is required"), }); const initialValues = { - name: '', - cardNum: '', - code: '', - state: '', - address: '', - expirationYear: '', - expirationMonth: '', - cvv: '' - }; - + name: "", + cardNum: "", + code: "", + state: "", + address: "", + expirationYear: "", + expirationMonth: "", + cvv: "", +}; function AddFundDollars(props) { - const navigate = useNavigate() - let apiCall = new usersService() + const navigate = useNavigate(); + 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 indexOfFirstItem = Number(currentPage); - const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentPreviousCards = payListCard?.data?.slice(indexOfFirstItem, indexOfLastItem); - - const handlePagination = (e) => { - handlePagingFunc(e,setCurrentPage) + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentPreviousCards = payListCard?.data?.slice( + indexOfFirstItem, + indexOfLastItem + ); + + const handlePagination = (e) => { + 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 - const handleSubmit = (values, helpers) => { - props.setInputError('') - if(!props.input || props.input == '0'){ - props.setInputError('Please Enter Amount') - 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 (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(""); + }; - useEffect(()=>{ - apiCall.payListCard().then(res => { - setPayListCard({loading: false, data: res.data.result_list}) - }).catch(err => { - console.log('PAYCARDLIST ERROR', err) - setPayListCard({loading: false, data: []}) - }) - }, []) + useEffect(() => { + apiCall + .payListCard() + .then((res) => { + setPayListCard({ loading: false, data: res.data.result_list }); + }) + .catch((err) => { + console.log("PAYCARDLIST ERROR", err); + setPayListCard({ loading: false, data: [] }); + }); + }, []); return ( <> -

Payment Method

-
- {/* switch button */} -
- - -
- {/* END OF switch button */} +
+ {/* switch button */} +
+ + +
+ {/* END OF switch button */} - {/* previous tab */} - {tab == 'previous' ? -
- { payListCard.loading ? - - : - payListCard?.data?.length ? - - - {currentPreviousCards.map((item, index)=>( - - - - - )) - } - -
-
- -
-

{item.description} Card

-

Bank **************{item.digits}

-
-

{item.added}

-

Verified

-
-
-
- 		- -
- : -
-

No Previous Card Found!

- -
+ {/* previous tab */} + {tab == "previous" ? ( +
+ {payListCard.loading ? ( + + ) : payListCard?.data?.length ? ( + */} +
+

+ {item.description} Card +

+

+ Bank **************{item.digits} +

+ {/*
+

+ {item.added} +

+

+ Verified +

+
*/} +
+
+ {/* + + */} + + ))} + + ) : ( +
+

+ No Previous Card Found! +

+ +
+ )} + {/* PAGINATION BUTTON */} + {/*
+ = + payListCard?.data?.length + ? true + : false } - {/* PAGINATION BUTTON */} -
- = payListCard?.data?.length ? true : false} data={payListCard?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> -
- {/* END OF PAGINATION BUTTON */} -
- : -
-
- - {(props) => { - return ( -
-
-
-
- {/* inputs starts here */} - {/* Name */} -
- - {props.errors.name && props.touched.name && ( -

- {props.errors.name} -

- )} -
- - {/* CARD NUMBER */} -
- - {props.errors.cardNum && props.touched.cardNum && ( -

- {props.errors.cardNum} -

- )} -
- {/* EXPIRE YEAR, YEAR AND CVV */} -
-
-
-
- -
-
- -
-
- {props.errors.expirationMonth && props.touched.expirationMonth && ( -

- {props.errors.expirationMonth} -

- )} -
-
-
-
- -
-
- -
-
- {props.errors.expirationYear && props.touched.expirationYear && ( -

- {props.errors.expirationYear} -

- )} -
-
- - {props.errors.cvv && props.touched.cvv && ( -

- {props.errors.cvv} -

- )} -
-
- {/* Address */} -
- - {props.errors.address && props.touched.address && ( -

- {props.errors.address} -

- )} -
- {/* postal code and state */} -
-
- - {props.errors.code && props.touched.code && ( -

- {props.errors.code} -

- )} -
-
- - {props.errors.state && props.touched.state && ( -

- {props.errors.state} -

- )} -
-
-
-
+ data={payListCard?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> +
*/} + {/* END OF PAGINATION BUTTON */} +
+ ) : ( +
+
+ + {(props) => { + return ( + +
+
+
+ {/* inputs starts here */} + {/* Name */} +
+ + {props.errors.name && props.touched.name && ( +

+ {props.errors.name} +

+ )}
- {/*
+ {/* CARD NUMBER */} +
+ + {props.errors.cardNum && + props.touched.cardNum && ( +

+ {props.errors.cardNum} +

+ )} +
+ {/* EXPIRE YEAR, YEAR AND CVV */} +
+
+
+
+ +
+
+ +
+
+ {props.errors.expirationMonth && + props.touched.expirationMonth && ( +

+ {props.errors.expirationMonth} +

+ )} +
+
+
+
+ +
+
+ +
+
+ {props.errors.expirationYear && + props.touched.expirationYear && ( +

+ {props.errors.expirationYear} +

+ )} +
+
+ + {props.errors.cvv && props.touched.cvv && ( +

+ {props.errors.cvv} +

+ )} +
+
+ {/* Address */} +
+ + {props.errors.address && + props.touched.address && ( +

+ {props.errors.address} +

+ )} +
+ {/* postal code and state */} +
+
+ + {props.errors.code && props.touched.code && ( +

+ {props.errors.code} +

+ )} +
+
+ + {props.errors.state && props.touched.state && ( +

+ {props.errors.state} +

+ )} +
+
+
+
+
+ + {/*
{requestStatus.message != "" && (

*/} -
- -
- - ); - }} - -
+
+ +
+ + ); + }} +
- } +
+ )} +
+ {tab == "previous" && ( +
+
- { tab == 'previous' && -
- -
- } + )} - ) + ); } -export default AddFundDollars - +export default AddFundDollars; // FORMS ARRAY OF EXPIRATION YEAR FOR CARD -const expireYear = [] -let currentYear = new Date().getFullYear() -for(let i=0; i<=6; i++){ - expireYear.push(currentYear + i) +const expireYear = []; +let currentYear = new Date().getFullYear(); +for (let i = 0; i <= 6; i++) { + expireYear.push(currentYear + i); } // FORMS ARRAY OF EXPIRATION MONTH FOR CARD -let month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] -const expireMonth = [] -for(let i=0; i { + 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 ( +
+
+
+
+ {/*

Add Credit with Account Deposit

*/} + {/*
*/} +
+
+ + {inputError && ( +

{inputError}

+ )} +
+
+ {currency == "US Dollars" && ( +

+ Payment Method +

+ )} +
+ + {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */} + {currency == "US Dollars" && ( +
+ +
+ )} + + {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} + {currency != "US Dollars" && ( +
+ +
+ )} +
+
+
+ + {/* HIDES THIS SECTION IF CURENCY IS NAIRA */} + {currency != "US Dollars" && + //
+ //
+ //
+ //

+ // Recent Activity + //

+ // {/*

Activity Report

*/} + // {payment?.loading ? ( + // + // ) : ( + // + // )} + //
+ //
+ //
+ null} +
+ ); +} + +export default AddFundPop; diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index fdd2e46..e846ff5 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -7,8 +7,9 @@ import usersService from "../../../services/UsersService"; import Icons from "../../Helpers/Icons"; import AddFund from "../AddFund"; import ModalCom from "../../Helpers/ModalCom"; +import AddFundPop from "../AddFundPop"; -const CreditPopup = ({ details, onClose, situation}) => { +const CreditPopup = ({ details, onClose, situation }) => { const { pathname, state } = useLocation(); const [submitTask, setSubmitTask] = useState({ loading: false, @@ -33,10 +34,14 @@ const CreditPopup = ({ details, onClose, situation}) => { }; return ( - +
-

+

Add Credit

-
- +
+
diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx index 42380f8..aa57df9 100644 --- a/src/components/MyWallet/TransferFund.jsx +++ b/src/components/MyWallet/TransferFund.jsx @@ -91,6 +91,7 @@ function TransferFund({ payment, wallet }) { //FUNCTION TO HANDLE SUBMIT const handleSubmit = (values, helpers) => { + if(!values?.amount && !values.recipientID) return setRequestStatus(true); let recipientDetails = recipients.data?.filter( (item) => item.recipient_id == values.recipientID @@ -302,6 +303,7 @@ function TransferFund({ payment, wallet }) { ) : ( )} - {data.map((item, index) => { + {data?.map((item, index) => { if ( index % process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && @@ -26,7 +28,9 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => { key={index} value={index} 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`} onClick={onClick} name="page_num" @@ -43,7 +47,9 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => { {!next && (