@opexa/portal-components 0.1.23 → 0.1.25

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

@@ -64,6 +64,19 @@ export interface HasPendingBonusStore {
     shouldShowWarning: boolean;
     setShouldShowWarning: (shouldShow: boolean) => void;
 }
+export type LimitType = 'bet' | 'deposit';
+export type LimitPeriod = 'daily' | 'monthly';
+export interface BetDepositLimitStore extends PopupStore {
+    type: LimitType;
+    setType: (type: LimitType) => void;
+    period: LimitPeriod;
+    setPeriod: (period: LimitPeriod) => void;
+    currentLimit: number;
+    setCurrentLimit: (limit: number) => void;
+    requestedLimit: number;
+    setRequestedLimit: (limit: number) => void;
+    openModal: (type: LimitType, period: LimitPeriod, currentLimit: number, requestedLimit: number) => void;
+}
 export interface GlobalStore {
     signUp: PopupStore;
     signIn: PopupStore;
@@ -89,6 +102,7 @@ export interface GlobalStore {
     onboarding: OnboardingStore;
     responsibleGamingReminder: ResponsibleGamingReminderStore;
     pendingBonus: HasPendingBonusStore;
+    betDepositLimit: BetDepositLimitStore;
     kycVerificationStatus: PopupStore;
     kycAccountVerificationRequired: PopupStore;
     bankInformationDetails: PopupStore;
@@ -123,4 +137,12 @@ export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<Omit<i
         } | undefined): () => void;
     };
 }>;
+export declare const betDepositLimitStore: {
+    isOpen: boolean;
+    type: LimitType;
+    period: LimitPeriod;
+    currentLimit: number;
+    requestedLimit: number;
+    openModal(newType: LimitType, newPeriod: LimitPeriod, currentLimit: number, requestedLimit: number): void;
+};
 export {};

package/dist/client/hooks/useGlobalStore.js

@@ -504,6 +504,68 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
         })),
         '~touched': false,
     },
+    betDepositLimit: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                betDepositLimit: {
+                    ...prev.betDepositLimit,
+                    open,
+                    '~touched': true,
+                },
+            }));
+        },
+        '~touched': false,
+        type: 'bet',
+        setType(type) {
+            set((prev) => ({
+                betDepositLimit: {
+                    ...prev.betDepositLimit,
+                    type,
+                },
+            }));
+        },
+        period: 'daily',
+        setPeriod(period) {
+            set((prev) => ({
+                betDepositLimit: {
+                    ...prev.betDepositLimit,
+                    period,
+                },
+            }));
+        },
+        currentLimit: 0,
+        setCurrentLimit(currentLimit) {
+            set((prev) => ({
+                betDepositLimit: {
+                    ...prev.betDepositLimit,
+                    currentLimit,
+                },
+            }));
+        },
+        requestedLimit: 0,
+        setRequestedLimit(requestedLimit) {
+            set((prev) => ({
+                betDepositLimit: {
+                    ...prev.betDepositLimit,
+                    requestedLimit,
+                },
+            }));
+        },
+        openModal(type, period, currentLimit, requestedLimit) {
+            set((prev) => ({
+                betDepositLimit: {
+                    ...prev.betDepositLimit,
+                    type,
+                    period,
+                    currentLimit,
+                    requestedLimit,
+                    open: true,
+                    '~touched': true,
+                },
+            }));
+        },
+    },
     isNonRegulated: false,
     setIsNonRegulated: (isNonRegulated) => set((state) => ({
         ...state,
@@ -598,6 +660,15 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
                 '~touched': false,
                 shouldShowWarning: false,
             },
+            betDepositLimit: {
+                ...state.betDepositLimit,
+                open: false,
+                '~touched': false,
+                type: 'bet',
+                period: 'daily',
+                currentLimit: 0,
+                requestedLimit: 0,
+            },
             kycVerificationStatus: {
                 ...state.kycVerificationStatus,
                 open: false,
@@ -617,3 +688,40 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
         }));
     },
 }))));
