@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/components/Disclaimer/Disclaimer.test.js

@@ -0,0 +1,288 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createMockGlobalStore, createMockSessionQuery, createMockSignOutMutation, createMockUseDisclaimer, } from '../../../__tests__/utils/mocks.js';
+import { render } from '../../../__tests__/utils/test-providers.js';
+import { DisclaimerV1 } from './DisclaimerV1.js';
+import { DisclaimerV2 } from './DisclaimerV2.js';
+import { DisclaimerV3 } from './DisclaimerV3.js';
+// Mock the hooks
+const mockGlobalStore = createMockGlobalStore();
+const mockUseDisclaimer = createMockUseDisclaimer({ open: true });
+const mockSessionQuery = createMockSessionQuery('unauthenticated');
+const mockSignOutMutation = createMockSignOutMutation();
+vi.mock('../../client/hooks/useGlobalStore', () => ({
+    useGlobalStore: (selector) => selector(mockGlobalStore),
+}));
+vi.mock('./useDisclaimer', () => ({
+    useDisclaimer: () => mockUseDisclaimer,
+}));
+vi.mock('../../client/hooks/useSessionQuery', () => ({
+    useSessionQuery: () => mockSessionQuery,
+}));
+vi.mock('../../client/hooks/useSignOutMutation', () => ({
+    useSignOutMutation: () => mockSignOutMutation,
+}));
+vi.mock('../../client/services/getSession', () => ({
+    getSession: vi.fn(),
+}));
+vi.mock('../../utils/getQueryClient', () => ({
+    getQueryClient: () => ({
+        fetchQuery: vi.fn().mockResolvedValue({ status: 'unauthenticated' }),
+    }),
+}));
+vi.mock('../../services/trigger', () => ({
+    unregisterFCMDevice: vi.fn(),
+}));
+// Mock static image imports
+vi.mock('../../images/pagcor.png', () => ({ default: '/pagcor.png' }));
+vi.mock('../../images/pagcor2.png', () => ({ default: '/pagcor2.png' }));
+vi.mock('../../images/responsible-gaming-gold.png', () => ({
+    default: '/responsible-gaming-gold.png',
+}));
+vi.mock('../../images/responsible-gaming.png', () => ({
+    default: '/responsible-gaming.png',
+}));
+vi.mock('../../images/responsible-gaming-new.png', () => ({
+    default: '/responsible-gaming-new.png',
+}));
+vi.mock('../../ui/Checkbox', () => {
+    const React = require('react');
+    const CheckboxContext = React.createContext({ onCheckedChange: (_) => { } });
+    return {
+        Checkbox: {
+            Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
+            Control: ({ children }) => _jsx("div", { children: children }),
+            Label: ({ children }) => _jsx("label", { children: children }),
+            Indicator: ({ children }) => _jsx("div", { children: children }),
+            HiddenInput: React.forwardRef((props, ref) => {
+                const { onCheckedChange } = React.useContext(CheckboxContext);
+                return (_jsx("input", { type: "checkbox", "data-testid": "checkbox-input", ref: ref, ...props, onChange: (e) => {
+                        if (onCheckedChange)
+                            onCheckedChange({ checked: e.target.checked });
+                    } }));
+            }),
+        },
+    };
+});
+const mockLogo = '/mock-logo.png';
+describe('DisclaimerV1', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockUseDisclaimer.open = true;
+        mockGlobalStore.termsOfUse.accepted = false;
+    });
+    const defaultProps = {
+        version: '1',
+        logo: mockLogo,
+        siteName: 'TestSite',
+    };
+    it('renders the disclaimer dialog when open', () => {
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v1-dialog')).toBeInTheDocument();
+    });
+    it('renders restrictions list', () => {
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v1-restrictions-list')).toBeInTheDocument();
+        // Check it has list items
+        const list = screen.getByTestId('disclaimer-v1-restrictions-list');
+        expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
+    });
+    it('shows checkbox unchecked by default', () => {
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        const checkbox = screen.getByRole('checkbox');
+        expect(checkbox).not.toBeChecked();
+    });
+    it('Accept button is disabled when checkbox is unchecked', () => {
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        const acceptButton = screen.getByTestId('disclaimer-v1-accept-btn');
+        expect(acceptButton).toBeDisabled();
+    });
+    it('Accept button enables when checkbox is checked', async () => {
+        mockGlobalStore.termsOfUse.accepted = true;
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        const acceptButton = screen.getByTestId('disclaimer-v1-accept-btn');
+        expect(acceptButton).not.toBeDisabled();
+    });
+    it('checkbox toggles when clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        const checkbox = screen.getByTestId('checkbox-input');
+        fireEvent.click(checkbox);
+        expect(mockGlobalStore.termsOfUse.setAccepted).toHaveBeenCalled();
+    });
+    it('closes disclaimer when Accept clicked with checkbox checked', async () => {
+        mockGlobalStore.termsOfUse.accepted = true;
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        const acceptButton = screen.getByTestId('disclaimer-v1-accept-btn');
+        await user.click(acceptButton);
+        expect(mockUseDisclaimer.close).toHaveBeenCalled();
+    });
+    it('shows warning when Exit clicked without checking checkbox', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        const exitButton = screen.getByTestId('disclaimer-v1-exit-btn');
+        await user.click(exitButton);
+        // Warning should be triggered via state change
+        // The component sets warn state to true when exit is clicked without checkbox
+    });
+    it('redirects when exitRedirect prop provided and Exit clicked', async () => {
+        const user = userEvent.setup();
+        const exitRedirect = 'https://example.com';
+        render(_jsx(DisclaimerV1, { ...defaultProps, exitRedirect: exitRedirect }));
+        const exitButton = screen.getByTestId('disclaimer-v1-exit-btn');
+        await user.click(exitButton);
+        expect(window.location.href).toBe(exitRedirect);
+    });
+    it('renders Terms of Use link', () => {
+        render(_jsx(DisclaimerV1, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v1-terms-link')).toBeInTheDocument();
+    });
+});
+describe('DisclaimerV2', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockUseDisclaimer.open = true;
+        mockGlobalStore.termsOfUse.accepted = false;
+        mockGlobalStore.responsibleGaming.accepted = false;
+    });
+    const defaultProps = {
+        version: '2',
+        logo: mockLogo,
+        siteName: 'TestSite',
+    };
+    it('renders the disclaimer dialog when open', () => {
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v2-dialog')).toBeInTheDocument();
+    });
+    it('renders restrictions list with items', () => {
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v2-restrictions-list')).toBeInTheDocument();
+        const list = screen.getByTestId('disclaimer-v2-restrictions-list');
+        expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
+    });
+    it('checkbox controls both termsOfUse and responsibleGaming', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        const checkbox = screen.getByTestId('checkbox-input');
+        fireEvent.click(checkbox);
+        expect(mockGlobalStore.termsOfUse.setAccepted).toHaveBeenCalled();
+        expect(mockGlobalStore.responsibleGaming.setAccepted).toHaveBeenCalled();
+    });
+    it('renders I Accept and Exit buttons', () => {
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v2-accept-btn')).toBeInTheDocument();
+        expect(screen.getByTestId('disclaimer-v2-exit-btn')).toBeInTheDocument();
+    });
+    it('I Accept shows warning if checkbox not checked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        const acceptButton = screen.getByTestId('disclaimer-v2-accept-btn');
+        await user.click(acceptButton);
+        // Warning should appear
+        await waitFor(() => {
+            expect(screen.getByRole('alert')).toBeInTheDocument();
+        });
+    });
+    it('I Accept closes disclaimer when checked', async () => {
+        mockGlobalStore.termsOfUse.accepted = true;
+        mockGlobalStore.responsibleGaming.accepted = true;
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        const acceptButton = screen.getByTestId('disclaimer-v2-accept-btn');
+        await user.click(acceptButton);
+        expect(mockUseDisclaimer.close).toHaveBeenCalled();
+    });
+    it('renders Self Exclusion and PAGCOR links', () => {
+        render(_jsx(DisclaimerV2, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v2-osea-link')).toBeInTheDocument();
+        expect(screen.getByTestId('disclaimer-v2-pagcor-link')).toBeInTheDocument();
+    });
+});
+describe('DisclaimerV3', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockUseDisclaimer.open = true;
+        mockGlobalStore.termsOfUse.accepted = false;
+        mockGlobalStore.responsibleGaming.accepted = false;
+    });
+    const defaultProps = {
+        version: '3',
+        logo: mockLogo,
+        siteName: 'TestSite',
+    };
+    it('renders the Notice title', () => {
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v3-title')).toBeInTheDocument();
+    });
+    it('renders the disclaimer dialog', () => {
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v3-dialog')).toBeInTheDocument();
+    });
+    it('renders restrictions list with items', () => {
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v3-restrictions-list')).toBeInTheDocument();
+        const list = screen.getByTestId('disclaimer-v3-restrictions-list');
+        expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
+    });
+    it('checkbox controls both termsOfUse and responsibleGaming', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        const checkbox = screen.getByTestId('checkbox-input');
+        fireEvent.click(checkbox);
+        expect(mockGlobalStore.termsOfUse.setAccepted).toHaveBeenCalled();
+        expect(mockGlobalStore.responsibleGaming.setAccepted).toHaveBeenCalled();
+    });
+    it('renders I Agree and Exit buttons', () => {
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v3-agree-btn')).toBeInTheDocument();
+        expect(screen.getByTestId('disclaimer-v3-exit-btn')).toBeInTheDocument();
+    });
+    it('I Agree shows warning if checkbox not checked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        const agreeButton = screen.getByTestId('disclaimer-v3-agree-btn');
+        await user.click(agreeButton);
+        // Warning should become visible (opacity changes)
+        await waitFor(() => {
+            const alert = screen.getByRole('alert');
+            expect(alert).toBeInTheDocument();
+        });
+    });
+    it('Terms of Use button opens terms modal', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        const termsButton = screen.getByTestId('disclaimer-v3-terms-btn');
+        await user.click(termsButton);
+        expect(mockGlobalStore.termsOfUse.setOpen).toHaveBeenCalledWith(true);
+        expect(mockGlobalStore.termsOfUse.setNext).toHaveBeenCalledWith('DISCLAIMER');
+        expect(mockUseDisclaimer.close).toHaveBeenCalled();
+    });
+    it('Responsible Gaming button opens RG modal', async () => {
+        const user = userEvent.setup();
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        const rgButton = screen.getByTestId('disclaimer-v3-rg-btn');
+        await user.click(rgButton);
+        expect(mockGlobalStore.responsibleGaming.setOpen).toHaveBeenCalledWith(true);
+        expect(mockGlobalStore.responsibleGaming.setNext).toHaveBeenCalledWith('DISCLAIMER');
+        expect(mockUseDisclaimer.close).toHaveBeenCalled();
+    });
+    it('renders Self Exclusion link', () => {
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v3-osea-link')).toBeInTheDocument();
+    });
+    it('renders PAGCOR Responsible Gaming link', () => {
+        render(_jsx(DisclaimerV3, { ...defaultProps }));
+        expect(screen.getByTestId('disclaimer-v3-pagcor-link')).toBeInTheDocument();
+    });
+    it('Exit redirects when redirectUrlOnNoConsent provided', async () => {
+        const user = userEvent.setup();
+        const redirectUrl = 'https://example.com/exit';
+        render(_jsx(DisclaimerV3, { ...defaultProps, redirectUrlOnNoConsent: redirectUrl }));
+        const exitButton = screen.getByTestId('disclaimer-v3-exit-btn');
+        await user.click(exitButton);
+        expect(window.location.href).toBe(redirectUrl);
+    });
+});

