@opexa/portal-components 0.0.546 → 0.0.548
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/components/Disclaimer/Disclaimer.d.ts +2 -1
- package/dist/components/Disclaimer/Disclaimer.js +7 -0
- package/dist/components/Disclaimer/DisclaimerV3.d.ts +10 -0
- package/dist/components/Disclaimer/DisclaimerV3.js +54 -0
- package/dist/components/PortalProvider/SessionWatcher.js +2 -2
- package/dist/components/ResponsibleGaming/ResponsibleGaming.lazy.d.ts +1 -1
- package/dist/components/ResponsibleGaming/ResponsibleGaming.lazy.js +14 -3
- package/dist/components/TermsOfUse/TermsOfUse.lazy.d.ts +1 -1
- package/dist/components/TermsOfUse/TermsOfUse.lazy.js +14 -3
- package/dist/icons/ScrollToBottomIcon.d.ts +2 -0
- package/dist/icons/ScrollToBottomIcon.js +4 -0
- package/dist/images/decorative-patern.png +0 -0
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { DisclaimerV1Props } from './DisclaimerV1';
|
|
2
2
|
import type { DisclaimerV2Props } from './DisclaimerV2';
|
|
3
|
-
|
|
3
|
+
import type { DisclaimerV3Props } from './DisclaimerV3';
|
|
4
|
+
export type DisclaimerProps = DisclaimerV1Props | DisclaimerV2Props | DisclaimerV3Props;
|
|
4
5
|
export declare function Disclaimer(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,10 +9,17 @@ const DisclaimerV2 = dynamic(() => import('./DisclaimerV2.js').then((mod) => mod
|
|
|
9
9
|
ssr: false,
|
|
10
10
|
loading: () => null,
|
|
11
11
|
});
|
|
12
|
+
const DisclaimerV3 = dynamic(() => import('./DisclaimerV3.js').then((mod) => mod.DisclaimerV3), {
|
|
13
|
+
ssr: false,
|
|
14
|
+
loading: () => null,
|
|
15
|
+
});
|
|
12
16
|
export function Disclaimer(props) {
|
|
13
17
|
if (props.version === '2') {
|
|
14
18
|
return _jsx(DisclaimerV2, { ...props });
|
|
15
19
|
}
|
|
20
|
+
else if (props.version === '3') {
|
|
21
|
+
return _jsx(DisclaimerV3, { ...props });
|
|
22
|
+
}
|
|
16
23
|
else {
|
|
17
24
|
return _jsx(DisclaimerV1, { ...props });
|
|
18
25
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ImageProps } from 'next/image';
|
|
2
|
+
export interface DisclaimerV3Props {
|
|
3
|
+
version: '3';
|
|
4
|
+
logo: ImageProps['src'];
|
|
5
|
+
siteName: string;
|
|
6
|
+
responsibleGamingLogo?: ImageProps['src'];
|
|
7
|
+
pagcorLogo?: ImageProps['src'];
|
|
8
|
+
redirectUrlOnNoConsent?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function DisclaimerV3(props: DisclaimerV3Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import Image from 'next/image';
|
|
4
|
+
import { useState } from 'react';
|
|
5
|
+
import { twMerge } from 'tailwind-merge';
|
|
6
|
+
import { useShallow } from 'zustand/shallow';
|
|
7
|
+
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
8
|
+
import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
|
|
9
|
+
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
10
|
+
import pagcorLogo from '../../images/pagcor2.png';
|
|
11
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
12
|
+
import { Button } from '../../ui/Button/index.js';
|
|
13
|
+
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
14
|
+
import { Dialog } from '../../ui/Dialog/index.js';
|
|
15
|
+
import { Portal } from '../../ui/Portal/index.js';
|
|
16
|
+
import { useDisclaimer } from './useDisclaimer.js';
|
|
17
|
+
export function DisclaimerV3(props) {
|
|
18
|
+
const disclaimer = useDisclaimer();
|
|
19
|
+
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
20
|
+
termsOfUse: ctx.termsOfUse,
|
|
21
|
+
responsibleGaming: ctx.responsibleGaming,
|
|
22
|
+
})));
|
|
23
|
+
const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
|
|
24
|
+
const [showWarning, setShowWarning] = useState(false);
|
|
25
|
+
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start gap-y-4 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[80vh] lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx("div", { className: 'w-full text-center font-semibold text-3xl', children: "Notice" }), _jsx("div", { className: "text-sm", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
26
|
+
if (e.checked === 'indeterminate')
|
|
27
|
+
return;
|
|
28
|
+
globalStore.termsOfUse.setAccepted(e.checked);
|
|
29
|
+
globalStore.responsibleGaming.setAccepted(e.checked);
|
|
30
|
+
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
31
|
+
globalStore.termsOfUse.setOpen(true);
|
|
32
|
+
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
33
|
+
disclaimer.close();
|
|
34
|
+
}, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
35
|
+
globalStore.responsibleGaming.setOpen(true);
|
|
36
|
+
globalStore.responsibleGaming.setNext('DISCLAIMER');
|
|
37
|
+
disclaimer.close();
|
|
38
|
+
}, children: "Responsible Gaming guidelines" }), "."] }), _jsx(Checkbox.HiddenInput, {})] }), showWarning && (_jsxs("div", { className: twMerge('mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs'), role: "alert", "aria-live": "assertive", children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use and Responsible Gaming to proceed."] }))] }) }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsxs("div", { className: "row mt-4 flex w-full flex-col gap-3", children: [_jsx(Button, { type: "button", onClick: () => {
|
|
39
|
+
if (!checked) {
|
|
40
|
+
setShowWarning(true);
|
|
41
|
+
setTimeout(() => setShowWarning(false), 4000);
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
disclaimer.close();
|
|
45
|
+
}, children: "I Agree" }), _jsx(Button, { type: "button", onClick: () => {
|
|
46
|
+
if (props.redirectUrlOnNoConsent) {
|
|
47
|
+
window.location.href = props.redirectUrlOnNoConsent;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
disclaimer.close();
|
|
51
|
+
}
|
|
52
|
+
}, variant: "outline", children: "Exit" })] })] }) })] }) }));
|
|
53
|
+
}
|
|
54
|
+
const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border border-brand-400", children: _jsx("div", { className: "h-3 w-3 rounded-full bg-brand-400" }) }) }));
|
|
@@ -16,8 +16,8 @@ export function SessionWatcher() {
|
|
|
16
16
|
onSuccess() {
|
|
17
17
|
router.refresh();
|
|
18
18
|
toaster.warning({
|
|
19
|
-
title: '
|
|
20
|
-
description: '
|
|
19
|
+
title: 'Logged Out',
|
|
20
|
+
description: 'Account accessed from a different device or browser.',
|
|
21
21
|
});
|
|
22
22
|
},
|
|
23
23
|
});
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image, {} from 'next/image';
|
|
3
|
+
import { useRef } from 'react';
|
|
3
4
|
import { twMerge } from 'tailwind-merge';
|
|
4
5
|
import { useShallow } from 'zustand/shallow';
|
|
5
6
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
7
|
+
import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
|
|
8
|
+
import decorativebackground from '../../images/decorative-patern.png';
|
|
6
9
|
import pagcorLogo from '../../images/pagcor.png';
|
|
7
10
|
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
8
11
|
import { Button } from '../../ui/Button/index.js';
|
|
9
12
|
import { Dialog } from '../../ui/Dialog/index.js';
|
|
10
13
|
import { Portal } from '../../ui/Portal/index.js';
|
|
11
14
|
export function ResponsibleGaming(props) {
|
|
15
|
+
const scrollableContentRef = useRef(null);
|
|
12
16
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
13
17
|
signIn: ctx.signIn,
|
|
14
18
|
signUp: ctx.signUp,
|
|
@@ -30,7 +34,14 @@ export function ResponsibleGaming(props) {
|
|
|
30
34
|
globalStore.disclaimer.setOpen(true);
|
|
31
35
|
}
|
|
32
36
|
globalStore.responsibleGaming.setNext(null);
|
|
33
|
-
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
}, 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-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[650px]', '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-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center font-semibold text-lg", children: "Responsible Gaming Guidelines" }), _jsxs("div", { ref: scrollableContentRef, className: "mt-xs scrollbar:h-2 max-h-96 scrollbar:w-2 overflow-y-auto rounded-md scrollbar-thumb:rounded-full bg-[#021C25] p-4", children: [_jsxs("div", { className: "flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] }), _jsx(Dialog.Description, { className: "text-sm leading-2xl", children: props.content }), _jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mt-3 flex items-center justify-center gap-x-sm", children: _jsx("div", { className: "w-[80%]", children: _jsx(Button, { type: "button", className: "flex-1 py-2.5", onClick: () => {
|
|
38
|
+
api.setOpen(false);
|
|
39
|
+
}, children: "I Agree" }) }) })) })] })] }), _jsx(Button, { type: "button", className: 'absolute right-9 bottom-10 w-fit flex-1 rounded-lg bg-bg-active py-2.5', onClick: () => {
|
|
40
|
+
if (scrollableContentRef.current) {
|
|
41
|
+
scrollableContentRef.current.scrollTo({
|
|
42
|
+
top: scrollableContentRef.current.scrollHeight,
|
|
43
|
+
behavior: 'smooth',
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}, children: _jsx(ScrollToBottomIcon, {}) })] }) })] }) }));
|
|
36
47
|
}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image, {} from 'next/image';
|
|
3
|
+
import { useRef } from 'react';
|
|
3
4
|
import { twMerge } from 'tailwind-merge';
|
|
4
5
|
import { useShallow } from 'zustand/shallow';
|
|
5
6
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
7
|
+
import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
|
|
8
|
+
import decorativebackground from '../../images/decorative-patern.png';
|
|
6
9
|
import pagcorLogo from '../../images/pagcor.png';
|
|
7
10
|
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
8
11
|
import { Button } from '../../ui/Button/index.js';
|
|
9
12
|
import { Dialog } from '../../ui/Dialog/index.js';
|
|
10
13
|
import { Portal } from '../../ui/Portal/index.js';
|
|
11
14
|
export function TermsOfUse({ logo, siteName, content, ...props }) {
|
|
15
|
+
const scrollableContentRef = useRef(null);
|
|
12
16
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
13
17
|
signIn: ctx.signIn,
|
|
14
18
|
signUp: ctx.signUp,
|
|
@@ -30,7 +34,14 @@ export function TermsOfUse({ logo, siteName, content, ...props }) {
|
|
|
30
34
|
globalStore.disclaimer.setOpen(true);
|
|
31
35
|
}
|
|
32
36
|
globalStore.termsOfUse.setNext(null);
|
|
33
|
-
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
}, 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-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[650px]', '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: logo, alt: "", width: 250, height: 150, className: "h-auto w-[7.5rem]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "mt-3xl text-center font-semibold text-brand-400 text-lg", children: [siteName, " Terms of Use"] }), _jsxs("div", { ref: scrollableContentRef, className: "mt-xs scrollbar:h-2 max-h-96 scrollbar:w-2 overflow-y-auto rounded-md scrollbar-thumb:rounded-full bg-[#021C25] p-4", children: [_jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] }), _jsx(Dialog.Description, { className: "mt-xs text-sm leading-2xl", children: content }), _jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mt-3 flex items-center justify-center gap-x-sm", children: _jsx("div", { className: "w-[80%]", children: _jsx(Button, { type: "button", className: "flex-1 py-2.5", onClick: () => {
|
|
38
|
+
api.setOpen(false);
|
|
39
|
+
}, children: "I Agree" }) }) })) })] })] }), _jsx(Button, { type: "button", className: "absolute right-9 bottom-10 w-fit flex-1 rounded-lg bg-bg-active py-2.5", onClick: () => {
|
|
40
|
+
if (scrollableContentRef.current) {
|
|
41
|
+
scrollableContentRef.current.scrollTo({
|
|
42
|
+
top: scrollableContentRef.current.scrollHeight,
|
|
43
|
+
behavior: 'smooth',
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}, children: _jsx(ScrollToBottomIcon, {}) })] }) })] }) }));
|
|
36
47
|
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function ScrollToBottomIcon(props) {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "12", fill: "none", viewBox: "0 0 10 12", ...props, children: _jsx("path", { stroke: "#85888E", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.667", d: "M.833 6.833 5 11l4.167-4.167M.833 1 5 5.167 9.167 1" }) }));
|
|
4
|
+
}
|
|
Binary file
|