@opexa/portal-components 0.0.256 → 0.0.258

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
-import Link from 'next/link';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
@@ -18,6 +17,8 @@ import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PinInput } from '../../ui/PinInput/index.js';
+import { ResponsibleGaming } from '../Disclaimer/ResponsibleGaming.js';
+import { TermsOfUse } from '../Disclaimer/TermsOfUse.js';
 import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
 import { getFriendlyErrorMessage } from './utils.js';
 export function MobileNumberSignIn(props) {
@@ -122,7 +123,9 @@ export function MobileNumberSignIn(props) {
         duration: 1000 * 60,
     });
     const form2Ref = useRef(null);
-    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+    const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
+    const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
                             sendVerificationCodeMutation.mutate({
                                 channel: 'SMS',
                                 recipient: mobileNumberParser.format(data.mobileNumber),
@@ -132,10 +135,11 @@ export function MobileNumberSignIn(props) {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
                                                 }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                                 o.field.onChange(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 accept the", ' ', _jsx(Link, { href: signInProps.termsAndConditionsUrl ??
-                                                                '/terms-and-conditions', onClick: () => {
-                                                                globalStore.signIn.setOpen(false);
-                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _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: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                            }, 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);
+                                                            }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                                setResponsibleGamingOpen(true);
+                                                            }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _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: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                                     globalStore.signIn.setOpen(false);
                                     globalStore.signUp.setOpen(true);
                                 }, children: "Sign up" })] })] })), context.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 }) => {

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDialogContext } from '@ark-ui/react/dialog';
 import { zodResolver } from '@hookform/resolvers/zod';
-import Link from 'next/link';
+import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
@@ -17,6 +17,8 @@ import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PasswordInput } from '../../ui/PasswordInput/index.js';
+import { ResponsibleGaming } from '../Disclaimer/ResponsibleGaming.js';
+import { TermsOfUse } from '../Disclaimer/TermsOfUse.js';
 import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
 import { getFriendlyErrorMessage } from './utils.js';
 export function NameAndPasswordSignIn(props) {
@@ -111,7 +113,9 @@ export function NameAndPasswordSignIn(props) {
         ])
             .parse(signInMutation.data.secretQuestion)
         : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
+    const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
+    const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
                     if (!signInMutation.data) {
                         signInMutation.mutate({
                             type: 'NAME_AND_PASSWORD',
@@ -136,10 +140,11 @@ export function NameAndPasswordSignIn(props) {
                                             dialog.setOpen(false);
                                         }, children: "Forgot Password" }) })] }) }), signInMutation.data && (_jsxs(Field.Root, { invalid: !!form.formState.errors.secretAnswer, className: "mt-xl", children: [_jsx(Field.Label, { children: secretQuestion }), _jsx(Field.Input, { placeholder: "Answer the security question", ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: signInMutation.isPending || authenticateMutation.isPending, children: "Log In" }), _jsx(Controller, { control: form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                         o.field.onChange(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 accept the", ' ', _jsx(Link, { href: signInProps.termsAndConditionsUrl ??
-                                                        '/terms-and-conditions', onClick: () => {
-                                                        dialog.setOpen(false);
-                                                    }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _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: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                    }, 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);
+                                                    }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                        setResponsibleGamingOpen(true);
+                                                    }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _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: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                             dialog.setOpen(false);
                             globalStore.signUp.setOpen(true);
                         }, children: "Sign up" })] })] }));

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

@@ -5,6 +5,9 @@ export interface SignInProps {
     className?: string;
     /** @default '/terms-and-conditions' */
     termsAndConditionsUrl?: string;
+    termsOfUseContent?: ReactNode;
+    responsibleGamingContent?: ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
     children?: ReactNode;
     siteName?: string;
 }

package/dist/components/SignUp/SignUpDefault/SignUp.lazy.d.ts

@@ -6,6 +6,10 @@ export interface SignUpProps {
     children?: ReactNode;
     /** @default "/terms-and-conditions" */
     termsAndConditionsUrl?: string;
+    termsOfUseContent?: ReactNode;
+    responsibleGamingContent?: ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
+    siteName?: string;
     className?: string;
     branches?: Branch[];
     layout: 'default';

package/dist/components/SignUp/SignUpDefault/SignUp.lazy.js

@@ -14,5 +14,5 @@ export function SignUp(props) {
     const signUpStore = useGlobalStore(useShallow((ctx) => ctx.signUp));
     return (_jsx(SignUpPropsProvider, { value: props, children: _jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
                 signUpStore.setOpen(details.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('bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl overflow-y-auto', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpForm, {}) })] }) })] }) }) }));
+            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start overflow-y-auto p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpForm, {}) })] }) })] }) }) }));
 }

package/dist/components/SignUp/SignUpDefault/SignUpForm.js

@@ -4,7 +4,6 @@ import { createListCollection, parseDate } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ObjectId } from '@opexa/object-id';
 import { differenceInYears, format } from 'date-fns';
-import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -38,6 +37,8 @@ import { PinInput } from '../../../ui/PinInput/index.js';
 import { Select } from '../../../ui/Select/index.js';
 import { Tooltip } from '../../../ui/Tooltip/index.js';
 import { createPoll } from '../../../utils/createPoll.js';
