@opexa/portal-components 0.0.97 → 0.0.98
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 +12 -2
- package/dist/components/Disclaimer/Disclaimer.js +7 -11
- package/dist/components/Disclaimer/DisclaimerV1.d.ts +5 -0
- package/dist/components/Disclaimer/DisclaimerV1.js +14 -0
- package/dist/components/Disclaimer/DisclaimerV2.d.ts +10 -0
- package/dist/components/Disclaimer/DisclaimerV2.js +21 -0
- package/dist/components/Disclaimer/ResponsibleGaming.d.ts +9 -0
- package/dist/components/Disclaimer/ResponsibleGaming.js +12 -0
- package/dist/components/Disclaimer/TermsOfUse.d.ts +10 -0
- package/dist/components/Disclaimer/TermsOfUse.js +16 -0
- package/dist/services/graphqlRequest.js +16 -0
- package/dist/services/httpRequest.js +10 -0
- package/package.json +1 -1
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import type { ImageProps } from 'next/image';
|
|
2
|
-
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
type DisclaimerProps = {
|
|
4
|
+
version?: 'v1';
|
|
3
5
|
logo: ImageProps['src'];
|
|
4
|
-
}
|
|
6
|
+
} | {
|
|
7
|
+
version: 'v2';
|
|
8
|
+
logo: ImageProps['src'];
|
|
9
|
+
siteName: string;
|
|
10
|
+
responsibleGamingContent: string | ReactNode;
|
|
11
|
+
termsOfUseContent: string | ReactNode;
|
|
12
|
+
responsibleGamingLogo?: ImageProps['src'];
|
|
13
|
+
};
|
|
5
14
|
export declare function Disclaimer(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import { useRef } from 'react';
|
|
6
|
-
import pagcorLogo from '../../images/pagcor.png';
|
|
7
|
-
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
8
|
-
import { Button, Dialog } from '../../ui/index.js';
|
|
9
|
-
import { useDisclaimer } from './useDisclaimer.js';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { DisclaimerV1 } from './DisclaimerV1.js';
|
|
4
|
+
import { DisclaimerV2 } from './DisclaimerV2.js';
|
|
10
5
|
export function Disclaimer(props) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
if (props.version === 'v2') {
|
|
7
|
+
return (_jsx(DisclaimerV2, { logo: props.logo, siteName: props.siteName, responsibleGamingContent: props.responsibleGamingContent, termsOfUseContent: props.termsOfUseContent, responsibleGamingLogo: props.responsibleGamingLogo }));
|
|
8
|
+
}
|
|
9
|
+
return _jsx(DisclaimerV1, { logo: props.logo });
|
|
14
10
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Portal } from '@ark-ui/react';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
import { useRef } from 'react';
|
|
6
|
+
import pagcorLogo from '../../images/pagcor.png';
|
|
7
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
8
|
+
import { Button, Dialog } from '../../ui/index.js';
|
|
9
|
+
import { useDisclaimer } from './useDisclaimer.js';
|
|
10
|
+
export function DisclaimerV1(props) {
|
|
11
|
+
const disclaimer = useDisclaimer();
|
|
12
|
+
const acceptTriggerRef = useRef(null);
|
|
13
|
+
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirmI am 21 years of age and I agree with the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
|
|
14
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ImageProps } from 'next/image';
|
|
2
|
+
import { type ReactNode } from 'react';
|
|
3
|
+
export interface DisclaimerProps {
|
|
4
|
+
logo: ImageProps['src'];
|
|
5
|
+
siteName: string;
|
|
6
|
+
responsibleGamingContent: ReactNode;
|
|
7
|
+
termsOfUseContent: ReactNode;
|
|
8
|
+
responsibleGamingLogo?: ImageProps['src'];
|
|
9
|
+
}
|
|
10
|
+
export declare function DisclaimerV2(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { Portal } from '@ark-ui/react';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
import { useRef, useState } from 'react';
|
|
6
|
+
import pagcorLogo from '../../images/pagcor.png';
|
|
7
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
8
|
+
import { Button, Dialog } from '../../ui/index.js';
|
|
9
|
+
import { ResponsibleGaming } from './ResponsibleGaming.js';
|
|
10
|
+
import { TermsOfUse } from './TermsOfUse.js';
|
|
11
|
+
import { useDisclaimer } from './useDisclaimer.js';
|
|
12
|
+
export function DisclaimerV2(props) {
|
|
13
|
+
const disclaimer = useDisclaimer();
|
|
14
|
+
const acceptTriggerRef = useRef(null);
|
|
15
|
+
const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
|
|
16
|
+
const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
|
|
17
|
+
return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { style: { zIndex: 50 } }), _jsx(Dialog.Positioner, { style: { zIndex: 51 }, children: _jsxs(Dialog.Content, { className: "z-1 flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: ["Please read our \u00A0", _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
18
|
+
setResponsibleGamingOpen(true);
|
|
19
|
+
}, children: "Responsible Gaming" }), "guidelines carefully:"] }), _jsxs(Dialog.Description, { className: "mt-4 text-sm", children: [_jsxs("ul", { className: "space-y-1 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "I am over 21 years of age."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "I am 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, {}), _jsxs("div", { children: ["I have read and agreed to \u00A0", _jsxs("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => setTermsOfUseOpen(true), children: [props.siteName, " Terms of Use"] })] })] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "I am not a Gaming Employment License (GEL) holder."] })] }), _jsx("div", { className: "mt-4", children: "Fund or credits in the account of player who is found ineligible to play shall mean forfeiture of said fund/credits in favor of the Government." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Proceed" }), _jsx(Button, { type: "button", className: "mt-3", onClick: disclaimer.close, variant: "outline", children: "Exit" })] }) })] }) })] }));
|
|
20
|
+
}
|
|
21
|
+
const Circle = () => (_jsx("div", { children: _jsx("div", { className: "border-brand-400 flex h-4.5 w-4.5 items-center justify-center rounded-full border", children: _jsx("div", { className: "bg-brand-400 h-3 w-3 rounded-full" }) }) }));
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type ImageProps } from 'next/image';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface ResponsibleGamingProps {
|
|
4
|
+
responsibleGamingContent: string | ReactNode;
|
|
5
|
+
logo: ImageProps['src'];
|
|
6
|
+
open: boolean;
|
|
7
|
+
onCloseAction: () => void;
|
|
8
|
+
}
|
|
9
|
+
export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Portal } from '@ark-ui/react';
|
|
4
|
+
import Image, {} from 'next/image';
|
|
5
|
+
import pagcorLogo from '../../images/pagcor.png';
|
|
6
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
7
|
+
import { Button, Dialog } from '../../ui/index.js';
|
|
8
|
+
export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, }) {
|
|
9
|
+
return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
|
|
10
|
+
onCloseAction();
|
|
11
|
+
}, children: "I Agree" })] }) })] }) }));
|
|
12
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type ImageProps } from 'next/image';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface TermsOfUseProps {
|
|
4
|
+
logo: ImageProps['src'];
|
|
5
|
+
open: boolean;
|
|
6
|
+
onCloseAction: () => void;
|
|
7
|
+
termsOfUseContent: string | ReactNode;
|
|
8
|
+
siteName: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Portal } from '@ark-ui/react';
|
|
4
|
+
import Image, {} from 'next/image';
|
|
5
|
+
import { useShallow } from 'zustand/shallow';
|
|
6
|
+
import { useGlobalStore } from '../../client/hooks/index.js';
|
|
7
|
+
import pagcorLogo from '../../images/pagcor.png';
|
|
8
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
9
|
+
import { Button, Dialog } from '../../ui/index.js';
|
|
10
|
+
export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, }) {
|
|
11
|
+
const disclaimerStore = useGlobalStore(useShallow((state) => state.disclaimer));
|
|
12
|
+
return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
|
|
13
|
+
onCloseAction();
|
|
14
|
+
disclaimerStore.setOpen(true);
|
|
15
|
+
}, children: "I Agree" })] }) })] }) }));
|
|
16
|
+
}
|
|
@@ -23,6 +23,14 @@ export async function graphqlRequest(url, query, variables, options) {
|
|
|
23
23
|
}
|
|
24
24
|
try {
|
|
25
25
|
const response = await fetch(url_, {
|
|
26
|
+
cache: 'force-cache',
|
|
27
|
+
next: {
|
|
28
|
+
revalidate: 1,
|
|
29
|
+
tags: [
|
|
30
|
+
url_.toString(),
|
|
31
|
+
variables ? JSON.stringify(variables) : '',
|
|
32
|
+
].filter(Boolean),
|
|
33
|
+
},
|
|
26
34
|
...options,
|
|
27
35
|
method: 'POST',
|
|
28
36
|
headers,
|
|
@@ -126,6 +134,14 @@ export async function graphqlUpload(url, query, variables, options) {
|
|
|
126
134
|
}
|
|
127
135
|
try {
|
|
128
136
|
const response = await fetch(url_, {
|
|
137
|
+
cache: 'force-cache',
|
|
138
|
+
next: {
|
|
139
|
+
revalidate: 1,
|
|
140
|
+
tags: [
|
|
141
|
+
url_.toString(),
|
|
142
|
+
variables ? JSON.stringify(variables) : '',
|
|
143
|
+
].filter(Boolean),
|
|
144
|
+
},
|
|
129
145
|
...options,
|
|
130
146
|
method: 'POST',
|
|
131
147
|
headers,
|
|
@@ -15,6 +15,11 @@ export async function httpRequest(url, opts = {}) {
|
|
|
15
15
|
headers.delete(RECAPTCHA_HEADER_KEY);
|
|
16
16
|
}
|
|
17
17
|
const res = await fetch(url, {
|
|
18
|
+
cache: 'force-cache',
|
|
19
|
+
next: {
|
|
20
|
+
revalidate: 1,
|
|
21
|
+
tags: [url, JSON.stringify(opts.body ?? {})].filter(Boolean),
|
|
22
|
+
},
|
|
18
23
|
...opts,
|
|
19
24
|
headers,
|
|
20
25
|
});
|
|
@@ -52,6 +57,11 @@ httpRequest.json = async (url, opts = {}) => {
|
|
|
52
57
|
headers.delete(RECAPTCHA_HEADER_KEY);
|
|
53
58
|
}
|
|
54
59
|
const response = await fetch(url, {
|
|
60
|
+
cache: 'force-cache',
|
|
61
|
+
next: {
|
|
62
|
+
revalidate: 1,
|
|
63
|
+
tags: [url, JSON.stringify(opts.body ?? {})].filter(Boolean),
|
|
64
|
+
},
|
|
55
65
|
...opts,
|
|
56
66
|
headers,
|
|
57
67
|
});
|