package/dist/lib/components/Disclaimer/DisclaimerV1.d.ts

@@ -0,0 +1,9 @@
+import type { ImageProps } from 'next/image';
+export interface DisclaimerV1Props {
+    version: '1';
+    logo: ImageProps['src'];
+    siteName: string;
+    termsOfUseUrl?: string;
+    exitRedirect?: string;
+}
+export declare function DisclaimerV1(props: DisclaimerV1Props): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Disclaimer/DisclaimerV1.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRef, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming-gold.png';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { useDisclaimer } from './useDisclaimer.js';
+export function DisclaimerV1(props) {
+    const disclaimer = useDisclaimer();
+    const acceptTriggerRef = useRef(null);
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        termsOfUse: ctx.termsOfUse,
+    })));
+    const checked = globalStore.termsOfUse.accepted;
+    const [warn, setWarn] = useState(false);
+    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, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { "data-testid": "disclaimer-v1-dialog", className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[80vh] lg:w-[400px] lg:rounded-xl", style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx(Image, { src: props.logo, alt: "", width: 142, height: 30, className: "mx-auto h-auto w-[8.875rem]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 74, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 185, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] }), _jsx("p", { className: "mt-4 text-center text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "mt-5", children: _jsx("ul", { className: "space-y-1", "data-testid": "disclaimer-v1-restrictions-list", children: items.map((item, index) => (_jsxs("li", { className: "flex items-start gap-md text-sm text-text-secondary-700", children: [_jsx("div", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-bg-brand-solid", children: _jsx("div", { className: "size-1.5 rounded-full bg-cyan-950" }) }), item] }, index))) }) }), _jsxs(Field.Root, { invalid: warn, className: "mt-2xl", children: [_jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
+                                                    if (e.checked === 'indeterminate')
+                                                        return;
+                                                    globalStore.termsOfUse.setAccepted(e.checked);
+                                                    setWarn(!e.checked);
+                                                }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { className: "text-sm", children: ["I am at least 21 years of age, I accept the", ' ', _jsx(Link, { href: props.termsOfUseUrl ?? '/terms-of-use', className: "text-brand-400 underline underline-offset-2", "data-testid": "disclaimer-v1-terms-link", onClick: () => {
+                                                                    globalStore.termsOfUse.setOpen(false);
+                                                                }, children: "Terms of Use" }), ' ', "and I am not playing in open or public space."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.ErrorText, { className: "!mt-2xl flex items-center justify-center gap-2 text-error-600 text-sm", children: [_jsx(AlertCircleIcon, { className: "size-4 shrink-0 text-error-600" }), "Please agree to ", props.siteName, "\u2019s Terms of Use to proceed."] })] }), _jsx("p", { className: "mt-2xl text-sm", 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", { className: "flex w-full flex-col gap-lg", children: [_jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, disabled: !checked, "data-testid": "disclaimer-v1-accept-btn", children: "Accept" }), _jsx(Button, { variant: "outline", type: "button", className: "mt-lg", "data-testid": "disclaimer-v1-exit-btn", onClick: () => {
+                                                    if (props.exitRedirect) {
+                                                        window.location.href = props.exitRedirect;
+                                                        return;
+                                                    }
+                                                    if (!checked) {
+                                                        setWarn(true);
+                                                    }
+                                                    else {
+                                                        disclaimer.close();
+                                                    }
+                                                }, children: "Exit" })] })] })] }) })] }) }));
+}
+const items = [
+    'Persons below the legal gambling age of 21.',
+    'Any government official or employee directly involved in the operations of the government or its agencies.',
+    'Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police.',
+    "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP).",
+    'Holders of a valid Gaming Employment License (GEL).',
+];

