@opexa/portal-components 0.0.610 → 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';

package/dist/components/Promo/Promo.client.d.ts

@@ -1,7 +1,18 @@
+export interface ClassNameEntries {
+    root?: string;
+    promoDescription?: string;
+}
 export interface PromoProps {
     id: string;
     /** @default '/promos' */
     viewAllPromosUrl?: string;
-    className?: string;
+    className?: string | ClassNameEntries;
+    transformDescription?: {
+        replacements: {
+            pattern: string;
+            replace: string;
+            flags?: string;
+        }[];
+    };
 }
 export declare function Promo__client(props: PromoProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Promo/Promo.client.js

@@ -2,8 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tz } from '@date-fns/tz';
 import { format } from 'date-fns';
+import { isString } from 'lodash-es';
 import Image from 'next/image';
 import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -24,12 +26,29 @@ export function Promo__client(props) {
     })));
     if (!promo)
         return null;
-    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const descriptionHtml = (() => {
+        let html = promo.description ?? '';
+        const cfg = props.transformDescription;
+        if (cfg?.replacements?.length) {
+            for (const r of cfg.replacements) {
+                try {
+                    const re = new RegExp(r.pattern, r.flags ?? 'g');
+                    html = html.replace(re, r.replace);
+                }
+                catch {
+                    // ignore invalid regex
+                }
+            }
+        }
+        return html;
+    })();
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
                     globalStore.depositWithdrawal.setOpen(true);
                     globalStore.depositWithdrawal.setPromo(promo.id);
                 }, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "mt-xl text-text-secondary-700 lg:mt-6", children: ["Ends", ' ', format(promo.activationEndDateTime, 'MM/dd/yyy hh:mm:ss', {
                         in: tz(localeInfo.timezone),
-                    })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
-                    __html: promo.description,
-                } })] }));
+                    })] }), _jsx(Prose, { className: twMerge('mt-2xl lg:mt-6', classNames.promoDescription), dangerouslySetInnerHTML: { __html: descriptionHtml } })] }));
 }

package/dist/components/SignUp/SignUpDefault/SignUpDefaultForm.js

@@ -44,7 +44,10 @@ export function SignUpDefaultForm() {
     const branchCollection = createListCollection({
         items: signUpProps.branches ?? [],
         itemToValue: (item) => item.code,
-        itemToString: (item) => `${item.code} - ${item.name}`,
+        itemToString: (item) => {
+            const name = (item.name ?? '').trim();
+            return name ? `${item.code} - ${name}` : item.code;
+        },
     });
     const [step, setStep] = useState(1);
     const router = useRouter();

package/dist/components/SignUp/SignUpKYC/SignUpKYCForm.js

@@ -55,7 +55,10 @@ export function SignUpKYCForm() {
     const branchCollection = createListCollection({
         items: props.branches ?? [],
         itemToValue: (item) => item.code,
-        itemToString: (item) => `${item.code} - ${item.name}`,
+        itemToString: (item) => {
+            const name = (item.name ?? '').trim();
+            return name ? `${item.code} - ${name}` : item.code;
+        },
     });
     const router = useRouter();
     const globalStore = useGlobalStore(useShallow((ctx) => ({

package/dist/components/SignUp/SignUpNameAndPassword/SignUpNameAndPasswordForm.js

@@ -42,7 +42,10 @@ export function SignUpNameAndPasswordForm() {
     const branchCollection = createListCollection({
         items: signUpProps.branches ?? [],
         itemToValue: (item) => item.code,
-        itemToString: (item) => `${item.code} - ${item.name}`,
+        itemToString: (item) => {
+            const name = (item.name ?? '').trim();
+            return name ? `${item.code} - ${name}` : item.code;
+        },
     });
     const router = useRouter();
     const globalStore = useGlobalStore(useShallow((ctx) => ({