import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import usersService from "../../services/UsersService"; import InputCom from "../Helpers/Inputs/InputCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import { Form, Formik } from "formik"; import { useSelector } from "react-redux"; 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 apiCall = new usersService(); let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS 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 const handleInputChange = (event) => { const { name, value } = event.target; setPrevCardDetails((prevState) => ({ ...prevState, [name]: value, })); }; const indexOfFirstItem = 0; const indexOfLastItem = indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE); const currentPreviousCards = payListCards?.data?.slice( indexOfFirstItem, indexOfLastItem ); // 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") { if (!prevCardDetails) { // return setTimeout(() => { // props.setInputError(""); // }, 5000); return; } setLoader(true); const stateData = { amount: Number(props.input), currency: props.currency, card: prevCardDetails["payment-card"], }; setTimeout(() => { props.setConfirmCredit({ show: true, data: stateData }); setLoader(false); }, 1500); // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now } if (tab == "new") { const stateData = { amount: Number(props.input), currency: props.currency, values, }; // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now } }; useEffect(() => { apiCall .payListCard() .then((res) => { setPayListCards({ loading: false, data: res.data.result_list }); }) .catch((err) => { console.log("PAYCARDLIST ERROR", err); setPayListCards({ loading: false, data: [] }); }); }, []); return ( <>
{/* switch button */}

{props.currency == "US Dollars" && "Payment Method"}

{props.currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}

{props.inputError && props.inputError}

{/* END OF switch button */} {/* previous tab */} {tab == "previous" ? (
{payListCards.loading ? ( ) : payListCards?.data?.length ? ( */}

{item.description} Card

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

{/*

{item.added}

Verified

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

No Previous Card Found!

)}
) : (
{(props) => { return (
{/* inputs starts here */} {/* Name */}

{`${firstname} ${lastname}`}

{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; i < month.length; i++) { expireMonth.push({ name: month[i], value: i + 1 }); }