+export const betDepositLimitStore = {
+    get isOpen() {
+        return useGlobalStore.getState().betDepositLimit.open;
+    },
+    set isOpen(value) {
+        useGlobalStore.getState().betDepositLimit.setOpen(value);
+    },
+    get type() {
+        return useGlobalStore.getState().betDepositLimit.type;
+    },
+    set type(value) {
+        useGlobalStore.getState().betDepositLimit.setType(value);
+    },
+    get period() {
+        return useGlobalStore.getState().betDepositLimit.period;
+    },
+    set period(value) {
+        useGlobalStore.getState().betDepositLimit.setPeriod(value);
+    },
+    get currentLimit() {
+        return useGlobalStore.getState().betDepositLimit.currentLimit;
+    },
+    set currentLimit(value) {
+        useGlobalStore.getState().betDepositLimit.setCurrentLimit(value);
+    },
+    get requestedLimit() {
+        return useGlobalStore.getState().betDepositLimit.requestedLimit;
+    },
+    set requestedLimit(value) {
+        useGlobalStore.getState().betDepositLimit.setRequestedLimit(value);
+    },
+    openModal(newType, newPeriod, currentLimit, requestedLimit) {
+        useGlobalStore
+            .getState()
+            .betDepositLimit.openModal(newType, newPeriod, currentLimit, requestedLimit);
+    },
+};

package/dist/components/BetDepositLimit/BetDepositLimitModal.js

@@ -7,16 +7,16 @@ 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 { useBetDepositLimitStore } from './betDepositLimitStore.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 export function BetDepositLimitModal({ onConfirm }) {
     const { enabled } = useFeatureFlag();
