@opexa/portal-components 0.0.611 → 0.0.612

package/dist/client/hooks/useGlobalStore.d.ts

@@ -88,6 +88,7 @@ export interface GlobalStore {
     responsibleGamingReminder: ResponsibleGamingReminderStore;
     pendingBonus: HasPendingBonusStore;
     kycVerificationStatus: PopupStore;
+    bankInformationDetails: PopupStore;
 }
 export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<GlobalStore>, "setState" | "devtools"> & {
     setState(partial: GlobalStore | Partial<GlobalStore> | ((state: GlobalStore) => GlobalStore | Partial<GlobalStore>), replace?: false | undefined, action?: (string | {

package/dist/client/hooks/useGlobalStore.js

@@ -431,6 +431,19 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
         },
         '~touched': false,
     },
+    bankInformationDetails: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                bankInformationDetails: {
+                    ...prev.bankInformationDetails,
+                    open,
+                    '~touched': true,
+                },
+            }));
+        },
+        '~touched': false,
+    },
     pendingBonus: {
         open: false,
         setOpen(open) {

package/dist/components/Account/Account.lazy.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -10,12 +10,10 @@ import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useBonusesCountQuery } from '../../client/hooks/useBonusesCountQuery.js';
 import { useCashbackBonusesCountQuery } from '../../client/hooks/useCashbackBonusesCountQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMayaAuth } from '../../client/hooks/useMayaAuth.js';
 import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
 import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
 import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
-import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { Bell01Icon } from '../../icons/Bell01Icon.js';
 import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
@@ -26,15 +24,14 @@ import { Logout01Icon } from '../../icons/Logout01Icon.js';
 import { Settings02Icon } from '../../icons/Settings02Icon.js';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
 import { Badge } from '../../ui/Badge/index.js';
-import { Button } from '../../ui/Button/index.js';
 import { Drawer } from '../../ui/Drawer/index.js';
 import { Popover } from '../../ui/Popover/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { capitalize } from '../../utils/capitalize.js';
-import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';
 import { AccountPropsContext, useAccountPropsContext } from './AccountContext.js';
 import { accountRecipe } from './account.recipe.js';
+import { Wallet } from './Wallet.js';
 const defaultAccountProps = {
     offsetTop: '0px',
     rewardsUrl: '/rewards',
@@ -96,40 +93,6 @@ function Profile() {
     };
     return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), accountProps.shouldShowAccountStatus && (_jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] }))] })] })] }));
 }
