@opexa/portal-components 0.0.611 → 0.0.613

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';

package/dist/components/DigitainLauncher/Loading.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Loading() {
-    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "border-blue-500 h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-gray-700 text-lg font-medium", children: "Loading Sports Book\u2026" })] }) }));
 }

package/dist/components/Disclaimer/ResponsibleGaming.d.ts

@@ -0,0 +1,10 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface ResponsibleGamingProps {
+    responsibleGamingContent: string | ReactNode;
+    logo: ImageProps['src'];
+    open: boolean;
+    onCloseAction: () => void;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/ResponsibleGaming.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        onCloseAction();
+                                    }, children: "I Agree" }) })] }) })] }) }));
+}

package/dist/components/Disclaimer/TermsOfUse.d.ts

@@ -0,0 +1,11 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface TermsOfUseProps {
+    logo: ImageProps['src'];
+    open: boolean;
+    onCloseAction: () => void;
+    termsOfUseContent: string | ReactNode;
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/TermsOfUse.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        onCloseAction();
+                                    }, children: "I Agree" }) })] }) })] }) }));
+}

package/dist/components/FeatureFlag/FeatureFlag.d.ts

@@ -0,0 +1 @@
+export declare function FeatureFlag(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FeatureFlag/FeatureFlag.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { FEATURE_FLAG_KEY, useFeatureFlag, } from '../../client/hooks/useFeatureFlag.js';
+export function FeatureFlag() {
+    const { featureFlagEnabled, setFeatureFlagEnabled } = useFeatureFlag();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    useEffect(() => {
+        const futureFlagParam = searchParams.get('future');
+        if (futureFlagParam !== null) {
+            const isEnabled = futureFlagParam === 'true';
+            setFeatureFlagEnabled(isEnabled);
+            localStorage.setItem(FEATURE_FLAG_KEY, isEnabled.toString());
+        }
+    }, [searchParams, setFeatureFlagEnabled]);
+    function disableFeatureFlag() {
+        setFeatureFlagEnabled(false);
+        localStorage.removeItem(FEATURE_FLAG_KEY);
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete('future');
+        router.replace(`?${params.toString()}`, { scroll: false });
+    }
+    if (!featureFlagEnabled) {
+        return null;
+    }
+    return (_jsx("div", { className: "fixed bottom-3 flex w-full flex-col items-center justify-center", children: _jsxs("div", { className: "bg-black/70 p-1", children: ["Experimental features are enabled.", ' ', _jsxs("button", { onClick: () => disableFeatureFlag(), className: "cursor-pointer underline", children: [' ', "Disable"] })] }) }));
+}

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

@@ -0,0 +1 @@
+export * from './FeatureFlag';

package/dist/components/FeatureFlag/index.js

@@ -0,0 +1 @@
+export * from './FeatureFlag.js';