From 9ea846bc56df9242350630032e1e49a27d251233 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 19 Jun 2023 10:21:50 +0100 Subject: [PATCH] add dollar fund component added --- .../Helpers/Inputs/InputCom/index.jsx | 9 +- src/components/MyWallet/AddFund.jsx | 32 +- src/components/MyWallet/AddFundDollars.jsx | 462 ++++++++++++++++++ src/components/MyWallet/Balance.jsx | 2 +- src/components/MyWallet/ConfirmAddFund.jsx | 25 +- 5 files changed, 511 insertions(+), 19 deletions(-) create mode 100644 src/components/MyWallet/AddFundDollars.jsx diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index c924a19..f05dd0d 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -51,11 +51,16 @@ export default function InputCom({ htmlFor={name} > {label} - {spanTag && ( + {spanTag && + spanTag == '*' ? + + {' '}{spanTag} + + : {spanTag} - )} + } )} {forgotPassword && ( diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx index faf4003..92e4e31 100644 --- a/src/components/MyWallet/AddFund.jsx +++ b/src/components/MyWallet/AddFund.jsx @@ -1,15 +1,18 @@ import React, {useState} from 'react' import RecentActivityTable from './WalletComponent/RecentActivityTable' 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 AddFundDollars from './AddFundDollars' + 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('0') + let [input, setInput] = useState('') let [inputError, setInputError] = useState('') @@ -23,15 +26,15 @@ function AddFund({payment}) { setInputError('') if(!input || input == '0'){ setInputError('Please Enter Amount') - return + return setTimeout(()=>{setInputError('')}, 5000) } if(isNaN(input)){ setInputError('Amount must be a Number') - return + return setTimeout(()=>{setInputError('')}, 5000) } - const stateData = {amount: Number(input)} + const stateData = {amount: Number(input), currency: 'naira'} navigate('confirm-add-fund', {state: stateData}) setInput('') @@ -79,18 +82,27 @@ function AddFund({payment}) {
{inputError &&

{inputError}

}
+ + {/* 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' &&
@@ -117,6 +132,7 @@ function AddFund({payment}) {
+ } ) } diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx new file mode 100644 index 0000000..c79980a --- /dev/null +++ b/src/components/MyWallet/AddFundDollars.jsx @@ -0,0 +1,462 @@ +import React,{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 { 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"), +}); + +const initialValues = { + name: '', + cardNum: '', + code: '', + state: '', + address: '', + expirationYear: '', + expirationMonth: '', + cvv: '' + }; + + +function AddFundDollars(props) { + const navigate = useNavigate() + + let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS + + let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED + + let previousCards = {data:[1,2]} //USER PREVIOUS CARDS // TO BE REPLACED LATER FROM DATA FROM API + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentPreviousCards = previousCards?.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) + } + + 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('') + } + + return ( + <> +

Payment Method

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

Master Card

+

Bank **************3535

+

Verified

+
+
+ 		+ +
+ : +
+

No Previous Card Found!

+ +
+ } + {/* PAGINATION BUTTON */} +
+ = previousCards?.data?.length ? true : false} data={previousCards?.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 != "" && ( +

+ {requestStatus.message} +

+ )} +
+
+ + + {" "} + Cancel + + + + {requestStatus.loading ? ( + + ) : ( + + )} +
+
+
*/} +
+ +
+
+ ); + }} + +
+
+ } +
+ { tab == 'previous' && +
+ +
+ } + + ) +} + +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) +} + +// 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; iTransfer:'' } - + { navigate("/my-wallet", { replace: true }); - window.location.reload(true); }, 1000); }) .catch((err) => { @@ -102,11 +101,11 @@ function ConfirmAddFund({ payment }) { }, []); return ( -
+
{pageLoading ? ( ) : ( -
+

Confirm Add Fund To Account @@ -116,7 +115,7 @@ function ConfirmAddFund({ payment }) {
- + : + + }

)} -
+

Recent Activity -- 2.34.1