@opexa/portal-components 0.0.957 → 0.0.959

package/dist/lib/client/utils/createRecipeContext.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createSplitProps } from '../../utils/createSplitProps.js';
+export function createRecipeContext(recipe) {
+    const RecipeContext = React.createContext(null);
+    function useContext() {
+        const context = React.use(RecipeContext);
+        return context;
+    }
+    function withRootProvider(Component) {
+        const StyledComponent = (props) => {
+            const [recipeProps, localProps] = createSplitProps(recipe.variantKeys)(props);
+            const context = recipe(recipeProps);
+            return (_jsx(RecipeContext.Provider, { value: context, children: _jsx(Component, { ...localProps }) }));
+        };
+        return StyledComponent;
+    }
+    function withProvider(Component, slot) {
+        const StyledComponent = (props) => {
+            const [recipeProps, localProps] = createSplitProps(recipe.variantKeys)(props);
+            const context = recipe(recipeProps);
+            const slotName = slot;
+            const getStyle = context[slotName];
+            const userDefinedClassName = 'className' in localProps && typeof localProps.className === 'string'
+                ? localProps.className
+                : undefined;
+            const className = !getStyle
+                ? userDefinedClassName
+                : getStyle({
+                    ...recipeProps,
+                    className: userDefinedClassName,
+                });
+            return (_jsx(RecipeContext.Provider, { value: context, children: _jsx(Component, { ...localProps, className: className }) }));
+        };
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    }
+    function withContext(Component, slot) {
+        const StyledComponent = (props) => {
+            const context = useContext();
+            const [recipeProps, localProps] = createSplitProps(recipe.variantKeys)(props);
+            const slotName = slot;
+            const getStyle = !context
+                ? recipe(recipeProps)[slotName]
+                : context[slotName];
+            const userDefinedClassName = 'className' in localProps && typeof localProps.className === 'string'
+                ? localProps.className
+                : undefined;
+            const className = !getStyle
+                ? userDefinedClassName
+                : getStyle({
+                    ...recipeProps,
+                    className: userDefinedClassName,
+                });
+            return _jsx(Component, { ...localProps, className: className });
+        };
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    }
+    return {
+        withRootProvider,
+        withProvider,
+        withContext,
+    };
+}

package/dist/lib/client/utils/toaster.d.ts

@@ -0,0 +1,2 @@
+import { type CreateToasterReturn } from '@ark-ui/react/toast';
+export declare const toaster: CreateToasterReturn;

package/dist/lib/client/utils/toaster.js

@@ -0,0 +1,8 @@
+import { createToaster } from '@ark-ui/react/toast';
+export const toaster = createToaster({
+    placement: 'top',
+    duration: 5000,
+    max: 5,
+    overlap: true,
+    gap: 8,
+});

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

@@ -0,0 +1,3 @@
+import type { AccountProps } from './Account.lazy';
+export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { AccountProps };

