Merge branch 'balance-refresh' of WrenchBoard/Users-Wrench into master

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,6 +1,6 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
@@ -99,6 +99,9 @@ function ConfirmAddFund({
       : __confirmData.card;
 
   const apiURL = new usersService();
+
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
@@ -112,7 +115,13 @@ function ConfirmAddFund({
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
     currency: "NGN",
+    amount: Number(__confirmData.amount),
     payment_options: "card,mobilemoney,ussd",
+    customer: {
+      email: userDetails.email,
+      phone_number: userDetails.phone,
+      name: `${userDetails.lastname} ${userDetails.firstname}`,
+    },
     customizations: {
       title: "WrenchBoard",
       description: "Topup Payment",
@@ -132,7 +141,7 @@ function ConfirmAddFund({
 
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    const reqData = { amount: __confirmData?.account, currency: "NGN" };
+    const reqData = { amount: Number(__confirmData?.amount), currency: "NGN" };
 
     apiURL
       .startTopUp(reqData)
@@ -151,9 +160,12 @@ function ConfirmAddFund({
             status: true,
           });
           toast.success("Account Topup was successful");
-          setTimeout(() => {
+          onClose()
-            navigate("/my-wallet", { replace: true });
+          dispatch(tableReload({ type: "WALLETTABLE" }));
-          }, 1000);
+          navigate("/my-wallet", { replace: true });
+          // setTimeout(() => {
+          //   navigate("/my-wallet", { replace: true });
+          // }, 1000);
         }
       })
       .catch((err) => {
@@ -205,6 +217,7 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
+        dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
       setConfirmCredit((prev) => ({
@@ -256,7 +269,6 @@ function ConfirmAddFund({
       }
       
       setTimeout(() => {
-        dispatch(tableReload({ type: "WALLETTABLE" }));
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -265,6 +277,7 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
+        dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
       setConfirmCredit((prev) => ({
@@ -278,8 +291,6 @@ function ConfirmAddFund({
     }
   };
 
-  // console.log(confirmCredit?.data);
-
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">

src/components/MyWallet/Wallet.jsx

@@ -13,7 +13,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));
 
 const WalletRoutes = () => {
-  const apiCall = useMemo(() => new usersService(), []);
+  const apiCall = new usersService();
   const { walletTable } = useSelector((state) => state.tableReload);
   const [walletList, setWalletList] = useState({
     loading: true,
@@ -25,29 +25,23 @@ const WalletRoutes = () => {
     data: [],
   });
 
-  const getWalletList = useCallback(() => {
+  const getWalletList = () => {
-    return apiCall
+    apiCall
       .getUserWallets()
       .then((res) => {
         if (res.data.internal_return < 0) {
           setWalletList({ loading: false, data: [] });
         } else {
-          setWalletList({ loading: true, data: [] });
+          setWalletList({ loading: false, data: res.data?.result_list });
-
-          setTimeout(
-            () =>
-              setWalletList({ loading: false, data: res.data?.result_list }),
-            500
-          );
         }
       })
       .catch(() => {
         setWalletList({ loading: false, data: [] });
       });
-  }, [apiCall]);
+  }
 
-  const getPaymentHistory = useCallback(() => {
+  const getPaymentHistory = () => {
-    return apiCall
+    apiCall
       .getPaymentHx()
       .then((res) => {
         if (res.data.internal_return < 0) {
@@ -59,19 +53,23 @@ const WalletRoutes = () => {
       .catch(() => {
         setPaymentHistory({ loading: false, data: [] });
       });
-  }, [apiCall]);
+  }
 
   useEffect(() => {
-    const fetchData = async () => {
+    // const fetchData = async () => {
-      await Promise.all([getWalletList(), getPaymentHistory()]);
+    //   await Promise.all([getWalletList(), getPaymentHistory()]);
-    };
+    // };
 
-    if (walletList.loading) {
+    // if (walletList.loading) {
-      fetchData();
+    //   fetchData();
-    }
+    // }
-  }, [walletTable, walletList.loading]);
+    getWalletList()
+    getPaymentHistory()
+  }, [walletTable]);
 
-  console.log(walletTable);
+
+
+  console.log('TESTING',walletTable);
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>

src/components/Partials/Header.jsx

@@ -26,6 +26,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [moneyPopup, setPopup] = useToggle(false);
   const darkMode = useContext(DarkModeContext);
   const { userDetails } = useSelector((state) => state?.userDetails);
+  const { walletTable } = useSelector((state) => state.tableReload); // DETERMINES WHEN WALLET RELOADS
   const [myWalletList, setMyWalletList] = useState([]);
   const api = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
@@ -44,7 +45,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   };
   useEffect(() => {
     getMyWalletList();
-  }, []);
+  }, [walletTable]);
 
   const handlerBalance = () => {
     setbalanceValue.toggle();