@opexa/portal-components 0.0.1062 → 0.0.1063
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client/hooks/useTournamentsQuery.js +26 -4
- package/dist/components/ResponsibleGaming/ResponsibleGamingV2.lazy.js +13 -6
- package/dist/components/ResponsibleGaming/ResponsibleGamingV3.lazy.js +19 -12
- package/dist/components/TermsOfUse/TermsOfUseV2.lazy.js +10 -6
- package/dist/components/TermsOfUse/TermsOfUseV3.lazy.js +10 -6
- package/dist/components/TransactionRecords/WithdrawalRecordsTable.js +1 -1
- package/package.json +1 -1
|
@@ -1,12 +1,34 @@
|
|
|
1
|
-
import { useInfiniteQuery } from '@tanstack/react-query';
|
|
1
|
+
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
|
2
|
+
import { useEffect } from 'react';
|
|
2
3
|
import { getTournaments } from '../../services/report.js';
|
|
3
|
-
import {
|
|
4
|
+
import { getQueryClient } from '../../utils/getQueryClient.js';
|
|
5
|
+
import { getTournamentsQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
|
|
6
|
+
import { getSession } from '../services/getSession.js';
|
|
7
|
+
import { useSessionQuery } from './useSessionQuery.js';
|
|
4
8
|
export const useTournamentsQuery = (input, config) => {
|
|
9
|
+
const sessionQuery = useSessionQuery();
|
|
10
|
+
const queryClient = useQueryClient();
|
|
11
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: intentionally only re-runs on session status change; input is stable per call site and queryClient is stable from useQueryClient
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (sessionQuery.data?.status === 'authenticated') {
|
|
14
|
+
queryClient.invalidateQueries({
|
|
15
|
+
queryKey: getTournamentsQueryKey(input),
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}, [sessionQuery.data?.status]);
|
|
5
19
|
const query = useInfiniteQuery({
|
|
20
|
+
staleTime: 0,
|
|
6
21
|
...config,
|
|
7
22
|
queryKey: getTournamentsQueryKey(input),
|
|
8
|
-
queryFn: ({ pageParam, signal }) => {
|
|
9
|
-
|
|
23
|
+
queryFn: async ({ pageParam, signal }) => {
|
|
24
|
+
const session = await getQueryClient().fetchQuery({
|
|
25
|
+
queryKey: getSessionQueryKey(),
|
|
26
|
+
queryFn: async () => getSession(),
|
|
27
|
+
});
|
|
28
|
+
const authHeader = session.status === 'authenticated'
|
|
29
|
+
? { Authorization: `Bearer ${session.token}` }
|
|
30
|
+
: {};
|
|
31
|
+
return getTournaments({ ...input, after: pageParam }, { signal, headers: authHeader });
|
|
10
32
|
},
|
|
11
33
|
initialPageParam: undefined,
|
|
12
34
|
getNextPageParam(lastPage) {
|
|
@@ -20,16 +20,23 @@ export function ResponsibleGamingV2(props) {
|
|
|
20
20
|
responsibleGaming: ctx.responsibleGaming,
|
|
21
21
|
termsAndConditions: ctx.termsAndConditions,
|
|
22
22
|
})));
|
|
23
|
+
const isOpen = globalStore.responsibleGaming.open;
|
|
23
24
|
useEffect(() => {
|
|
24
|
-
if (scrollableContentRef.current) {
|
|
25
|
+
if (isOpen && scrollableContentRef.current) {
|
|
25
26
|
const { scrollHeight, clientHeight } = scrollableContentRef.current;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
if (clientHeight > 0) {
|
|
28
|
+
const isScrollable = scrollHeight > clientHeight;
|
|
29
|
+
const atBottom = scrollHeight - scrollableContentRef.current.scrollTop <=
|
|
30
|
+
clientHeight + 1;
|
|
31
|
+
setIsAtBottom(!isScrollable || atBottom);
|
|
32
|
+
setHasReachedBottom(!isScrollable || atBottom);
|
|
30
33
|
}
|
|
31
34
|
}
|
|
32
|
-
|
|
35
|
+
if (!isOpen) {
|
|
36
|
+
setIsAtBottom(false);
|
|
37
|
+
setHasReachedBottom(false);
|
|
38
|
+
}
|
|
39
|
+
}, [isOpen]);
|
|
33
40
|
return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
|
|
34
41
|
globalStore.responsibleGaming.setOpen(details.open);
|
|
35
42
|
if (!details.open) {
|
|
@@ -13,7 +13,7 @@ import { Portal } from '../../ui/Portal/index.js';
|
|
|
13
13
|
export function ResponsibleGamingV3(props) {
|
|
14
14
|
const [hasReachedBottom, setHasReachedBottom] = useState(false);
|
|
15
15
|
const [isAtBottom, setIsAtBottom] = useState(false);
|
|
16
|
-
const
|
|
16
|
+
const scrollableContent = useRef(null);
|
|
17
17
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
18
18
|
signIn: ctx.signIn,
|
|
19
19
|
signUp: ctx.signUp,
|
|
@@ -21,16 +21,23 @@ export function ResponsibleGamingV3(props) {
|
|
|
21
21
|
responsibleGaming: ctx.responsibleGaming,
|
|
22
22
|
termsAndConditions: ctx.termsAndConditions,
|
|
23
23
|
})));
|
|
24
|
+
const isOpen = globalStore.responsibleGaming.open;
|
|
24
25
|
useEffect(() => {
|
|
25
|
-
if (
|
|
26
|
-
const { scrollHeight, clientHeight } =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
if (isOpen && scrollableContent.current) {
|
|
27
|
+
const { scrollHeight, clientHeight } = scrollableContent.current;
|
|
28
|
+
if (clientHeight > 0) {
|
|
29
|
+
const isScrollable = scrollHeight > clientHeight;
|
|
30
|
+
const atBottom = scrollHeight - scrollableContent.current.scrollTop <=
|
|
31
|
+
clientHeight + 1;
|
|
32
|
+
setIsAtBottom(!isScrollable || atBottom);
|
|
33
|
+
setHasReachedBottom(!isScrollable || atBottom);
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
|
-
|
|
36
|
+
if (!isOpen) {
|
|
37
|
+
setIsAtBottom(false);
|
|
38
|
+
setHasReachedBottom(false);
|
|
39
|
+
}
|
|
40
|
+
}, [isOpen]);
|
|
34
41
|
return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
|
|
35
42
|
globalStore.responsibleGaming.setOpen(details.open);
|
|
36
43
|
if (!details.open) {
|
|
@@ -48,7 +55,7 @@ export function ResponsibleGamingV3(props) {
|
|
|
48
55
|
globalStore.disclaimer.setOpen(true);
|
|
49
56
|
}
|
|
50
57
|
globalStore.responsibleGaming.setNext(null);
|
|
51
|
-
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: decorativebackground, alt: "", width: 200, height: 200, className: "absolute top-0 left-0" }), _jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Responsible Gaming Guidelines" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref:
|
|
58
|
+
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: decorativebackground, alt: "", width: 200, height: 200, className: "absolute top-0 left-0" }), _jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Responsible Gaming Guidelines" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContent, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
|
|
52
59
|
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
|
53
60
|
const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
|
|
54
61
|
setIsAtBottom(atBottom);
|
|
@@ -58,11 +65,11 @@ export function ResponsibleGamingV3(props) {
|
|
|
58
65
|
}, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: props.content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
|
|
59
66
|
? 'border border-[#CECFD2] bg-bg-secondary'
|
|
60
67
|
: 'bg-bg-brand-secondary'), onClick: () => {
|
|
61
|
-
if (
|
|
62
|
-
|
|
68
|
+
if (scrollableContent.current) {
|
|
69
|
+
scrollableContent.current.scrollTo({
|
|
63
70
|
top: isAtBottom
|
|
64
71
|
? 0
|
|
65
|
-
:
|
|
72
|
+
: scrollableContent.current.scrollHeight,
|
|
66
73
|
behavior: 'smooth',
|
|
67
74
|
});
|
|
68
75
|
}
|
|
@@ -26,11 +26,13 @@ export function TermsOfUseV2({ logo, content }) {
|
|
|
26
26
|
useEffect(() => {
|
|
27
27
|
if (isOpen && scrollableContentRef.current) {
|
|
28
28
|
const { scrollHeight, clientHeight } = scrollableContentRef.current;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
if (clientHeight > 0) {
|
|
30
|
+
const isScrollable = scrollHeight > clientHeight;
|
|
31
|
+
const atBottom = scrollHeight - scrollableContentRef.current.scrollTop <=
|
|
32
|
+
clientHeight + 1;
|
|
33
|
+
setIsAtBottom(!isScrollable || atBottom);
|
|
34
|
+
setHasReachedBottom(!isScrollable || atBottom);
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
37
|
if (!isOpen) {
|
|
36
38
|
setIsAtBottom(false);
|
|
@@ -57,7 +59,9 @@ export function TermsOfUseV2({ logo, content }) {
|
|
|
57
59
|
globalStore.termsOfUse.setNext(null);
|
|
58
60
|
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden bg-bg-primary p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: logo, alt: "", width: 250, height: 150, className: "mx-auto h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Terms of Use" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
|
|
59
61
|
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
|
60
|
-
|
|
62
|
+
const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
|
|
63
|
+
setIsAtBottom(atBottom);
|
|
64
|
+
if (atBottom) {
|
|
61
65
|
setHasReachedBottom(true);
|
|
62
66
|
}
|
|
63
67
|
}, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
|
|
@@ -26,11 +26,13 @@ export function TermsOfUseV3({ logo, content }) {
|
|
|
26
26
|
useEffect(() => {
|
|
27
27
|
if (isOpen && scrollableContentRef.current) {
|
|
28
28
|
const { scrollHeight, clientHeight } = scrollableContentRef.current;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
if (clientHeight > 0) {
|
|
30
|
+
const isScrollable = scrollHeight > clientHeight;
|
|
31
|
+
const atBottom = scrollHeight - scrollableContentRef.current.scrollTop <=
|
|
32
|
+
clientHeight + 1;
|
|
33
|
+
setIsAtBottom(!isScrollable || atBottom);
|
|
34
|
+
setHasReachedBottom(!isScrollable || atBottom);
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
37
|
if (!isOpen) {
|
|
36
38
|
setIsAtBottom(false);
|
|
@@ -57,7 +59,9 @@ export function TermsOfUseV3({ logo, content }) {
|
|
|
57
59
|
globalStore.termsOfUse.setNext(null);
|
|
58
60
|
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden bg-bg-primary p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: decorativebackground, alt: "", width: 200, height: 200, className: "absolute top-safe-area-inset-top left-0" }), _jsx(Image, { src: logo, alt: "", width: 250, height: 150, className: "h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Terms of Use" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
|
|
59
61
|
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
|
60
|
-
|
|
62
|
+
const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
|
|
63
|
+
setIsAtBottom(atBottom);
|
|
64
|
+
if (atBottom) {
|
|
61
65
|
setHasReachedBottom(true);
|
|
62
66
|
}
|
|
63
67
|
}, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
|
|
@@ -93,7 +93,7 @@ export function WithdrawalRecordsTable(props) {
|
|
|
93
93
|
withdrawalStatus: true,
|
|
94
94
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
95
95
|
? 'Fetching latest withdrawal records...'
|
|
96
|
-
: 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: twMerge('scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-track:bg-transparent lg:rounded-t-xl', classNames.scrollbarThumb || 'scrollbar-thumb:bg-bg-quaternary'), children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Account Name" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "
|
|
96
|
+
: 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: twMerge('scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-track:bg-transparent lg:rounded-t-xl', classNames.scrollbarThumb || 'scrollbar-thumb:bg-bg-quaternary'), children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Account Name" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Account Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber || data.serialCode }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: data.type === 'INSTAPAY' ||
|
|
97
97
|
data.type === 'PISO_PAY_REMITTANCE' ||
|
|
98
98
|
data.type === 'VENTAJA_DISBURSEMENT'
|
|
99
99
|
? data.accountName
|