@opexa/portal-components 0.0.554 → 0.0.556
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,16 +1,14 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import Image from 'next/image';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
6
|
import { useShallow } from 'zustand/shallow';
|
|
7
7
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
8
8
|
import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
|
|
9
|
-
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
10
9
|
import pagcorLogo from '../../images/pagcor2.png';
|
|
11
10
|
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
12
11
|
import { Button } from '../../ui/Button/index.js';
|
|
13
|
-
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
14
12
|
import { Dialog } from '../../ui/Dialog/index.js';
|
|
15
13
|
import { Portal } from '../../ui/Portal/index.js';
|
|
16
14
|
import { useDisclaimer } from './useDisclaimer.js';
|
|
@@ -20,22 +18,19 @@ export function DisclaimerV3(props) {
|
|
|
20
18
|
termsOfUse: ctx.termsOfUse,
|
|
21
19
|
responsibleGaming: ctx.responsibleGaming,
|
|
22
20
|
})));
|
|
23
|
-
const checked = globalStore.termsOfUse.accepted &&
|
|
21
|
+
const checked = (globalStore.termsOfUse.accepted &&
|
|
22
|
+
globalStore.responsibleGaming.accepted) ||
|
|
23
|
+
true;
|
|
24
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-[
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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: "grid w-full grid-cols-2 items-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "h-[43px] w-auto shrink-0 object-contain", 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: () => {
|
|
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-[85vh] lg:w-[400px] lg:rounded-xl", children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _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 National 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("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public spaces."] }), _jsxs("li", { className: "flex items-start gap-4", children: [_jsx(Circle, {}), _jsxs("label", { htmlFor: "termsAndConditions", children: ["You agree and read the ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
26
|
+
globalStore.termsOfUse.setOpen(true);
|
|
27
|
+
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
28
|
+
disclaimer.close();
|
|
29
|
+
}, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
30
|
+
globalStore.responsibleGaming.setOpen(true);
|
|
31
|
+
globalStore.responsibleGaming.setNext('DISCLAIMER');
|
|
32
|
+
disclaimer.close();
|
|
33
|
+
}, children: "Responsible Gaming" }), ' ', "guidelines."] })] })] }), _jsx("div", { className: twMerge('mx-auto mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs', showWarning ? 'h-[28px] opacity-100' : 'opacity-0'), role: "alert", "aria-live": "assertive", children: showWarning && (_jsxs(_Fragment, { 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: "grid w-full grid-cols-2 items-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "h-[43px] w-auto shrink-0 object-contain", 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
34
|
if (!checked) {
|
|
40
35
|
setShowWarning(true);
|
|
41
36
|
setTimeout(() => setShowWarning(false), 4000);
|