@opexa/portal-components 0.0.1045 → 0.0.1047

package/dist/components/KYC/KYCDefault/PersonalInformation.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createListCollection } from '@ark-ui/react';
 import { Capacitor } from '@capacitor/core';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import invariant from 'tiny-invariant';
 import { z } from 'zod';
@@ -18,21 +19,75 @@ import { getSession } from '../../../client/services/getSession.js';
 import { BIOMETRIC_STORAGE_KEY } from '../../../client/utils/biometric.js';
 import { toaster } from '../../../client/utils/toaster.js';
 import { CheckIcon } from '../../../icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
 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 { Field } from '../../../ui/Field/index.js';
+import { Select } from '../../../ui/Select/index.js';
 import { getQueryClient } from '../../../utils/getQueryClient.js';
 import { getAccountQueryKey, getMemberVerificationQueryKey, getSessionQueryKey, } from '../../../utils/queryKeys.js';
 import { useKYCDefaultContext } from './KYCDefaultContext.js';
-const definition = z.object({
+const SOURCE_OF_INCOME_OPTIONS = [
+    { label: 'Salary', value: 'Salary' },
+    { label: 'Business / Self Employment', value: 'Business / Self Employment' },
+    { label: 'Pension', value: 'Pension' },
+    { label: 'Others', value: 'Others' },
+];
+const sourceOfIncomeCollection = createListCollection({
+    items: SOURCE_OF_INCOME_OPTIONS,
+    itemToValue: (item) => item.value,
+    itemToString: (item) => item.label,
+});
+const NATURE_OF_WORK_OPTIONS = [
+    { label: 'Administrative', value: 'Administrative' },
+    { label: 'Creative', value: 'Creative' },
+    { label: 'Customer Service', value: 'Customer Service' },
+    { label: 'Technical', value: 'Technical' },
+    { label: 'Management', value: 'Management' },
+    { label: 'Research', value: 'Research' },
+    { label: 'Sales', value: 'Sales' },
+    { label: 'Support', value: 'Support' },
+    { label: 'Operations', value: 'Operations' },
+    { label: 'Teaching', value: 'Teaching' },
+    { label: 'Others', value: 'Others' },
+];
+const natureOfWorkCollection = createListCollection({
+    items: NATURE_OF_WORK_OPTIONS,
+    itemToValue: (item) => item.value,
+    itemToString: (item) => item.label,
+});
+const definition = z
+    .object({
     address: z.string().trim().min(1, 'Current address is required'),
     permanentAddress: z.string().trim().min(1, 'Permanent address is required'),
-    sourceOfIncome: z.string().trim().min(1, 'Source of Income is required'),
-    natureOfWork: z.string().trim().min(1, 'Nature of Work is required'),
+    sourceOfIncome: z.string().min(1, 'Source of Income is required'),
+    sourceOfIncomeOther: z.string().optional(),
+    natureOfWork: z.string().min(1, 'Nature of Work is required'),
+    natureOfWorkOther: z.string().optional(),
     placeOfBirth: z.string().trim().min(1, 'Place of Birth is required'),
     nationality: z.string().trim().min(1, 'Nationality is required'),
+})
+    .superRefine((data, ctx) => {
+    if (data.sourceOfIncome === 'Others') {
+        if (!data.sourceOfIncomeOther?.trim()) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'Please specify your source of income',
+                path: ['sourceOfIncomeOther'],
+            });
+        }
+    }
+    if (data.natureOfWork === 'Others') {
+        if (!data.natureOfWorkOther?.trim()) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'Please specify your nature of work',
+                path: ['natureOfWorkOther'],
+            });
+        }
+    }
 });
 export function PersonalInformation() {
     const kyc = useKYCDefaultContext();
@@ -123,24 +178,37 @@ export function PersonalInformation() {
         defaultValues: {
             address: '',
             nationality: '',
-            natureOfWork: '',
             placeOfBirth: '',
             permanentAddress: '',
+            sourceOfIncome: '',
+            sourceOfIncomeOther: '',
+            natureOfWork: '',
+            natureOfWorkOther: '',
         },
         mode: 'all',
     });
     async function onSubmit(values) {
+        const resolvedSourceOfIncome = values.sourceOfIncome === 'Others'
+            ? (values.sourceOfIncomeOther ?? '').trim()
+            : values.sourceOfIncome;
+        const resolvedNatureOfWork = values.natureOfWork === 'Others'
+            ? (values.natureOfWorkOther ?? '').trim()
+            : values.natureOfWork;
+        const payload = {
+            address: values.address,
+            permanentAddress: values.permanentAddress,
+            sourceOfIncome: resolvedSourceOfIncome,
+            natureOfWork: resolvedNatureOfWork,
+            placeOfBirth: values.placeOfBirth,
+            nationality: values.nationality,
+        };
         if (!memberVerificationId) {
-            createMemberVerificationMutation.mutate({
-                ...values,
-            });
+            createMemberVerificationMutation.mutate(payload);
         }
         else {
             await updateMemberVerificationMutation.mutateAsync({
                 id: memberVerificationId,
-                data: {
-                    ...values,
-                },
+                data: payload,
             });
             await approveMemberVerificationMutation.mutateAsync(memberVerificationId);
         }
@@ -166,7 +234,25 @@ export function PersonalInformation() {
                                     address: '',
                                 });
                             }
