@opexa/portal-components 0.1.24 → 0.1.25

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.24",
+  "version": "0.1.25",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",