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

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -167,7 +167,7 @@ export default function FamilyManageTabs({
       />
     ),
     Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-    wallet: <FamilyWallet />,
+    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
   };
 
   // Default tab component

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -1,8 +1,74 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+
+import usersService from '../../../services/UsersService'
+
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { localImgLoad } from '../../../lib'
+import background from '../../../assets/images/bg-sky-blue.jpg'
+
+function FamilyWallet({familyData}) {
+  const apiUrl = new usersService()
+
+  let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
+
+  useEffect(()=>{
+    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
+      setFamilyWallet({loading:false, data: res?.data?.result_list || []})
+    }).catch(error => {
+      setFamilyWallet({loading:false, data: []})
+    })
+  },[])
 
-function FamilyWallet() {
   return (
-    <div>FamilyWallet</div>
+    <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
+        {familyWallet.loading ?
+        <div className='w-full h-20 flex justify-center items-center'>
+          <LoadingSpinner size='8' color='sky-blue' />
+        </div>
+        :
+        familyWallet?.data?.length > 0 ?
+        <div className='w-full p-4 flex flex-col gap-2'>
+        {familyWallet?.data?.map((wallet, index)=>(
+            <div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
+              // style={{
+              //   background: `url(${background}) 0% 0% / cover no-repeat`,
+              // }}
+            >
+              <div className="w-full flex justify-start items-center gap-3">
+                <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                  <img
+                    src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
+                    className="w-full h-full"
+                    alt="currency-icon"
+                  />
+                </div>
+                <div className="balance mt-2 flex justify-center">
+                  <div className="flex gap-2">
+                    <p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
+                      Balance:
+                    </p>
+                    <p 
+                      className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
+                      // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
+                      >
+                      {PriceFormatter(
+                        Number(wallet.amount) * 0.01,
+                        wallet.code,
+                        wallet.country,
+                        ""
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        :
+        <p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
+        }
+    </div>
   )
 }
 

src/services/UsersService.js

@@ -1078,6 +1078,18 @@ class usersService {
       return this.postAuxEnd("/suggeststatus", postData);
     }
 
+    // FUNCTION TO GET FAMILY WALLET
+    getFamilyWallet(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 22012,
+        ...reqData,
+      };
+      return this.postAuxEnd("/familywallet", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)