-    const { isOpen, type, period, currentLimit, requestedLimit, setIsOpen } = useBetDepositLimitStore(useShallow((state) => ({
-        isOpen: state.isOpen,
-        type: state.type,
-        period: state.period,
-        currentLimit: state.currentLimit,
-        requestedLimit: state.requestedLimit,
-        setIsOpen: state.setIsOpen,
+    const { open, type, period, currentLimit, requestedLimit, setOpen } = useGlobalStore(useShallow((state) => ({
+        open: state.betDepositLimit.open,
+        type: state.betDepositLimit.type,
+        period: state.betDepositLimit.period,
+        currentLimit: state.betDepositLimit.currentLimit,
+        requestedLimit: state.betDepositLimit.requestedLimit,
+        setOpen: state.betDepositLimit.setOpen,
     })));
     const isIncrease = requestedLimit > currentLimit;
     const changeAmount = Math.abs(requestedLimit - currentLimit);
@@ -38,12 +38,12 @@ export function BetDepositLimitModal({ onConfirm }) {
         return `Your ${period} ${type} limit has been lowered and is now active.`;
     };
     const handleConfirm = () => {
-        setIsOpen(false);
+        setOpen(false);
         if (onConfirm) {
             onConfirm();
         }
     };
-    return (_jsx(Dialog.Root, { open: isOpen && enabled, onOpenChange: (details) => {
-            setIsOpen(details.open);
+    return (_jsx(Dialog.Root, { open: open && enabled, 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" }) })] })] }) })] }) }));
 }

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

@@ -1,4 +1,4 @@
-import type { LimitPeriod, LimitType } from './betDepositLimitStore';
+import type { LimitPeriod, LimitType } from '../../client/hooks/useGlobalStore';
 export interface DepositLimitReachedProps {
     type: LimitType;
     period: LimitPeriod;

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

@@ -1,3 +1,3 @@
 export * from './BetDepositLimitModal';
-export * from './betDepositLimitStore';
 export * from './DepositLimitReached';
+export { betDepositLimitStore, type BetDepositLimitStore, type LimitPeriod, type LimitType, } from '../../client/hooks/useGlobalStore';

package/dist/components/BetDepositLimit/index.js

@@ -1,3 +1,3 @@
 export * from './BetDepositLimitModal.js';
-export * from './betDepositLimitStore.js';
 export * from './DepositLimitReached.js';
+export { betDepositLimitStore, } from '../../client/hooks/useGlobalStore.js';

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/AurixPayQRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const AurixPayQRPHDepositContext: (props: {
     value: {
-        status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
+        status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const AurixPayQRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useAurixPayQRPHDepositContext: () => {
-    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/useAurixPayQRPHDeposit.d.ts

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useAurixPayQRPHDeposit(): {
-    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/DepositWithdrawalContext.d.ts

@@ -1,4 +1,4 @@
-import type { LimitPeriod, LimitType } from '../BetDepositLimit/betDepositLimitStore';
+import type { LimitPeriod, LimitType } from '../../client/hooks/useGlobalStore';
 import type { DepositWithdrawalProps } from './DepositWithdrawal.lazy';
 export interface DepositWithdrawalContextType extends DepositWithdrawalProps {
     /**

package/dist/components/ResponsibleGamingLimits/ResponsibleGamingLimits.d.ts

@@ -0,0 +1 @@
+export declare function ResponsibleGamingLimits(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/components/ResponsibleGamingLimits/ResponsibleGamingLimits.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+const Component = dynamic(() => import('./ResponsibleGamingLimitsForm.lazy.js').then((m) => m.ResponsibleGamingLimitsForm), {
+    ssr: false,
+    loading: () => null,
+});
+export function ResponsibleGamingLimits(props) {
+    return _jsx(Component, { ...props });
+}

package/dist/components/ResponsibleGamingLimits/ResponsibleGamingLimits.lazy.d.ts

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

package/dist/components/ResponsibleGamingLimits/ResponsibleGamingLimits.lazy.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tabs } from '../../ui/Tabs/index.js';
+import Link from 'next/link';
+import { useCallback, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { BetDepositLimitModal } from '@opexa/portal-components/BetDepositLimit';
+import { RefreshCcw01Icon } from '../../icons/RefreshCcw01Icon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { Tooltip } from '../../ui/Tooltip/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { Button } from '../../ui/Button/index.js';
+const INITIAL_BET_LIMITS = [
+    {
+        period: 'daily',
+        label: 'Daily Bet Limit',
+        limit: 5000,
+        used: 3000,
+        resetsLabel: 'Resets daily',
+        active: true,
+    },
+    {
+        period: 'monthly',
+        label: 'Monthly Bet Limit',
+        limit: 50000,
+        used: 0,
+        resetsLabel: 'Resets May 30, 2026',
+        active: false,
+    },
+];
+const INITIAL_DEPOSIT_LIMITS = [
+    {
+        period: 'daily',
+        label: 'Daily Deposit Limit',
+        limit: 10000,
+        used: 0,
+        resetsLabel: 'Resets daily',
+        active: false,
+    },
+    {
+        period: 'monthly',
+        label: 'Monthly Deposit Limit',
+        limit: 100000,
+        used: 0,
+        resetsLabel: 'Resets May 30, 2026',
+        active: false,
+    },
+];
+function getNewLimitKey(tab, period) {
+    return `${tab}-${period}`;
+}
+function formatPeso(amount) {
+    return `₱${amount.toLocaleString('en-PH')}`;
+}
+function getUsedPercent(used, limit) {
+    if (limit === 0)
+        return 0;
+    return Math.min(Math.round((used / limit) * 100), 100);
+}
+function getProgressColor(pct) {
+    if (pct >= 80)
+        return 'bg-[#D92D20]';
+    if (pct >= 50)
+        return 'bg-[#F79009]';
+    return 'bg-[#FAC515]';
+}
+function tabToLimitType(tab) {
+    return tab === 'Bet' ? 'bet' : 'deposit';
+}
+export function ResponsibleGamingLimits() {
+    const openModal = useGlobalStore(useShallow((state) => state.betDepositLimit.openModal));
+    const form = useForm({
+        defaultValues: {},
+    });
+    const [activeTab, setActiveTab] = useState('Deposit');
+    const [betLimits, setBetLimits] = useState(INITIAL_BET_LIMITS);
+    const [depositLimits, setDepositLimits] = useState(INITIAL_DEPOSIT_LIMITS);
+    const limits = activeTab === 'Bet' ? betLimits : depositLimits;
+    const applyConfirmedLimit = useCallback(() => {
+        const { type, period, requestedLimit } = useGlobalStore.getState().betDepositLimit;
+        const updateLimits = (cards) => cards.map((card) => card.period === period ? { ...card, limit: requestedLimit } : card);
+        if (type === 'bet') {
+            setBetLimits(updateLimits);
+        }
+        else {
+            setDepositLimits(updateLimits);
+        }
+    }, []);
+    const saveLimit = useCallback((card, inputValue) => {
+        const key = getNewLimitKey(activeTab, card.period);
+        const parsed = parseFloat(String(inputValue).replace(/[^0-9.]/g, ''));
+        if (Number.isNaN(parsed) || parsed <= 0) {
+            return;
+        }
+        openModal(tabToLimitType(activeTab), card.period, card.limit, parsed);
+        form.setValue(key, '');
+    }, [activeTab, form, openModal]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-bg-secondary m-5 mx-auto my-10 rounded-xl px-4 py-6 lg:px-8 lg:py-10", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-text-primary-brand text-3xl font-bold lg:block", children: "Responsible Gaming" }), _jsxs("p", { className: "text-text-disabled mt-1 text-sm", children: ["Set limits for your gaming activity, including how much you can bet or deposit.", _jsx("br", { className: "hidden sm:inline" }), "These limits help you stay within the boundaries you choose."] })] }), _jsxs("div", { className: "bg-bg-primary border-border-dark mb-6 flex flex-col items-start justify-between gap-3 rounded-xl border px-4 py-4 shadow-xs sm:flex-row sm:items-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: "Learn More About Responsible Gaming" }), _jsx("p", { className: "text-text-disabled mt-0.5 text-sm", children: "Find helpful tips, safety reminders, and support resources to help you stay informed and in control while playing." })] }), _jsx(Link, { href: "/responsible-gaming", className: twMerge('border-border-dark text-text-primary-brand inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border px-4 py-2.5 text-sm font-semibold shadow-xs transition-colors'), children: "Visit Responsible Gaming" })] }), _jsx(Tabs.Root, { value: activeTab, onValueChange: (details) => setActiveTab(details.value), className: "mb-6 w-fit", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "Deposit", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "Bet", children: "Bet" }), _jsx(Tabs.Indicator, {})] }) }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: limits.map((card) => {
+                            const pct = getUsedPercent(card.used, card.limit);
+                            const key = getNewLimitKey(activeTab, card.period);
+                            return (_jsxs("div", { className: "border-border-dark bg-bg-primary flex flex-col gap-4 rounded-xl border p-5 shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: twMerge('inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium', card.active
+                                                    ? 'border border-[#085D3A] bg-[#053321] text-[#75E0A7]'
+                                                    : 'border border-[#912018] bg-[#55160c] text-[#FDA29B]'), children: [_jsx("span", { className: twMerge('size-1.5 rounded-full', card.active ? 'bg-[#17B26A]' : 'bg-[#F04438]') }), card.active ? 'Active' : 'Inactive'] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-[#b0841f] bg-[#191304] px-2.5 py-1 text-xs font-medium text-[#e2aa28]", children: [_jsx(RefreshCcw01Icon, { className: "size-3" }), card.resetsLabel] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-text-primary-brand", children: card.label }), _jsx("p", { className: "mt-1 text-2xl font-bold text-button-primary-bg", children: formatPeso(card.limit) })] }), _jsxs("div", { children: [_jsxs("div", { className: "text-text-disabled flex items-center justify-between text-xs", children: [_jsxs("span", { children: [formatPeso(card.used), " used"] }), _jsxs("span", { children: [pct, "%"] })] }), _jsx(Progress.Root, { value: pct, max: 100, variant: "unstyled", className: "relative mt-1.5 h-2 w-full", children: _jsx(Progress.Track, { className: "bg-bg-dark h-2 w-full rounded-full", children: _jsx(Progress.Range, { className: twMerge('h-full rounded-full transition-all duration-700 ease-in-out', getProgressColor(pct)) }) }) }), _jsxs("p", { className: "text-text-disabled mt-1.5 text-xs", children: ["Remaining: ", formatPeso(card.limit - card.used)] })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-1 text-sm font-medium text-text-primary-brand", children: [_jsx("span", { children: "Set new limit" }), _jsxs(Tooltip.Root, { openDelay: 0, closeDelay: 100, children: [_jsx(Tooltip.Trigger, { type: "button", className: "inline-flex", "aria-label": "Limit change information", children: _jsx(InfoCircleIcon, { className: "size-4 text-text-disabled" }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { className: "max-w-64 rounded-lg bg-[#0C111D] px-2.5 py-2 text-xs font-medium text-text-primary-brand", children: [_jsx(Tooltip.Arrow, {}), "Enter a new limit amount. Limits can only be lowered immediately. Limit increases take 24 hours to apply."] }) })] })] }), _jsxs("form", { className: "flex w-full items-center gap-2", onSubmit: form.handleSubmit((values) => {
+                                                    console.log({
+                                                        component: 'ResponsibleGamingLimits',
+                                                        activeTab,
+                                                        card,
+                                                        values,
+                                                    });
+                                                    saveLimit(card, values[key] ?? '');
+                                                }), children: [_jsxs(Field.Root, { className: "relative w-full", children: [_jsx("span", { className: "text-text-disabled absolute top-1/2 left-2 shrink-0 -translate-y-1/2 text-sm", children: "\u20B1" }), _jsx(Field.Input, { className: "pl-6", type: "number", min: 0, placeholder: "0", ...form.register(key) })] }), _jsx(Button, { size: "md", variant: "solid", colorScheme: "primary", type: "submit", className: "w-fit shrink-0", children: "Save" })] })] })] }, card.period));
+                        }) })] }), _jsx(BetDepositLimitModal, { onConfirm: applyConfirmedLimit })] }));
+}

package/dist/components/ResponsibleGamingLimits/ResponsibleGamingLimitsForm.lazy.d.ts

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

package/dist/components/ResponsibleGamingLimits/ResponsibleGamingLimitsForm.lazy.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tabs } from '../../ui/Tabs/index.js';
+import Link from 'next/link';
+import { useCallback, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { BetDepositLimitModal, } from '../BetDepositLimit/index.js';
+import { RefreshCcw01Icon } from '../../icons/RefreshCcw01Icon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { Tooltip } from '../../ui/Tooltip/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { Button } from '../../ui/Button/index.js';
+const INITIAL_BET_LIMITS = [
+    {
+        period: 'daily',
+        label: 'Daily Bet Limit',
+        limit: 5000,
+        used: 3000,
+        resetsLabel: 'Resets daily',
+        active: true,
+    },
+    {
+        period: 'monthly',
+        label: 'Monthly Bet Limit',
+        limit: 50000,
+        used: 0,
+        resetsLabel: 'Resets May 30, 2026',
+        active: false,
+    },
+];
+const INITIAL_DEPOSIT_LIMITS = [
+    {
+        period: 'daily',
+        label: 'Daily Deposit Limit',
+        limit: 10000,
+        used: 0,
+        resetsLabel: 'Resets daily',
+        active: false,
+    },
+    {
+        period: 'monthly',
+        label: 'Monthly Deposit Limit',
+        limit: 100000,
+        used: 0,
+        resetsLabel: 'Resets May 30, 2026',
+        active: false,
+    },
+];
+function getNewLimitKey(tab, period) {
+    return `${tab}-${period}`;
+}
+function formatPeso(amount) {
+    return `₱${amount.toLocaleString('en-PH')}`;
+}
+function getUsedPercent(used, limit) {
+    if (limit === 0)
+        return 0;
+    return Math.min(Math.round((used / limit) * 100), 100);
+}
+function getProgressColor(pct) {
+    if (pct >= 80)
+        return 'bg-[#D92D20]';
+    if (pct >= 50)
+        return 'bg-[#F79009]';
+    return 'bg-[#FAC515]';
+}
+function tabToLimitType(tab) {
+    return tab === 'Bet' ? 'bet' : 'deposit';
+}
+export function ResponsibleGamingLimitsForm() {
+    const openModal = useGlobalStore(useShallow((state) => state.betDepositLimit.openModal));
+    const form = useForm({
+        defaultValues: {},
+    });
+    const [activeTab, setActiveTab] = useState('Deposit');
+    const [betLimits, setBetLimits] = useState(INITIAL_BET_LIMITS);
+    const [depositLimits, setDepositLimits] = useState(INITIAL_DEPOSIT_LIMITS);
+    const limits = activeTab === 'Bet' ? betLimits : depositLimits;
+    const applyConfirmedLimit = useCallback(() => {
+        const { type, period, requestedLimit } = useGlobalStore.getState().betDepositLimit;
+        const updateLimits = (cards) => cards.map((card) => card.period === period ? { ...card, limit: requestedLimit } : card);
+        if (type === 'bet') {
+            setBetLimits(updateLimits);
+        }
+        else {
+            setDepositLimits(updateLimits);
+        }
+    }, []);
+    const saveLimit = useCallback((card, inputValue) => {
+        const key = getNewLimitKey(activeTab, card.period);
+        const parsed = parseFloat(String(inputValue).replace(/[^0-9.]/g, ''));
+        if (Number.isNaN(parsed) || parsed <= 0) {
+            return;
+        }
+        openModal(tabToLimitType(activeTab), card.period, card.limit, parsed);
+        form.setValue(key, '');
+    }, [activeTab, form, openModal]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-bg-secondary m-5 mx-auto my-10 rounded-xl px-4 py-6 lg:px-8 lg:py-10", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-text-primary-brand text-3xl font-bold lg:block", children: "Responsible Gaming" }), _jsxs("p", { className: "text-text-disabled mt-1 text-sm", children: ["Set limits for your gaming activity, including how much you can bet or deposit.", _jsx("br", { className: "hidden sm:inline" }), "These limits help you stay within the boundaries you choose."] })] }), _jsxs("div", { className: "bg-bg-primary border-border-dark mb-6 flex flex-col items-start justify-between gap-3 rounded-xl border px-4 py-4 shadow-xs sm:flex-row sm:items-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: "Learn More About Responsible Gaming" }), _jsx("p", { className: "text-text-disabled mt-0.5 text-sm", children: "Find helpful tips, safety reminders, and support resources to help you stay informed and in control while playing." })] }), _jsx(Link, { href: "/responsible-gaming", className: twMerge('border-border-dark text-text-primary-brand inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border px-4 py-2.5 text-sm font-semibold shadow-xs transition-colors'), children: "Visit Responsible Gaming" })] }), _jsx(Tabs.Root, { value: activeTab, onValueChange: (details) => setActiveTab(details.value), className: "mb-6 w-fit", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "Deposit", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "Bet", children: "Bet" }), _jsx(Tabs.Indicator, {})] }) }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: limits.map((card) => {
+                            const pct = getUsedPercent(card.used, card.limit);
+                            const key = getNewLimitKey(activeTab, card.period);
+                            return (_jsxs("div", { className: "border-border-dark bg-bg-primary flex flex-col gap-4 rounded-xl border p-5 shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: twMerge('inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium', card.active
+                                                    ? 'border border-[#085D3A] bg-[#053321] text-[#75E0A7]'
+                                                    : 'border border-[#912018] bg-[#55160c] text-[#FDA29B]'), children: [_jsx("span", { className: twMerge('size-1.5 rounded-full', card.active ? 'bg-[#17B26A]' : 'bg-[#F04438]') }), card.active ? 'Active' : 'Inactive'] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-[#b0841f] bg-[#191304] px-2.5 py-1 text-xs font-medium text-[#e2aa28]", children: [_jsx(RefreshCcw01Icon, { className: "size-3" }), card.resetsLabel] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-text-primary-brand", children: card.label }), _jsx("p", { className: "mt-1 text-2xl font-bold text-button-primary-bg", children: formatPeso(card.limit) })] }), _jsxs("div", { children: [_jsxs("div", { className: "text-text-disabled flex items-center justify-between text-xs", children: [_jsxs("span", { children: [formatPeso(card.used), " used"] }), _jsxs("span", { children: [pct, "%"] })] }), _jsx(Progress.Root, { value: pct, max: 100, variant: "unstyled", className: "relative mt-1.5 h-2 w-full", children: _jsx(Progress.Track, { className: "bg-bg-dark h-2 w-full rounded-full", children: _jsx(Progress.Range, { className: twMerge('h-full rounded-full transition-all duration-700 ease-in-out', getProgressColor(pct)) }) }) }), _jsxs("p", { className: "text-text-disabled mt-1.5 text-xs", children: ["Remaining: ", formatPeso(card.limit - card.used)] })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-1 text-sm font-medium text-text-primary-brand", children: [_jsx("span", { children: "Set new limit" }), _jsxs(Tooltip.Root, { openDelay: 0, closeDelay: 100, children: [_jsx(Tooltip.Trigger, { type: "button", className: "inline-flex", "aria-label": "Limit change information", children: _jsx(InfoCircleIcon, { className: "size-4 text-text-disabled" }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { className: "max-w-64 rounded-lg bg-[#0C111D] px-2.5 py-2 text-xs font-medium text-text-primary-brand", children: [_jsx(Tooltip.Arrow, {}), "Enter a new limit amount. Limits can only be lowered immediately. Limit increases take 24 hours to apply."] }) })] })] }), _jsxs("form", { className: "flex w-full items-center gap-2", onSubmit: form.handleSubmit((values) => {
+                                                    console.log({
+                                                        component: 'ResponsibleGamingLimits',
+                                                        activeTab,
+                                                        card,
+                                                        values,
+                                                    });
+                                                    saveLimit(card, values[key] ?? '');
+                                                }), children: [_jsxs(Field.Root, { className: "relative w-full", children: [_jsx("span", { className: "text-text-disabled absolute top-1/2 left-2 shrink-0 -translate-y-1/2 text-sm", children: "\u20B1" }), _jsx(Field.Input, { className: "pl-6", type: "number", min: 0, placeholder: "0", ...form.register(key) })] }), _jsx(Button, { size: "md", variant: "solid", colorScheme: "primary", type: "submit", className: "w-fit shrink-0", children: "Save" })] })] })] }, card.period));
+                        }) })] }), _jsx(BetDepositLimitModal, { onConfirm: applyConfirmedLimit })] }));
+}

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

@@ -0,0 +1 @@
+export * from "./ResponsibleGamingLimits";

package/dist/components/ResponsibleGamingLimits/index.js

@@ -0,0 +1 @@
+export * from "./ResponsibleGamingLimits.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",