From 3f0efe339296c908636d4d61dd8d118d5d24fbbf Mon Sep 17 00:00:00 2001 From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com> Date: Fri, 24 May 2024 15:31:10 +0800 Subject: [PATCH] [WALL] Lubega / WALL-4175 / POA and personal details validations and discrepancies (#15345) * fix: poa and personal details validations and discrepancies * fix: updated city validator regexp --- .../ModalStepWrapper/ModalStepWrapper.scss | 1 - .../screens/AddressSection/AddressSection.tsx | 17 +++++++--- .../DocumentSubmission/DocumentSubmission.tsx | 34 +++++++++---------- .../__tests__/DocumentSubmission.spec.tsx | 6 ++-- .../PersonalDetails/PersonalDetails.scss | 11 +++++- .../PersonalDetails/PersonalDetails.tsx | 16 ++++++++- .../screens/PersonalDetails/constants.tsx | 4 +++ .../src/features/accounts/validations.ts | 28 +++++++++++++-- .../cfd/flows/Verification/Verification.tsx | 15 ++++++-- 9 files changed, 99 insertions(+), 33 deletions(-) diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss index 9f8febf57d2c..d407e79cf437 100644 --- 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 index be440e8dc8c8..83020e2ec2fe 100644 --- 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} /> { /> diff --git a/packages/wallets/src/features/accounts/screens/DocumentSubmission/DocumentSubmission.tsx b/packages/wallets/src/features/accounts/screens/DocumentSubmission/DocumentSubmission.tsx index 20726716119c..134ecbd2a7df 100644 --- 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 (
- {t('Document Submission')} + {t('Document submission')}
@@ -41,9 +41,24 @@ const DocumentSubmission: React.FC = () => { ))}
+
+ + {t('Common mistakes')} + + +
+ {getExampleImagesConfig().map(config => ( + } + key={`common-mistake-${config.description}`} + /> + ))} +
+
- {t('Upload File')} + {t('Upload file')} { {t('Maximum size : 8MB')}
-
- - {t('Common Mistakes')} - - -
- {getExampleImagesConfig().map(config => ( - } - key={`common-mistake-${config.description}`} - /> - ))} -
-
); diff --git a/packages/wallets/src/features/accounts/screens/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx b/packages/wallets/src/features/accounts/screens/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx index 681e8bc70812..61ac71debe2a 100644 --- a/packages/wallets/src/features/accounts/screens/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx +++ b/packages/wallets/src/features/accounts/screens/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx @@ -43,7 +43,7 @@ describe('DocumentSubmission', () => { {() => } ); - 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 index 776d685be557..36c13242e161 100644 --- 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 index ebcf1864a95a..547eea7636d1 100644 --- 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. +
+ + + Need help with tax info? Let us know via{' '} + + . + + +
= ({ 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: