From 585632c1e101eb75de52844c697f895d28da835a Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 9 Mar 2024 22:55:02 +0100
Subject: [PATCH] implemented family wallet with multiple wallet

---
 src/components/MyWallet/FamilyWalletBox.jsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/MyWallet/FamilyWalletBox.jsx b/src/components/MyWallet/FamilyWalletBox.jsx
index eeaebfb..7cfb960 100644
--- a/src/components/MyWallet/FamilyWalletBox.jsx
+++ b/src/components/MyWallet/FamilyWalletBox.jsx
@@ -14,14 +14,19 @@ import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
  */
 export default function FamilyWalletBox({ wallet, payment }) {
   const { loading, data } = wallet;
-
+  
   const { userDetails } = useSelector((state) => state.userDetails);
   const accountType = userDetails?.account_type === "FAMILY";
-
+  
   const [selectedWallet, setSelectedWallet] = useState(data[0])
 
+  const [activeWalletBtn, setActiveWalletBtn] = useState(data[0].code)
+  
   const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
-    const currentWalletSelected = data?.filter((item) => item.code === name);
+    const currentWalletSelected = data?.filter((item) => item.code == name);
+    setSelectedWallet(currentWalletSelected[0])
+    setActiveWalletBtn(name)
+    // console.log(name, currentWalletSelected)
   }
 
   const image = selectedWallet?.code
@@ -43,7 +48,14 @@ export default function FamilyWalletBox({ wallet, payment }) {
                   <div className="w-full mb-4 sm:mb-0">
                     <div className="wal-selection text-black dark:text-white flex items-center gap-2">
                       {data.length > 1 && data.map(item =>(
-                        <button className="py-0.5 px-1 mb-1 rounded-lg border border-orange-500" key={item.wallet_uid} name={item.code}>{item.code}</button>
+                        <button 
+                          className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
+                          key={item?.wallet_uid} 
+                          name={item?.code}
+                          onClick={handleChangeWallet}
+                        >
+                          {item?.description}
+                        </button>
                       ))}
                     </div>
                     <div className="p-5 rounded-2xl bg-white-opacity min-h-[240px]"
-- 
2.34.1