import { Form, Formik } from "formik"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import * as Yup from "yup"; import usersService from "../../../services/UsersService"; import Icons from "../../Helpers/Icons"; import InputCom from "../../Helpers/Inputs/InputCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; const validationSchema = Yup.object().shape({ cardNum: Yup.string() .min(6, "not a card number") .max(19, "16 chars max.") //16 chars + 3 spaces .test("luhn-validation", "Invalid Card Number", (value) => { const sanitizedNumber = value?.replace(/\D/g, ""); const digits = Array?.from(sanitizedNumber, Number); for (let i = digits.length - 2; i >= 0; i -= 2) { digits[i] *= 2; if (digits[i] > 9) { digits[i] -= 9; } } const sum = digits.reduce((acc, digit) => acc + digit, 0); return sum % 10 === 0; }) .required("required"), code: Yup.string() .min(3, "3 chars min.") .max(25, "25 chars max.") .required("required"), state: Yup.string() .min(2, "2 chars min.") .max(25, "25 chars max.") .required("required"), address: Yup.string() .min(3, "3 chars min.") .max(50, "50 chars max.") .required("required"), expirationYear: Yup.string() .min(4, "4 chars min.") .max(4, "4 chars max.") .required("required"), expirationMonth: Yup.string() .min(1, "1 chars min.") .max(2, "2 chars max.") .required("required"), cvv: Yup.string() .min(3, "3 chars min.") .max(4, "4 chars max.") .required("required"), }); const initialValues = { cardNum: "", code: "", state: "", address: "", expirationYear: "", expirationMonth: "", cvv: "", }; function AddFundDollars(props) { let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD let [loadingState, setLoadingState] = useState(false) const apiCall = new usersService(); let countryWallet = props.walletItem.country; const [selectedOption, setSelectedOption] = useState("previous"); const { userDetails } = useSelector((state) => state?.userDetails); const [prevCardDetails, setPrevCardDetails] = useState({}); const [payListCards, setPayListCards] = useState({ loading: true, data: [] }); const [cardIcons, setCardIcons] = useState("atm-card"); const [prevCardError, setPrevCardError] = useState(""); const handleOptionChange = (event) => { setSelectedOption(event.target.value); }; const { firstname, lastname } = userDetails; // Handling Card Icons const handleCards = (event) => { const { name, value } = event.target; if (name == "cardNum") { // Check if the first character is 4 or 5 and set the card icon accordingly const cardIcon = value.length > 0 ? value[0] === "4" ? "visa-card" : value[0] === "5" ? "master-card" : "atm-card" : "atm-card"; setCardIcons(cardIcon); } }; // Handling card change const handleInputChange = (event) => { const { name, value } = event.target; setPrevCardDetails((prevState) => ({ ...prevState, [name]: value, })); }; // Handling card number grouping const handleCardNumberChange = (value) => { return value ?.replace(/\s/g, "") // Remove existing spaces .match(/.{1,4}/g) // Group every four characters ?.join(" "); }; // card slicer const indexOfFirstItem = 0; const indexOfLastItem = indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE); const currentPreviousCards = payListCards?.data?.slice( indexOfFirstItem, indexOfLastItem ); // Submission for both prev and new cards const handleSubmit = async (values, helpers) => { props.setInputError(""); if (!props.input || props.input === "0") { props.setInputError("Please Enter Amount"); setTimeout(() => props.setInputError(""), 5000); return; } if (isNaN(props.input)) { props.setInputError("Amount must be a Number"); setTimeout(() => props.setInputError(""), 5000); return; } if (Number(props.input) * 100 > Number(props.walletItem?.transfer_limit)) { props.setInputError("Credit limit has been exceeded"); setTimeout(() => props.setInputError(""), 5000); return; } let stateData = { amount: Number(props.input) * 100, currency: props.walletItem?.code, }; if (selectedOption === "previous") { // To check if card is empty if (Object.keys(prevCardDetails).length === 0) { setPrevCardError("No card selected!"); setTimeout(() => setPrevCardError(""), 5000); return; } } // props.setConfirmCredit((prev) => ({ // ...prev, // show: { awaitConfirm: { loader: true } }, // })); setLoadingState(true) // Extracting card_uid from the previous card details const paymentCardValue = prevCardDetails["payment-card"]; if (paymentCardValue) { try { const paymentCardObject = JSON.parse(paymentCardValue); stateData = { ...stateData, card_uid: paymentCardObject.card_uid, }; } catch (error) { console.error("Error parsing JSON:", error); } } else { // For the new card details stateData = { ...stateData, card_uid: "", }; } try { const res = await apiCall.getStartCredit(stateData); if (res.data.internal_return < 0) { props.setInputError("An Error Occurred"); throw new Error("An Error Occurred"); // use commented code when you when to display pop for failed start credit API // props.setConfirmCredit((prev) => ({ // ...prev, // show: { // awaitConfirm: { loader: false, state: false }, // acceptConfirm: { loader: false, state: true }, // }, // data: {internal_return: -1} // })); setLoadingState(false) return } const _response = res.data; stateData.card = selectedOption === "previous" ? prevCardDetails["payment-card"] : { ...values, cvv: values.cvv }; stateData.cardType = selectedOption === "previous" ? "prev" : "new"; stateData = { ...stateData, ..._response }; setTimeout(() => { setLoadingState(false) props.setConfirmCredit({ show: { awaitConfirm: { loader: false, state: true }, acceptConfirm: { loader: false, state: false }, }, data: stateData, }); }, 1500); } catch (error) { setLoadingState(false) props.setInputError(error.message); setTimeout(() => props.setInputError(""), 5000); props.setConfirmCredit((prev) => ({ ...prev, show: { awaitConfirm: { loader: false } }, })); console.log(error); } }; useEffect(() => { apiCall .payListCard() .then((res) => { setPayListCards({ loading: false, data: res.data.result_list }); }) .catch((err) => { console.log("PAYCARDLIST ERROR", err); setPayListCards({ loading: false, data: [] }); }); }, []); const handleClose = props.onClose; return ( <>
{/* switch button */}

{countryWallet == "US" && "Payment Method"}

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

No Previous Card Found!

)}

{prevCardError && prevCardError}

)} {selectedOption === "new" && (
{payListCards.loading ? (
) : payListCards.data.length < MaxNoOfCards ? (
{(props) => { return (
{/* Inputs */} {/* Name */}

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

{/* Card Number */}
{/* Expire Year, Year */}
{/* Address and CVV */}
{/* Postal Code and State */}
); }}
) : null}
)}
{selectedOption == "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 }); }