@opexa/portal-components 0.1.85 → 0.1.87

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

@@ -41,7 +41,11 @@ export function ResponsibleGamingLimitsForm() {
     const openModal = useGlobalStore(useShallow((state) => state.betDepositLimit.openModal));
     const form = useForm({ defaultValues: {} });
     const accountQuery = useAccountQuery();
-    const memberWalletQuery = useMemberWalletQuery();
+    const memberWalletQuery = useMemberWalletQuery({
+        staleTime: 0,
+        refetchOnMount: 'always',
+        refetchOnWindowFocus: 'always',
+    });
     const [activeTab, setActiveTab] = useState('Deposit');
     const [optimisticOverrides, setOptimisticOverrides] = useState({});
     const account = accountQuery.data;
@@ -130,11 +134,15 @@ export function ResponsibleGamingLimitsForm() {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "m-5 mx-auto my-10 rounded-xl bg-bg-secondary px-4 py-6 lg:px-8 lg:py-10", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "font-bold text-3xl text-text-primary-brand lg:block", children: "Responsible Gaming" }), _jsxs("p", { className: "mt-1 text-sm text-text-disabled", 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: "mb-6 flex flex-col items-start justify-between gap-3 rounded-xl border border-border-dark bg-bg-primary px-4 py-4 shadow-xs sm:flex-row sm:items-center", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold text-sm text-text-primary-brand", children: "Learn More About Responsible Gaming" }), _jsx("p", { className: "mt-0.5 text-sm text-text-disabled", 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('inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-border-dark px-4 py-2.5 font-semibold text-sm text-text-primary-brand 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) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "m-5 mx-auto my-10 rounded-xl bg-bg-secondary px-4 py-6 lg:px-8 lg:py-10", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "font-bold text-3xl text-text-primary-brand lg:block", children: "Responsible Gaming" }), _jsxs("p", { className: "mt-1 text-sm text-text-disabled", 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: "mb-6 flex flex-col items-start justify-between gap-3 rounded-xl border border-border-dark bg-bg-primary px-4 py-4 shadow-xs sm:flex-row sm:items-center", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold text-sm text-text-primary-brand", children: "Learn More About Responsible Gaming" }), _jsx("p", { className: "mt-0.5 text-sm text-text-disabled", 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('inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-border-dark px-4 py-2.5 font-semibold text-sm text-text-primary-brand 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, {})] }) }), memberWalletQuery.isError && (_jsxs("div", { role: "alert", className: "mb-6 flex flex-col items-start gap-3 rounded-xl border border-border-dark bg-bg-primary p-4 text-sm text-text-disabled sm:flex-row sm:items-center sm:justify-between", children: [_jsx("p", { children: wallet
+                                    ? 'Unable to refresh usage. Showing last available totals, which may be out of date.'
+                                    : 'Unable to load usage. Please try again.' }), _jsx(Button, { size: "sm", variant: "solid", colorScheme: "primary", className: "w-fit shrink-0", disabled: memberWalletQuery.isFetching, onClick: () => void memberWalletQuery.refetch(), children: "Retry" })] })), _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 = getLimitKey(activeTab, card.period);
                             return (_jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-border-dark bg-bg-primary 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 font-medium text-xs', 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 font-medium text-[#e2aa28] text-xs", children: [_jsx(RefreshCcw01Icon, { className: "size-3" }), card.resetsLabel] })] }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-sm text-text-primary-brand", children: card.label }), _jsx("p", { className: "mt-1 font-bold text-2xl text-button-primary-bg", children: formatPeso(card.limit) }), _jsx("div", { className: "mt-1.5 h-[1.625rem]", children: card.pendingLimit != null && (_jsxs("div", { className: "py-1 font-medium text-button-primary-bg text-xs", children: ["Pending Limit: ", formatPeso(card.pendingLimit)] })) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between text-text-disabled 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: "h-2 w-full rounded-full bg-bg-dark", children: _jsx(Progress.Range, { className: twMerge('h-full rounded-full transition-all duration-700 ease-in-out', getProgressColor(pct)) }) }) }), _jsxs("p", { className: "mt-1.5 text-text-disabled text-xs", children: ["Remaining: ", formatPeso(card.limit - card.used)] })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-1 font-medium text-sm 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 font-medium text-text-primary-brand text-xs", 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) => saveLimit(card, values[key] ?? '')), children: [_jsxs(Field.Root, { className: "relative w-full", children: [_jsx("span", { className: "-translate-y-1/2 absolute top-1/2 left-2 shrink-0 text-sm text-text-disabled", 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));
+                                                    : '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 font-medium text-[#e2aa28] text-xs", children: [_jsx(RefreshCcw01Icon, { className: "size-3" }), card.resetsLabel] })] }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-sm text-text-primary-brand", children: card.label }), _jsx("p", { className: "mt-1 font-bold text-2xl text-button-primary-bg", children: formatPeso(card.limit) }), _jsx("div", { className: "mt-1.5 h-[1.625rem]", children: card.pendingLimit != null && (_jsxs("div", { className: "py-1 font-medium text-button-primary-bg text-xs", children: ["Pending Limit: ", formatPeso(card.pendingLimit)] })) })] }), wallet ? (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between text-text-disabled 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: "h-2 w-full rounded-full bg-bg-dark", children: _jsx(Progress.Range, { className: twMerge('h-full rounded-full transition-all duration-700 ease-in-out', getProgressColor(pct)) }) }) }), _jsxs("p", { className: "mt-1.5 text-text-disabled text-xs", children: ["Remaining: ", formatPeso(card.limit - card.used)] })] })) : (_jsx("p", { role: "status", className: "text-text-disabled text-xs", children: memberWalletQuery.isPending
+                                            ? 'Loading usage...'
+                                            : 'Usage unavailable.' })), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-1 font-medium text-sm 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 font-medium text-text-primary-brand text-xs", 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) => saveLimit(card, values[key] ?? '')), children: [_jsxs(Field.Root, { className: "relative w-full", children: [_jsx("span", { className: "-translate-y-1/2 absolute top-1/2 left-2 shrink-0 text-sm text-text-disabled", 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, { onSuccess: handleLimitSuccess })] }));
 }

package/dist/components/TermsOfUse/TermsOfUseV2.lazy.js

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { TERMS_OF_USE_PENDING_STORAGE_KEY } from '../../constants/index.js';
 import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
 import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
@@ -14,7 +13,6 @@ import { Portal } from '../../ui/Portal/index.js';
 import { openDisclaimerIfAllowed } from '../../utils/disclaimer-cooldown.js';
 export function TermsOfUseV2({ logo, content }) {
     const scrollableContentRef = useRef(null);
-    const sessionQuery = useSessionQuery();
     const [hasReachedBottom, setHasReachedBottom] = useState(false);
     const [isAtBottom, setIsAtBottom] = useState(false);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -42,8 +40,7 @@ export function TermsOfUseV2({ logo, content }) {
             setHasReachedBottom(false);
         }
     }, [isOpen]);
-    return (_jsx(Dialog.Root, { open: isOpen &&
-            sessionQuery.data?.status !== 'unauthenticated', onOpenChange: (details) => {
+    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: (details) => {
             globalStore.termsOfUse.setOpen(details.open);
             if (!details.open) {
                 globalStore.termsOfUse.setAccepted(true);

package/package.json

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