@opexa/portal-components 0.1.33 → 0.1.35

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

@@ -77,6 +77,13 @@ export interface BetDepositLimitStore extends PopupStore {
     setRequestedLimit: (limit: number) => void;
     openModal: (type: LimitType, period: LimitPeriod, currentLimit: number, requestedLimit: number) => void;
 }
+export interface BetDepositLimitReachedStore extends PopupStore {
+    type: LimitType;
+    setType: (type: LimitType) => void;
+    period: LimitPeriod;
+    setPeriod: (period: LimitPeriod) => void;
+    openModal: (type: LimitType, period: LimitPeriod) => void;
+}
 export interface GlobalStore {
     signUp: PopupStore;
     signIn: PopupStore;
@@ -103,6 +110,7 @@ export interface GlobalStore {
     responsibleGamingReminder: ResponsibleGamingReminderStore;
     pendingBonus: HasPendingBonusStore;
     betDepositLimit: BetDepositLimitStore;
+    betDepositLimitReached: BetDepositLimitReachedStore;
     kycVerificationStatus: PopupStore;
     kycAccountVerificationRequired: PopupStore;
     bankInformationDetails: PopupStore;

package/dist/client/hooks/useGlobalStore.js

@@ -566,6 +566,48 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
             }));
         },
     },
