Merge branch 'kid-virtual-card-display' of WrenchBoard/Users-Wrench into master

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

@@ -6,6 +6,7 @@ import VirtualAddCardFamilyPopout from './VirtualAddCardFamilyPopout'
 
 function Wallet({wallet, familyData, setFamilyWalletReload}) {
     const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
+    console.log('WALLET', wallet.brand)
 
     // virtual add card popout
     const [virtualPopup, setVirtualPopup] = useState({ show: false, data: {} }); 
@@ -42,6 +43,16 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
         />
       </div>
       <div className="w-full flex flex-col">
+        {wallet?.brand && wallet?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+          <div className="w-full flex flex-col gap-2">
+            {/* <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
+              Balance:
+            </p> */}
+            <p className="text-base md:text-lg font-bold text-purple leading-10">
+              {wallet.brand} <span> **** **** ***** </span> {wallet?.card_last4}
+            </p>
+          </div>
+          :
           <div className="w-full flex gap-2">
             <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
               Balance:
@@ -58,6 +69,7 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
               )}
             </p>
           </div>
+        }
         {/* BTN */}
         <div className='mt-1 flex justify-end items-center gap-2'>
             <button