src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -11,13 +11,16 @@ function FamilyWallet({familyData}) {
 
   let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
 
+  let [familyWalletReload, setFamilyWalletReload] = useState(false) // STATE TO DETERMINE WHEN TO RELOAD FAMILY WALLET TAB/PAGE
+
   useEffect(()=>{
+    setFamilyWallet({loading:true, data: []})
     apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
       setFamilyWallet({loading:false, data: res?.data?.result_list || []})
     }).catch(error => {
       setFamilyWallet({loading:false, data: []})
     })
-  },[])
+  },[familyWalletReload])
 
   return (
     <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
@@ -29,7 +32,7 @@ function FamilyWallet({familyData}) {
         familyWallet?.data?.length > 0 ?
         <div className='w-full p-4 flex flex-col gap-2'>
         {familyWallet?.data?.map((wallet, index)=>(
-            <Wallet key={index} wallet={wallet} familyData={familyData} />
+            <Wallet key={index} wallet={wallet} familyData={familyData} setFamilyWalletReload={setFamilyWalletReload} />
           ))}
         </div>
         :

src/components/FamilyAcc/Tabs/wallet/FamilyAddFundPopout.jsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import ModalCom from '../../../Helpers/ModalCom'
 import InputCom from '../../../Helpers/Inputs/InputCom'
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
+import usersService from '../../../../services/UsersService';
 import LoadingSpinner from '../../../Spinners/LoadingSpinner';
+import { PriceFormatter } from '../../../Helpers/PriceFormatter';
 
 const validationSchema = Yup.object().shape({
   // amount: Yup.string()
@@ -24,12 +26,17 @@ const validationSchema = Yup.object().shape({
 
 function FamilyAddFundPopout({action, situation, wallet, familyData}) {
 
+  const apiUrl = new usersService()
+
+  const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
+
   const [requestStatus, setRequestStatus] = useState({loading:false, status:false, message:''})
 
+
   // initial values for formik
   let initialValues = {
     amount: '',
-    from : '',
+    from : startTransfer?.data?.origing_current_balance*0.01 || 'N/A',
     to: `${familyData.firstname} ${familyData.lastname}`,
     comment: ''
   };
@@ -38,11 +45,27 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
     setRequestStatus({loading:true, status:false, message:''})
     setTimeout(()=>{
       setRequestStatus({loading:false, status:false, message:''})
+      action() // TO CLOSE THE MODAL
     }, 3000)
     // let reqData = {...values}
     console.log(values)
   }
 
+  // LOAD FAMILY START TRANSFER
+  useEffect(()=>{
+    let reqData = {
+      family_uid: familyData.uid,
+      wallet_uid: wallet.wallet_uid,
+      action: 22013
+    }
+    apiUrl.familyTransferStart(reqData).then(response => {
+      setStartTransfer({loading:false, data:response?.data })
+      // console.log('reqData', response.data)
+    }).catch(err => {
+      setStartTransfer({loading:false, data: {}})
+    })
+  },[])
+
   return (
     <ModalCom action={action} situation={situation}>
       <div className="relative logout-modal-wrapper lg:w-[450px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
@@ -77,6 +100,9 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          {startTransfer.loading && <LoadingSpinner size='16' color='sky-blue' height={'h-64'} />}
+          
+          { !startTransfer.loading &&
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -112,7 +138,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                         parentClass="flex items-center gap-1 w-full"
                         labelClass="flex-[0.2] mb-0"
                         inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2"
+                        fieldClass="px-2 text-right"
                         value={props.values.from}
                         disable={true}
                       />
@@ -128,7 +154,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                         parentClass="flex items-center gap-1 w-full"
                         labelClass="flex-[0.2] mb-0"
                         inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2"
+                        fieldClass="px-2 text-right"
                         value={props.values.to}
                         disable={true}
                       />
@@ -208,6 +234,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
               </Form>
             )}
           </Formik>
+          }
         </div>
       </div>
     </ModalCom>

src/components/FamilyAcc/Tabs/wallet/Wallet.jsx

@@ -3,7 +3,7 @@ import { localImgLoad } from '../../../../lib'
 import { PriceFormatter } from '../../../Helpers/PriceFormatter'
 import FamilyAddFundPopout from './FamilyAddFundPopout'
 
-function Wallet({wallet, familyData}) {
+function Wallet({wallet, familyData, setFamilyWalletReload}) {
     const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
   return (
     <div className='w-full p-4 bg-[aliceblue] rounded-lg'
@@ -63,6 +63,7 @@ function Wallet({wallet, familyData}) {
         <FamilyAddFundPopout 
             action={() => {
                 setAddFundPopout({ show: false, data: {} });
+                setFamilyWalletReload(prev => !prev) // TO RELOAD FAMILY WALLET // DETERMINES WHEN TO RELOAD FAMILY WALLET TAB/PAGE
             }}
             situation={addFundPopout.show}
             wallet={wallet}

src/services/UsersService.js

@@ -1089,6 +1089,17 @@ class usersService {
       };
       return this.postAuxEnd("/familywallet", postData);
     }
+  
+    // FUNCTION TO START FAMILY TRANSFER
+    familyTransferStart(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...reqData,
+      };
+      return this.postAuxEnd("/familytransferstart", postData);
+    }
 
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)