+import { ResponsibleGaming } from '../../Disclaimer/ResponsibleGaming.js';
+import { TermsOfUse } from '../../Disclaimer/TermsOfUse.js';
 import { useSignUpPropsContext } from './SignUpContext.js';
 export function SignUpForm() {
     const signUpProps = useSignUpPropsContext();
@@ -134,7 +135,9 @@ export function SignUpForm() {
     const form2Ref = useRef(null);
     const birthDay = step1Form.watch('birthDay');
     const branchCode = step1Form.watch('branchCode', '');
-    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) => {
+    const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
+    const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signUpProps.termsOfUseContent ?? 'Terms of Use content', siteName: signUpProps.siteName ?? 'Site', logo: signUpProps.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: signUpProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signUpProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signUpProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: signUpProps.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) => {
                             try {
                                 await sendVerificationCodeMutation.mutateAsync({
                                     channel: 'SMS',
@@ -180,10 +183,11 @@ export function SignUpForm() {
                                                         return (_jsx(Select.Item, { item: item, "aria-disabled": item.disabled, className: twMerge(item.disabled && 'text-border-disabled'), children: _jsx("div", { title: label, className: "line-clamp-1", children: label }) }, item.code));
                                                     }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.branchCode?.message })] }), _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) => {
                                                 o.field.onChange(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 accept the", ' ', _jsx(Link, { href: signUpProps.termsAndConditionsUrl ??
-                                                                '/terms-and-conditions', onClick: () => {
-                                                                globalStore.signUp.setOpen(false);
-                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), ' ', _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: () => {
+                                            }, 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);
+                                                            }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                                setResponsibleGamingOpen(true);
+                                                            }, 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: () => {
                                     globalStore.signUp.setOpen(false);
                                     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 }) => {

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

@@ -6,7 +6,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { ObjectId } from '@opexa/object-id';
 import { differenceInYears, format } from 'date-fns';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -49,6 +48,8 @@ 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 ImageUploader from './ImageUploader.js';
 import { useSignUpKYCPropsContext } from './SignUpKYCContext.js';
 export function SignUpFormKYC() {
@@ -104,17 +105,20 @@ export function SignUpFormKYC() {
         firstName: z
             .string()
             .min(2, 'First name must be 2 or more characters')
-            .max(50, 'First name must not be more than 50 characters')
+            .max(20, 'First name must not be more than 50 characters')
+            .regex(/\S/, 'First name cannot be empty or contain only spaces')
             .trim(),
         middleName: z
             .string()
             .min(2, 'Middle name must be 2 or more characters')
-            .max(50, 'Middle name must not be more than 50 characters')
+            .max(20, 'Middle name must not be more than 50 characters')
+            .regex(/\S/, 'Middle name cannot be empty or contain only spaces')
             .trim(),
         lastName: z
             .string()
             .min(2, 'Last name must be 2 or more characters')
-            .max(50, 'Last name must not be more than 50 characters')
+            .max(20, 'Last name must not be more than 50 characters')
+            .regex(/\S/, 'Last name cannot be empty or contain only spaces')
             .trim(),
         birthDay: z
             .date({
@@ -182,6 +186,8 @@ export function SignUpFormKYC() {
     const form2Ref = useRef(null);
     const birthDay = step1Form.watch('birthDay');
     const branchCode = step1Form.watch('branchCode', '');
+    const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
+    const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     useEffect(() => {
         if (props.frontImage) {
             step1Form.setValue('frontImage', props.frontImage);
@@ -220,7 +226,7 @@ export function SignUpFormKYC() {
     const memberVerification = useMemberVerificationQuery();
     const memberId = memberVerification.data?.id;
     const { mutate: uploadImageFile } = useUploadImageFileMutation();
-    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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent ?? 'Terms of Use content', siteName: props.siteName ?? 'Site', logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent ?? 'Responsible Gaming content', logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => 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) => {
                             try {
                                 await sendVerificationCodeMutation.mutateAsync({
                                     channel: 'SMS',
@@ -270,9 +276,11 @@ export function SignUpFormKYC() {
                                             props.setSelfieImage(file);
                                         } }, "selfie-image-upload"), _jsx(Field.ErrorText, { children: step1Form.formState.errors.selfieImage?.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) => {
                                                 o.field.onChange(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 accept the", ' ', _jsx(Link, { href: props.termsAndConditionsUrl ?? '/terms-and-conditions', onClick: () => {
-                                                                dialog.setOpen(false);
-                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), ' ', _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: () => {
+                                            }, 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);
+                                                            }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                                setResponsibleGamingOpen(true);
+                                                            }, 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);
                                 }, 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 }) => {

package/dist/components/SignUp/SignUpKYC/SignUpKYC.lazy.d.ts

@@ -6,6 +6,10 @@ export interface SignUpKYCProps {
     children?: ReactNode;
     /** @default "/terms-and-conditions" */
     termsAndConditionsUrl?: string;
+    termsOfUseContent?: ReactNode;
+    responsibleGamingContent?: ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
+    siteName?: string;
     className?: string;
     branches?: Branch[];
     layout: 'kyc';

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

@@ -22,5 +22,5 @@ export function SignUpKYC(props) {
     };
     return (_jsx(SignUpKYCPropsProvider, { value: value, children: _jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
                 signUpStore.setOpen(details.open);
-            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt z-banner mx-auto flex h-full w-full flex-col items-start overflow-y-auto p-3xl pb-4xl lg:h-auto lg:w-fit lg:rounded-xl ', props.className), children: _jsxs("div", { className: "h-full w-full lg:w-[400px]", children: [_jsx(CaptureIdDocument, {}), _jsx(CaptureSelfie, {}), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpFormKYC, {}) })] }) }) })] }) }) }));
+            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt z-banner mx-auto flex h-full w-full flex-col items-start overflow-y-auto p-3xl pb-4xl lg:h-auto lg:w-fit lg:rounded-xl', props.className), children: _jsxs("div", { className: "h-full w-full lg:w-[400px]", children: [_jsx(CaptureIdDocument, {}), _jsx(CaptureSelfie, {}), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpFormKYC, {}) })] }) }) })] }) }) }));
 }

package/package.json

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