Paying using new card
This commit is contained in:
@@ -1,22 +1,31 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
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";
|
||||
|
||||
import { Form, Formik } from "formik";
|
||||
import { useSelector } from "react-redux";
|
||||
import * as Yup from "yup";
|
||||
import Icons from "../../Helpers/Icons";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(3, "3 chars min.")
|
||||
.max(50, "50 chars max.")
|
||||
.required("required"),
|
||||
cardNum: Yup.string()
|
||||
.min(3, "3 chars min.")
|
||||
.max(25, "25 chars max.")
|
||||
.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.")
|
||||
@@ -45,7 +54,6 @@ const validationSchema = Yup.object().shape({
|
||||
});
|
||||
|
||||
const initialValues = {
|
||||
name: "",
|
||||
cardNum: "",
|
||||
code: "",
|
||||
state: "",
|
||||
@@ -56,24 +64,53 @@ const initialValues = {
|
||||
};
|
||||
|
||||
function AddFundDollars(props) {
|
||||
const navigate = useNavigate();
|
||||
const apiCall = new usersService();
|
||||
let countryWallet = props.walletItem.country;
|
||||
const [tab, setTab] = useState("previous");
|
||||
const [loader, setLoader] = useState(false);
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
const { firstname, lastname } = userDetails;
|
||||
const [prevCardDetails, setPrevCardDetails] = useState({});
|
||||
const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
|
||||
const [cardIcons, setCardIcons] = useState("atm-card");
|
||||
|
||||
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);
|
||||
@@ -82,78 +119,70 @@ function AddFundDollars(props) {
|
||||
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");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!prevCardDetails["payment-card"]?.card_uid) {
|
||||
setTimeout(() => props.setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === "previous") {
|
||||
props.setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: true } },
|
||||
}));
|
||||
|
||||
let stateData = {
|
||||
amount: Number(props.input) * 100,
|
||||
currency: props.walletItem?.code,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await apiCall.getStartCredit(stateData);
|
||||
if (res.data.internal_return < 0) {
|
||||
props.setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
props.setInputError("An Error Occurred");
|
||||
setTimeout(() => props.setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
const _response = res.data;
|
||||
stateData.amount = Number(props.input);
|
||||
stateData.card = prevCardDetails["payment-card"];
|
||||
stateData.cardType = "prev";
|
||||
stateData = { ...stateData, ..._response };
|
||||
|
||||
setTimeout(() => {
|
||||
props.setConfirmCredit({
|
||||
show: {
|
||||
awaitConfirm: { loader: false, state: true },
|
||||
acceptConfirm: { loader: false, state: false },
|
||||
},
|
||||
data: stateData,
|
||||
});
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
props.setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
console.log(error);
|
||||
// To check if card is empty
|
||||
if (Object.keys(prevCardDetails).length === 0) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (tab === "new") {
|
||||
const stateData = {
|
||||
amount: Number(props.input),
|
||||
currency: props.currency,
|
||||
...values,
|
||||
};
|
||||
props.setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: true } },
|
||||
}));
|
||||
|
||||
// Rest of the code for tab "new"
|
||||
let stateData = {
|
||||
amount: Number(props.input) * 100,
|
||||
currency: props.walletItem?.code,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await apiCall.getStartCredit(stateData);
|
||||
if (res.data.internal_return < 0) {
|
||||
props.setInputError("An Error Occurred");
|
||||
throw new Error("An Error Occurred");
|
||||
}
|
||||
|
||||
const _response = res.data;
|
||||
stateData.amount = Number(props.input);
|
||||
stateData.card =
|
||||
tab === "previous" ? prevCardDetails["payment-card"] : { ...values };
|
||||
stateData.cardType = tab === "previous" ? "prev" : "new";
|
||||
stateData = { ...stateData, ..._response };
|
||||
|
||||
setTimeout(() => {
|
||||
props.setConfirmCredit({
|
||||
show: {
|
||||
awaitConfirm: { loader: false, state: true },
|
||||
acceptConfirm: { loader: false, state: false },
|
||||
},
|
||||
data: stateData,
|
||||
});
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
props.setInputError(error.message);
|
||||
setTimeout(() => props.setInputError(""), 5000);
|
||||
props.setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -171,8 +200,6 @@ function AddFundDollars(props) {
|
||||
|
||||
const handleClose = props.onClose;
|
||||
|
||||
console.log(prevCardDetails)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full">
|
||||
@@ -222,7 +249,7 @@ function AddFundDollars(props) {
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* previous tab */}
|
||||
{tab === "previous" ? (
|
||||
{tab === "previous" && (
|
||||
<div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
|
||||
{payListCards.loading ? (
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
@@ -269,7 +296,9 @@ function AddFundDollars(props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
)}
|
||||
|
||||
{tab === "new" && (
|
||||
<div className="new-details w-full max-h-[23rem]">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
@@ -298,17 +327,21 @@ function AddFundDollars(props) {
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
iconName="master-card visa-card atm-card"
|
||||
iconName={cardIcons}
|
||||
label="Card Number"
|
||||
type="text"
|
||||
name="cardNum"
|
||||
onInput={handleCards}
|
||||
placeholder="Enter Card Number"
|
||||
value={props.values.cardNum}
|
||||
value={handleCardNumberChange(
|
||||
props.values.cardNum
|
||||
)}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.cardNum}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Expire Year, Year */}
|
||||
<div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
@@ -358,6 +391,7 @@ function AddFundDollars(props) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
<div className="select-option">
|
||||
<div
|
||||
@@ -405,17 +439,18 @@ function AddFundDollars(props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address and CVV */}
|
||||
<div className="flex items-center flex-1 gap-3 my-2">
|
||||
{/* Address and CVV */}
|
||||
<div className="field w-full col-span-1 flex-[0.4]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
iconName="atm-card"
|
||||
iconName={cardIcons}
|
||||
label="CVV"
|
||||
type="text"
|
||||
type="number"
|
||||
name="cvv"
|
||||
placeholder="CVV"
|
||||
maxLength={3}
|
||||
value={props.values.cvv}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
@@ -449,6 +484,7 @@ function AddFundDollars(props) {
|
||||
name="code"
|
||||
placeholder="Postal Code"
|
||||
value={props.values.code}
|
||||
maxLength={6}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.code}
|
||||
@@ -482,9 +518,9 @@ function AddFundDollars(props) {
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
{loader ? (
|
||||
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
@@ -502,6 +538,7 @@ function AddFundDollars(props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tab == "previous" && (
|
||||
<div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
|
||||
<button
|
||||
@@ -512,8 +549,9 @@ function AddFundDollars(props) {
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
name="previous"
|
||||
type="button"
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
|
||||
Reference in New Issue
Block a user