Convert ConfirmAddFund to Popup
This commit was merged in pull request #292.
This commit is contained in:
@@ -1,16 +1,14 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { 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";
|
||||
|
||||
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
|
||||
|
||||
function ConfirmAddFund({ payment }) {
|
||||
function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
|
||||
|
||||
let [pageLoading, setPageLoading] = useState(true);
|
||||
@@ -24,12 +22,10 @@ function ConfirmAddFund({ payment }) {
|
||||
const apiURL = new usersService();
|
||||
const navigate = useNavigate();
|
||||
|
||||
let { state } = useLocation();
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const onSuccessPayment = () => {
|
||||
setRequestStatus({ message: "", loading: true, status: false });
|
||||
let reqData = { amount: state?.account, currency: "NGN" };
|
||||
let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
|
||||
apiURL
|
||||
.startTopUp(reqData)
|
||||
.then((res) => {
|
||||
@@ -66,7 +62,7 @@ function ConfirmAddFund({ payment }) {
|
||||
const config = {
|
||||
public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
|
||||
tx_ref: Date.now(),
|
||||
amount: state?.amount,
|
||||
amount: confirmCredit?.data?.amount,
|
||||
currency: "NGN",
|
||||
payment_options: "card,mobilemoney,ussd",
|
||||
customer: {
|
||||
@@ -91,73 +87,115 @@ function ConfirmAddFund({ payment }) {
|
||||
onClose: () => {},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// what happens if not state redirect user
|
||||
if (!state) {
|
||||
navigate("/my-wallet/add-fund", { replace: true });
|
||||
} else {
|
||||
setPageLoading(false);
|
||||
}
|
||||
}, []);
|
||||
// useEffect(() => {
|
||||
// // what happens if not data redirect user
|
||||
// if (!data) {
|
||||
// navigate("/my-wallet/add-fund", { replace: true });
|
||||
// } else {
|
||||
// setPageLoading(false);
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
console.log("data on confirm", confirmCredit);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full">
|
||||
{pageLoading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<div className="w-full mb-10">
|
||||
<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">
|
||||
<div className="content-wrapper w-full h-[36rem]">
|
||||
<div className="w-full mb-10">
|
||||
<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">
|
||||
Confirm Add Fund To Account
|
||||
</h2>
|
||||
<hr />
|
||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3">
|
||||
<hr /> */}
|
||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px] flex items-center">
|
||||
{confirmCredit?.show ? (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<label
|
||||
htmlFor="amount"
|
||||
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
|
||||
>
|
||||
{confirmCredit?.data?.currency == "naira"
|
||||
? "Amount (Naira):"
|
||||
: "Amount (Dollars):"}
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
|
||||
{`${walletItem?.symbol} ${
|
||||
Number(confirmCredit?.data?.amount).toLocaleString() ||
|
||||
""
|
||||
}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
|
||||
>
|
||||
{confirmCredit?.data?.currency && "Payment Method"}
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
|
||||
Coming Soon...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
|
||||
label={
|
||||
confirmCredit?.data?.currency == "naira"
|
||||
? "Amount (Naira):"
|
||||
: "Amount (Dollars):"
|
||||
}
|
||||
type="text"
|
||||
name="amount"
|
||||
value={state.amount || ""}
|
||||
value={confirmCredit?.data?.amount || ""}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
|
||||
{
|
||||
state.currency == 'naira' ?
|
||||
<FlutterWaveButton
|
||||
{...fwConfig}
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
/>
|
||||
:
|
||||
<button
|
||||
</div>
|
||||
{/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
|
||||
{confirmCredit?.data?.currency && "Payment Method"}
|
||||
</h1> */}
|
||||
{/* <hr /> */}
|
||||
<div className="min-h-[350px]"></div>
|
||||
<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 border-gradient text-base rounded-full"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{confirmCredit?.data?.currency == "naira" ? (
|
||||
<FlutterWaveButton
|
||||
{...fwConfig}
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={()=>console.log('WORKING')}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={() => console.log("WORKING")}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full mb-10">
|
||||
<div className="wallet w-full md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
{/* <div className="w-full mb-10">
|
||||
<div className="wallet w-full md:p-8 p-4 h-full 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> */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user