package/dist/lib/components/Account/Account.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./Account.lazy.js').then((m) => m.Account), {
+    ssr: false,
+    loading: () => null,
+});
+export function Account(props) {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.account['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
+}

package/dist/lib/components/Account/Account.lazy.d.ts

@@ -0,0 +1,57 @@
+export interface ClassNameEntries {
+    root?: string;
+    positioner?: string;
+    walletActions?: string;
+    withdrawButton?: string;
+    depositButton?: string;
+    walletBalanceContainer?: string;
+    totalBalanceLabel?: string;
+    totalBalanceAmount?: string;
+    balanceDetailsContainer?: string;
+    depositBalanceLabel?: string;
+    depositBalanceAmount?: string;
+    bonusBalanceLabel?: string;
+    bonusBalanceAmount?: string;
+    navItemRoot?: string;
+    navItemLink?: string;
+    navItemIcon?: string;
+    navItemLabel?: string;
+    navItemBadge?: string;
+    navItemIndicator?: string;
+}
+export interface AccountProps {
+    className?: string | ClassNameEntries;
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string;
+    /** @default '/rewards' */
+    rewardsUrl?: string;
+    /** @default true */
+    rewardsEnabled?: boolean;
+    /** @default '/bet-records' */
+    betRecordsUrl?: string;
+    /** @default true */
+    betRecordsEnabled?: boolean;
+    /** @default '/transactions' */
+    transactionsUrl?: string;
+    /** @default true */
+    transactionsEnabled?: boolean;
+    /** @default '/account' */
+    accountSettingsUrl?: string;
+    /** @default true */
+    accountSettingsEnabled?: boolean;
+    /** @default true */
+    notificationsEnabled?: boolean;
+    /** @default true */
+    shouldShowAccountStatus?: boolean;
+    /** Avatar image source */
+    avatar?: string;
+}
+export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,176 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { twMerge } from 'tailwind-merge';
+import invariant from 'tiny-invariant';
+import { useShallow } from 'zustand/shallow';
+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 { 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 { getSession } from '../../client/services/getSession.js';
+import { BIOMETRIC_STORAGE_KEY } from '../../client/utils/biometric.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { Bell01Icon } from '../../icons/Bell01Icon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { CoinsStacked02Icon } from '../../icons/CoinsStacked02Icon.js';
+import { CoinsSwap02Icon } from '../../icons/CoinsSwap02Icon.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
+import { Logout01Icon } from '../../icons/Logout01Icon.js';
+import { Settings02Icon } from '../../icons/Settings02Icon.js';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { unregisterFCMDevice } from '../../services/trigger.js';
+import { Badge } from '../../ui/Badge/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 { getQueryClient } from '../../utils/getQueryClient.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
+import { AccountPropsContext, useAccountPropsContext } from './AccountContext.js';
+import { accountRecipe } from './account.recipe.js';
+import { Wallet } from './Wallet.js';
+const defaultAccountProps = {
+    offsetTop: '0px',
+    rewardsUrl: '/rewards',
+    rewardsEnabled: true,
+    betRecordsUrl: '/bet-records',
+    betRecordsEnabled: true,
+    transactionsUrl: '/transactions',
+    transactionsEnabled: true,
+    accountSettingsUrl: '/account',
+    accountSettingsEnabled: true,
+    notificationsEnabled: true,
+    shouldShowAccountStatus: true,
+};
+const recipe = accountRecipe();
+export function Account(props) {
+    const router = useRouter();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+    })));
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const contextValue = {
+        ...defaultAccountProps,
+        ...props,
+        className: props.className ?? undefined,
+    };
+    return (_jsxs(AccountPropsContext, { value: contextValue, children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
+                    globalStore.account__mobile.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { className: classNames.positioner, children: _jsx(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]', 'overflow-auto', classNames.root), style: {
+                                ['--offset-top-mobile']: mobileOffsetTop,
+                                ['--offset-top-desktop']: desktopOffsetTop,
+                            }, children: _jsxs("div", { className: "h-full overflow-y-auto px-xl py-6", children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router, classNames: classNames })] }) }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                    globalStore.account.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, positioning: {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                }, ids: {
+                    trigger: 'opexa-powerplay:account-trigger',
+                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "relative z-popover max-h-[80vh] w-[23.438rem] ui-closed:animate-fade-out ui-open:animate-fade-in overflow-y-auto overscroll-contain rounded-xl border border-border-primary bg-bg-primary p-xl", style: {
+                                WebkitOverflowScrolling: 'touch',
+                            }, children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router, classNames: classNames })] }) }) }) })] }));
+}
+function Profile() {
+    const accountQuery = useAccountQuery();
+    const accountProps = useAccountPropsContext();
+    const account = accountQuery.data;
+    const getVerificationColorScheme = (status) => {
+        switch (status) {
+            case 'VERIFIED':
+                return 'success';
+            case 'PENDING':
+                return 'brand';
+            default:
+                return 'danger';
+        }
+    };
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: accountProps.avatar || 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 Links({ router, classNames, }) {
+    const accountProps = useAccountPropsContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        messages: ctx.messages,
+    })));
+    const signOutMutation = useSignOutMutation({
+        onSuccess: async () => {
+            // Clear everything except the 'biometric' entry
+            const keep = new Set([BIOMETRIC_STORAGE_KEY]);
+            for (let i = 0; i < localStorage.length;) {
+                const key = localStorage.key(i);
+                if (key && !keep.has(key)) {
+                    localStorage.removeItem(key);
+                }
+                else {
+                    i++;
+                }
+            }
+            sessionStorage.clear();
+            router.replace('/');
+        },
+    });
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const profileCompletionPercentage = parseDecimal(profileCompletion?.completionPercentage, 0);
+    const bonusesCountQuery = useBonusesCountQuery();
+    const bonusesCount = bonusesCountQuery.data ?? 0;
+    const cashbackBonusesCountQuery = useCashbackBonusesCountQuery();
+    const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
+    const rewardsCount = bonusesCount + cashbackBonusesCount;
+    const { onMaya } = useMayaAuth();
+    return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { hidden: !accountProps.notificationsEnabled && !accountProps.rewardsEnabled, children: [_jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.notificationsEnabled, children: _jsxs("button", { type: "button", className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                                globalStore.messages.setOpen(true);
+                            }, children: [_jsx(Bell01Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Notifications" }), unreadMessagesCount > 0 && (_jsx("span", { className: twMerge(recipe.navItemBadge(), classNames.navItemBadge), "data-type": "warning", children: unreadMessagesCount })), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }), _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.rewardsEnabled, children: _jsxs(Link, { href: accountProps.rewardsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(Gift01Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Rewards" }), rewardsCount > 0 && (_jsx("span", { className: twMerge(recipe.navItemBadge(), classNames.navItemBadge), "data-type": "warning", children: rewardsCount })), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) })] }), _jsx("ul", { hidden: !accountProps.accountSettingsEnabled, children: _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.accountSettingsEnabled, children: _jsxs(Link, { href: accountProps.accountSettingsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                        }, children: [_jsx(Settings02Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Settings" }), profileCompletionPercentage < 100 && (_jsx("span", { className: twMerge(recipe.navItemBadge(), classNames.navItemBadge), "data-type": "error", children: _jsx(AlertCircleIcon, {}) })), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }) }), _jsxs("ul", { hidden: !accountProps.betRecordsEnabled && !accountProps.transactionsEnabled, children: [_jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.betRecordsEnabled, children: _jsxs(Link, { href: accountProps.betRecordsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsStacked02Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }), _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.transactionsEnabled, children: _jsxs(Link, { href: accountProps.transactionsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsSwap02Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Transactions" }), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) })] }), _jsx("ul", { children: _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: onMaya, children: _jsxs("button", { type: "button", className: twMerge(recipe.navItemLink(), classNames.navItemLink), disabled: signOutMutation.isPending, onClick: async () => {
+                            if (Capacitor.isNativePlatform()) {
+                                const session = await getQueryClient().fetchQuery({
+                                    queryKey: getSessionQueryKey(),
+                                    queryFn: async () => getSession(),
+                                });
+                                invariant(session.status === 'authenticated');
+                                await unregisterFCMDevice({
+                                    type: ['IOS', 'ANDROID'],
+                                }, {
+                                    headers: {
+                                        Authorization: `Bearer ${session.token}`,
+                                    },
+                                });
+                            }
+                            signOutMutation.mutate();
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                            router.push('/');
+                        }, children: [_jsx(Logout01Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Log Out" }), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }) })] }));
+}

package/dist/lib/components/Account/AccountContext.d.ts

@@ -0,0 +1,6 @@
+import type { AccountProps } from './Account.lazy';
+export declare const AccountPropsContext: (props: {
+    value: import("type-fest/source/required-deep").RequiredObjectDeep<AccountProps>;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useAccountPropsContext: () => import("type-fest/source/required-deep").RequiredObjectDeep<AccountProps>;

package/dist/lib/components/Account/AccountContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../client/utils/createContext.js';
+export const [AccountPropsContext, useAccountPropsContext] = createContext();

package/dist/lib/components/Account/AccountTrigger.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface AccountTriggerProps extends ComponentPropsWithRef<'button'> {
+    asChild?: boolean;
+    /** Avatar image source */
+    avatar?: string;
+}
+export declare function AccountTrigger({ asChild, children, avatar, ...props }: AccountTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Account/AccountTrigger.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react/factory';
+import Image from 'next/image';
+import { useMediaQuery } from 'usehooks-ts';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.js';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { IconButton } from '../../ui/IconButton/index.js';
+export function AccountTrigger({ asChild, children, avatar, ...props }) {
+    const desktop = useMediaQuery('(min-width: 1024px)', {
+        defaultValue: true,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+    })));
+    const disclosure = desktop
+        ? globalStore.account
+        : globalStore.account__mobile;
+    return (_jsx(ark.button, { type: "button", "aria-label": "Toggle account menu", "data-open": disclosure.open ? 'open' : 'closed', ...props, onClick: (e) => {
+            disclosure.setOpen(!disclosure.open);
+            return props.onClick?.(e);
+        }, asChild: !children ? true : asChild, children: children ?? (_jsx(IconButton, { id: "opexa-powerplay:account-trigger", size: "sm", colorScheme: "gray", children: !desktop && disclosure.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatar || avatarPlaceholder, alt: "", width: 64, height: 64, className: "size-10" })) })) }));
+}

package/dist/lib/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/lib/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/lib/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/lib/components/Account/Wallet.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isNil } from 'lodash-es';
+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;
+    const turnoverRequirement = parseDecimal(walletQuery.data?.turnoverRequirement);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('mt-3 overflow-hidden rounded-xl border border-border-primary', classNames.walletBalanceContainer), children: [_jsxs("div", { className: "bg-bg-tertiary p-xl", 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,
+                                                }) })] })] })] }), !isNil(turnoverRequirement) && turnoverRequirement > 0 && (_jsxs("div", { className: "border-border-primary border-t bg-bg-quaternary px-xl py-2", children: [_jsx("p", { className: "text-2xs leading-tight", children: "Deposit Turnover Requirement" }), _jsx("p", { className: "mt-1 font-medium text-xs leading-tight", children: formatNumber(turnoverRequirement, {
+                                    currency: localeInfo?.currency.code,
+                                    minDecimalPlaces: 1,
+                                    maxDecimalPlaces: 2,
+                                }) }), _jsxs("p", { className: "mt-0.5 text-2xs text-text-tertiary-600 leading-tight", children: ["You need to wager", ' ', _jsx("span", { className: "font-medium text-text-warning-primary-600 leading-tight", children: formatNumber(turnoverRequirement, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 1,
+                                            maxDecimalPlaces: 2,
+                                        }) }), ' ', "to meet this requirement before you can withdraw."] })] }))] }), _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/lib/components/Account/account.recipe.d.ts

