@opexa/portal-components 0.0.992 → 0.0.993

package/dist/components/Disclaimer/DisclaimerV1.js

@@ -2,7 +2,7 @@
 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 { useEffect, useRef, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
@@ -20,9 +20,23 @@ export function DisclaimerV1(props) {
     const acceptTriggerRef = useRef(null);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         termsOfUse: ctx.termsOfUse,
+        termsAndConditions: ctx.termsAndConditions,
     })));
     const checked = globalStore.termsOfUse.accepted;
     const [warn, setWarn] = useState(false);
+    // Sync checkbox with global store changes
+    useEffect(() => {
+        // Only update if termsAndConditions is accepted but termsOfUse is not
+        // This prevents infinite loops
+        if (globalStore.termsAndConditions.accepted &&
+            !globalStore.termsOfUse.accepted) {
+            globalStore.termsOfUse.setAccepted(true);
+        }
+    }, [
+        globalStore.termsAndConditions.accepted,
+        globalStore.termsOfUse.accepted,
+        globalStore.termsOfUse.setAccepted,
+    ]);
     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;
@@ -30,7 +44,12 @@ export function DisclaimerV1(props) {
                                                     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: () => {
+                                                                }, 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: () => {
+                                                    // Reset terms and responsible gaming acceptance states
+                                                    // so users must re-accept in SignIn forms
+                                                    globalStore.termsAndConditions.setAccepted(false);
+                                                    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;

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -3,7 +3,7 @@ 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 { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -33,11 +33,25 @@ export function DisclaimerV2(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         termsOfUse: ctx.termsOfUse,
         responsibleGaming: ctx.responsibleGaming,
+        termsAndConditions: ctx.termsAndConditions,
     })));
     const sessionQuery = useSessionQuery();
     const isAuthenticated = sessionQuery.data?.status === 'authenticated';
     const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
     const [showWarning, setShowWarning] = useState(false);
+    // Sync checkbox with global store changes
+    useEffect(() => {
+        // Only update if termsAndConditions is accepted but termsOfUse is not
+        // This prevents infinite loops
+        if (globalStore.termsAndConditions.accepted &&
+            !globalStore.termsOfUse.accepted) {
+            globalStore.termsOfUse.setAccepted(true);
+        }
+    }, [
+        globalStore.termsAndConditions.accepted,
+        globalStore.termsOfUse.accepted,
+        globalStore.termsOfUse.setAccepted,
+    ]);
     const signOutMutation = useSignOutMutation({
         async onSuccess() {
             // Clear everything except the 'biometric' entry
@@ -92,6 +106,10 @@ export function DisclaimerV2(props) {
                                                 setTimeout(() => setShowWarning(false), 4000);
                                                 return;
                                             }
+                                            // Reset terms and responsible gaming acceptance states
+                                            // so users must re-accept in SignIn forms
+                                            globalStore.termsAndConditions.setAccepted(false);
+                                            globalStore.responsibleGaming.setAccepted(false);
                                             disclaimer.close();
                                             if (isAuthenticated) {
                                                 globalStore.termsOfUse.setOpen(true);

package/dist/components/Disclaimer/DisclaimerV3.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { App } from '@capacitor/app';
 import { Capacitor } from '@capacitor/core';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -26,11 +26,25 @@ export function DisclaimerV3(props) {
         termsOfUse: ctx.termsOfUse,
         responsibleGaming: ctx.responsibleGaming,
         onboarding: ctx.onboarding,
+        termsAndConditions: ctx.termsAndConditions,
     })));
     const sessionQuery = useSessionQuery();
     const isAuthenticated = sessionQuery.data?.status === 'authenticated';
     const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
     const [showWarning, setShowWarning] = useState(false);
+    // Sync checkbox with global store changes
+    useEffect(() => {
+        // Only update if termsAndConditions is accepted but termsOfUse is not
+        // This prevents infinite loops
+        if (globalStore.termsAndConditions.accepted &&
+            !globalStore.termsOfUse.accepted) {
+            globalStore.termsOfUse.setAccepted(true);
+        }
+    }, [
+        globalStore.termsAndConditions.accepted,
+        globalStore.termsOfUse.accepted,
+        globalStore.termsOfUse.setAccepted,
+    ]);
     const signOutMutation = useSignOutMutation();
     const handleExit = () => {
         if (props.redirectUrlOnNoConsent) {
@@ -64,6 +78,10 @@ export function DisclaimerV3(props) {
                                                 setTimeout(() => setShowWarning(false), 4000);
                                                 return;
                                             }
+                                            // Reset terms and responsible gaming acceptance states
+                                            // so users must re-accept in SignIn forms
+                                            globalStore.termsAndConditions.setAccepted(false);
+                                            globalStore.responsibleGaming.setAccepted(false);
                                             disclaimer.close();
                                             if (isAuthenticated) {
                                                 globalStore.termsOfUse.setOpen(true);

package/dist/components/ResponsibleGaming/ResponsibleGaming.lazy.js

@@ -14,11 +14,14 @@ export function ResponsibleGaming(props) {
         signUp: ctx.signUp,
         disclaimer: ctx.disclaimer,
         responsibleGaming: ctx.responsibleGaming,
+        termsAndConditions: ctx.termsAndConditions,
     })));
     return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
             globalStore.responsibleGaming.setOpen(details.open);
-            if (!details.open)
+            if (!details.open) {
                 globalStore.responsibleGaming.setAccepted(true);
+                globalStore.termsAndConditions.setAccepted(true);
+            }
         }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
             if (globalStore.responsibleGaming.next === 'SIGN_IN') {
                 globalStore.signIn.setOpen(true);

package/dist/components/ResponsibleGaming/ResponsibleGamingV2.lazy.js

@@ -18,6 +18,7 @@ export function ResponsibleGamingV2(props) {
         signUp: ctx.signUp,
         disclaimer: ctx.disclaimer,
         responsibleGaming: ctx.responsibleGaming,
+        termsAndConditions: ctx.termsAndConditions,
     })));
     useEffect(() => {
         if (scrollableContentRef.current) {
@@ -31,8 +32,10 @@ export function ResponsibleGamingV2(props) {
     }, []);
     return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
             globalStore.responsibleGaming.setOpen(details.open);
-            if (!details.open)
+            if (!details.open) {
                 globalStore.responsibleGaming.setAccepted(true);
+                globalStore.termsAndConditions.setAccepted(true);
+            }
         }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
             if (globalStore.responsibleGaming.next === 'SIGN_IN') {
                 globalStore.signIn.setOpen(true);

package/dist/components/ResponsibleGaming/ResponsibleGamingV3.lazy.js

@@ -19,6 +19,7 @@ export function ResponsibleGamingV3(props) {
         signUp: ctx.signUp,
         disclaimer: ctx.disclaimer,
         responsibleGaming: ctx.responsibleGaming,
+        termsAndConditions: ctx.termsAndConditions,
     })));
     useEffect(() => {
         if (scrollableContentRef.current) {
@@ -32,8 +33,10 @@ export function ResponsibleGamingV3(props) {
     }, []);
     return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
             globalStore.responsibleGaming.setOpen(details.open);
-            if (!details.open)
+            if (!details.open) {
                 globalStore.responsibleGaming.setAccepted(true);
+                globalStore.termsAndConditions.setAccepted(true);
+            }
         }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
             if (globalStore.responsibleGaming.next === 'SIGN_IN') {
                 globalStore.signIn.setOpen(true);

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import invariant from 'tiny-invariant';
@@ -186,6 +186,17 @@ export function MobileNumberSignIn() {
                 : false,
         },
     });
