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

virtual card form added

Browse Source
This commit was merged in pull request #824.
This commit is contained in:
victorAnumudu
2024-10-16 19:30:11 +01:00
parent 3e6e3d3910
commit ca375c4bae
5 changed files with 504 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/FamilyWalletBox.jsx
+23 -20
View File
@@ -3,6 +3,7 @@ import background from "../../assets/images/bg-sky-blue.jpg";
import { localImgLoad } from "../../lib";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
import {PriceFormatter} from '../Helpers/PriceFormatter'
/**
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -20,7 +21,7 @@ export default function FamilyWalletBox({ wallet, payment }) {
const handleChangeWallet = ({ target: { name } }) => {
// FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
const currentWalletSelected = wallet?.data?.filter(
(item) => item.code == name
(item) => item.description == name
);
setSelectedWallet(currentWalletSelected[0]);
setActiveWalletBtn(name);
@@ -33,7 +34,7 @@ export default function FamilyWalletBox({ wallet, payment }) {
useEffect(() => {
setSelectedWallet(wallet.data[0]);
setActiveWalletBtn(wallet?.data[0]?.code);
setActiveWalletBtn(wallet?.data[0]?.description);
}, [wallet]);
return (
@@ -54,13 +55,13 @@ export default function FamilyWalletBox({ wallet, payment }) {
<>
{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) => (
{wallet?.data?.map((item, index) => (
<button
className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${
activeWalletBtn == item?.code && "bg-orange-500"
activeWalletBtn == item?.description && "bg-orange-500"
}`}
key={item?.wallet_uid}
name={item?.code}
key={item?.wallet_uid+index}
name={item?.description}
onClick={handleChangeWallet}
>
{item?.description}
@@ -69,30 +70,32 @@ export default function FamilyWalletBox({ wallet, payment }) {
</div>
)}
<div
className="p-5 bg-white-opacity min-h-[240px]"
className="p-5 bg-white-opacity min-h-[240px] flex justify-end items-center"
style={{
background: `url(${background}) 0% 0% / cover no-repeat`,
background: `url(${selectedWallet?.banner}) 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">
{/* <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
src={localImgLoad(`images/currency/${image}`)}
className="w-full h-full"
alt="currency-icon"
/>
</div> */}
<div className='flex flex-col justify-center'>
<p className="text-base sm:text-lg text-white tracking-wide my-3 text-center">
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]"
)}
</p>
</div>
<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">
{Formatter(
selectedWallet?.amount / 100,
selectedWallet?.code,
undefined,
"text-[2rem]"
)}
</p>
</div>
</>
) : (