-function Wallet({ classNames }) {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 1000,
-    });
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        profile: ctx.account,
-        mobileProfile: ctx.account__mobile,
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
-    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
-    const totalBalance = depositBalance + bonusBalance;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('mt-3 rounded-xl border border-border-primary bg-bg-tertiary p-xl', classNames.walletBalanceContainer), children: [_jsx("div", { className: twMerge('text-sm text-text-secondary-700', classNames.totalBalanceLabel), children: "Total Balance" }), _jsx("div", { className: twMerge('font-bold text-3xl', classNames.totalBalanceAmount), children: formatNumber(totalBalance, {
-                            currency: localeInfo?.currency.code,
-                            minDecimalPlaces: 2,
-                        }) }), _jsxs("div", { className: twMerge('mt-1.5 flex gap-7xl', classNames.balanceDetailsContainer), children: [_jsxs("div", { children: [_jsx("p", { className: twMerge('text-2xs text-text-secondary-700', classNames.depositBalanceLabel), children: "Deposit Balance" }), _jsx("p", { className: twMerge('text-medium text-text-primary-brand', classNames.depositBalanceAmount), children: formatNumber(depositBalance, {
-                                            currency: localeInfo?.currency.code,
-                                            minDecimalPlaces: 2,
-                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: twMerge('text-2xs text-text-secondary-700', classNames.bonusBalanceLabel), children: "Bonus Balance" }), _jsx("p", { className: twMerge('text-medium text-text-primary-brand', classNames.bonusBalanceAmount), children: formatNumber(bonusBalance, {
-                                            currency: localeInfo?.currency.code,
-                                            minDecimalPlaces: 2,
-                                        }) })] })] })] }), ' ', _jsxs("div", { className: twMerge('mt-3 flex gap-lg', classNames.walletActions), children: [_jsx(Button, { size: "xs", variant: "outline", className: classNames.withdrawButton, onClick: () => {
-                            globalStore.depositWithdrawal.setOpen(true);
-                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
-                            globalStore.profile.setOpen(false);
-                            globalStore.mobileProfile.setOpen(false);
-                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", className: classNames.depositButton, onClick: () => {
-                            globalStore.depositWithdrawal.setOpen(true);
-                            globalStore.depositWithdrawal.setTab('DEPOSIT');
-                            globalStore.profile.setOpen(false);
-                            globalStore.mobileProfile.setOpen(false);
-                        }, children: "Deposit" })] })] }));
-}
 function Links({ router, classNames, }) {
     const accountProps = useAccountPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({

package/dist/components/Account/Wallet.d.ts

@@ -0,0 +1,17 @@
+export interface WalletClassNames {
+    walletActions?: string;
+    withdrawButton?: string;
+    depositButton?: string;
+    walletBalanceContainer?: string;
+    totalBalanceLabel?: string;
+    totalBalanceAmount?: string;
+    balanceDetailsContainer?: string;
+    depositBalanceLabel?: string;
+    depositBalanceAmount?: string;
+    bonusBalanceLabel?: string;
+    bonusBalanceAmount?: string;
+}
+export interface WalletProps {
+    classNames?: WalletClassNames;
+}
+export declare function Wallet({ classNames }: WalletProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Wallet.example.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Example usage of the Wallet component
+ *
+ * Import the Wallet component:
+ * ```tsx
+ * import { Wallet } from '@opexa/portal-components/Account/Wallet';
+ * ```
+ *
+ * Basic usage:
+ * ```tsx
+ * <Wallet />
+ * ```
+ *
+ * With custom class names:
+ * ```tsx
+ * <Wallet
+ *   classNames={{
+ *     walletBalanceContainer: "custom-balance-container",
+ *     totalBalanceAmount: "custom-total-amount",
+ *     depositButton: "custom-deposit-btn",
+ *     withdrawButton: "custom-withdraw-btn"
+ *   }}
+ * />
+ * ```
+ *
+ * The Wallet component includes:
+ * - Total balance display
+ * - Deposit and bonus balance breakdown
+ * - Deposit and Withdraw buttons
+ * - Automatic wallet data fetching with 1-second refresh interval
+ * - Integration with global store for deposit/withdrawal modals
+ */
+export declare const WalletExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Wallet.example.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Example usage of the Wallet component
+ *
+ * Import the Wallet component:
+ * ```tsx
+ * import { Wallet } from '@opexa/portal-components/Account/Wallet';
+ * ```
+ *
+ * Basic usage:
+ * ```tsx
+ * <Wallet />
+ * ```
+ *
+ * With custom class names:
+ * ```tsx
+ * <Wallet
+ *   classNames={{
+ *     walletBalanceContainer: "custom-balance-container",
+ *     totalBalanceAmount: "custom-total-amount",
+ *     depositButton: "custom-deposit-btn",
+ *     withdrawButton: "custom-withdraw-btn"
+ *   }}
+ * />
+ * ```
+ *
+ * The Wallet component includes:
+ * - Total balance display
+ * - Deposit and bonus balance breakdown
+ * - Deposit and Withdraw buttons
+ * - Automatic wallet data fetching with 1-second refresh interval
+ * - Integration with global store for deposit/withdrawal modals
+ */
+export const WalletExample = () => {
+    return (_jsxs("div", { className: "p-4", children: [_jsx("h2", { className: 'mb-4 font-bold text-xl', children: "Wallet Component Example" }), _jsx("p", { className: 'mb-4 text-gray-600', children: "The Wallet component is now available as a standalone component that you can use anywhere in your application." }), _jsxs("div", { className: 'rounded-lg bg-gray-100 p-4', children: [_jsx("h3", { className: 'mb-2 font-semibold', children: "Import:" }), _jsxs("code", { className: 'block rounded bg-white p-2 text-sm', children: ["import ", `{ Wallet }`, " from '@opexa/portal-components/Account/Wallet';"] })] }), _jsxs("div", { className: 'mt-4 rounded-lg bg-gray-100 p-4', children: [_jsx("h3", { className: 'mb-2 font-semibold', children: "Usage:" }), _jsx("code", { className: 'block rounded bg-white p-2 text-sm', children: `<Wallet classNames={{ walletActions: "custom-actions" }} />` })] })] }));
+};

package/dist/components/Account/Wallet.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
+import { Button } from '../../ui/Button/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+export function Wallet({ classNames = {} }) {
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 1000,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        profile: ctx.account,
+        mobileProfile: ctx.account__mobile,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
+    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
+    const totalBalance = depositBalance + bonusBalance;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('mt-3 rounded-xl border border-border-primary bg-bg-tertiary p-xl', classNames.walletBalanceContainer), children: [_jsx("div", { className: twMerge('text-sm text-text-secondary-700', classNames.totalBalanceLabel), children: "Total Balance" }), _jsx("div", { className: twMerge('font-bold text-3xl', classNames.totalBalanceAmount), children: formatNumber(totalBalance, {
+                            currency: localeInfo?.currency.code,
+                            minDecimalPlaces: 2,
+                        }) }), _jsxs("div", { className: twMerge('mt-1.5 flex gap-7xl', classNames.balanceDetailsContainer), children: [_jsxs("div", { children: [_jsx("p", { className: twMerge('text-2xs text-text-secondary-700', classNames.depositBalanceLabel), children: "Deposit Balance" }), _jsx("p", { className: twMerge('text-medium text-text-primary-brand', classNames.depositBalanceAmount), children: formatNumber(depositBalance, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: twMerge('text-2xs text-text-secondary-700', classNames.bonusBalanceLabel), children: "Bonus Balance" }), _jsx("p", { className: twMerge('text-medium text-text-primary-brand', classNames.bonusBalanceAmount), children: formatNumber(bonusBalance, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) })] })] })] }), _jsxs("div", { className: twMerge('mt-3 flex gap-lg', classNames.walletActions), children: [_jsx(Button, { size: "xs", variant: "outline", className: classNames.withdrawButton, onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", className: classNames.depositButton, onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('DEPOSIT');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Deposit" })] })] }));
+}

package/dist/components/Account/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Account';
 export * from './AccountTrigger';
+export * from './Wallet';

package/dist/components/Account/index.js

@@ -1,2 +1,3 @@
 export * from './Account.js';
 export * from './AccountTrigger.js';
+export * from './Wallet.js';