Fixed the credit issues #519
@@ -64,17 +64,21 @@ const initialValues = {
|
||||
};
|
||||
|
||||
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 MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
|
||||
|
||||
const apiCall = new usersService();
|
||||
let countryWallet = props.walletItem.country;
|
||||
const [tab, setTab] = useState("previous");
|
||||
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
|
||||
@@ -144,7 +148,12 @@ function AddFundDollars(props) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === "previous") {
|
||||
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!");
|
||||
@@ -158,11 +167,26 @@ function AddFundDollars(props) {
|
||||
show: { awaitConfirm: { loader: true } },
|
||||
}));
|
||||
|
||||
let stateData = {
|
||||
amount: Number(props.input) * 100,
|
||||
card_uid: "", //added card_uid as empty string
|
||||
currency: props.walletItem?.code,
|
||||
};
|
||||
// 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);
|
||||
@@ -172,12 +196,11 @@ function AddFundDollars(props) {
|
||||
}
|
||||
|
||||
const _response = res.data;
|
||||
stateData.amount = Number(props.input);
|
||||
stateData.card =
|
||||
tab === "previous"
|
||||
selectedOption === "previous"
|
||||
? prevCardDetails["payment-card"]
|
||||
: { ...values, cvv: values.cvv };
|
||||
stateData.cardType = tab === "previous" ? "prev" : "new";
|
||||
stateData.cardType = selectedOption === "previous" ? "prev" : "new";
|
||||
stateData = { ...stateData, ..._response };
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -225,36 +248,45 @@ function AddFundDollars(props) {
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
value="previous"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
onChange={handleOptionChange}
|
||||
checked={selectedOption === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
selectedOption == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Cards
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className={`cursor-pointer flex items-center gap-1 ${payListCards.data.length >= MaxNoOfCards ? 'pointer-events-none':''}`}
|
||||
className={`cursor-pointer flex items-center gap-1 ${
|
||||
payListCards.data.length >= MaxNoOfCards
|
||||
? "pointer-events-none"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
value="new"
|
||||
onChange={handleOptionChange}
|
||||
checked={selectedOption === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
selectedOption == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Add New Card {payListCards.data.length >= MaxNoOfCards && <span className="text-[14px] text-red-500">Max Reached</span>}
|
||||
Add New Card{" "}
|
||||
{payListCards.data.length >= MaxNoOfCards && (
|
||||
<span className="text-[14px] text-red-500">Max Reached</span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
@@ -262,8 +294,8 @@ function AddFundDollars(props) {
|
||||
<hr />
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* previous tab */}
|
||||
{tab === "previous" && (
|
||||
{/* previous selectedOption */}
|
||||
{selectedOption === "previous" && (
|
||||
<div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
|
||||
{payListCards.loading ? (
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
@@ -279,10 +311,11 @@ function AddFundDollars(props) {
|
||||
{currentPreviousCards.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className={index !== 0 && "border-t-2"}
|
||||
className={index !== 0 ? "border-t-2" : undefined}
|
||||
value={JSON.stringify(item)}
|
||||
title={`${item.description} Card\nBank **************${item.digits}`}
|
||||
>
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
{/* <div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details">
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{item.description} Card
|
||||
@@ -291,7 +324,8 @@ function AddFundDollars(props) {
|
||||
Bank **************{item.digits}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{item.description} Card - Bank **************{item.digits}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -301,7 +335,7 @@ function AddFundDollars(props) {
|
||||
No Previous Card Found!
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setTab("new")}
|
||||
onClick={() => setSelectedOption("new")}
|
||||
type="button"
|
||||
className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
@@ -315,13 +349,13 @@ function AddFundDollars(props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "new" && (
|
||||
{selectedOption === "new" && (
|
||||
<div className="new-details w-full max-h-[22rem]">
|
||||
{payListCards.loading ?
|
||||
{payListCards.loading ? (
|
||||
<div className="pt-10 flex w-full h-full justify-center items-center">
|
||||
<LoadingSpinner size='10' color='sky-blue' />
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
</div>
|
||||
:payListCards.data.length < MaxNoOfCards ?
|
||||
) : payListCards.data.length < MaxNoOfCards ? (
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
@@ -380,7 +414,8 @@ function AddFundDollars(props) {
|
||||
*
|
||||
</span>
|
||||
<span className="text-[12px] text-red-500 ml-1">
|
||||
{props.errors.expirationMonth && "**"}
|
||||
{props.errors.expirationMonth &&
|
||||
"**"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -432,7 +467,8 @@ function AddFundDollars(props) {
|
||||
*
|
||||
</span>
|
||||
<span className="text-[12px] text-red-500 italic">
|
||||
{props.errors.expirationYear && "**"}
|
||||
{props.errors.expirationYear &&
|
||||
"**"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -561,14 +597,12 @@ function AddFundDollars(props) {
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tab == "previous" && (
|
||||
{selectedOption == "previous" && (
|
||||
<div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
|
||||
<button
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
||||
|
||||
Reference in New Issue
Block a user