@opexa/portal-components 0.0.833 → 0.0.834
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.
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import type { ImageProps } from 'next/image';
|
|
2
|
+
interface ClassNameEntries {
|
|
3
|
+
root?: string;
|
|
4
|
+
playResponsiblyDescriptionContainer?: string;
|
|
5
|
+
buttonsContainer?: string;
|
|
6
|
+
}
|
|
2
7
|
export interface DisclaimerV2Props {
|
|
3
8
|
version: '2';
|
|
4
9
|
logo: ImageProps['src'];
|
|
@@ -6,5 +11,7 @@ export interface DisclaimerV2Props {
|
|
|
6
11
|
responsibleGamingLogo?: ImageProps['src'];
|
|
7
12
|
pagcorLogo?: ImageProps['src'];
|
|
8
13
|
redirectUrlOnNoConsent?: string;
|
|
14
|
+
className?: string | ClassNameEntries;
|
|
9
15
|
}
|
|
10
16
|
export declare function DisclaimerV2(props: DisclaimerV2Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Capacitor } from '@capacitor/core';
|
|
4
|
+
import { isString } from 'lodash-es';
|
|
4
5
|
import Image from 'next/image';
|
|
5
6
|
import { useState } from 'react';
|
|
6
7
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -11,6 +12,7 @@ import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
|
|
|
11
12
|
import { getSession } from '../../client/services/getSession.js';
|
|
12
13
|
import { BIOMETRIC_STORAGE_KEY } from '../../client/utils/biometric.js';
|
|
13
14
|
import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
|
|
15
|
+
import { AlertTriangleFillIcon } from '../../icons/AlertTriangleFillIcon.js';
|
|
14
16
|
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
15
17
|
import pagcorLogo from '../../images/pagcor2.png';
|
|
16
18
|
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
@@ -23,6 +25,9 @@ import { getQueryClient } from '../../utils/getQueryClient.js';
|
|
|
23
25
|
import { getSessionQueryKey } from '../../utils/queryKeys.js';
|
|
24
26
|
import { useDisclaimer } from './useDisclaimer.js';
|
|
25
27
|
export function DisclaimerV2(props) {
|
|
28
|
+
const classNames = isString(props.className)
|
|
29
|
+
? { root: props.className }
|
|
30
|
+
: (props.className ?? {});
|
|
26
31
|
const disclaimer = useDisclaimer({
|
|
27
32
|
showInLogin: true,
|
|
28
33
|
});
|
|
@@ -48,12 +53,12 @@ export function DisclaimerV2(props) {
|
|
|
48
53
|
sessionStorage.clear();
|
|
49
54
|
},
|
|
50
55
|
});
|
|
51
|
-
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:
|
|
56
|
+
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: twMerge('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 pt-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl', classNames.root), "aria-label": `${props.siteName} Player Disclaimer`, "aria-describedby": "disclaimer-description", children: [_jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _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 })] }), _jsx("div", { className: "px-3xl text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow px-3xl", children: _jsxs(Dialog.Description, { className: "space-y-2 text-sm", id: "disclaimer-description", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
52
57
|
if (e.checked === 'indeterminate')
|
|
53
58
|
return;
|
|
54
59
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
55
60
|
globalStore.responsibleGaming.setAccepted(e.checked);
|
|
56
|
-
}, className:
|
|
61
|
+
}, className: "pt-2.5 pb-2", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
57
62
|
globalStore.termsOfUse.setOpen(true);
|
|
58
63
|
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
59
64
|
disclaimer.close();
|
|
@@ -61,7 +66,7 @@ export function DisclaimerV2(props) {
|
|
|
61
66
|
globalStore.responsibleGaming.setOpen(true);
|
|
62
67
|
globalStore.responsibleGaming.setNext('DISCLAIMER');
|
|
63
68
|
disclaimer.close();
|
|
64
|
-
}, children: "Responsible Gaming" })] }), _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."] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" }), _jsxs("div", { children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: ["
|
|
69
|
+
}, children: "Responsible Gaming" })] }), _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."] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" }), _jsxs("div", { children: [_jsxs("div", { className: "mx-auto mb-3 flex items-center justify-center gap-2 font-semibold text-[22px] text-brand-400", children: [_jsx(AlertTriangleFillIcon, { className: "size-6 shrink-0 text-brand-400", "aria-hidden": "true" }), _jsx("span", { children: "PLAY RESPONSIBLY" })] }), _jsxs("div", { className: twMerge('mb-5 flex w-full flex-col items-center rounded-xl bg-bg-secondary p-3', classNames.playResponsiblyDescriptionContainer), children: [_jsx("div", { className: "mb-4 text-center text-sm", children: "Gambling may be fun, but it's easy to fall into addiction if you don't limit yourself." }), _jsx("div", { className: "text-center text-sm", children: "Be a responsible player. Know your limits and recognize when to step back." })] })] }), _jsxs("div", { children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: [_jsx("div", { children: "Visit PAGCOR\u2019s Responsible Gaming Program to know more:" }), _jsxs("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "pagcor.ph/regulatory/responsible-gaming.php"] })] })] }) }), _jsxs("div", { className: twMerge('mt-2 flex w-full gap-3 border-bg-secondary border-t px-3xl py-3xl', classNames.buttonsContainer), children: [_jsx(Button, { type: "button", onClick: async () => {
|
|
65
70
|
if (Capacitor.isNativePlatform()) {
|
|
66
71
|
const session = await getQueryClient().fetchQuery({
|
|
67
72
|
queryKey: getSessionQueryKey(),
|
|
@@ -90,6 +95,6 @@ export function DisclaimerV2(props) {
|
|
|
90
95
|
return;
|
|
91
96
|
}
|
|
92
97
|
disclaimer.close();
|
|
93
|
-
}, children: "Accept" })] })] }) })] }) }));
|
|
98
|
+
}, children: "I Accept" })] })] }) })] }) }));
|
|
94
99
|
}
|
|
95
100
|
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" }) }) }));
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function AlertTriangleFillIcon(props) {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", ...props, children: _jsx("path", { fill: "currentColor", d: "M12 1.67c.955 0 1.845.467 2.39 1.247l.105.16l8.114 13.548a2.914 2.914 0 0 1-2.307 4.363l-.195.008H3.882a2.914 2.914 0 0 1-2.582-4.2l.099-.185l8.11-13.538A2.91 2.91 0 0 1 12 1.67M12.01 15l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986zM12 8a1 1 0 0 0-.993.883L11 9v4l.007.117a1 1 0 0 0 1.986 0L13 13V9l-.007-.117A1 1 0 0 0 12 8" }) }));
|
|
4
|
+
}
|