@opexa/portal-components 0.0.1046 → 0.0.1048

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -155,6 +155,9 @@ export function Withdrawal() {
         allowUnverifiedAccounts) {
         return _jsx(AccountVerificationRequired, {});
     }
+    if (memberVerification.status === 'PENDING') {
+        return _jsx(_AccountVerificationPending, {});
+    }
     if (enabledPaymentMethods.length <= 0) {
         return _jsx(NoAvailablePaymentMethods, {});
     }

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/package.json

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