[WALL] Lubega / WALL-4175 / POA and personal details validations and …

…discrepancies (deriv-com#15345) * fix: poa and personal details validations and discrepancies * fix: updated city validator regexp
heorhi-deriv · May 24, 2024 · 3f0efe3 · 3f0efe3
1 parent fbedb3e
commit 3f0efe3
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 33 deletions.
diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
@@ -5,7 +5,6 @@
 
     @include desktop {
         max-height: calc(var(--wallets-vh, 1vh) * 100 - 10rem);
-        overflow: auto;
     }
 
     @include mobile {

diff --git a/packages/wallets/src/features/accounts/screens/AddressSection/AddressSection.tsx b/packages/wallets/src/features/accounts/screens/AddressSection/AddressSection.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 import { useSettings, useStatesList } from '@deriv/api-v2';
 import { FlowTextField, useFlow } from '../../../../components';
 import { InlineMessage, WalletDropdown, WalletText } from '../../../../components/Base';
-import { letterRequiredValidator, requiredValidator } from '../../validations';
+import {
+    addressFirstLineValidator,
+    addressSecondLineValidator,
+    cityValidator,
+    postcodeValidator,
+} from '../../validations';
 import './AddressSection.scss';
 
 const AddressSection: React.FC = () => {
@@ -30,18 +35,19 @@ const AddressSection: React.FC = () => {
                     defaultValue={getSettings?.address_line_1 ?? ''}
                     label='First line of address*'
                     name='firstLine'
-                    validationSchema={requiredValidator}
+                    validationSchema={addressFirstLineValidator}
                 />
                 <FlowTextField
                     defaultValue={getSettings?.address_line_2 ?? ''}
-                    label='Second line of address'
+                    label='Second line of address (optional)'
                     name='secondLine'
+                    validationSchema={addressSecondLineValidator}
                 />
                 <FlowTextField
                     defaultValue={getSettings?.address_city ?? ''}
                     label='Town/City*'
                     name='townCityLine'
-                    validationSchema={letterRequiredValidator}
+                    validationSchema={cityValidator}
                 />
                 <WalletDropdown
                     label='State/Province'
@@ -53,8 +59,9 @@ const AddressSection: React.FC = () => {
                 />
                 <FlowTextField
                     defaultValue={getSettings?.address_postcode ?? ''}
-                    label='Postal/ZIP Code'
+                    label='Postal/ZIP code'
                     name='zipCodeLine'
+                    validationSchema={postcodeValidator}
                 />
             </div>
         </div>

diff --git a/packages/wallets/src/features/accounts/screens/DocumentSubmission/DocumentSubmission.tsx b/packages/wallets/src/features/accounts/screens/DocumentSubmission/DocumentSubmission.tsx
@@ -22,7 +22,7 @@ const DocumentSubmission: React.FC = () => {
     return (
         <div className='wallets-poa__document'>
             <div className='wallets-poa__document__title'>
-                <WalletText weight='bold'>{t('Document Submission')}</WalletText>
+                <WalletText weight='bold'>{t('Document submission')}</WalletText>
                 <div className='wallets-poa__document__title__divider' />
             </div>
             <div className='wallets-poa__document__container'>
@@ -41,9 +41,24 @@ const DocumentSubmission: React.FC = () => {
                         ))}
                     </ul>
                 </div>
+                <div className='wallets-poa__document__container__common-mistakes'>
+                    <WalletText size='sm' weight='bold'>
+                        {t('Common mistakes')}
+                    </WalletText>
+
+                    <div className='wallets-common-mistakes__content'>
+                        {getExampleImagesConfig().map(config => (
+                            <CommonMistakesExamples
+                                description={config.description}
+                                image={<config.image />}
+                                key={`common-mistake-${config.description}`}
+                            />
+                        ))}
+                    </div>
+                </div>
                 <div className='wallets-poa__document__container__upload'>
                     <WalletText size='sm' weight='bold'>
-                        {t('Upload File')}
+                        {t('Upload file')}
                     </WalletText>
                     <Dropzone
                         description={t(
@@ -66,21 +81,6 @@ const DocumentSubmission: React.FC = () => {
                         <WalletText size={isMobile ? 'xs' : 'sm'}>{t('Maximum size : 8MB')}</WalletText>
                     </div>
                 </div>
-                <div className='wallets-poa__document__container__common-mistakes'>
-                    <WalletText size='sm' weight='bold'>
-                        {t('Common Mistakes')}
-                    </WalletText>
-
-                    <div className='wallets-common-mistakes__content'>
-                        {getExampleImagesConfig().map(config => (
-                            <CommonMistakesExamples
-                                description={config.description}
-                                image={<config.image />}
-                                key={`common-mistake-${config.description}`}
-                            />
-                        ))}
-                    </div>
-                </div>
             </div>
         </div>
     );

diff --git a/...ts/src/features/accounts/screens/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx b/...ts/src/features/accounts/screens/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx
@@ -43,7 +43,7 @@ describe('DocumentSubmission', () => {
                 {() => <DocumentSubmission />}
             </FlowProvider>
         );
-        expect(screen.getByText('Document Submission')).toBeInTheDocument();
+        expect(screen.getByText('Document submission')).toBeInTheDocument();
         expect(
             screen.getByText(
                 'We accept only these types of documents as proof of address. The document must be recent (issued within last 12 months) and include your name and address:'
@@ -56,14 +56,14 @@ describe('DocumentSubmission', () => {
             )
         ).toBeInTheDocument();
         expect(screen.getByText('Home rental agreement: valid and current agreement.')).toBeInTheDocument();
-        expect(screen.getByText('Upload File')).toBeInTheDocument();
+        expect(screen.getByText('Upload file')).toBeInTheDocument();
         expect(
             screen.getByText('Remember, selfies, pictures of houses, or non-related images will be rejected.')
         ).toBeInTheDocument();
         expect(screen.getByText('Drag and drop a file or click to browse your files.')).toBeInTheDocument();
         expect(screen.getByText('Supported formats : JPEG, JPG, PNG, PDF, and GIF only')).toBeInTheDocument();
         expect(screen.getByText('Maximum size : 8MB')).toBeInTheDocument();
-        expect(screen.getByText('Common Mistakes')).toBeInTheDocument();
+        expect(screen.getByText('Common mistakes')).toBeInTheDocument();
         expect(screen.getByText('Name in document doesn’t match your Deriv profile.')).toBeInTheDocument();
         expect(screen.getByText('Address in document doesn’t match address you entered above.')).toBeInTheDocument();
         expect(screen.getByText('Document issued more than 12-months ago.')).toBeInTheDocument();

diff --git a/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.scss b/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.scss
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 2.4rem;
+    gap: 1.2rem;
     background: var(--system-light-8-primary-background, #fff);
     padding: 2.4rem;
 
@@ -30,6 +30,7 @@
         flex-direction: column;
         align-items: center;
         gap: 1.6rem;
+        margin-top: 0.8rem;
 
         & .wallets-dropdown,
         & .wallets-textfield {
@@ -38,4 +39,12 @@
             }
         }
     }
+
+    &__inline {
+        width: 40rem;
+
+        @include mobile {
+            width: 100%;
+        }
+    }
 }
diff --git a/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx b/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect, useMemo } from 'react';
 import * as Yup from 'yup';
 import { useResidenceList, useSettings } from '@deriv/api-v2';
-import { FlowTextField, Loader, useFlow, WalletDropdown, WalletText } from '../../../../components';
+import { FlowTextField, InlineMessage, Loader, useFlow, WalletDropdown, WalletText } from '../../../../components';
 import { accountOpeningReasonList } from './constants';
 import './PersonalDetails.scss';
 
@@ -63,6 +63,20 @@ const PersonalDetails = () => {
                             Any information you provide is confidential and will be used for verification purposes only.
                         </WalletText>
                     </div>
+                    <div className='wallets-personal-details__inline'>
+                        <InlineMessage type='information' variant='contained'>
+                            <WalletText size='xs'>
+                                Need help with tax info? Let us know via{' '}
+                                <button
+                                    className='wallets-link wallets-link__variant--bold'
+                                    onClick={() => window.LC_API.open_chat_window()}
+                                >
+                                    live chat
+                                </button>
+                                .
+                            </WalletText>
+                        </InlineMessage>
+                    </div>
                     <div className='wallets-personal-details__form'>
                         <WalletDropdown
                             label='Citizenship*'

diff --git a/packages/wallets/src/features/accounts/screens/PersonalDetails/constants.tsx b/packages/wallets/src/features/accounts/screens/PersonalDetails/constants.tsx
@@ -11,4 +11,8 @@ export const accountOpeningReasonList = [
         text: 'Speculative',
         value: 'Speculative',
     },
+    {
+        text: 'Peer-to-peer exchange',
+        value: 'Peer-to-peer exchange',
+    },
 ];
diff --git a/packages/wallets/src/features/accounts/validations.ts b/packages/wallets/src/features/accounts/validations.ts
@@ -42,6 +42,28 @@ export const lastNameValidator = Yup.string()
     .min(2, 'You should enter 2-50 characters.')
     .max(50, 'You should enter 2-50 characters.');
 
-export const letterRequiredValidator = Yup.string()
-    .matches(/^[a-zA-Z\s\-.'']+$/, 'Only letters, space, hyphen, period, and apostrophe are allowed.')
-    .required('This field is required');
+export const addressFirstLineValidator = Yup.string()
+    .trim()
+    .required('First line of address is required.')
+    .max(70, 'Should be less than 70.')
+    .matches(
+        /^[\p{L}\p{Nd}\s'.,:;()\u00b0@#/-]{0,70}$/u,
+        "Use only the following special characters: . , ' : ; ( ) ° @ # / -'"
+    );
+
+export const addressSecondLineValidator = Yup.string()
+    .trim()
+    .max(70, 'Should be less than 70.')
+    .matches(
+        /^[\p{L}\p{Nd}\s'.,:;()\u00b0@#/-]{0,70}$/u,
+        "Use only the following special characters: . , ' : ; ( ) ° @ # / -'"
+    );
+
+export const cityValidator = Yup.string()
+    .required('Town/City is required.')
+    .max(70, 'Should be less than 70.')
+    .matches(/^[a-zA-Z\s\-.'']+$/, 'Only letters, space, hyphen, period, and apostrophe are allowed.');
+
+export const postcodeValidator = Yup.string()
+    .max(20, 'Please enter a Postal/ZIP code under 20 characters.')
+    .matches(/^[A-Za-z0-9][A-Za-z0-9\s-]*$/, 'Only letters, numbers, space, and hyphen are allowed.');
diff --git a/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx b/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx
@@ -206,10 +206,21 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                     !formValues.placeOfBirth ||
                     !formValues.taxResidence ||
                     !formValues.accountOpeningReason ||
-                    !formValues.taxIdentificationNumber
+                    !formValues.taxIdentificationNumber ||
+                    !!errors.taxIdentificationNumber
                 );
             case 'poaScreen':
-                return !formValues.townCityLine || !formValues.firstLine || !formValues.poaDocument || isUploadLoading;
+                return (
+                    !formValues.townCityLine ||
+                    !formValues.firstLine ||
+                    !formValues.poaDocument ||
+                    !!errors.townCityLine ||
+                    !!errors.firstLine ||
+                    !!errors.secondLine ||
+                    !!errors.zipCodeLine ||
+                    !!errors.poaDocument ||
+                    isUploadLoading
+                );
             case 'duplicateUploadErrorScreen':
                 return true;
             default: