@opexa/portal-components 0.0.277 → 0.0.279

package/dist/components/SignUp/SignUpKYC/SignUpKYCForm.js

@@ -6,8 +6,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { ObjectId } from '@opexa/object-id';
 import { differenceInYears, format } from 'date-fns';
 import Image from 'next/image';
-import { useSearchParams } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
@@ -48,8 +48,6 @@ import { Select } from '../../../ui/Select/index.js';
 import { createPoll } from '../../../utils/createPoll.js';
 import { getQueryClient } from '../../../utils/getQueryClient.js';
 import { getMemberVerificationQueryKey } from '../../../utils/queryKeys.js';
-import { ResponsibleGaming } from '../../Disclaimer/ResponsibleGaming.js';
-import { TermsOfUse } from '../../Disclaimer/TermsOfUse.js';
 import { IdFrontImageField } from './IdFrontImageField/index.js';
 import { SelfieImageField } from './SelfieImageField/index.js';
 import { useSignUpKYCPropsContext } from './SignUpKYCContext.js';
@@ -60,19 +58,23 @@ export function SignUpKYCForm() {
         itemToValue: (item) => item.code,
         itemToString: (item) => `${item.code} - ${item.name}`,
     });
+    const router = useRouter();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
         kycReminder: ctx.kycReminder,
+        termsAndConditions: ctx.termsAndConditions,
+        responsibleGaming: ctx.responsibleGaming,
     })));
-    const [step, setStep] = useState(1);
     const dialog = useDialogContext();
     const search = useSearchParams();
-    const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signUpMutation = useSignUpMutation();
     const signInMutation = useSignInMutation();
     const updateAccountMutation = useUpdateAccountMutation();
     const sendVerificationCodeMutation = useSendVerificationCodeMutation();
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
+    const [step, setStep] = useState(1);
     const fileSchema = z
         .instanceof(File)
         .nullable()
@@ -170,9 +172,12 @@ export function SignUpKYCForm() {
             middleName: '',
             lastName: '',
             branchCode: props?.branches?.[0]?.code ?? BRANCHES[0].code,
-            termsAccepted: false,
             frontImage: undefined,
             selfieImage: undefined,
+            termsAccepted: globalStore.responsibleGaming.accepted &&
+                globalStore.termsAndConditions.accepted
+                ? true
+                : false,
         },
     });
     const step2Form = useForm({
@@ -188,8 +193,6 @@ export function SignUpKYCForm() {
     const form2Ref = useRef(null);
     const birthDay = step1Form.watch('birthDay');
     const branchCode = step1Form.watch('branchCode', '');
-    const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
-    const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     const { mutateAsync: createMemberVerification } = useCreateMemberVerificationMutation({
         onError: (error) => {
             toaster.error({
@@ -220,20 +223,7 @@ export function SignUpKYCForm() {
     const memberVerification = useMemberVerificationQuery();
     const memberId = memberVerification.data?.id;
     const { mutate: uploadImageFile } = useUploadImageFileMutation();
-    const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
-    const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
-    useEffect(() => {
-        if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
-            step1Form.setValue('termsAccepted', true);
-        }
-    }, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
-    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent ?? 'Terms of Use content', siteName: props.siteName ?? 'Site', logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => {
-                    setIsTermsOfUseAccepted(true);
-                    setTermsOfUseOpen(false);
-                }, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent ?? 'Responsible Gaming content', logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
-                    setIsResponsibleGamingAccepted(true);
-                    setResponsibleGamingOpen(false);
-                }, responsibleGamingLogo: props.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
+    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
                             try {
                                 await sendVerificationCodeMutation.mutateAsync({
                                     channel: 'SMS',
@@ -288,18 +278,34 @@ export function SignUpKYCForm() {
                                                     message: error.message,
                                                 });
                                             } }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsxs("div", { className: "mt-xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx("div", { className: "flex size-5xl items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
+                                                if (details.checked === 'indeterminate')
+                                                    return;
                                                 o.field.onChange(details.checked);
-                                                if (!details.checked) {
-                                                    setIsTermsOfUseAccepted(false);
-                                                    setIsResponsibleGamingAccepted(false);
-                                                }
+                                                globalStore.termsAndConditions.setAccepted(details.checked);
+                                                globalStore.responsibleGaming.setAccepted(details.checked);
                                             }, 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 and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
-                                                                setTermsOfUseOpen(true);
+                                                                if (props.termsAndConditionsUrl) {
+                                                                    globalStore.signUp.setOpen(false);
+                                                                    router.push(props.termsAndConditionsUrl);
+                                                                }
+                                                                else {
+                                                                    globalStore.termsAndConditions.setOpen(true);
+                                                                    globalStore.termsAndConditions.setNext('SIGN_UP');
+                                                                    globalStore.signUp.setOpen(false);
+                                                                }
                                                             }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
-                                                                setResponsibleGamingOpen(true);
+                                                                if (props.responsibleGamingUrl) {
+                                                                    globalStore.signUp.setOpen(false);
+                                                                    router.push(props.responsibleGamingUrl);
+                                                                }
+                                                                else {
+                                                                    globalStore.responsibleGaming.setOpen(true);
+                                                                    globalStore.responsibleGaming.setNext('SIGN_UP');
+                                                                    globalStore.signUp.setOpen(false);
+                                                                }
                                                             }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                                     dialog.setOpen(false);
-                                    signInStore.setOpen(true);
+                                    globalStore.signIn.setOpen(true);
                                 }, children: "Log In" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
                             const id = ObjectId.generate(ObjectType.MemberAccount).toString();
                             const { mobileNumber } = step1Form.getValues();
@@ -331,7 +337,7 @@ export function SignUpKYCForm() {
                                 });
                                 const ok = await pollLogin();
                                 if (!ok) {
-                                    signInStore.setOpen(true);
+                                    globalStore.signIn.setOpen(true);
                                 }
                                 else {
                                     const pollUpdateAccount = createPoll(async () => {

package/dist/components/SignUp/SignUpKYC/utils.js

@@ -50,24 +50,24 @@ export function validateFile(file) {
         return 'Unsupported file';
 }
 export function showPermissionInstructions() {
-    const instructions = `
-      Camera access is blocked. To enable camera access:
-
-      Chrome/Edge:
-      1. Click the camera icon in the address bar
-      2. Select "Always allow" and click "Done"
-      3. Or go to Settings > Privacy and security > Site settings > Camera
-
-      Firefox:
-      1. Click the shield icon in the address bar
-      2. Click on "Camera blocked"
-      3. Select "Allow" and refresh the page
-
-      Safari:
-      1. Go to Safari > Settings > Websites > Camera
-      2. Find this website and change to "Allow"
-
-      After changing permissions, please refresh the page and try again.
+    const instructions = `
+      Camera access is blocked. To enable camera access:
+
+      Chrome/Edge:
+      1. Click the camera icon in the address bar
+      2. Select "Always allow" and click "Done"
+      3. Or go to Settings > Privacy and security > Site settings > Camera
+
+      Firefox:
+      1. Click the shield icon in the address bar
+      2. Click on "Camera blocked"
+      3. Select "Allow" and refresh the page
+
+      Safari:
+      1. Go to Safari > Settings > Websites > Camera
+      2. Find this website and change to "Allow"
+
+      After changing permissions, please refresh the page and try again.
         `;
     alert(instructions);
 }

package/dist/components/TermsAndConditions/TermsAndConditions.d.ts

@@ -0,0 +1,2 @@
+import type { TermsAndConditionsProps } from './TermsAndConditions.lazy';
+export declare function TermsAndConditions(props: TermsAndConditionsProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/TermsAndConditions/TermsAndConditions.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./TermsAndConditions.lazy.js').then((m) => m.TermsAndConditions), {
+    ssr: false,
+    loading: () => null,
+});
+export function TermsAndConditions(props) {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.termsAndConditions['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
+}

package/dist/components/TermsAndConditions/TermsAndConditions.lazy.d.ts

@@ -0,0 +1,9 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface TermsAndConditionsProps {
+    logo: ImageProps['src'];
+    content: string | ReactNode;
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function TermsAndConditions({ logo, siteName, content, ...props }: TermsAndConditionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function TermsAndConditions({ logo, siteName, content, ...props }) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        disclaimer: ctx.disclaimer,
+        termsAndConditions: ctx.termsAndConditions,
+    })));
+    return (_jsx(Dialog.Root, { open: globalStore.termsAndConditions.open, onOpenChange: (details) => {
+            globalStore.termsAndConditions.setOpen(details.open);
+            if (!details.open)
+                globalStore.termsAndConditions.setAccepted(true);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+            if (globalStore.termsAndConditions.next === 'SIGN_IN') {
+                globalStore.signIn.setOpen(true);
+            }
+            if (globalStore.termsAndConditions.next === 'SIGN_UP') {
+                globalStore.signUp.setOpen(true);
+            }
+            if (globalStore.termsAndConditions.next === 'DISCLAIMER') {
+                globalStore.disclaimer.setOpen(true);
+            }
+            globalStore.termsAndConditions.setNext(null);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto 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: content }), _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(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        api.setOpen(false);
+                                    }, children: "I Agree" })) })] }) })] }) }));
+}

package/dist/components/TermsAndConditions/index.d.ts

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

package/dist/components/TermsAndConditions/index.js

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

package/dist/components/TermsOfUse/TermsOfUse.d.ts

@@ -0,0 +1,3 @@
+import type { TermsOfUseProps } from './TermsOfUse.lazy';
+export declare function TermsOfUse(props: TermsOfUseProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { TermsOfUseProps };

package/dist/components/TermsOfUse/TermsOfUse.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./TermsOfUse.lazy.js').then((m) => m.TermsOfUse), {
+    ssr: false,
+    loading: () => null,
+});
+export function TermsOfUse(props) {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.termsOfUse['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
+}

package/dist/components/TermsOfUse/TermsOfUse.lazy.d.ts

@@ -0,0 +1,9 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface TermsOfUseProps {
+    logo: ImageProps['src'];
+    content: string | ReactNode;
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function TermsOfUse({ logo, siteName, content, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TermsOfUse/TermsOfUse.lazy.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function TermsOfUse({ logo, siteName, content, ...props }) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        disclaimer: ctx.disclaimer,
+        termsOfUse: ctx.termsOfUse,
+    })));
+    return (_jsx(Dialog.Root, { open: globalStore.termsOfUse.open, onOpenChange: (details) => {
+            globalStore.termsOfUse.setOpen(details.open);
+            if (!details.open)
+                globalStore.termsOfUse.setAccepted(true);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+            if (globalStore.termsOfUse.next === 'SIGN_IN') {
+                globalStore.signIn.setOpen(true);
+            }
+            if (globalStore.termsOfUse.next === 'SIGN_UP') {
+                globalStore.signUp.setOpen(true);
+            }
+            if (globalStore.termsOfUse.next === 'DISCLAIMER') {
+                globalStore.disclaimer.setOpen(true);
+            }
+            globalStore.termsOfUse.setNext(null);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto 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: content }), _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(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        api.setOpen(false);
+                                    }, children: "I Agree" })) })] }) })] }) }));
+}

package/dist/components/TermsOfUse/index.d.ts

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

package/dist/components/TermsOfUse/index.js

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