+    // Sync termsAccepted checkbox with global store
+    useEffect(() => {
+        if (globalStore.termsAndConditions.accepted ||
+            globalStore.responsibleGaming.accepted) {
+            step1Form.setValue('termsAccepted', true);
+        }
+    }, [
+        globalStore.termsAndConditions.accepted,
+        globalStore.responsibleGaming.accepted,
+        step1Form,
+    ]);
     const step2Form = useForm({
         resolver: zodResolver(Step2Definition),
         defaultValues: {

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -5,7 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import invariant from 'tiny-invariant';
@@ -248,6 +248,17 @@ export function NameAndPasswordSignIn() {
                 : false,
         },
     });
+    // Sync termsAccepted checkbox with global store
+    useEffect(() => {
+        if (globalStore.termsAndConditions.accepted ||
+            globalStore.responsibleGaming.accepted) {
+            form.setValue('termsAccepted', true);
+        }
+    }, [
+        globalStore.termsAndConditions.accepted,
+        globalStore.responsibleGaming.accepted,
+        form,
+    ]);
     const secretQuestion = signInMutation.data
         ? z
             .union([

package/dist/components/SignUp/SignUpLongForm/SignUpLongForm.js

@@ -173,7 +173,7 @@ export default function SignUpLongForm() {
                 description: error.message,
             });
         },
-        onMutate: async (data) => {
+        onMutate: async (_data) => {
             const queryClient = getQueryClient();
             await queryClient.cancelQueries({
                 queryKey: getMemberVerificationQueryKey(),

package/dist/components/TermsAndConditions/TermsAndConditions.lazy.js

@@ -14,11 +14,14 @@ export function TermsAndConditions({ logo, siteName, content, ...props }) {
         signUp: ctx.signUp,
         disclaimer: ctx.disclaimer,
         termsAndConditions: ctx.termsAndConditions,
+        responsibleGaming: ctx.responsibleGaming,
     })));
     return (_jsx(Dialog.Root, { open: globalStore.termsAndConditions.open, onOpenChange: (details) => {
             globalStore.termsAndConditions.setOpen(details.open);
-            if (!details.open)
+            if (!details.open) {
                 globalStore.termsAndConditions.setAccepted(true);
+                globalStore.responsibleGaming.setAccepted(true);
+            }
         }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
             if (globalStore.termsAndConditions.next === 'SIGN_IN') {
                 globalStore.signIn.setOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.992",
+	"version": "0.0.993",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",