Consumed Start credit Api
This commit is contained in:
@@ -1,54 +1,71 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import usersService from "../../services/UsersService";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import AddFundDollars from "./AddFundDollars";
|
||||
|
||||
function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
const navigate = useNavigate();
|
||||
// const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
|
||||
const apiCall = new usersService();
|
||||
|
||||
let { payment, currency } = _payment;
|
||||
const { payment, currency } = _payment;
|
||||
|
||||
//STATE FOR CONTROLLED INPUT
|
||||
let [inputError, setInputError] = useState("");
|
||||
const [inputError, setInputError] = useState("");
|
||||
const [loader, setLoader] = useState(false);
|
||||
|
||||
// FUNCTION TO HANDLE INPUT CHANGE
|
||||
const handleChange = ({ target: { name, value } }) => {
|
||||
setInput(value);
|
||||
};
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const handleSubmit = async () => {
|
||||
setInputError("");
|
||||
if (!input || input == "0") {
|
||||
setLoader(true);
|
||||
|
||||
if (!input || input === "0") {
|
||||
setLoader(false);
|
||||
setInputError("Please Enter Amount");
|
||||
return setTimeout(() => {
|
||||
setInputError("");
|
||||
}, 5000);
|
||||
setTimeout(() => setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(input)) {
|
||||
setLoader(false);
|
||||
setInputError("Amount must be a Number");
|
||||
return setTimeout(() => {
|
||||
setInputError("");
|
||||
}, 5000);
|
||||
setTimeout(() => setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
const stateData = {
|
||||
let stateData = {
|
||||
amount: Number(input),
|
||||
currency: currency,
|
||||
currency: currency.toUpperCase(),
|
||||
};
|
||||
|
||||
return setTimeout(
|
||||
() =>
|
||||
try {
|
||||
const res = await apiCall.getStartCredit(stateData);
|
||||
if (res.data.internal_return < 0) {
|
||||
setLoader(false);
|
||||
setInputError("An Error Occurred");
|
||||
setTimeout(() => setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
const _response = res.data;
|
||||
stateData.amount = Number(input);
|
||||
stateData.currency = currency;
|
||||
stateData = { ...stateData, ..._response };
|
||||
|
||||
setTimeout(() => {
|
||||
setLoader(false);
|
||||
setConfirmCredit({
|
||||
show: true,
|
||||
data: stateData,
|
||||
}),
|
||||
1500
|
||||
);
|
||||
});
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -56,8 +73,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
{/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
|
||||
{/*<hr />*/}
|
||||
<form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Amount({currency})
|
||||
@@ -77,8 +92,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
|
||||
{currency == "US Dollars" && (
|
||||
{currency === "US Dollars" && (
|
||||
<div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
|
||||
<AddFundDollars
|
||||
setInputError={setInputError}
|
||||
@@ -91,12 +105,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currency != "US Dollars" && <div className="h-[18rem]"></div>}
|
||||
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
|
||||
{currency != "US Dollars" && (
|
||||
{currency !== "US Dollars" && <div className="h-[18rem]"></div>}
|
||||
|
||||
{currency !== "US Dollars" && (
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
<button
|
||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
@@ -104,33 +118,22 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px]"
|
||||
>
|
||||
<span className="text-white">Continue</span>
|
||||
{loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
<span className="text-white">Continue</span>{" "}
|
||||
<Icons name="chevron-right" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
|
||||
{currency != "US Dollars" &&
|
||||
// <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
// <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
// <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
// <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
// Recent Activity
|
||||
// </h2>
|
||||
// {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
|
||||
// {payment?.loading ? (
|
||||
// <LoadingSpinner size="16" color="sky-blue" />
|
||||
// ) : (
|
||||
// <RecentActivityTable payment={payment} />
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user