-                        }, disabled: !permanentAddress, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Use permanent address as current address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.sourceOfIncome, children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income", ...form.register('sourceOfIncome') }), _jsx(Field.ErrorText, { children: form.formState.errors.sourceOfIncome?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.natureOfWork, children: [_jsx(Field.Label, { children: "Nature of Work" }), _jsx(Field.Input, { placeholder: "Enter your nature of work", ...form.register('natureOfWork') }), _jsx(Field.ErrorText, { children: form.formState.errors.natureOfWork?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.placeOfBirth, children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth", ...form.register('placeOfBirth') }), _jsx(Field.ErrorText, { children: form.formState.errors.placeOfBirth?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.nationality, children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality", ...form.register('nationality') }), _jsx(Field.ErrorText, { children: form.formState.errors.nationality?.message })] }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: updateMemberVerificationMutation.isPending ||
+                        }, disabled: !permanentAddress, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Use permanent address as current address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Controller, { control: form.control, name: "sourceOfIncome", render: ({ field, fieldState }) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: fieldState.invalid, children: [_jsx(Field.Label, { children: "Source of income" }), _jsxs(Select.Root, { collection: sourceOfIncomeCollection, value: field.value ? [field.value] : [], onValueChange: (details) => {
+                                        const selected = details.value?.[0] ?? '';
+                                        field.onChange(selected);
+                                        if (selected !== 'others') {
+                                            form.setValue('sourceOfIncomeOther', '', {
+                                                shouldDirty: true,
+                                                shouldValidate: true,
+                                            });
+                                        }
+                                    }, positioning: { sameWidth: true, placement: 'bottom' }, lazyMount: true, unmountOnExit: true, children: [_jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, { placeholder: "Select source of income" }), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: SOURCE_OF_INCOME_OPTIONS.map((option) => (_jsx(Select.Item, { item: option, children: _jsx(Select.ItemText, { children: option.label }) }, option.value))) }) })] }), _jsx(Field.ErrorText, { children: fieldState.error?.message })] })) }), form.watch('sourceOfIncome') === 'Others' && (_jsxs(Field.Root, { className: "mt-xl", invalid: !!form.formState.errors.sourceOfIncomeOther, children: [_jsx(Field.Label, { children: "Please specify your source of income" }), _jsx(Field.Input, { placeholder: "Please specify your source of income", ...form.register('sourceOfIncomeOther') }), _jsx(Field.ErrorText, { children: form.formState.errors.sourceOfIncomeOther?.message })] })), _jsx(Controller, { control: form.control, name: "natureOfWork", render: ({ field, fieldState }) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: fieldState.invalid, children: [_jsx(Field.Label, { children: "Nature of Work" }), _jsxs(Select.Root, { collection: natureOfWorkCollection, value: field.value ? [field.value] : [], onValueChange: (details) => {
+                                        const selected = details.value?.[0] ?? '';
+                                        field.onChange(selected);
+                                        if (selected !== 'Others') {
+                                            form.setValue('natureOfWorkOther', '', {
+                                                shouldDirty: true,
+                                                shouldValidate: true,
+                                            });
+                                        }
+                                    }, positioning: { sameWidth: true, placement: 'bottom' }, lazyMount: true, unmountOnExit: true, children: [_jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, { placeholder: "Select nature of work" }), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: NATURE_OF_WORK_OPTIONS.map((option) => (_jsx(Select.Item, { item: option, children: _jsx(Select.ItemText, { children: option.label }) }, option.value))) }) })] }), _jsx(Field.ErrorText, { children: fieldState.error?.message })] })) }), form.watch('natureOfWork') === 'Others' && (_jsxs(Field.Root, { className: "mt-xl", invalid: !!form.formState.errors.natureOfWorkOther, children: [_jsx(Field.Label, { children: "Please specify your nature of work" }), _jsx(Field.Input, { placeholder: "Please specify your nature of work", ...form.register('natureOfWorkOther') }), _jsx(Field.ErrorText, { children: form.formState.errors.natureOfWorkOther?.message })] })), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.placeOfBirth, children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth", ...form.register('placeOfBirth') }), _jsx(Field.ErrorText, { children: form.formState.errors.placeOfBirth?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.nationality, children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality", ...form.register('nationality') }), _jsx(Field.ErrorText, { children: form.formState.errors.nationality?.message })] }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: updateMemberVerificationMutation.isPending ||
                             createMemberVerificationMutation.isPending, children: "Continue" }), kyc.isSkippable && (_jsx(Button, { variant: "outline", colorScheme: "gray", className: twMerge('mt-lg', accountStatus === 'VERIFICATION_LOCKED' && 'hidden'), type: "button", onClick: () => {
                             globalStore.kyc.setOpen(false);
                         }, disabled: updateMemberVerificationMutation.isPending ||

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -50,6 +50,7 @@ export function MobileNumberSignIn() {
         kyc: ctx.kyc,
         registerBiometrics: ctx.registerBiometrics,
         disclaimer: ctx.disclaimer,
+        termsOfUse: ctx.termsOfUse,
     })));
     const signInMutation = useSignInMutation({
         onSuccess: async () => {
@@ -229,7 +230,7 @@ export function MobileNumberSignIn() {
                                                                     router.push(signInProps.termsAndConditionsUrl);
                                                                 }
                                                                 else {
-                                                                    globalStore.termsAndConditions.setOpen(true);
+                                                                    globalStore.termsOfUse.setOpen(true);
                                                                     globalStore.termsAndConditions.setNext('SIGN_IN');
                                                                 }
                                                             }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -51,6 +51,7 @@ export function NameAndPasswordSignIn() {
         responsibleGamingReminder: ctx.responsibleGamingReminder,
         registerBiometrics: ctx.registerBiometrics,
         disclaimer: ctx.disclaimer,
+        termsOfUse: ctx.termsOfUse,
     })));
     const [formType, setFormType] = useState('NAME_AND_PASSWORD');
     const signInMutation = useSignInMutation({
@@ -312,7 +313,7 @@ export function NameAndPasswordSignIn() {
                                                             router.push(signInProps.termsAndConditionsUrl);
                                                         }
                                                         else {
-                                                            globalStore.termsAndConditions.setOpen(true);
+                                                            globalStore.termsOfUse.setOpen(true);
                                                             globalStore.termsAndConditions.setNext('SIGN_IN');
                                                         }
                                                     }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {

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

@@ -60,6 +60,7 @@ export function SignUpDefaultForm() {
         termsAndConditions: ctx.termsAndConditions,
         responsibleGaming: ctx.responsibleGaming,
         kyc: ctx.kyc,
+        termsOfUse: ctx.termsOfUse,
     })));
     const search = useSearchParams();
     const signUpMutation = useSignUpMutation();
