consumed family wallet API

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,7 +2,7 @@ import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 import WalletItemCardFamily from "./WalletItemCardFamily";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import SearchCom from "../Helpers/SearchCom";
 import { localImgLoad } from "../../lib";
@@ -13,17 +13,17 @@ import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
  */
 export default function FamilyWalletBox({ wallet, payment }) {
-  const { loading, data } = wallet;
+  // const { loading, data } = wallet;
   
-  const { userDetails } = useSelector((state) => state.userDetails);
+  // const { userDetails } = useSelector((state) => state.userDetails);
-  const accountType = userDetails?.account_type === "FAMILY";
+  // const accountType = userDetails?.account_type === "FAMILY";
   
-  const [selectedWallet, setSelectedWallet] = useState(data[0])
+  const [selectedWallet, setSelectedWallet] = useState('')
 
-  const [activeWalletBtn, setActiveWalletBtn] = useState(data[0].code)
+  const [activeWalletBtn, setActiveWalletBtn] = useState('')
   
   const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
-    const currentWalletSelected = data?.filter((item) => item.code == name);
+    const currentWalletSelected = wallet?.data?.filter((item) => item.code == name);
     setSelectedWallet(currentWalletSelected[0])
     setActiveWalletBtn(name)
     // console.log(name, currentWalletSelected)
@@ -33,63 +33,70 @@ export default function FamilyWalletBox({ wallet, payment }) {
   ? `${selectedWallet?.code.toLowerCase()}.svg`
   : "default.png";
 
+  useEffect(()=>{
+    setSelectedWallet(wallet.data[0])
+    setActiveWalletBtn(wallet?.data[0]?.code)
+  },[wallet])
 
   return (
     <div className="w-full">
-      <div className="my-wallet-wrapper w-full mb-10">
+      <div className="my-wallet-wrapper w-full">
-        <div className="main-wrapper w-full">
+        <div className="main-wrapper w-full mb-10">
-            {loading ? 
+          <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
-              <div className="w-full h-full flex items-center justify-center bg-white">
+            <div className="w-full mb-4 sm:mb-0 rounded-2xl bg-white dark:bg-dark-white overflow-hidden">
-                <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
+              {wallet?.loading ? 
-              </div>
+                <div className="w-full h-full flex items-center justify-center bg-white">
-
+                  <LoadingSpinner size="16" color="sky-blue" height='min-h-[240px]' />
-            : data.length > 0 ?
-                <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
-                  <div className="w-full mb-4 sm:mb-0">
-                    <div className="wal-selection text-black dark:text-white flex items-center gap-2">
-                      {data.length > 1 && data.map(item =>(
-                        <button 
-                          className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
-                          key={item?.wallet_uid} 
-                          name={item?.code}
-                          onClick={handleChangeWallet}
-                        >
-                          {item?.description}
-                        </button>
-                      ))}
-                    </div>
-                    <div className="p-5 rounded-2xl bg-white-opacity min-h-[240px]"
-                        style={{
-                          background: `url(${background}) 0% 0% / cover no-repeat`,
-                        }}
-                      >
-                      {/* image */}
-                      <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[120px] max-h-min md:max-h-[120px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-                        <img
-                          src={localImgLoad(`images/currency/${image}`)}
-                          className="w-full h-full"
-                          alt="currency-icon"
-                        />
-                      </div>
-                      <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
-                      <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
-                        {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
-                  <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
-                  </div>
                 </div>
-            :
+                : wallet?.data.length > 0 ?
-            <div className="w-full h-32 flex justify-center items-center rounded-2xl bg-white">
+                <>
-              <p>No Wallet Record Found</p>
+                {wallet?.data?.length > 1 && 
+                  <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
+                    {wallet?.data?.map(item =>(
+                      <button 
+                        className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
+                        key={item?.wallet_uid} 
+                        name={item?.code}
+                        onClick={handleChangeWallet}
+                      >
+                        {item?.description}
+                      </button>
+                    ))}
+                  </div>
+                  }
+                  <div className="p-5 bg-white-opacity min-h-[240px]"
+                      style={{
+                        background: `url(${background}) 0% 0% / cover no-repeat`,
+                      }}
+                    >
+                    {/* image */}
+                    <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                      <img
+                        src={localImgLoad(`images/currency/${image}`)}
+                        className="w-full h-full"
+                        alt="currency-icon"
+                      />
+                    </div>
+                    <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
+                    <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
+                      {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
+                    </p>
+                  </div>
+                </>
+                :
+                <div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">
+                  <p>No Wallet Record Found</p>
+                </div>
+              }
             </div>
-            }
+              <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
+                <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
+              </div>
+          </div>
+        </div>
+        <div className="w-full">
+          <FamilyWalletRedeemOptions />
         </div>
-      </div>
-      <div className="w-full">
-        <FamilyWalletRedeemOptions />
       </div>
     </div>
   );

src/components/MyWallet/FamilyWalletCon.jsx

@@ -6,9 +6,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
 
-const FamilyWallet = () => {
+const FamilyWalletCon = () => {
   const apiCall = new usersService();
-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+  // const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
 
   const [paymentHistory, setPaymentHistory] = useState({
@@ -16,6 +16,20 @@ const FamilyWallet = () => {
     data: [],
   });
 
+  const [familyWalletBal, setFamilyWalletBal] = useState({
+    loading: true,
+    data: []
+  });
+
+  const getFamilyWalletBal = () => {
+    setFamilyWalletBal({loading:true, data: []})
+    apiCall.getFamilyWallet({family_uid: localStorage.getItem("uid")}).then(res => {
+      setFamilyWalletBal({loading:false, data: res?.data?.result_list})
+    }).catch(error => {
+      setFamilyWalletBal({loading:false, data: []})
+    })
+  };
+
   const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
@@ -24,6 +38,7 @@ const FamilyWallet = () => {
           setPaymentHistory({ loading: false, data: [] });
         } else {
           setPaymentHistory({ loading: false, data: res.data?.result_list });
+          // console.log('Hist', res.data?.result_list)
         }
       })
       .catch(() => {
@@ -33,6 +48,7 @@ const FamilyWallet = () => {
 
   useEffect(() => {
     getPaymentHistory();
+    getFamilyWalletBal()
   }, [walletTable]);
 
   return (
@@ -48,9 +64,13 @@ const FamilyWallet = () => {
             }
         />
       </div>
-      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
+      <Suspense fallback={
+        <div className="bg-white rounded-2xl">
+          <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
+        </div>
+      }>
         <FamilyWalletBox
-          wallet={walletDetails}
+          wallet={familyWalletBal}
           payment={paymentHistory}
         />
       </Suspense>
@@ -58,4 +78,4 @@ const FamilyWallet = () => {
   );
 };
 
-export default FamilyWallet;
+export default FamilyWalletCon;

src/components/MyWallet/FamilyWalletRedeemOptions.jsx

@@ -45,7 +45,7 @@ export default function FamilyWalletRedeemOptions() {
             <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
                 <LoadingSpinner size='10' color='sky-blue' height='h-[30rem]' />
             </div>
-            : Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
+            : familyWalletRedeemOptList?.data && Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
                 Object.keys(filteredRedeemData?.data)?.length ?
                     <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
                         { Object.keys(filteredRedeemData?.data)?.map((item)=>{

src/middleware/AuthRoute.jsx

@@ -193,6 +193,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [jobListTable, isLogin.status]);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     const getMyWalletList = async () => {
       dispatch(updateWalletDetails({ loading: true, data: [] }));
       try {
@@ -207,7 +210,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMyWalletList();
-  }, [walletTable]);
+  }, [walletTable, isLogin.status]);
 
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
@@ -245,6 +248,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     apiCall
       .getRecentActivitiedData()
       .then((res) => {
@@ -257,7 +263,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       .catch((error) => {
         console.log("ERROR ", error);
       });
-  }, []);
+  }, [isLogin.status]);
 
 
   //FUNCTION TO GET FAMILY BANNERS

src/views/FamilyWalletPage.jsx

@@ -1,5 +1,5 @@
-import FamilyWallet from "../components/MyWallet/FamilyWallet";
+import FamilyWalletCon from "../components/MyWallet/FamilyWalletCon";
 
 export default function FamilyWalletPage() {
-  return <FamilyWallet />;
+  return <FamilyWalletCon />;
 }