package/dist/lib/components/Disclaimer/DisclaimerV2.d.ts

@@ -0,0 +1,17 @@
+import type { ImageProps } from 'next/image';
+interface ClassNameEntries {
+    root?: string;
+    playResponsiblyDescriptionContainer?: string;
+    buttonsContainer?: string;
+}
+export interface DisclaimerV2Props {
+    version: '2';
+    logo: ImageProps['src'];
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+    pagcorLogo?: ImageProps['src'];
+    redirectUrlOnNoConsent?: string;
+    className?: string | ClassNameEntries;
+}
+export declare function DisclaimerV2(props: DisclaimerV2Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Disclaimer/DisclaimerV2.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
+import { getSession } from '../../client/services/getSession.js';
+import { BIOMETRIC_STORAGE_KEY } from '../../client/utils/biometric.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import pagcorLogo from '../../images/pagcor2.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { unregisterFCMDevice } from '../../services/trigger.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
+import { useDisclaimer } from './useDisclaimer.js';
+export function DisclaimerV2(props) {
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const disclaimer = useDisclaimer({
+        showInLogin: true,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        termsOfUse: ctx.termsOfUse,
+        responsibleGaming: ctx.responsibleGaming,
+    })));
+    const sessionQuery = useSessionQuery();
+    const isAuthenticated = sessionQuery.data?.status === 'authenticated';
+    const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
+    const [showWarning, setShowWarning] = useState(false);
+    const signOutMutation = useSignOutMutation({
+        async onSuccess() {
+            // Clear everything except the 'biometric' entry
+            const keep = new Set([BIOMETRIC_STORAGE_KEY]);
+            for (let i = 0; i < localStorage.length;) {
+                const key = localStorage.key(i);
+                if (key && !keep.has(key)) {
+                    localStorage.removeItem(key);
+                }
+                else {
+                    i++;
+                }
+            }
+            sessionStorage.clear();
+        },
+    });
+    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), "data-testid": "disclaimer-v2-dialog", "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", "data-testid": "disclaimer-v2-restrictions-list", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Government Official or employee connected directly with the operation of the Government or any of 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, or the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons under 21 years of age."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons included in the PAGCOR's National Database of Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Accounts that do not complete the full KYC process within the 72-hour period will be subject to permanent suspension and forfeiture of any funds in the account."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Funds or credits in the account of a player who is found ineligible to play shall mean forfeiture of said funds/credit in favor of the Government."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
+                                                if (e.checked === 'indeterminate')
+                                                    return;
+                                                globalStore.termsOfUse.setAccepted(e.checked);
+                                                globalStore.responsibleGaming.setAccepted(e.checked);
+                                            }, className: "pt-2.5 pb-2", colorScheme: "neutral", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age, I accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                                globalStore.termsOfUse.setOpen(true);
+                                                                globalStore.termsOfUse.setNext('DISCLAIMER');
+                                                                disclaimer.close();
+                                                            }, children: "Terms of Use" }), ' ', "and I am not playing in open or public place."] }), _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 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", { className: "text-text-secondary-700", children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", "data-testid": "disclaimer-v2-osea-link", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-text-secondary-700", 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", "data-testid": "disclaimer-v2-pagcor-link", 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", "data-testid": "disclaimer-v2-exit-btn", onClick: async () => {
+                                            if (Capacitor.isNativePlatform()) {
+                                                const session = await getQueryClient().fetchQuery({
+                                                    queryKey: getSessionQueryKey(),
+                                                    queryFn: async () => getSession(),
+                                                });
+                                                if (session.status === 'authenticated') {
+                                                    await unregisterFCMDevice({
+                                                        type: ['IOS', 'ANDROID'],
+                                                    }, {
+                                                        headers: {
+                                                            Authorization: `Bearer ${session.token}`,
+                                                        },
+                                                    });
+                                                }
+                                            }
+                                            signOutMutation.mutate();
+                                            if (props.redirectUrlOnNoConsent) {
+                                                window.location.href = props.redirectUrlOnNoConsent;
+                                            }
+                                            else {
+                                                disclaimer.close();
+                                            }
+                                        }, variant: "outline", children: "Exit" }), _jsx(Button, { type: "button", "data-testid": "disclaimer-v2-accept-btn", onClick: () => {
+                                            if (!checked) {
+                                                setShowWarning(true);
+                                                setTimeout(() => setShowWarning(false), 4000);
+                                                return;
+                                            }
+                                            disclaimer.close();
+                                            if (isAuthenticated) {
+                                                globalStore.termsOfUse.setOpen(true);
+                                                return;
+                                            }
+                                        }, children: "I Accept" })] })] }) })] }) }));
+}
+const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border-[5px] border-brand-400", children: _jsx("div", { className: "h-2 w-2 rounded-full bg-bg-disabled" }) }) }));

