From 078d26317f125948f0d40458164a91f202590d94 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 24 Oct 2023 15:26:24 +0100
Subject: [PATCH 1/2] family balance added

---
 src/components/FamilyAcc/FamilyManageTabs.jsx |  2 +-
 .../FamilyAcc/Tabs/FamilyWallet.jsx           | 72 ++++++++++++++++++-
 src/services/UsersService.js                  | 12 ++++
 3 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index 74edfa1..ddd8e35 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/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
diff --git a/src/components/FamilyAcc/Tabs/FamilyWallet.jsx b/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
index 7992735..1558d7e 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
+++ b/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='p-4 flex flex-col gap-2 md:flex-row'>
+        {familyWallet?.data?.map((wallet, index)=>(
+            <div key={index} className='p-4 bg-[aliceblue] rounded-lg'
+              style={{
+                background: `url(${background}) 0% 0% / cover no-repeat`,
+              }}
+            >
+              <div className="flex justify-between 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 sm:text-lg opacity-[70%] text-white tracking-wide mb-2 sm:mb-6">
+                      Balance:
+                    </p>
+                    <p 
+                      className="text-sm lg:text-base font-bold text-white 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,
+                        "text-base"
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        :
+        <p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
+        }
+    </div>
   )
 }
 
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index e1670fd..4fa3c3c 100644
--- a/src/services/UsersService.js
+++ b/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)

From e59c83d2164e10f1176475a30e567bc0bf8a24fa Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 24 Oct 2023 17:45:10 +0100
Subject: [PATCH 2/2] made balance container take whole width

---
 src/components/FamilyAcc/Tabs/FamilyWallet.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/FamilyAcc/Tabs/FamilyWallet.jsx b/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
index 1558d7e..92af941 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
@@ -28,14 +28,14 @@ function FamilyWallet({familyData}) {
         </div>
         :
         familyWallet?.data?.length > 0 ?
-        <div className='p-4 flex flex-col gap-2 md:flex-row'>
+        <div className='w-full p-4 flex flex-col gap-2'>
         {familyWallet?.data?.map((wallet, index)=>(
-            <div key={index} className='p-4 bg-[aliceblue] rounded-lg'
-              style={{
-                background: `url(${background}) 0% 0% / cover no-repeat`,
-              }}
+            <div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
+              // style={{
+              //   background: `url(${background}) 0% 0% / cover no-repeat`,
+              // }}
             >
-              <div className="flex justify-between items-center gap-3">
+              <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`)}
@@ -45,18 +45,18 @@ function FamilyWallet({familyData}) {
                 </div>
                 <div className="balance mt-2 flex justify-center">
                   <div className="flex gap-2">
-                    <p className="text-base sm:text-lg opacity-[70%] text-white tracking-wide mb-2 sm:mb-6">
+                    <p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
                       Balance:
                     </p>
                     <p 
-                      className="text-sm lg:text-base font-bold text-white tracking-wide leading-10"
+                      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,
-                        "text-base"
+                        ""
                       )}
                     </p>
                   </div>