Confirm Credit Popup
This commit is contained in:
@@ -0,0 +1,154 @@
|
||||
import React, { useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
|
||||
|
||||
import AddFundDollars from "./AddFundDollars";
|
||||
|
||||
function AddFund({ payment }) {
|
||||
const navigate = useNavigate();
|
||||
const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
|
||||
|
||||
//STATE FOR CONTROLLED INPUT
|
||||
let [input, setInput] = useState("");
|
||||
|
||||
let [inputError, setInputError] = useState("");
|
||||
|
||||
// FUNCTION TO HANDLE INPUT CHANGE
|
||||
const handleChange = ({ target: { name, value } }) => {
|
||||
setInput(value);
|
||||
};
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = () => {
|
||||
setInputError("");
|
||||
if (!input || input == "0") {
|
||||
setInputError("Please Enter Amount");
|
||||
return setTimeout(() => {
|
||||
setInputError("");
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
if (isNaN(input)) {
|
||||
setInputError("Amount must be a Number");
|
||||
return setTimeout(() => {
|
||||
setInputError("");
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
const stateData = { amount: Number(input), currency: "naira" };
|
||||
navigate("confirm-add-fund", { state: stateData });
|
||||
|
||||
setInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* heading */}
|
||||
{/* <div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="w-full flex justify-start space-x-3 items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||
onClick={() =>
|
||||
navigate('/my-wallet', { replace: true })
|
||||
}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="35"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
fill="skyblue"
|
||||
>
|
||||
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
||||
Add Credit
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<div
|
||||
onClick={() => filterHandler("today")}
|
||||
className="relative"
|
||||
></div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<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 shadow">
|
||||
{/*<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:p-8 p-4 add-fund-info">
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={
|
||||
currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
|
||||
}
|
||||
type="text"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={input}
|
||||
inputHandler={handleChange}
|
||||
/>
|
||||
{inputError && (
|
||||
<p className="text-base text-red-500">{inputError}</p>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<hr />
|
||||
|
||||
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
|
||||
{currency == "US Dollars" && (
|
||||
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<AddFundDollars
|
||||
setInputError={setInputError}
|
||||
input={input}
|
||||
setInput={setInput}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
|
||||
{currency != "US Dollars" && (
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
|
||||
<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"
|
||||
>
|
||||
<span className="text-white">Continue</span>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddFund;
|
||||
@@ -0,0 +1,556 @@
|
||||
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";
|
||||
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.")
|
||||
.required("required"),
|
||||
code: Yup.string()
|
||||
.min(3, "3 chars min.")
|
||||
.max(25, "25 chars max.")
|
||||
.required("required"),
|
||||
state: Yup.string()
|
||||
.min(3, "3 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 = {
|
||||
name: "",
|
||||
cardNum: "",
|
||||
code: "",
|
||||
state: "",
|
||||
address: "",
|
||||
expirationYear: "",
|
||||
expirationMonth: "",
|
||||
cvv: "",
|
||||
};
|
||||
|
||||
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: [] });
|
||||
let __awaitComponent = props.confirmCredit.show.awaitConfirm;
|
||||
let __acceptComponent = props.confirmCredit.show.awaitConfirm;
|
||||
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
|
||||
);
|
||||
|
||||
const handleSubmit = async (values, helpers) => {
|
||||
props.setInputError("");
|
||||
|
||||
if (!props.input || props.input === "0") {
|
||||
props.setInputError("Please Enter Amount");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(props.input)) {
|
||||
props.setInputError("Amount must be a Number");
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === "previous") {
|
||||
if (!prevCardDetails) {
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
if (tab === "new") {
|
||||
const stateData = {
|
||||
amount: Number(props.input),
|
||||
currency: props.currency,
|
||||
...values,
|
||||
};
|
||||
|
||||
// Rest of the code for tab "new"
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
<div className="w-full">
|
||||
{/* switch button */}
|
||||
<div className="flex">
|
||||
<form className="add-fund-info flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{countryWallet == "US" && "Payment Method"}
|
||||
</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"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Cards
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Add New Card
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<hr />
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* previous tab */}
|
||||
{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" />
|
||||
) : payListCards?.data?.length ? (
|
||||
<select
|
||||
className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
|
||||
value={prevCardDetails["payment-card"]?.card_uid}
|
||||
id="payment-card"
|
||||
name="payment-card"
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select a card</option>
|
||||
{currentPreviousCards.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className={index !== 0 && "border-t-2"}
|
||||
value={JSON.stringify(item)}
|
||||
>
|
||||
<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
|
||||
</h1>
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Bank **************{item.digits}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<p className="my-5 text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
No Previous Card Found!
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setTab("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"
|
||||
>
|
||||
<span className="text-white">Add Card</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="new-details w-full max-h-[23rem]">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className="md:pl-8">
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="flex-1 sm:mr-10">
|
||||
<div className="fields w-full">
|
||||
{/* Inputs */}
|
||||
{/* Name */}
|
||||
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
Name:
|
||||
</label>
|
||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-1 gap-3 my-2">
|
||||
{/* Card Number */}
|
||||
<div className="field w-full flex-[0.6]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
iconName="master-card visa-card atm-card"
|
||||
label="Card Number"
|
||||
type="text"
|
||||
name="cardNum"
|
||||
placeholder="Enter Card Number"
|
||||
value={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">
|
||||
<div className="select-option">
|
||||
<div
|
||||
className={`flex items-center justify-between mb-2.5`}
|
||||
>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Month{" "}
|
||||
<span className="text-red-700 text-sm italic">
|
||||
*
|
||||
</span>
|
||||
<span className="text-[12px] text-red-500 ml-1">
|
||||
{props.errors.expirationMonth && "**"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
||||
>
|
||||
<select
|
||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
||||
value={props.values.expirationMonth}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
name="expirationMonth"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
className="text-dark-gray"
|
||||
>
|
||||
Month
|
||||
</option>
|
||||
{expireMonth?.length &&
|
||||
expireMonth.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.value}
|
||||
>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
<div className="select-option">
|
||||
<div
|
||||
className={`flex items-center justify-between mb-2.5`}
|
||||
>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Year{" "}
|
||||
<span className="text-red-700 text-sm tracking-wide">
|
||||
*
|
||||
</span>
|
||||
<span className="text-[12px] text-red-500 italic">
|
||||
{props.errors.expirationYear && "**"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
||||
>
|
||||
<select
|
||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
||||
value={props.values.expirationYear}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
name="expirationYear"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
className="text-dark-gray"
|
||||
>
|
||||
Year
|
||||
</option>
|
||||
{expireYear?.length &&
|
||||
expireYear.map((item, index) => (
|
||||
<option key={index} value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
label="CVV"
|
||||
type="text"
|
||||
name="cvv"
|
||||
placeholder="CVV"
|
||||
value={props.values.cvv}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.cvv}
|
||||
/>
|
||||
</div>
|
||||
<div className="field w-full flex-[0.6]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
label="Billing Address"
|
||||
type="text"
|
||||
name="address"
|
||||
placeholder="Billing Address"
|
||||
value={props.values.Address}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.address}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Postal Code and State */}
|
||||
<div className="sm:grid gap-5 grid-cols-3 my-2">
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
label="Postal Code"
|
||||
type="text"
|
||||
name="code"
|
||||
placeholder="Postal Code"
|
||||
value={props.values.code}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.code}
|
||||
/>
|
||||
</div>
|
||||
<div className="field w-full col-span-1">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
label="State"
|
||||
type="text"
|
||||
name="state"
|
||||
placeholder="State"
|
||||
value={props.values.state}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
|
||||
<button
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</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"
|
||||
>
|
||||
{loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
<span className="text-white">Continue</span>{" "}
|
||||
<Icons name="chevron-right" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{tab == "previous" && (
|
||||
<div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
|
||||
<button
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
|
||||
onClick={props.onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
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"
|
||||
>
|
||||
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<span className="text-white">Continue</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
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,
|
||||
confirmCredit,
|
||||
setConfirmCredit,
|
||||
walletItem,
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
const apiCall = new usersService();
|
||||
let countryWallet = walletItem?.country;
|
||||
const { payment, currency } = _payment;
|
||||
|
||||
const [inputError, setInputError] = useState("");
|
||||
let __awaitComponent = confirmCredit.show.awaitConfirm;
|
||||
|
||||
const handleChange = ({ target: { name, value } }) => {
|
||||
setInput(value);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setInputError("");
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: true } },
|
||||
}));
|
||||
|
||||
if (!input || input === "0") {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
setInputError("Please Enter Amount");
|
||||
setTimeout(() => setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(input)) {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
setInputError("Amount must be a Number");
|
||||
setTimeout(() => setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
let stateData = {
|
||||
amount: Number(input) * 100,
|
||||
currency: walletItem?.code,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await apiCall.getStartCredit(stateData);
|
||||
if (res.data.internal_return < 0) {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
setInputError("An Error Occurred");
|
||||
setTimeout(() => setInputError(""), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
const _response = res.data;
|
||||
stateData.amount = Number(input);
|
||||
stateData.currency = currency;
|
||||
stateData = { ...stateData, ..._response };
|
||||
|
||||
setTimeout(() => {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: {
|
||||
awaitConfirm: { loader: false, state: true },
|
||||
acceptConfirm: { loader: false, state: false },
|
||||
},
|
||||
data: stateData,
|
||||
}));
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: { awaitConfirm: { loader: false } },
|
||||
}));
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-[33rem] w-full">
|
||||
<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">
|
||||
<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})
|
||||
</h1>
|
||||
<div className="field w-full max-w-[250px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
type="text"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={input}
|
||||
inputHandler={handleChange}
|
||||
/>
|
||||
<p className="text-base text-red-500 h-5">
|
||||
{inputError && inputError}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{countryWallet === "US" && (
|
||||
<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}
|
||||
walletItem={walletItem}
|
||||
input={input}
|
||||
setInput={setInput}
|
||||
currency={currency}
|
||||
onClose={onClose}
|
||||
confirmCredit={confirmCredit}
|
||||
setConfirmCredit={setConfirmCredit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{countryWallet == "NG" && <div className="h-[18rem]"></div>}
|
||||
|
||||
{countryWallet == "NG" && (
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
<button
|
||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
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] w-full"
|
||||
>
|
||||
{__awaitComponent.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
<span className="text-white">Continue</span>{" "}
|
||||
<Icons name="chevron-right" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddFundPop;
|
||||
@@ -0,0 +1,106 @@
|
||||
import React from "react";
|
||||
|
||||
function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
console.log(confirmCredit);
|
||||
const { data } = confirmCredit;
|
||||
return (
|
||||
<div className="logout-modal-body w-full flex flex-col items-center">
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Success Icon for now */}
|
||||
<div className="flex items-center w-full justify-center">
|
||||
{data?.result == "Charge success" ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="green"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="feather feather-check-circle"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
width="100"
|
||||
height="100"
|
||||
stroke="red"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="feather feather-x-circle"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center`}>
|
||||
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{data?.result == "Charge success"
|
||||
? "Credit was Successful!"
|
||||
: "Credit was Unsuccessful"}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Amount({data?.currency || ""})
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{`${data?.symbol || ""} ${
|
||||
Number(data?.amount * 0.01).toLocaleString() || ""
|
||||
}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Wallet Balance
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{data?.curr_balance}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Confirmation Number
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{data?.confirmation}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
<button
|
||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
|
||||
onClick={onClose}
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CompleteConfirmCredit;
|
||||
@@ -0,0 +1,262 @@
|
||||
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
|
||||
import React, { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
|
||||
function ConfirmAddFund({
|
||||
confirmCredit,
|
||||
onClose,
|
||||
walletItem,
|
||||
setConfirmCredit,
|
||||
}) {
|
||||
const __confirmData = confirmCredit?.data;
|
||||
const __confirmCountry = walletItem?.country;
|
||||
const __confirmCardDetails = __confirmData.card
|
||||
? JSON.parse(__confirmData.card)
|
||||
: "";
|
||||
let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
}); // STATE FOR API REQUEST
|
||||
|
||||
// const [ConfirmCredit, setConfirmCredit] = useState({
|
||||
// show: false,
|
||||
// loader: false,
|
||||
// msg: "",
|
||||
// data: {},
|
||||
// });
|
||||
|
||||
const apiURL = new usersService();
|
||||
const navigate = useNavigate();
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const onSuccessPayment = () => {
|
||||
setRequestStatus({ message: "", loading: true, status: false });
|
||||
let reqData = { amount: __confirmData?.account, currency: "NGN" };
|
||||
apiURL
|
||||
.startTopUp(reqData)
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setRequestStatus({
|
||||
message: "Could not finish transaction",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
toast.success("Opps! something went wrong");
|
||||
}
|
||||
// do something
|
||||
setRequestStatus({
|
||||
message: "Topup successful",
|
||||
loading: false,
|
||||
status: true,
|
||||
});
|
||||
toast.success("Account Topup was successful");
|
||||
setTimeout(() => {
|
||||
navigate("/my-wallet", { replace: true });
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
// do something
|
||||
setRequestStatus({
|
||||
message: "Opps! An Error Occured",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
toast.success("Opps! something went wrong");
|
||||
});
|
||||
};
|
||||
|
||||
const config = {
|
||||
public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
|
||||
tx_ref: Date.now(),
|
||||
amount: __confirmData?.amount,
|
||||
currency: "NGN",
|
||||
payment_options: "card,mobilemoney,ussd",
|
||||
customer: {
|
||||
email: `${userDetails.email}`,
|
||||
phone_number: userDetails.phone,
|
||||
name: `${userDetails.lastname} ${userDetails.firstname}`,
|
||||
},
|
||||
customizations: {
|
||||
title: "WrenchBoard",
|
||||
description: "Topup Payment",
|
||||
logo: "https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg",
|
||||
},
|
||||
};
|
||||
|
||||
const fwConfig = {
|
||||
...config,
|
||||
text: "Proceed",
|
||||
callback: (response) => {
|
||||
onSuccessPayment();
|
||||
closePaymentModal(); // this will close the modal programmatically
|
||||
},
|
||||
onClose: () => {},
|
||||
};
|
||||
|
||||
// Handling Previous Card
|
||||
const handlePrevCard = async () => {
|
||||
const { amount, credit_reference, currency } = __confirmData;
|
||||
const { card_uid } = __confirmCardDetails;
|
||||
|
||||
const reqData = {
|
||||
amount: amount * 100,
|
||||
card_uid,
|
||||
credit_reference,
|
||||
currency,
|
||||
};
|
||||
|
||||
try {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: {
|
||||
acceptConfirm: { loader: true },
|
||||
},
|
||||
}));
|
||||
const res = await apiURL.getPaidPrevCard(reqData);
|
||||
const _response = res.data;
|
||||
if (res.data.internal_return < 0) {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: {
|
||||
acceptConfirm: { loader: false },
|
||||
},
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: {
|
||||
awaitConfirm: { loader: false, state: false },
|
||||
acceptConfirm: { loader: false, state: true },
|
||||
},
|
||||
data: _response,
|
||||
}));
|
||||
} catch (error) {
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: {
|
||||
acceptConfirm: { loader: false },
|
||||
},
|
||||
}));
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const ThePaymentText = ({ value }) => (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{value.description} Card
|
||||
</h1>
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Bank **************{value.digits}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show?.awaitConfirm?.state ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div
|
||||
className={`flex items-center ${
|
||||
__confirmCountry == "US" ? "gap-14" : "gap-4"
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Amount({__confirmData?.currency})
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{`${walletItem?.symbol} ${
|
||||
Number(__confirmData?.amount).toLocaleString() || ""
|
||||
}`}
|
||||
</span>
|
||||
</div>
|
||||
{__confirmCountry == "US" && (
|
||||
<div className="flex items-center gap-8">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
>
|
||||
{__confirmCountry == "US" && "Payment Method"}
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white ">
|
||||
{__confirmCardDetails ? (
|
||||
<ThePaymentText value={__confirmCardDetails} />
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`${
|
||||
__confirmCountry == "US" ? "gap-[3.7rem]" : "gap-8"
|
||||
} flex items-center`}
|
||||
>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Reference No
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{__confirmData?.credit_reference}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
__confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
|
||||
}
|
||||
></div>
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
<button
|
||||
className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{__confirmCountry == "US" && (
|
||||
<button
|
||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
|
||||
onClick={
|
||||
__confirmData?.cardType === "prev"
|
||||
? handlePrevCard
|
||||
: () => console.log("Test me")
|
||||
}
|
||||
>
|
||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
"Proceed"
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{__confirmCountry == "NG" && (
|
||||
<FlutterWaveButton
|
||||
{...fwConfig}
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConfirmAddFund;
|
||||
@@ -0,0 +1,210 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
|
||||
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
function ConfirmTransfer({ payment, wallet }) {
|
||||
const apiURL = new usersService();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
let { state } = useLocation();
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
let [pageLoading, setPageLoading] = useState(true);
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = () => {
|
||||
setRequestStatus({ message: "", loading: true, status: false });
|
||||
let reqData = {
|
||||
amount: Number(state.amount),
|
||||
Fee: Number(state.fee),
|
||||
recipientid: Number(state.recipientID),
|
||||
};
|
||||
apiURL
|
||||
.sendMoney(reqData)
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setRequestStatus({
|
||||
message: "Could not perform transaction",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setRequestStatus({
|
||||
message: "transfer successful",
|
||||
loading: false,
|
||||
status: true,
|
||||
});
|
||||
toast.success("Transfer sucessful");
|
||||
setTimeout(() => {
|
||||
navigate("/my-wallet", { replace: true });
|
||||
window.location.reload(true);
|
||||
}, 1000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
message: "Opps! something went wrong! Try Again",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// what happens if not state redirect user
|
||||
if (!state) {
|
||||
navigate("/my-wallet/transfer-fund", { replace: true });
|
||||
} else {
|
||||
setPageLoading(false);
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
{pageLoading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<div className="px-4 md:px-8 py-4">
|
||||
{wallet.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : wallet.data.length ? (
|
||||
<h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
|
||||
{wallet.data.map((item) => {
|
||||
if (item.description == "Naira") {
|
||||
return `Withdraw from Naira Wallet : ${item.symbol}${(
|
||||
item.amount * 0.01
|
||||
).toFixed(2)}`;
|
||||
}
|
||||
})}
|
||||
</h2>
|
||||
) : wallet.error ? (
|
||||
<h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
|
||||
Opps! An Error Occured
|
||||
</h2>
|
||||
) : (
|
||||
<h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
|
||||
No Wallet Information Found!
|
||||
</h2>
|
||||
)}
|
||||
</div>
|
||||
<hr />
|
||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
||||
<h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
|
||||
Confirm Withdraw to Account
|
||||
</h2>
|
||||
{/* AMOUNT */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Amount:"
|
||||
type="text"
|
||||
name="amount"
|
||||
value={state?.amount || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* RECIPIENT ACC: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Recipient Acc:"
|
||||
type="text"
|
||||
name="recipient"
|
||||
value={state?.details.recipient || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* PROCESSING FEE: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Processing Fee:"
|
||||
type="text"
|
||||
name="processingFee"
|
||||
value={state?.fee || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* TOTAL */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Total"
|
||||
type="text"
|
||||
name="total"
|
||||
value={state?.total || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* COMMENT/NOTE */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Comment/Note:"
|
||||
type="text"
|
||||
name="comment"
|
||||
value={state?.comment || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
{requestStatus.message && (
|
||||
<p
|
||||
className={`text-base ${
|
||||
requestStatus.status ? "text-green-500" : "text-red-500"
|
||||
} px-4 md:px-8 py-4`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</p>
|
||||
)}
|
||||
<div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
|
||||
>
|
||||
Transfer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto 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>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConfirmTransfer;
|
||||
@@ -1,39 +1,20 @@
|
||||
import { useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import ModalCom from "../../Helpers/ModalCom";
|
||||
import AddFundPop from "../AddFundPop";
|
||||
import ConfirmAddFund from "../ConfirmAddFund";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import AddFundPop from "./AddFundPop";
|
||||
import CompleteConfirmCredit from "./CompleteConfirmCredit";
|
||||
import ConfirmAddFund from "./ConfirmAddFund";
|
||||
|
||||
const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
const { pathname, state } = useLocation();
|
||||
const [submitTask, setSubmitTask] = useState({
|
||||
loading: false,
|
||||
msg: "",
|
||||
state: "",
|
||||
});
|
||||
const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
|
||||
let [input, setInput] = useState("");
|
||||
const [confirmCredit, setConfirmCredit] = useState({
|
||||
show: false,
|
||||
show: {
|
||||
awaitConfirm: { loader: false, state: false },
|
||||
acceptConfirm: { loader: false, state: false },
|
||||
},
|
||||
data: {},
|
||||
});
|
||||
|
||||
const switchNextStep = ({ target: value }) => {
|
||||
setSuggestedNextStep(value);
|
||||
};
|
||||
|
||||
const apiCall = new usersService();
|
||||
|
||||
const handleParentSuggestion = (values) => {
|
||||
if (suggestedNextStep == "Send Task") {
|
||||
let firstName = state?.firstname;
|
||||
let family_uid = state?.family_uid;
|
||||
// continuePopupData({ ...details, firstName, family_uid });
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalCom
|
||||
action={onClose}
|
||||
@@ -43,7 +24,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
|
||||
{confirmCredit?.show?.acceptConfirm?.loader
|
||||
? "Confirming Credit..."
|
||||
: confirmCredit?.show?.awaitConfirm?.state
|
||||
? "Confirm Credit Add"
|
||||
: confirmCredit?.show?.acceptConfirm?.state
|
||||
? "Credit Add Completed"
|
||||
: "Add Credit"}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
@@ -72,22 +59,37 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
</button>
|
||||
</div>
|
||||
<div className="logout-modal-body w-full flex flex-col items-center">
|
||||
{confirmCredit.show ? (
|
||||
<ConfirmAddFund
|
||||
confirmCredit={confirmCredit}
|
||||
walletItem={walletItem}
|
||||
onClose={onClose}
|
||||
/>
|
||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||
<div className="h-[33rem] flex items-center justify-center">
|
||||
<LoadingSpinner size="12" color="sky-blue" />
|
||||
</div>
|
||||
) : (
|
||||
<AddFundPop
|
||||
_payment={details}
|
||||
walletItem={walletItem}
|
||||
input={input}
|
||||
setInput={setInput}
|
||||
onClose={onClose}
|
||||
confirmCredit={confirmCredit}
|
||||
setConfirmCredit={setConfirmCredit}
|
||||
/>
|
||||
<>
|
||||
{confirmCredit?.show?.awaitConfirm?.state ? (
|
||||
<ConfirmAddFund
|
||||
confirmCredit={confirmCredit}
|
||||
setConfirmCredit={setConfirmCredit}
|
||||
walletItem={walletItem}
|
||||
onClose={onClose}
|
||||
/>
|
||||
) : confirmCredit?.show?.acceptConfirm?.state ? (
|
||||
<CompleteConfirmCredit
|
||||
walletItem={walletItem}
|
||||
confirmCredit={confirmCredit}
|
||||
onClose={onClose}
|
||||
/>
|
||||
) : (
|
||||
<AddFundPop
|
||||
_payment={details}
|
||||
walletItem={walletItem}
|
||||
input={input}
|
||||
setInput={setInput}
|
||||
onClose={onClose}
|
||||
confirmCredit={confirmCredit}
|
||||
setConfirmCredit={setConfirmCredit}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,338 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
// import RecentActivityTable
|
||||
|
||||
import usersService from "../../../services/UsersService";
|
||||
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
amount: Yup.number()
|
||||
.typeError("you must specify a number")
|
||||
.min(1, "Amount must be greater than 0")
|
||||
.required("Amount is required"),
|
||||
recipientID: Yup.string()
|
||||
.min(1, "Minimum 1 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Recipient is required"),
|
||||
});
|
||||
|
||||
const initialValues = {
|
||||
amount: "",
|
||||
recipientID: "",
|
||||
comment: "",
|
||||
};
|
||||
|
||||
function TransferFund({ payment, wallet }) {
|
||||
const apiCall = new usersService(); // API CLASS CALL
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState(false);
|
||||
|
||||
let [recipients, setRecipients] = useState({
|
||||
// FOR COUPON HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false,
|
||||
});
|
||||
|
||||
let [sendMoneyFee, setSendMoneyFee] = useState({
|
||||
loading: false,
|
||||
fee: 0,
|
||||
total: 0,
|
||||
}); // HOLD THE VALUE FOR SEND MONEY FEE
|
||||
|
||||
//FUNCTION TO GET RECIPIENT LIST
|
||||
const getRecipients = () => {
|
||||
apiCall
|
||||
.getRecipient()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
// success but no data
|
||||
setRecipients((prev) => ({ ...prev, loading: false }));
|
||||
return;
|
||||
}
|
||||
setRecipients((prev) => ({
|
||||
...prev,
|
||||
loading: false,
|
||||
data: res.data.result_list,
|
||||
}));
|
||||
})
|
||||
.catch((error) => {
|
||||
setRecipients((prev) => ({ ...prev, loading: false, error: true }));
|
||||
});
|
||||
};
|
||||
|
||||
//FUNCTION TO GET SEND MONEY FEE
|
||||
const getSendMoneyFee = ({ target: { value } }) => {
|
||||
setSendMoneyFee({ loading: true, fee: 0, total: 0 });
|
||||
let amount = value;
|
||||
if (Number(amount) <= 0 || amount == "" || isNaN(amount)) {
|
||||
setSendMoneyFee({ loading: false, fee: 0, total: 0 });
|
||||
return;
|
||||
}
|
||||
apiCall
|
||||
.getSendMoneyFee(Number(amount))
|
||||
.then((res) => {
|
||||
setSendMoneyFee({
|
||||
loading: false,
|
||||
fee: res.data.processing_fee,
|
||||
total: res.data.total_amount,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
setSendMoneyFee({ loading: false, fee: 0, total: 0 });
|
||||
});
|
||||
};
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = (values, helpers) => {
|
||||
if(!values?.amount && !values.recipientID) return
|
||||
setRequestStatus(true);
|
||||
let recipientDetails = recipients.data?.filter(
|
||||
(item) => item.recipient_id == values.recipientID
|
||||
);
|
||||
let stateData = {
|
||||
...values,
|
||||
...sendMoneyFee,
|
||||
details: { ...recipientDetails[0] },
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
setRequestStatus(false);
|
||||
navigate("confirm-transfer", { state: stateData });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getRecipients();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className="transfer-fund-info">
|
||||
{wallet.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : wallet.data.length ? (
|
||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
{wallet.data.map((item) => {
|
||||
if (item.description == "Naira") {
|
||||
return `Withdraw from Naira Wallet : ${item.symbol}${(
|
||||
item.amount * 0.01
|
||||
).toFixed(2)}`;
|
||||
}
|
||||
})}
|
||||
</h2>
|
||||
) : wallet.error ? (
|
||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
Opps! An Error Occurred
|
||||
</h2>
|
||||
) : (
|
||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
No Wallet Information Found!
|
||||
</h2>
|
||||
)}
|
||||
<div className=" mb-6 gap-4 flex flex-col">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] max-w-[12rem]"
|
||||
label="Amount:"
|
||||
type="number"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
direction="rtl"
|
||||
value={props.values.amount}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={(e) => {
|
||||
getSendMoneyFee(e);
|
||||
}}
|
||||
// props.handleBlur
|
||||
// onMouseLeave={(e)=>{getSendMoneyFee(e)}}
|
||||
/>
|
||||
{props.errors.amount && props.touched.amount && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 sm:text-left text-right sm:translate-y-0 translate-y-1">
|
||||
{props.errors.amount}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||
label="Fee:"
|
||||
type="text"
|
||||
name="fee"
|
||||
direction="rtl"
|
||||
value={
|
||||
sendMoneyFee.loading ? "loading" : sendMoneyFee.fee
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||
label="Total:"
|
||||
type="text"
|
||||
name="total"
|
||||
direction="rtl"
|
||||
value={
|
||||
sendMoneyFee.loading ? "loading" : sendMoneyFee.total
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3">
|
||||
Recipient:
|
||||
</label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
>
|
||||
{item.recipient}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
<Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
||||
>
|
||||
Add New
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6 flex gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
||||
Comment:
|
||||
</label>
|
||||
<textarea
|
||||
style={{ resize: "none" }}
|
||||
className="text-base px-4 py-2 rounded-md min-h-[100px] sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
||||
name="comment"
|
||||
value={props.values.comment}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
cols="30"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="transfer-fund-btn flex justify-end items-center py-4">
|
||||
{requestStatus ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="wallet w-full md:p-8 p-4 h-full max-h-[650px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
||||
<h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
Recent Activity
|
||||
</h2>
|
||||
{/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
|
||||
{payment.loading ? (
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
) : (
|
||||
// <RecentActivityTable payment={payment} />
|
||||
null
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TransferFund;
|
||||
Reference in New Issue
Block a user