package/dist/lib/components/Disclaimer/DisclaimerV3.d.ts

@@ -0,0 +1,11 @@
+import type { ImageProps } from 'next/image';
+export interface DisclaimerV3Props {
+    version: '3';
+    logo: ImageProps['src'];
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+    pagcorLogo?: ImageProps['src'];
+    redirectUrlOnNoConsent?: string;
+    openOnboardingOnAgree?: boolean;
+}
+export declare function DisclaimerV3(props: DisclaimerV3Props): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Disclaimer/DisclaimerV3.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { App } from '@capacitor/app';
+import { Capacitor } from '@capacitor/core';
+import Image from 'next/image';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import pagcorLogo from '../../images/pagcor2.png';
+import responsibleGamingLogo from '../../images/responsible-gaming-new.png';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { useDisclaimer } from './useDisclaimer.js';
+export function DisclaimerV3(props) {
+    const disclaimer = useDisclaimer({
+        showInLogin: true,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        termsOfUse: ctx.termsOfUse,
+        responsibleGaming: ctx.responsibleGaming,
+        onboarding: ctx.onboarding,
+    })));
+    const sessionQuery = useSessionQuery();
+    const isAuthenticated = sessionQuery.data?.status === 'authenticated';
+    const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
+    const [showWarning, setShowWarning] = useState(false);
+    const signOutMutation = useSignOutMutation();
+    const handleExit = () => {
+        if (props.redirectUrlOnNoConsent) {
+            if (Capacitor.isNativePlatform()) {
+                App.exitApp();
+            }
+            else {
+                window.location.href = props.redirectUrlOnNoConsent;
+            }
+        }
+        else {
+            disclaimer.close();
+        }
+    };
+    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, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", "data-testid": "disclaimer-v3-dialog", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start 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-[500px] 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 }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto 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: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", "data-testid": "disclaimer-v3-title", children: "Notice" }), _jsx("div", { className: "mt-2 mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "mt-4 w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", "data-testid": "disclaimer-v3-restrictions-list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", 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 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", 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 text-text-placeholder", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
+                                                        if (e.checked === 'indeterminate')
+                                                            return;
+                                                        globalStore.termsOfUse.setAccepted(e.checked);
+                                                        globalStore.responsibleGaming.setAccepted(e.checked);
+                                                    }, className: "pt-2.5 pb-2 text-sm", colorScheme: "neutral", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", "data-testid": "disclaimer-v3-terms-btn", onClick: () => {
+                                                                        globalStore.termsOfUse.setOpen(true);
+                                                                        globalStore.termsOfUse.setNext('DISCLAIMER');
+                                                                        disclaimer.close();
+                                                                    }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", "data-testid": "disclaimer-v3-rg-btn", onClick: () => {
+                                                                        globalStore.responsibleGaming.setOpen(true);
+                                                                        globalStore.responsibleGaming.setNext('DISCLAIMER');
+                                                                        disclaimer.close();
+                                                                    }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs("li", { className: "mt-5", children: ["Self Exclusion Site:\u00A0", _jsx("a", { href: "https://osea.pagcor.ph", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", "data-testid": "disclaimer-v3-osea-link", children: "https://osea.pagcor.ph/" })] }), _jsxs("li", { className: "mt-5", children: ["To know more about PAGCOR's Responsible Gaming Program:\u00A0", _jsx("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", "data-testid": "disclaimer-v3-pagcor-link", children: "https://www.pagcor.ph/regulatory/responsible-gaming.php" })] })] }), _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: "row mt-4 flex w-full flex-col gap-3", children: [_jsx(Button, { type: "button", "data-testid": "disclaimer-v3-agree-btn", onClick: () => {
+                                            if (!checked) {
+                                                setShowWarning(true);
+                                                setTimeout(() => setShowWarning(false), 4000);
+                                                return;
+                                            }
+                                            disclaimer.close();
+                                            if (isAuthenticated) {
+                                                globalStore.termsOfUse.setOpen(true);
+                                                return;
+                                            }
+                                            if (props.openOnboardingOnAgree) {
+                                                globalStore.onboarding.setOpen(true);
+                                            }
+                                        }, children: "I Agree" }), _jsx(Button, { type: "button", "data-testid": "disclaimer-v3-exit-btn", onClick: () => {
+                                            if (isAuthenticated && !checked) {
+                                                signOutMutation.mutate();
+                                                handleExit();
+                                            }
+                                            handleExit();
+                                        }, variant: "outline", children: "Exit" })] })] }) })] }) }));
+}
+const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border-[5px] border-brand-400", children: _jsx("div", { className: "h-2 w-2 rounded-full bg-bg-disabled" }) }) }));

