diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/Popup/AddFund.jsx
similarity index 100%
rename from src/components/MyWallet/AddFund.jsx
rename to src/components/MyWallet/Popup/AddFund.jsx
diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx
similarity index 95%
rename from src/components/MyWallet/AddFundDollars.jsx
rename to src/components/MyWallet/Popup/AddFundDollars.jsx
index 91f8e05..f9bbfa1 100644
--- a/src/components/MyWallet/AddFundDollars.jsx
+++ b/src/components/MyWallet/Popup/AddFundDollars.jsx
@@ -1,13 +1,13 @@
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 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";
+import Icons from "../../Helpers/Icons";
const validationSchema = Yup.object().shape({
name: Yup.string()
@@ -65,7 +65,8 @@ function AddFundDollars(props) {
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) => ({
@@ -84,6 +85,7 @@ function AddFundDollars(props) {
const handleSubmit = async (values, helpers) => {
props.setInputError("");
+
if (!props.input || props.input === "0") {
props.setInputError("Please Enter Amount");
return;
@@ -98,7 +100,12 @@ function AddFundDollars(props) {
if (!prevCardDetails) {
return;
}
- setLoader(true);
+
+ props.setConfirmCredit((prev) => ({
+ ...prev,
+ show: { awaitConfirm: { loader: true } },
+ }));
+
let stateData = {
amount: Number(props.input) * 100,
currency: props.walletItem?.code,
@@ -107,7 +114,10 @@ function AddFundDollars(props) {
try {
const res = await apiCall.getStartCredit(stateData);
if (res.data.internal_return < 0) {
- setLoader(false);
+ props.setConfirmCredit((prev) => ({
+ ...prev,
+ show: { awaitConfirm: { loader: false } },
+ }));
props.setInputError("An Error Occurred");
setTimeout(() => props.setInputError(""), 5000);
return;
@@ -120,20 +130,21 @@ function AddFundDollars(props) {
stateData = { ...stateData, ..._response };
setTimeout(() => {
- setLoader(false);
props.setConfirmCredit({
- show: true,
+ 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);
}
-
- return setTimeout(() => {
- props.setConfirmCredit({ show: true, data: stateData });
- setLoader(false);
- }, 1500);
}
if (tab === "new") {
@@ -142,6 +153,8 @@ function AddFundDollars(props) {
currency: props.currency,
...values,
};
+
+ // Rest of the code for tab "new"
}
};
@@ -501,7 +514,7 @@ function AddFundDollars(props) {
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"
>
- {loader ? (
+ {props.confirmCredit?.show?.awaitConfirm?.loader ? (
) : (
Continue
diff --git a/src/components/MyWallet/AddFundPop.jsx b/src/components/MyWallet/Popup/AddFundPop.jsx
similarity index 78%
rename from src/components/MyWallet/AddFundPop.jsx
rename to src/components/MyWallet/Popup/AddFundPop.jsx
index cf040ab..2e31a3f 100644
--- a/src/components/MyWallet/AddFundPop.jsx
+++ b/src/components/MyWallet/Popup/AddFundPop.jsx
@@ -1,9 +1,9 @@
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 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({
@@ -11,6 +11,7 @@ function AddFundPop({
input,
setInput,
onClose,
+ confirmCredit,
setConfirmCredit,
walletItem,
}) {
@@ -20,7 +21,7 @@ function AddFundPop({
const { payment, currency } = _payment;
const [inputError, setInputError] = useState("");
- const [loader, setLoader] = useState(false);
+ let __awaitComponent = confirmCredit.show.awaitConfirm;
const handleChange = ({ target: { name, value } }) => {
setInput(value);
@@ -28,17 +29,26 @@ function AddFundPop({
const handleSubmit = async () => {
setInputError("");
- setLoader(true);
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: { awaitConfirm: { loader: true } },
+ }));
if (!input || input === "0") {
- setLoader(false);
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: { awaitConfirm: { loader: false } },
+ }));
setInputError("Please Enter Amount");
setTimeout(() => setInputError(""), 5000);
return;
}
if (isNaN(input)) {
- setLoader(false);
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: { awaitConfirm: { loader: false } },
+ }));
setInputError("Amount must be a Number");
setTimeout(() => setInputError(""), 5000);
return;
@@ -52,7 +62,10 @@ function AddFundPop({
try {
const res = await apiCall.getStartCredit(stateData);
if (res.data.internal_return < 0) {
- setLoader(false);
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: { awaitConfirm: { loader: false } },
+ }));
setInputError("An Error Occurred");
setTimeout(() => setInputError(""), 5000);
return;
@@ -64,13 +77,20 @@ function AddFundPop({
stateData = { ...stateData, ..._response };
setTimeout(() => {
- setLoader(false);
- setConfirmCredit({
- show: true,
+ 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);
}
};
@@ -108,6 +128,7 @@ function AddFundPop({
setInput={setInput}
currency={currency}
onClose={onClose}
+ confirmCredit={confirmCredit}
setConfirmCredit={setConfirmCredit}
/>
@@ -128,7 +149,7 @@ function AddFundPop({
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"
>
- {loader ? (
+ {__awaitComponent.loader ? (
) : (
<>
diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
new file mode 100644
index 0000000..675a1df
--- /dev/null
+++ b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+
+function CompleteConfirmCredit({ onClose, confirmCredit }) {
+ console.log(confirmCredit);
+ const { data } = confirmCredit;
+ return (
+
+
+
+
+
+
+
+ {/* Success Icon for now */}
+
+ {data?.result == "Charge success" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {data?.result == "Charge success"
+ ? "Credit was Successful!"
+ : "Credit was Unsuccessful"}
+
+
+
+
+
+ Amount({data?.currency || ""})
+
+
+ {`${data?.symbol || ""} ${
+ Number(data?.amount * 0.01).toLocaleString() || ""
+ }`}
+
+
+
+
+
+ Wallet Balance
+
+
+ {data?.curr_balance}
+
+
+
+
+
+ Confirmation Number
+
+
+ {data?.confirmation}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default CompleteConfirmCredit;
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
similarity index 80%
rename from src/components/MyWallet/ConfirmAddFund.jsx
rename to src/components/MyWallet/Popup/ConfirmAddFund.jsx
index 860d8c0..f74ce3a 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
@@ -1,13 +1,17 @@
+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";
-import usersService from "../../services/UsersService";
-
-import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
-
-function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+function ConfirmAddFund({
+ confirmCredit,
+ onClose,
+ walletItem,
+ setConfirmCredit,
+}) {
const __confirmData = confirmCredit?.data;
const __confirmCountry = walletItem?.country;
const __confirmCardDetails = __confirmData.card
@@ -15,21 +19,26 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
: "";
let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
- let [confirmLoading, setConfirmLoading] = useState(false);
-
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: confirmCredit?.data?.account, currency: "NGN" };
+ let reqData = { amount: __confirmData?.account, currency: "NGN" };
apiURL
.startTopUp(reqData)
.then((res) => {
@@ -66,7 +75,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
const config = {
public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
tx_ref: Date.now(),
- amount: confirmCredit?.data?.amount,
+ amount: __confirmData?.amount,
currency: "NGN",
payment_options: "card,mobilemoney,ussd",
customer: {
@@ -91,24 +100,54 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
onClose: () => {},
};
+ // Handling Previous Card
const handlePrevCard = async () => {
- setConfirmLoading(true);
- let reqData = {
- amount: __confirmData.amount * 100,
- card_uid: __confirmCardDetails.card_uid,
- credit_reference: __confirmData.credit_reference,
- currency: __confirmData.currency,
+ 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);
- setConfirmLoading(false);
- console.log(res.data);
+ 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) {
- setConfirmLoading(false);
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: {
+ acceptConfirm: { loader: false },
+ },
+ }));
console.log(error);
}
- console.log("Test me");
};
const ThePaymentText = ({ value }) => (
@@ -124,15 +163,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
);
- console.log(confirmCredit);
-
return (
- {confirmCredit?.show ? (
+ {confirmCredit?.show?.awaitConfirm?.state ? (
- {/*
*/}
+
console.log("Test me")
}
>
- Proceed
+ {confirmCredit?.show?.acceptConfirm?.loader ? (
+
+ ) : (
+ "Proceed"
+ )}
)}
{__confirmCountry == "NG" && (
@@ -214,20 +255,6 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
-
- {/*
-
-
- Recent Activity
-
-
Activity Report
- {payment.loading ? (
-
- ) : (
-
- )}
-
-
*/}
);
}
diff --git a/src/components/MyWallet/ConfirmTransfer.jsx b/src/components/MyWallet/Popup/ConfirmTransfer.jsx
similarity index 98%
rename from src/components/MyWallet/ConfirmTransfer.jsx
rename to src/components/MyWallet/Popup/ConfirmTransfer.jsx
index 2aa8d4d..95a4f4c 100644
--- a/src/components/MyWallet/ConfirmTransfer.jsx
+++ b/src/components/MyWallet/Popup/ConfirmTransfer.jsx
@@ -1,8 +1,8 @@
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 InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
import usersService from "../../services/UsersService";
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index c02d60c..971e39f 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/src/components/MyWallet/Popup/CreditPopup.jsx
@@ -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 (
{
- {!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"}
- {confirmCredit.show ? (
-
+ {confirmCredit?.show?.acceptConfirm?.loader ? (
+
+
+
) : (
-
+ <>
+ {confirmCredit?.show?.awaitConfirm?.state ? (
+
+ ) : confirmCredit?.show?.acceptConfirm?.state ? (
+
+ ) : (
+
+ )}
+ >
)}
diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/Popup/TransferFund.jsx
similarity index 97%
rename from src/components/MyWallet/TransferFund.jsx
rename to src/components/MyWallet/Popup/TransferFund.jsx
index aa57df9..f302b71 100644
--- a/src/components/MyWallet/TransferFund.jsx
+++ b/src/components/MyWallet/Popup/TransferFund.jsx
@@ -1,10 +1,10 @@
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 from "./WalletComponent/RecentActivityTable";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+// import RecentActivityTable
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
import { Form, Formik } from "formik";
import * as Yup from "yup";
@@ -326,7 +326,8 @@ function TransferFund({ payment, wallet }) {
{payment.loading ? (
) : (
-
+ //
+ null
)}
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx
index a0dd621..0cb9333 100644
--- a/src/components/MyWallet/Wallet.jsx
+++ b/src/components/MyWallet/Wallet.jsx
@@ -11,12 +11,12 @@ import usersService from "../../services/UsersService";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
-const AddFund = lazy(() => import("./AddFund"));
-const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
-const TransferFund = lazy(() => import("./TransferFund"));
+// const AddFund = lazy(() => import("./AddFund"));
+// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
+// const TransferFund = lazy(() => import("./TransferFund"));
const WalletBox = lazy(() => import("./WalletBox"));
-const AddRecipient = lazy(() => import("./AddRecipient"));
-const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
+// const AddRecipient = lazy(() => import("./AddRecipient"));
+// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
function Wallet() {
return (
@@ -119,31 +119,6 @@ const WalletRoutes = () => {
}
>
- {/*
}>
-
-
- }
- />
-
}>
-
-
- }
- /> */}
-
}>
-
-
- }
- />
- {/*
} />*/}
{
}
/>
- }>
-
-
- }
- />
- }>
-
-
- }
- />
} />
diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx
index 1c22116..3d00026 100644
--- a/src/components/MyWallet/WalletItemCard.jsx
+++ b/src/components/MyWallet/WalletItemCard.jsx
@@ -16,7 +16,6 @@ export default function WalletItemCard({ walletItem, payment }) {
// Credit popup
const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
-
const openPopUp = (value) => {
setCreditPopup({
show: true,
@@ -41,47 +40,52 @@ export default function WalletItemCard({ walletItem, payment }) {
}}
>
{/*
*/}
-
-
-
})
-
-
-
-
- Current Balance
-
-
- {PriceFormatter(
- walletItem.amount * 0.01,
- walletItem.code,
- undefined,
- "text-[2rem]"
- )}
-
-
+
+
+
})
+
+
+
+
+ Current Balance
+
+
+ {PriceFormatter(
+ walletItem.amount * 0.01,
+ walletItem.code,
+ undefined,
+ "text-[2rem]"
+ )}
+
+
-
- HOLDINGS :{" "}
-
- {PriceFormatter(
- walletItem.escrow * 0.01,
- walletItem.code,
- undefined,
- "text-[2rem]"
- )}
-
-
- {/* for white underline */}
-
+
+ HOLDINGS :{" "}
+
+ {PriceFormatter(
+ walletItem.escrow * 0.01,
+ walletItem.code,
+ undefined,
+ "text-[2rem]"
+ )}
+
+
+ {/* for white underline */}
+
- {!accountType ? (
-
- )
- :
- null
- }
+ {!accountType ? (
+
+ ) : null}
{/*
*/}
{creditPopup.show && (