@@ -90,9 +91,7 @@ export function SignUpDefaultForm() {
         .refine((val) => val.length <= 50, {
         message: 'Last name must not be more than 50 characters',
     });
-    const birthdateBaseSchema = z
-        .custom()
-        .superRefine((val, ctx) => {
+    const birthdateBaseSchema = z.custom().superRefine((val, ctx) => {
         if (!(val instanceof Date)) {
             ctx.addIssue({
                 code: z.ZodIssueCode.custom,
@@ -272,7 +271,7 @@ export function SignUpDefaultForm() {
                                                                     router.push(signUpProps.termsAndConditionsUrl);
                                                                 }
                                                                 else {
-                                                                    globalStore.termsAndConditions.setOpen(true);
+                                                                    globalStore.termsOfUse.setOpen(true);
                                                                     globalStore.termsAndConditions.setNext('SIGN_UP');
                                                                 }
                                                             }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
@@ -303,7 +302,8 @@ export function SignUpDefaultForm() {
                                         }),
                                         ...(signUpProps?.branches &&
                                             signUpProps.branches.length > 0 && {
-                                            branchCode: signUpProps.branches.find((b) => itemToValue(b) === step1Form.getValues('branchCode'))?.code ?? step1Form.getValues('branchCode'),
+                                            branchCode: signUpProps.branches.find((b) => itemToValue(b) ===
+                                                step1Form.getValues('branchCode'))?.code ?? step1Form.getValues('branchCode'),
                                         }),
                                     }),
                                     ...(signUpProps.showEmailAddressField && {

package/dist/components/SignUp/SignUpNameAndPassword/SignUpNameAndPasswordForm.js

@@ -55,6 +55,7 @@ export function SignUpNameAndPasswordForm() {
         termsAndConditions: ctx.termsAndConditions,
         responsibleGaming: ctx.responsibleGaming,
         kyc: ctx.kyc,
+        termsOfUse: ctx.termsOfUse,
     })));
     const definition = z.object({
         name: z
@@ -211,7 +212,7 @@ export function SignUpNameAndPasswordForm() {
                                                             router.push(signUpProps.termsAndConditionsUrl);
                                                         }
                                                         else {
-                                                            globalStore.termsAndConditions.setOpen(true);
+                                                            globalStore.termsOfUse.setOpen(true);
                                                             globalStore.termsAndConditions.setNext('SIGN_UP');
                                                             globalStore.signUp.setOpen(false);
                                                         }

package/package.json

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