package/dist/lib/components/Disclaimer/index.d.ts

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/lib/components/Disclaimer/index.js

@@ -0,0 +1 @@
+export * from './Disclaimer.js';

package/dist/lib/components/Disclaimer/useDisclaimer.d.ts

@@ -0,0 +1,7 @@
+export declare function useDisclaimer({ showInLogin, }?: {
+    showInLogin?: boolean;
+}): {
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    close: () => void;
+};

package/dist/lib/components/Disclaimer/useDisclaimer.js

@@ -0,0 +1,32 @@
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useTimeout } from 'usehooks-ts';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+export function useDisclaimer({ showInLogin = false, } = {}) {
+    'use no memo';
+    const sessionQuery = useSessionQuery();
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const disclaimerStore = useGlobalStore(useShallow((state) => state.disclaimer));
+    // Check if we're on an SSO route (like /login/[partnerId])
+    const isSsoRoute = pathname?.startsWith('/login/') && pathname.includes('/');
+    const shouldShowDisclaimer = searchParams.get('game-exit') !== 'true' && !isSsoRoute;
+    const isAuthenticated = sessionQuery.data?.status === 'authenticated';
+    // Auto-open only for guest flow (original behavior)
+    useTimeout(() => {
+        if (shouldShowDisclaimer && !isAuthenticated) {
+            disclaimerStore.setOpen(true);
+        }
+    }, 0);
+    return {
+        open: sessionQuery.isLoading
+            ? false
+            : shouldShowDisclaimer &&
+                (!isAuthenticated || // guest: always allowed
+                    (showInLogin && isAuthenticated)) && // logged-in: only if allowed
+                disclaimerStore.open,
+        setOpen: (v) => disclaimerStore.setOpen(v),
+        close: () => disclaimerStore.setOpen(false),
+    };
+}