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

src/components/AuthPages/Login/LoginLanding.jsx

@@ -73,7 +73,7 @@ export default function LoginLanding() {
                   </h1>
 
                   <div className='w-full flex flex-col gap-4'>
-                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#e0f7eb] text-emerald-800 cursor-pointer'>
+                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#d5ebf8] text-[#009ef7] cursor-pointer'>
                       <div className='flex items-center gap-4'>
                         <img className='w-12 h-auto' src={ParentIcon} alt='login key' />
                         <p className='text-lg font-semibold'>Adult or Parent</p>

src/components/MyWallet/FamilyWalletBox.jsx

@@ -87,6 +87,11 @@ export default function FamilyWalletBox({ wallet, payment }) {
                       <p className="text-base sm:text-lg text-white tracking-wide my-3 text-center">
                         Current Balance
                       </p>
+                      {selectedWallet?.brand && selectedWallet?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+                      <p className="text-2xl font-bold text-white dark:text-white leading-10">
+                        {selectedWallet.brand} <span> **** **** ***** </span> {selectedWallet?.card_last4}
+                      </p>
+                      :
                       <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
                         {PriceFormatter(
                           selectedWallet?.amount / 100,
@@ -95,6 +100,7 @@ export default function FamilyWalletBox({ wallet, payment }) {
                           "text-[2rem]"
                         )}
                       </p>
+                      }
                     </div>
                   </div>
                 </>