@@ -0,0 +1,61 @@
+export declare const accountRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/lib/components/Account/account.recipe.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const accountRecipe = tv({
+    slots: {
+        nav: 'space-y-xl',
+        navItemRoot: 'block bg-bg-primary-alt first:rounded-t-xl last:rounded-b-xl',
+        navItemLink: 'flex w-full items-center px-xl py-xl text-left font-semibold text-sm',
+        navItemIcon: 'size-5 text-text-nav-item-button-icon',
+        navItemLabel: 'ml-lg grow',
+        navItemIndicator: 'size-5 text-gray-400 text-text-quarterary-500',
+        navItemBadge: [
+            'mr-md',
+            'flex',
+            'items-center',
+            'justify-center',
+            'border',
+            'rounded-full',
+            'h-5.5',
+            'ui-type-[warning]:min-w-6',
+            'ui-type-[warning]:text-xs',
+            'ui-type-[warning]:font-medium',
+            'ui-type-[warning]:leading-tight',
+            'ui-type-[warning]:border-utility-brand-200',
+            'ui-type-[warning]:bg-utility-brand-50',
+            'ui-type-[warning]:text-utility-brand-700',
+            'ui-type-[error]:w-5.5',
+            'ui-type-[error]:icon:size-3',
+            'ui-type-[error]:border-utility-warning-200',
+            'ui-type-[error]:bg-utility-warning-50',
+            'ui-type-[error]:text-utility-warning-500',
+        ],
+    },
+});

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

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

package/dist/lib/components/Account/index.js

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