[TRAH]/MITRA/KYC-1852/Update the validation to accept 1 to 50 charact…

…er (binary-com#15138) * fix: 🦺 update the validation to accept 1 to 50 character * fix: 🧪 fix test * fix: 🧪 test failure fix * fix: 💬 update th error message * fix: 🐛 fix test * fix: 🐛 fix the test sentence * fix: 🧪 try the fix * chore: 🏗️ trigger build * chore: 🏗️ trigger build * chore: 🏗️ trigger build * fix: 🐛 address comments * fix: 🐛 to accept non english character for the first and lastname * fix: 🐛
kate-deriv · Jun 4, 2024 · 6e8fc27 · 6e8fc27
1 parent a68c2a0
commit 6e8fc27
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 31 deletions.
diff --git a/packages/account-v2/src/utils/personalDetailsUtils.ts b/packages/account-v2/src/utils/personalDetailsUtils.ts
@@ -94,7 +94,7 @@ export const getPersonalDetailsInitialValues = (
 };
 
 export const getPersonalDetailsBaseValidationSchema = () => {
-    const characterLengthMessage = 'You should enter 2-50 characters.';
+    const characterLengthMessage = 'Enter no more than 50 characters.';
     const addressLengthMessage = 'Should be less than 70 characters.';
     const phoneNumberLengthMessage = 'You should enter 9-35 numbers.';
 

diff --git a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.jsx b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.jsx
@@ -336,18 +336,20 @@ describe('<PersonalDetails/>', () => {
             errors: {
                 ...mock_errors.errors,
                 first_name: 'letters, spaces, periods, hyphens, apostrophes only',
-                last_name: 'last name should be between 2 and 50 characters.',
+                last_name: 'Enter no more than 50 characters.',
                 date_of_birth: 'You must be 18 years old and above.',
                 tax_identification_number: "Tax Identification Number can't be longer than 25 characters.",
             },
         });
         fireEvent.change(first_name, { target: { value: '123' } });
-        fireEvent.change(last_name, { target: { value: 'a' } });
+        fireEvent.change(last_name, {
+            target: { value: 'ABCDEFGHIJKLMNOP.QRSTU VWXYZabcdefghi-jklmnopqrstuvwxyzh-shs' },
+        });
         fireEvent.change(date_of_birth, { target: { value: '2021-04-13' } });
         fireEvent.change(tax_identification_number, { target: { value: '123456789012345678901234567890' } });
 
         expect(await screen.findByText(/letters, spaces, periods, hyphens, apostrophes only/i)).toBeInTheDocument();
-        expect(await screen.findByText(/last name should be between 2 and 50 characters/i)).toBeInTheDocument();
+        expect(await screen.findByText(/Enter no more than 50 characters./i)).toBeInTheDocument();
         expect(await screen.findByText(/you must be 18 years old and above\./i)).toBeInTheDocument();
         expect(
             await screen.findByText(/tax Identification Number can't be longer than 25 characters\./i)

diff --git a/packages/account/src/Configs/personal-details-config.ts b/packages/account/src/Configs/personal-details-config.ts
@@ -51,7 +51,7 @@ export const personal_details_config = ({
             default_value: account_settings.first_name ?? '',
             rules: [
                 ['req', localize('First name is required.')],
-                ['length', localize('First name should be between 2 and 50 characters.'), { min: 2, max: 50 }],
+                ['length', localize('Enter no more than 50 characters.'), { min: 1, max: 50 }],
                 ['name', getErrorMessages().name()],
             ],
         },
@@ -60,7 +60,7 @@ export const personal_details_config = ({
             default_value: account_settings.last_name ?? '',
             rules: [
                 ['req', localize('Last name is required.')],
-                ['length', localize('Last name should be between 2 and 50 characters.'), { min: 2, max: 50 }],
+                ['length', localize('Enter no more than 50 characters.'), { min: 1, max: 50 }],
                 ['name', getErrorMessages().name()],
             ],
         },

diff --git a/packages/account/src/Helpers/utils.tsx b/packages/account/src/Helpers/utils.tsx
@@ -135,8 +135,8 @@ export const makeSettingsRequest = (values: FormikValues, changeable_fields: str
 
 export const validateName = (name: string) => {
     if (name) {
-        if (!validLength(name.trim(), { min: 2, max: 50 })) {
-            return localize('You should enter 2-50 characters.');
+        if (!validLength(name.trim(), { min: 1, max: 50 })) {
+            return localize('Enter no more than 50 characters.');
         } else if (!validName(name)) {
             return localize('Letters, spaces, periods, hyphens, apostrophes only.');
         }

diff --git a/...ges/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details-form.spec.tsx b/...ges/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details-form.spec.tsx
@@ -97,21 +97,21 @@ describe('<PersonalDetailsForm />', () => {
         });
     });
 
-    it('should display error for 2-50 characters length validation, for First name when entered characters are less than 2', async () => {
+    it('should display error for up to 50 characters length validation, for Last name when entered characters are more than 50', async () => {
         renderComponent();
-        await waitFor(() => {
+        await waitFor(async () => {
             const last_name = screen.getByTestId('dt_last_name');
-            userEvent.type(last_name, 'b');
-            expect(screen.getByText(/You should enter 2-50 characters./)).toBeInTheDocument();
+            await userEvent.type(last_name, 'ABCDEFGHIJKLMNOP.QRSTU VWXYZabcdefghi-jklmnopqrstuvwxyzh-shs');
+            expect(screen.getByText(/Enter no more than 50 characters./)).toBeInTheDocument();
         });
     });
 
     it('should display error for the regex validation, for First name when unacceptable characters are entered', async () => {
         renderComponent();
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const first_name = screen.getByTestId('dt_first_name');
-            userEvent.type(first_name, 'test 3');
+            await userEvent.type(first_name, 'test 3');
             expect(screen.getByText('Letters, spaces, periods, hyphens, apostrophes only.')).toBeInTheDocument();
         });
     });

diff --git a/packages/account/src/Sections/Profile/PersonalDetails/validation.ts b/packages/account/src/Sections/Profile/PersonalDetails/validation.ts
@@ -7,18 +7,19 @@ const getBaseSchema = () =>
     Yup.object().shape({
         first_name: Yup.string()
             .required(localize('First name is required.'))
-            .min(2, localize('You should enter 2-50 characters.'))
-            .max(50, localize('You should enter 2-50 characters.'))
+            .min(1, localize('Enter no more than 50 characters.'))
+            .max(50, localize('Enter no more than 50 characters.'))
             .matches(
-                /^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u,
+                /^(?!.*\s{2,})(?!\s)[\p{L}\s'.-]{1,50}(?<!\s)$/u,
+
                 localize('Letters, spaces, periods, hyphens, apostrophes only.')
             ),
         last_name: Yup.string()
             .required(localize('Last name is required.'))
-            .min(2, localize('You should enter 2-50 characters.'))
-            .max(50, localize('You should enter 2-50 characters.'))
+            .min(1, localize('Enter no more than 50 characters.'))
+            .max(50, localize('Enter no more than 50 characters.'))
             .matches(
-                /^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u,
+                /^(?!.*\s{2,})(?!\s)[\p{L}\s'.-]{1,50}(?<!\s)$/u,
                 localize('Letters, spaces, periods, hyphens, apostrophes only.')
             ),
         phone: Yup.string()

diff --git a/packages/shared/src/utils/validation/declarative-validation-rules.ts b/packages/shared/src/utils/validation/declarative-validation-rules.ts
@@ -58,7 +58,7 @@ export const validPostCode = (value: string) => value === '' || /^[A-Za-z0-9][A-
 export const validTaxID = (value: string) => /(?!^$|\s+)[A-Za-z0-9./\s-]$/.test(value);
 export const validPhone = (value: string) => /^\+?([0-9-]+\s)*[0-9-]+$/.test(value);
 export const validLetterSymbol = (value: string) => /^[A-Za-z]+([a-zA-Z.' -])*[a-zA-Z.' -]+$/.test(value);
-export const validName = (value: string) => /^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u.test(value);
+export const validName = (value: string) => /^(?!.*\s{2,})(?!\s)[\p{L}\s'.-]{1,50}(?<!\s)$/u.test(value);
 export const validLength = (value = '', options: TOptions) =>
     (options.min ? value.length >= Number(options.min) : true) &&
     (options.max ? value.length <= Number(options.max) : true);

diff --git a/packages/tradershub/src/utils/validations/validations.ts b/packages/tradershub/src/utils/validations/validations.ts
@@ -10,13 +10,13 @@ export const personalDetails = Yup.object().shape({
     firstName: Yup.string()
         .required('First name is required.')
         .matches(/^[a-zA-Z\s\-.'']+$/, 'Letters, spaces, periods, hyphens, apostrophes only.')
-        .min(2, 'You should enter 2-50 characters.')
-        .max(50, 'You should enter 2-50 characters.'),
+        .min(1, 'Enter no more than 50 characters.')
+        .max(50, 'Enter no more than 50 characters.'),
     lastName: Yup.string()
         .required('Last Name is required.')
         .matches(/^[a-zA-Z\s\-.'']+$/, 'Letters, spaces, periods, hyphens, apostrophes only.')
-        .min(2, 'You should enter 2-50 characters.')
-        .max(50, 'You should enter 2-50 characters.'),
+        .min(1, 'Enter no more than 50 characters.')
+        .max(50, 'Enter no more than 50 characters.'),
     phoneNumber: Yup.string()
         .required('Phone number is required.')
         .min(9, 'You should enter 9-35 numbers.')

diff --git a/packages/wallets/src/features/accounts/validations.ts b/packages/wallets/src/features/accounts/validations.ts
@@ -32,15 +32,15 @@ export const expiryDateValidator = Yup.date()
 
 export const firstNameValidator = Yup.string()
     .required('This field is required')
-    .matches(/^[a-zA-Z\s\-.'']+$/, 'Letters, spaces, periods, hyphens, apostrophes only.')
-    .min(2, 'You should enter 2-50 characters.')
-    .max(50, 'You should enter 2-50 characters.');
+    .matches(/^(?!.*\s{2,})(?!\s)[\p{L}\s'.-]{1,50}(?<!\s)$/u, 'Letters, spaces, periods, hyphens, apostrophes only.')
+    .min(1, 'Enter no more than 50 characters.')
+    .max(50, 'Enter no more than 50 characters.');
 
 export const lastNameValidator = Yup.string()
     .required('This field is required')
-    .matches(/^[a-zA-Z\s\-.'']+$/, 'Letters, spaces, periods, hyphens, apostrophes only.')
-    .min(2, 'You should enter 2-50 characters.')
-    .max(50, 'You should enter 2-50 characters.');
+    .matches(/^(?!.*\s{2,})(?!\s)[\p{L}\s'.-]{1,50}(?<!\s)$/u, 'Letters, spaces, periods, hyphens, apostrophes only.')
+    .min(1, 'Enter no more than 50 characters.')
+    .max(50, 'Enter no more than 50 characters.');
 
 export const addressFirstLineValidator = Yup.string()
     .trim()