+    betDepositLimitReached: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                betDepositLimitReached: {
+                    ...prev.betDepositLimitReached,
+                    open,
+                    '~touched': true,
+                },
+            }));
+        },
+        '~touched': false,
+        type: 'bet',
+        setType(type) {
+            set((prev) => ({
+                betDepositLimitReached: {
+                    ...prev.betDepositLimitReached,
+                    type,
+                },
+            }));
+        },
+        period: 'daily',
+        setPeriod(period) {
+            set((prev) => ({
+                betDepositLimitReached: {
+                    ...prev.betDepositLimitReached,
+                    period,
+                },
+            }));
+        },
+        openModal(type, period) {
+            set((prev) => ({
+                betDepositLimitReached: {
+                    ...prev.betDepositLimitReached,
+                    type,
+                    period,
+                    open: true,
+                    '~touched': true,
+                },
+            }));
+        },
+    },
     isNonRegulated: false,
     setIsNonRegulated: (isNonRegulated) => set((state) => ({
         ...state,

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

@@ -0,0 +1,3 @@
+import type { Query } from '../../types';
+import { type MemberWalletAccount } from '../../services/wallet';
+export declare const useMemberWalletQuery: Query<MemberWalletAccount['self'] | null>;

package/dist/client/hooks/useMemberWalletAccount.js

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { getMemberWalletAccount, } from '../../services/wallet.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getMemberWalletAccountQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+import { useSessionQuery } from './useSessionQuery.js';
+export const useMemberWalletQuery = (config) => {
+    const sessionQuery = useSessionQuery();
+    return useQuery({
+        ...config,
+        enabled: config?.enabled === false
+            ? false
+            : sessionQuery.data?.status === 'authenticated',
+        queryKey: getMemberWalletAccountQueryKey(),
+        queryFn: async ({ signal }) => {
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            const memberWallet = await getMemberWalletAccount({
+                signal,
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return memberWallet ?? null;
+        },
+    });
+};

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

@@ -0,0 +1,3 @@
+import { type UpdateDailyBetLimitInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useUpdateDailyBetLimitMutation: Mutation<void, UpdateDailyBetLimitInput>;

package/dist/client/hooks/useUpdateDailyBetLimit.js

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateDailyBetLimit, } from '../../services/account.js';
+import { getUpdateDailyBetLimitMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateDailyBetLimitMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateDailyBetLimitMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateDailyBetLimit(input.dailyBetLimit, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};

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

@@ -0,0 +1,3 @@
+import { type UpdateDailyDepositLimitInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useUpdateDailyDepositLimitMutation: Mutation<void, UpdateDailyDepositLimitInput>;

package/dist/client/hooks/useUpdateDailyDepositLimit.js

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateDailyDepositLimit, } from '../../services/account.js';
+import { getUpdateDailyDepositLimitMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateDailyDepositLimitMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateDailyDepositLimitMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateDailyDepositLimit(input.dailyDepositLimit, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};

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

@@ -0,0 +1,3 @@
+import { type UpdateMonthlyBetLimitInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useUpdateMonthlyBetLimitMutation: Mutation<void, UpdateMonthlyBetLimitInput>;

package/dist/client/hooks/useUpdateMonthlyBetLimit.js

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateMonthlyBetLimit, } from '../../services/account.js';
+import { getUpdateMonthlyBetLimitMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateMonthlyBetLimitMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateMonthlyBetLimitMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateMonthlyBetLimit(input.monthlyBetLimit, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};

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

@@ -0,0 +1,3 @@
+import { type UpdateMonthlyDepositLimitInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useUpdateMonthlyDepositLimitMutation: Mutation<void, UpdateMonthlyDepositLimitInput>;

package/dist/client/hooks/useUpdateMonthlyDepositLimit.js

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateMonthlyDepositLimit, } from '../../services/account.js';
+import { getUpdateMonthlyDepositLimitMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateMonthlyDepositLimitMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateMonthlyDepositLimitMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateMonthlyDepositLimit(input.monthlyDepositLimit, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};

package/dist/components/BetDepositLimit/BetDepositLimitModal.d.ts

@@ -1,4 +1,5 @@
 export interface BetDepositLimitModalProps {
-    onConfirm?: () => void;
+    onSuccess?: (type: 'bet' | 'deposit', period: 'daily' | 'monthly', requestedLimit: number) => void;
+    onError?: (type: 'bet' | 'deposit', period: 'daily' | 'monthly') => void;
 }
-export declare function BetDepositLimitModal({ onConfirm }: BetDepositLimitModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function BetDepositLimitModal({ onSuccess, onError, }: BetDepositLimitModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetDepositLimit/BetDepositLimitModal.js

@@ -1,15 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useShallow } from 'zustand/shallow';
-import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useUpdateDailyBetLimitMutation } from '../../client/hooks/useUpdateDailyBetLimit.js';
+import { useUpdateDailyDepositLimitMutation } from '../../client/hooks/useUpdateDailyDepositLimit.js';
+import { useUpdateMonthlyBetLimitMutation } from '../../client/hooks/useUpdateMonthlyBetLimit.js';
+import { useUpdateMonthlyDepositLimitMutation } from '../../client/hooks/useUpdateMonthlyDepositLimit.js';
 import { AlertTriangleIcon } from '../../icons/AlertTriangle.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-export function BetDepositLimitModal({ onConfirm }) {
-    const { enabled } = useFeatureFlag();
+import { getAccountQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+export function BetDepositLimitModal({ onSuccess, onError, }) {
     const { open, type, period, currentLimit, requestedLimit, setOpen } = useGlobalStore(useShallow((state) => ({
         open: state.betDepositLimit.open,
         type: state.betDepositLimit.type,
@@ -18,6 +22,14 @@ export function BetDepositLimitModal({ onConfirm }) {
         requestedLimit: state.betDepositLimit.requestedLimit,
         setOpen: state.betDepositLimit.setOpen,
     })));
+    const updateDailyBetLimit = useUpdateDailyBetLimitMutation();
+    const updateMonthlyBetLimit = useUpdateMonthlyBetLimitMutation();
+    const updateDailyDepositLimit = useUpdateDailyDepositLimitMutation();
+    const updateMonthlyDepositLimit = useUpdateMonthlyDepositLimitMutation();
+    const isPending = updateDailyBetLimit.isPending ||
+        updateMonthlyBetLimit.isPending ||
+        updateDailyDepositLimit.isPending ||
+        updateMonthlyDepositLimit.isPending;
     const isIncrease = requestedLimit > currentLimit;
     const changeAmount = Math.abs(requestedLimit - currentLimit);
     const formatPeso = (value) => {
@@ -37,13 +49,32 @@ export function BetDepositLimitModal({ onConfirm }) {
         }
         return `Your ${period} ${type} limit has been lowered and is now active.`;
     };
+    const mutationOptions = {
+        onSuccess: () => {
+            getQueryClient().invalidateQueries({ queryKey: getAccountQueryKey() });
+            setOpen(false);
+            onSuccess?.(type, period, requestedLimit);
+        },
+        onError: () => {
+            setOpen(false);
+            onError?.(type, period);
+        },
+    };
     const handleConfirm = () => {
-        setOpen(false);
-        if (onConfirm) {
-            onConfirm();
+        if (type === 'bet' && period === 'daily') {
+            updateDailyBetLimit.mutate({ dailyBetLimit: requestedLimit }, mutationOptions);
+        }
+        else if (type === 'bet' && period === 'monthly') {
+            updateMonthlyBetLimit.mutate({ monthlyBetLimit: requestedLimit }, mutationOptions);
+        }
+        else if (type === 'deposit' && period === 'daily') {
+            updateDailyDepositLimit.mutate({ dailyDepositLimit: requestedLimit }, mutationOptions);
+        }
+        else if (type === 'deposit' && period === 'monthly') {
+            updateMonthlyDepositLimit.mutate({ monthlyDepositLimit: requestedLimit }, mutationOptions);
         }
     };
-    return (_jsx(Dialog.Root, { open: open && enabled, onOpenChange: (details) => {
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: (details) => {
             setOpen(details.open);
-        }, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto max-h-[90vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(AlertTriangleIcon, { className: "size-6 text-text-brand-700" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg text-text-primary-900 xl:mt-xl", children: title }), _jsx("p", { className: "mt-xs text-center text-sm text-text-secondary-700 leading-relaxed", children: getDescription() }), _jsxs("div", { className: "mt-lg flex w-full select-none flex-col gap-y-2 rounded-xl border border-border-primary bg-bg-secondary px-5 py-4 text-sm", children: [_jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Current limit:' : 'Previous limit:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(currentLimit) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Requested limit:' : 'New limit:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(requestedLimit) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Increase amount:' : 'Decrease amount:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(changeAmount) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Status:' : 'Effective:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: isIncrease ? 'Pending Approval' : 'Immediately' })] })] }), _jsx("div", { className: "mt-3xl flex w-full flex-col gap-2 text-center lg:mt-4xl", children: _jsx(Button, { className: "w-full", onClick: handleConfirm, type: "button", children: "Confirm" }) })] })] }) })] }) }));
+        }, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto max-h-[90vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(AlertTriangleIcon, { className: "size-6 text-text-brand-700" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg text-text-primary-900 xl:mt-xl", children: title }), _jsx("p", { className: "mt-xs text-center text-sm text-text-secondary-700 leading-relaxed", children: getDescription() }), _jsxs("div", { className: "mt-lg flex w-full select-none flex-col gap-y-2 rounded-xl border border-border-primary bg-bg-secondary px-5 py-4 text-sm", children: [_jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Current limit:' : 'Previous limit:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(currentLimit) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Requested limit:' : 'New limit:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(requestedLimit) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Increase amount:' : 'Decrease amount:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(changeAmount) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Status:' : 'Effective:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: isIncrease ? 'Pending Approval' : 'Immediately' })] })] }), _jsx("div", { className: "mt-3xl flex w-full flex-col gap-2 text-center lg:mt-4xl", children: _jsx(Button, { className: "w-full", onClick: handleConfirm, type: "button", disabled: isPending, children: isPending ? 'Saving...' : 'Confirm' }) })] })] }) })] }) }));
 }

package/dist/components/BetDepositLimit/BetDepositLimitReachedModal.d.ts

@@ -0,0 +1,5 @@
+export interface BetDepositLimitReachedModalProps {
+    type: 'bet' | 'deposit';
+    period: 'daily' | 'monthly';
+}
+export declare function BetDepositLimitReachedModal({ type, period, }: BetDepositLimitReachedModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetDepositLimit/BetDepositLimitReachedModal.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { AlertTriangleIcon } from '../../icons/AlertTriangle.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function BetDepositLimitReachedModal({ type, period, }) {
+    const globalStore = useGlobalStore(useShallow((state) => ({
+        betDepositLimitReached: state.betDepositLimitReached,
+    })));
+    const title = type === 'bet' ? 'Bet Limit Reached' : 'Deposit Limit Reached';
+    const message = type === 'bet'
+        ? period === 'daily'
+            ? 'You’ve reached your daily bet limit, so this bet can’t be placed right now. You can place bets again once your limit resets tomorrow.'
+            : 'You’ve reached your monthly bet limit, so this bet can’t be placed right now. You can place bets again once your limit resets next month.'
+        : period === 'daily'
+            ? 'You’ve reached your daily bet limit, so this bet can’t be placed right now.\nYour daily limit resets tomorrow at 12:00 AM.'
+            : 'You’ve reached your monthly bet limit, so this bet can’t be placed right now.\nYour monthly limit resets on the 1st day of next month.';
+    return (_jsx(Dialog.Root, { open: globalStore.betDepositLimitReached.open, onOpenChange: (details) => {
+            globalStore.betDepositLimitReached.setOpen(details.open);
+        }, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto max-h-[90vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(AlertTriangleIcon, { className: "size-6 text-text-brand-700" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg text-text-primary-900 xl:mt-xl", children: title }), _jsx("p", { className: "mt-xs text-center text-sm text-text-secondary-700 leading-relaxed", children: message })] })] }) })] }) }));
+}

package/dist/components/BetDepositLimit/DepositLimitReached.js

@@ -6,7 +6,7 @@ export function DepositLimitReached({ type, period, responsibleGamingUrl = '/res
     const capType = type.charAt(0).toUpperCase() + type.slice(1);
     const title = `${capPeriod} ${capType} Limit Reached`;
     const resetMessage = period === 'daily'
-        ? "You've reached your daily deposit limit, so you can't deposit right now. Your limit will reset tomorrow at midnight."
-        : "You've reached your monthly deposit limit, so you can't deposit right now. Your limit will reset on the 1st day of next month.";
+        ? 'You’ve reached your daily deposit limit, so you can’t deposit right now. Your limit will reset tomorrow at 12:00 AM.'
+        : 'You’ve reached your monthly deposit limit, so you can’t deposit right now. Your limit will reset on the 1st day of next month.';
     return (_jsxs("div", { role: "alert", className: "flex items-start gap-md rounded-lg border border-utility-warning-200 bg-utility-warning-50 p-md", children: [_jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertTriangleIcon, { className: "size-4 text-text-featured-icon-light-warning" }) }), _jsxs("div", { className: "flex flex-col gap-xs", children: [_jsx("p", { className: "font-semibold text-sm text-text-primary-900", children: title }), _jsx("p", { className: "text-sm text-text-secondary-700 leading-relaxed", children: resetMessage }), _jsx("a", { href: `${responsibleGamingUrl}`, className: "mt-xs w-fit font-medium text-sm text-text-warning-primary-600 hover:underline", children: "View Limits" })] })] }));
 }

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo } from 'react';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
 import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMemberWalletQuery } from '../../client/hooks/useMemberWalletAccount.js';
 import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
 import { Wallet02Icon } from '../../icons/Wallet02Icon.js';
 import { XIcon } from '../../icons/XIcon.js';
@@ -24,14 +26,29 @@ export function DepositWithdrawal(props) {
     const bypassDepositKycCheck = useBypassKycChecker(props.bypassDomains) || props.bypassDepositKycCheck;
     const featureFlag = useFeatureFlag();
     const { hasPrivacyPolicyAndTermsOfUse = true, isOfWinSite = false, note = null, ...restProps } = props;
-    // TODO
-    // const betDepositLimitQuery = useBetDepositLimitQuery({ enabled: featureFlag.enabled });
+    const accountQuery = useAccountQuery({ enabled: featureFlag.enabled });
+    const memberWalletQuery = useMemberWalletQuery({
+        enabled: featureFlag.enabled,
+    });
     const derivedLimitReached = useMemo(() => {
         if (!featureFlag.enabled)
             return undefined;
-        //TODO Logic
-        return { type: 'deposit', period: 'daily' }; //temporary
-    }, [featureFlag.enabled]);
+        const account = accountQuery.data;
+        const wallet = memberWalletQuery.data;
+        const isDailyDepositLimitReached = account?.dailyDepositLimit != null &&
+            Number(wallet?.dailyTotalDeposit ?? 0) >=
+                Number(account.dailyDepositLimit);
+        const isMonthlyDepositLimitReached = account?.monthlyDepositLimit != null &&
+            Number(wallet?.monthlyTotalDeposit ?? 0) >=
+                Number(account.monthlyDepositLimit);
+        if (isDailyDepositLimitReached) {
+            return { type: 'deposit', period: 'daily' };
+        }
+        if (isMonthlyDepositLimitReached) {
+            return { type: 'deposit', period: 'monthly' };
+        }
+        return undefined;
+    }, [featureFlag.enabled, accountQuery.data, memberWalletQuery.data]);
     const mergedProps = {
         ...restProps,
         hasPrivacyPolicyAndTermsOfUse,

package/dist/components/GameLaunch/GameLaunchTrigger.js

@@ -4,8 +4,11 @@ import { ark } from '@ark-ui/react/factory';
 import { Capacitor } from '@capacitor/core';
 import { BiometricAuthError } from 'capacitor-native-biometric';
 import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useCreateGameSessionMutation } from '../../client/hooks/useCreateGameSessionMutation.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberWalletQuery } from '../../client/hooks/useMemberWalletAccount.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { getSession } from '../../client/services/getSession.js';
 import { signIn } from '../../client/services/signIn.js';
@@ -18,12 +21,24 @@ import { getSessionQueryKey } from '../../utils/queryKeys.js';
 import { LOCALSTORAGE_PUSH_NOTIFICATION_TOKEN_KEY } from '../PortalProvider/PushNotifications.js';
 export function GameLaunchTrigger(props) {
     const { game, bypassKycCheck: _bypassKycCheck, ...rest } = props;
+    const featureFlag = useFeatureFlag();
     const sessionQuery = useSessionQuery();
+    const accountQuery = useAccountQuery({ enabled: featureFlag.enabled });
+    const memberWalletQuery = useMemberWalletQuery({
+        enabled: featureFlag.enabled,
+    });
+    const account = accountQuery.data;
+    const wallet = memberWalletQuery.data;
+    const isDailyBetLimitReached = account?.dailyBetLimit != null &&
+        Number(wallet?.dailyTotalBet ?? 0) >= Number(account.dailyBetLimit);
+    const isMonthlyBetLimitReached = account?.monthlyBetLimit != null &&
+        Number(wallet?.monthlyTotalBet ?? 0) >= Number(account.monthlyBetLimit);
     const createGameSessionMutation = useCreateGameSessionMutation();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
         gameLaunch: ctx.gameLaunch,
         isNonRegulated: ctx.isNonRegulated,
+        betDepositLimitReached: ctx.betDepositLimitReached,
     })));
     const currentHour = new Date().getHours();
     const between3amAnd3pm = currentHour >= 15 || currentHour < 3;
@@ -139,6 +154,14 @@ export function GameLaunchTrigger(props) {
                 }
                 return props.onClick?.(e);
             }
+            //when member has reached his bet limit,
+            if (featureFlag.enabled &&
+                (isDailyBetLimitReached || isMonthlyBetLimitReached)) {
+                globalStore.betDepositLimitReached.setOpen(true);
+                globalStore.betDepositLimitReached.setType('bet');
+                globalStore.betDepositLimitReached.setPeriod(isMonthlyBetLimitReached ? 'monthly' : 'daily');
+                return;
+            }
             globalStore.gameLaunch.setDetails({
                 game: game,
                 status: 'LOADING',

package/dist/components/GamesSearch/GamesSearch.js

@@ -5,6 +5,7 @@ import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useDebounceValue } from 'usehooks-ts';
 import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
@@ -14,16 +15,19 @@ import { Combobox } from '../../ui/Combobox/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { Presence } from '../../ui/Presence/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
-import { sanitizeGamesSearch } from '../../utils/sanitizeGamesSearch.js';
+import { collapseGamesSearch, mergeUniqueById, normalizeGameName, sanitizeGamesSearch, } from '../../utils/sanitizeGamesSearch.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {
     const isBypass = useBypassKycChecker(props.bypassDomains);
     const [searchInput, setSearchInput] = useState('');
-    const sanitizedSearch = sanitizeGamesSearch(searchInput);
+    const [debouncedSearch] = useDebounceValue(searchInput, 300);
+    const sanitizedSearch = sanitizeGamesSearch(debouncedSearch);
+    const collapsedSearch = collapseGamesSearch(debouncedSearch);
+    const hasSpaces = collapsedSearch !== sanitizedSearch;
     const trimmedInputLength = searchInput.trim().length;
     const showMinLengthWarning = trimmedInputLength > 0 &&
         trimmedInputLength < 3 &&
-        sanitizedSearch.length < 3;
+        sanitizeGamesSearch(searchInput).length < 3;
     const gamesQuery = useGamesQuery({
         first: props.first ?? 18,
         filter: props.filter,
@@ -32,9 +36,27 @@ export function GamesSearch(props) {
     }, {
         enabled: sanitizedSearch.length >= 3,
     });
-    let games = gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
+    const collapsedGamesQuery = useGamesQuery({
+        first: props.first ?? 18,
+        filter: props.filter,
+        search: collapsedSearch,
+        sort: props.sort,
+    }, {
+        enabled: hasSpaces && collapsedSearch.length >= 3,
+    });
+    let games = mergeUniqueById(gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [], collapsedGamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? []);
     if (props.variant === '88play') {
-        games = games.filter((game) => game.name.toLowerCase().includes(sanitizedSearch.toLowerCase()));
+        const normalizedSearch = normalizeGameName(sanitizedSearch);
+        games = games.filter((game) => normalizeGameName(game.name).includes(normalizedSearch));
+    }
+    const hasNextPage = gamesQuery.hasNextPage || collapsedGamesQuery.hasNextPage;
+    function fetchNextPage() {
+        if (gamesQuery.hasNextPage) {
+            void gamesQuery.fetchNextPage();
+        }
+        else if (collapsedGamesQuery.hasNextPage) {
+            void collapsedGamesQuery.fetchNextPage();
+        }
     }
     const collection = createListCollection({
         items: games,
@@ -52,14 +74,14 @@ export function GamesSearch(props) {
                 placement: 'bottom',
             }, inputValue: searchInput, onInputValueChange: (details) => {
                 setSearchInput(details.inputValue);
-            }, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { className: "relative z-50", children: [_jsx(Combobox.Input, { placeholder: props.placeholder ?? 'Search' }), _jsx(Combobox.Context, { children: (api) => {
+            }, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { className: "relative ui-open:z-popover", children: [_jsx(Combobox.Input, { placeholder: props.placeholder ?? 'Search' }), _jsx(Combobox.Context, { children: (api) => {
                                 if (api.inputValue.length <= 0)
                                     return null;
                                 return (_jsx("span", { className: "cursor-pointer px-3.5 font-semibold text-text-secondary-700", onClick: () => {
                                         api.setInputValue('');
                                         api.focus();
                                     }, children: "Clear" }));
-                            } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { children: searchInput.trim().length > 0 && (_jsx(Combobox.Content, { className: "z-50 max-h-[33.25rem] overflow-y-auto p-0", children: showMinLengthWarning ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: twMerge('grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
+                            } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-backdrop bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { className: "!z-popover", children: searchInput.trim().length > 0 && (_jsx(Combobox.Content, { className: "max-h-[33.25rem] overflow-y-auto p-0", children: showMinLengthWarning ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: twMerge('grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
                                                                         api.setOpen(false);
                                                                     }, className: twMerge('md:hover:-translate-y-1 relative flex h-full w-full flex-col shadow-sm transition-transform duration-200', classNames.thumbnailRoot), children: [_jsx(Image, { src: game.name === 'Rainbow Ball'
                                                                                 ? RainbowballImg
@@ -67,7 +89,7 @@ export function GamesSearch(props) {
                                                                                     reference: game.reference,
                                                                                     provider: game.provider,
                                                                                     image: game.image,
-                                                                                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
+                                                                                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: fetchNextPage, children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
 }
 function Alert({ message }) {
     return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-lg border border-border-primary bg-bg-secondary shadow-xs", children: _jsx(SearchLgIcon, { className: "size-6 text-text-secondary-700" }) }), _jsx("p", { className: "mt-4 text-center text-text-secondary-700", children: message })] }));