WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

changed text price to reward

Browse Source
This commit was merged in pull request #786.
This commit is contained in:
victorAnumudu
2024-09-24 15:36:38 +01:00
parent 74b395d99e
commit c51693deb5
26 changed files with 375 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/FamilyWalletBox.jsx
+66 -53
View File
@@ -1,12 +1,7 @@
import { useSelector } from "react-redux";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";
import WalletItemCardFamily from "./WalletItemCardFamily";
import { useEffect, useState } from "react";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import SearchCom from "../Helpers/SearchCom";
import { localImgLoad } from "../../lib";
import background from "../../assets/images/bg-sky-blue.jpg";
import { localImgLoad } from "../../lib";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
/**
@@ -14,29 +9,32 @@ 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('')
const [activeWalletBtn, setActiveWalletBtn] = useState('')
const handleChangeWallet = ({target:{name}}) => { // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
const currentWalletSelected = wallet?.data?.filter((item) => item.code == name);
setSelectedWallet(currentWalletSelected[0])
setActiveWalletBtn(name)
const [selectedWallet, setSelectedWallet] = useState("");
const [activeWalletBtn, setActiveWalletBtn] = useState("");
const handleChangeWallet = ({ target: { name } }) => {
// FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
const currentWalletSelected = wallet?.data?.filter(
(item) => item.code == name
);
setSelectedWallet(currentWalletSelected[0]);
setActiveWalletBtn(name);
// console.log(name, currentWalletSelected)
}
};
const image = selectedWallet?.code
? `${selectedWallet?.code.toLowerCase()}.svg`
: "default.png";
? `${selectedWallet?.code.toLowerCase()}.svg`
: "default.png";
useEffect(()=>{
setSelectedWallet(wallet.data[0])
setActiveWalletBtn(wallet?.data[0]?.code)
},[wallet])
useEffect(() => {
setSelectedWallet(wallet.data[0]);
setActiveWalletBtn(wallet?.data[0]?.code);
}, [wallet]);
return (
<div className="w-full">
@@ -44,31 +42,38 @@ export default function FamilyWalletBox({ wallet, payment }) {
<div className="main-wrapper w-full mb-10">
<div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
<div className="w-full mb-4 sm:mb-0 rounded-2xl bg-white dark:bg-dark-white overflow-hidden">
{wallet?.loading ?
{wallet?.loading ? (
<div className="w-full h-full flex items-center justify-center bg-white">
<LoadingSpinner size="16" color="sky-blue" height='min-h-[240px]' />
<LoadingSpinner
size="16"
color="sky-blue"
height="min-h-[240px]"
/>
</div>
: wallet?.data.length > 0 ?
) : wallet?.data.length > 0 ? (
<>
{wallet?.data?.length > 1 &&
<div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
{wallet?.data?.map(item =>(
<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 bg-white-opacity min-h-[240px]"
style={{
background: `url(${background}) 0% 0% / cover no-repeat`,
}}
>
{wallet?.data?.length > 1 && (
<div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
{wallet?.data?.map((item) => (
<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 bg-white-opacity min-h-[240px]"
style={{
background: `url(${background}) 0% 0% / cover no-repeat`,
}}
>
{/* image */}
<div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
<img
@@ -77,21 +82,30 @@ export default function FamilyWalletBox({ wallet, payment }) {
alt="currency-icon"
/>
</div>
<p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
<p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">
Current Balance
</p>
<p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
{PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
{Formatter(
selectedWallet?.amount / 100,
selectedWallet?.code,
undefined,
"text-[2rem]"
)}
</p>
</div>
</>
:
) : (
<div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">
<p>No Wallet Record Found</p>
</div>
}
)}
</div>
<div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
<h1 className="text-xl font-bold text-black dark:text-white">
Recent Activities
</h1>
</div>
<div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
<h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
</div>
</div>
</div>
<div className="w-full">
@@ -102,7 +116,6 @@ export default function FamilyWalletBox({ wallet, payment }) {
);
}
// data.length>0 && data.map((item) => (
// <div key={item.wallet_uid} className="w-full h-full mb-10 ">
// {/* <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} /> */}