- {wallet.loading ? (
-
- ) : wallet.data.length ? (
-
- {wallet.data.map((item) => {
- if (item.description == "Naira") {
- return `Withdraw from Naira Wallet : ${item.symbol}${(
- item.amount * 0.01
- ).toFixed(2)}`;
- }
- })}
-
- ) : wallet.error ? (
-
- Opps! An Error Occured
-
- ) : (
-
- No Wallet Information Found!
-
- )}
+
+ {`Withdraw from ${wallet.description} Wallet : ${
+ wallet.symbol
+ }${(wallet.amount * 0.01).toFixed(2)}`}
+
@@ -174,13 +154,20 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
{requestStatus.message}
)}
-
+
+
{requestStatus.loading ? (
) : (
@@ -188,22 +175,8 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
- )}
-
-
-
-
- Recent Activity
-
- {/*
Activity Report
*/}
- {payment.loading ? (
-
- ) : (
-
- )}
-
-
+
);
}
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx
new file mode 100644
index 0000000..e4a5bd2
--- /dev/null
+++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx
@@ -0,0 +1,322 @@
+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 ModalCom from "../../Helpers/ModalCom";
+
+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 NairaWithdraw({ wallet, action, situation, setShowConfirmNairaWithdraw }) {
+ const apiCall = new usersService(); // API CLASS CALL
+console.log('TESTING', wallet)
+ 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-withdraw-naira", { state: stateData });
+ action()
+ setShowConfirmNairaWithdraw({show: true, state: stateData})
+ }, 1000);
+ };
+
+ useEffect(() => {
+ getRecipients();
+ }, []);
+
+ return (
+
+
+
+
+
+ {(props) => {
+ return (
+
+ );
+ }}
+
+
+
+
+ );
+}
+
+export default NairaWithdraw;
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx
index d6eb262..1c4c0cd 100644
--- a/src/components/MyWallet/Wallet.jsx
+++ b/src/components/MyWallet/Wallet.jsx
@@ -5,8 +5,9 @@ import React, {
useEffect,
useMemo,
useReducer,
+ useState,
} from "react";
-import { Routes, Route, Outlet, Navigate } from "react-router-dom";
+import { Navigate, Outlet, Route, Routes } from "react-router-dom";
import usersService from "../../services/UsersService";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -15,18 +16,18 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
// const TransferFund = lazy(() => import("./TransferFund"));
const WalletBox = lazy(() => import("./WalletBox"));
-const NairaWithdraw = lazy(() => import("./NairaWithdraw"));
-const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
+// const NairaWithdraw = lazy(() => import("./Popup/NairaWithdraw"));
+// const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
// const AddRecipient = lazy(() => import("./AddRecipient"));
// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
-function Wallet() {
- return (
-
-
-
- );
-}
+// function Wallet() {
+// return (
+//
+//
+//
+// );
+// }
const initialState = {
loading: true,
@@ -55,99 +56,52 @@ const reducer = (state, action) => {
};
const WalletRoutes = () => {
- const apiCall = useMemo(() => new usersService(), []);
+ const apiCall = new usersService();
- const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
- const [paymentHistory, dispatchPaymentHistory] = useReducer(
- reducer,
- initialState
- );
+ const [walletList, setWalletList] = useState({loading: true, data: []});
+ const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []});
- const getWalletList = useCallback(() => {
+ const getWalletList = () => {
apiCall
- .getUserWallets(null)
+ .getUserWallets()
.then((res) => {
if (res.data.internal_return < 0) {
- dispatchWalletList({ type: "FETCH_SUCCESS", payload: [] });
+ setWalletList({loading: false, data: []})
} else {
- dispatchWalletList({
- type: "FETCH_SUCCESS",
- payload: res.data.result_list,
- });
+ setWalletList({loading: false, data: res.data?.result_list})
}
})
.catch(() => {
- dispatchWalletList({ type: "FETCH_ERROR" });
+ setWalletList({loading: false, data: []})
});
- }, [apiCall]);
+ }
- const getPaymentHistory = useCallback(() => {
+ const getPaymentHistory = () => {
apiCall
.getPaymentHx()
.then((res) => {
if (res.data.internal_return < 0) {
- dispatchPaymentHistory({ type: "FETCH_SUCCESS", payload: [] });
+ setPaymentHistory({loading: false, data: []})
} else {
- dispatchPaymentHistory({
- type: "FETCH_SUCCESS",
- payload: res.data.result_list,
- });
+ setPaymentHistory({loading: false, data: res.data?.result_list})
}
})
.catch(() => {
- dispatchPaymentHistory({ type: "FETCH_ERROR" });
+ setPaymentHistory({loading: false, data: []})
});
- }, [apiCall]);
+ }
useEffect(() => {
- let isMounted = true;
-
- if (isMounted) {
- getWalletList();
- getPaymentHistory();
- }
-
- return () => {
- isMounted = false;
- };
- }, [getWalletList, getPaymentHistory]);
+ getWalletList();
+ getPaymentHistory();
+ }, []);
return (
-
- }>
-
-
- }
- >
- }>
-
-
- }
- />
- }>
-
-
- }
- />
- }>
-
-
- }
- />
- } />
-
-
+
+ }>
+
+
+
);
};
diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx
index c558499..310367e 100644
--- a/src/components/MyWallet/WalletAction.jsx
+++ b/src/components/MyWallet/WalletAction.jsx
@@ -1,30 +1,40 @@
-import React from 'react'
-import { Link } from 'react-router-dom';
+import React, { useState } from "react";
+import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
+import NairaWithdraw from "./Popup/NairaWithdraw";
+
+function WalletAction({ walletItem, payment, openPopUp }) {
+ const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
+
+ const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
+ show: false,
+ state: {},
+ }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
-function WalletAction({walletItem, payment, openPopUp}) {
return (
-
-
- Spend
-
-
-
+
+
+
+
-
+
+
+ {showNairaWithdraw && (
+
{
+ setShowNairaWithdraw((prev) => !prev);
+ }}
+ situation={showNairaWithdraw}
+ setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
+ />
+ )}
+
+ {showConfirmNairaWithdraw.show && (
+ {
+ setShowConfirmNairaWithdraw((prev) => ({
+ ...prev,
+ show: !prev.show,
+ }));
+ }}
+ situation={showConfirmNairaWithdraw.show}
+ />
+ )}
- )
+ );
}
-export default WalletAction
\ No newline at end of file
+export default WalletAction;
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index 6651d67..dedd910 100644
--- a/src/components/MyWallet/WalletBox.jsx
+++ b/src/components/MyWallet/WalletBox.jsx
@@ -1,7 +1,7 @@
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";
-export default function WalletBox({ wallet, coupon, payment }) {
+export default function WalletBox({ wallet, payment }) {
return (
<>