From 459305f1c53418f81e665eb75d1b55007c170750 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Date: Thu, 16 Nov 2023 10:07:12 +0400 Subject: [PATCH] [COJ] Likhith/186/enhance idv form for uganda (#11295) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: new pr for wall 400 * feat: :sparkles: incorporated change to display the id document name * chore: country selector warning if failed * fix: :recycle: resolved comments * refactor: css file rename * feat: resolved code smell * refactor: expired and failed different warnings * refactor: failed messaged moved to country selector * chore: :green_heart: trigger build * refactor: review comments * refactor: review comments css * fix: :bug: incorporated message to display document type * fix: resolved code smell * fix: :bug: incorporated generic error message * fix: :bug: added missing dependency * chore: :twisted_rightwards_arrows: synced with master * fix: :recycle: incorporated review comments * fix: resolved un necessary render issue * fix: :bug: resolved issue with expired status * style: fix side container width in poi (#39) * style: container height fix for POI error messages when content in not overflowing (#40) * fix: onfido message alignment * fix: :bug: incorporated continue trade button * fix: onfido page mobile * style: no padding on fields container in idv screen (#41) * refactor: onfido hint center alignment fix * fix: odd translate value fix * fix: :bug: minor CSS fix * fix: green message responsive position * fix: green message full width * fix: :white_check_mark: updated testcases * fix: failing tests * refactor: code and ts fixes * fix: display of IDV error * chore: add duplication account error * refactor: added undefined check to response data * chore: review comments * chore: review comments * fix: :recycle: incorporated review comments * fix: barriers test fix form master * fix: barriers test * chore: refactored object.freeze to as const * chore: optional chaining to document type * chore: update spec file for idv-form * test: update personal-details spec * chore: review comments * refactor: css structure * fix: barriers test * fix: :recycle: incorporated review comments * refactor: rename properties * refactor: remove is_appstore from tests * refactor: styles refactor * fix: :zap: reduced duplicate data * fix: incorporated review comments * fix: :recycle: incorporated review comments * chore: Trigger Build * fix: :truck: modified path * chore: remove unused fila and variable, updated icons * revert: :beers: removed icon changes * refactor: removed formatting * fix: removed assignment of default values * fix: :bug: unable to select a new doc supporting country * fix: :bug: resolved re-render issue * fix: :zap: resolved message issue * refactor: :truck: renamed varibales * fix: :test_tube: failing testcase * fix: :bug: resolved issues with failure messages * fix: :bug: resolved issue with DIEL accounts * fix: :bug: fixed issue for DIEL clients * fix: styling issues * fix: ts error for format-response * fix: :truck: fixed path * fix: :truck: fixed path * fix: :bug: resolved styling bugs * fix: :bug: resolved styling bugs * fix: :fire: incorporated new styles to fix icon size * fix: :fire: incorporated new styles to fix icon size * fix: :white_check_mark: fixed failing testcase * fix: :green_heart: eslint issues * fix: layout styles * fix: style issues * fix: styles * fix: moved common styles to core * fix: :lipstick: updated styles * refactor: incorporated review comments * Merge branch 'master' into combined/wall-400/IDV-error-message-handled * fix: bug: /WEBREL-1358/personal-details page and poa page css issue * fix: layout button * fix: layout button * fix: mt5 next button not getting enabled * fix: resolved issue with button * fix: resolved issue with button * fix: resolved missing dropdown * fix: removed console * fix: incorporated review comments * feat: :sparkles: incorporated new images and merged checkbox feature * feat: :sparkles: incorporated new images and merged checkbox feature * fix: idv failed document type * fix: incorporated error message scenario * fix: styling as per new figma * fix: styling as per new figma * fix: spacing between fields * fix: spacing between fields * fix: spacing between fields * fix: incorporated new error code and styles as per new figma * fix: incorporated new error code and styles as per new figma * Merge branch 'master' into likhith/kyc-195/display-idv-error-messages * fix: code smells * chore: trigger rebuild * fix: issue with checkbox * feat: added hint text and updated label text for Uganda * chore: trigger build * fix: :dizzy: added translation for Additional document * fix: sub task COJ-209 * fix: sub task COJ-209 --------- Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: yauheni-deriv <103182683+yauheni-deriv@users.noreply.github.com> Co-authored-by: Shahzaib --- .../forms/__tests__/idv-form.spec.tsx | 63 ++++- .../account/src/Components/forms/idv-form.tsx | 235 +++++++++--------- .../src/Constants/idv-document-config.ts | 1 + .../src/Helpers/__tests__/utils.spec.tsx | 18 +- packages/account/src/Helpers/utils.tsx | 23 +- .../_common/components/account-common.scss | 16 +- 6 files changed, 231 insertions(+), 125 deletions(-) diff --git a/packages/account/src/Components/forms/__tests__/idv-form.spec.tsx b/packages/account/src/Components/forms/__tests__/idv-form.spec.tsx index 37d6661f8372..cc63aa68fa0b 100644 --- a/packages/account/src/Components/forms/__tests__/idv-form.spec.tsx +++ b/packages/account/src/Components/forms/__tests__/idv-form.spec.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { Formik } from 'formik'; -import { render, screen, waitFor } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import IDVForm from '../idv-form'; +import { TIDVFormValues } from 'Types'; jest.mock('Helpers/utils', () => ({ ...jest.requireActual('Helpers/utils'), @@ -32,7 +33,7 @@ jest.mock('@deriv/shared', () => ({ })); describe('', () => { - const mock_props = { + const mock_props: React.ComponentProps = { selected_country: { value: 'tc', identity: { @@ -99,4 +100,62 @@ describe('', () => { expect(screen.queryByText('Test document 1 name')).not.toBeInTheDocument(); }); }); + + it('should render the hint messages for the selected document', async () => { + const new_props: React.ComponentProps = { + selected_country: { + value: 'tc', + identity: { + services: { + idv: { + documents_supported: { + document_1: { + display_name: 'Test document 1 name', + format: '5436454364243', + additional: { + display_name: 'Test document additional', + format: '001234', + }, + }, + document_2: { + display_name: 'Test document 2 name', + format: 'A54321', + }, + }, + has_visual_sample: 1, + }, + }, + }, + }, + }; + + const new_values: TIDVFormValues = { + ...mock_values, + document_type: { + ...mock_values.document_type, + text: '12345', + additional: { + display_name: 'Additional number', + example_format: '0123456789', + }, + }, + }; + + render(, { + wrapper: ({ children }) => ( + + {() => children} + + ), + }); + + const document_type_input = screen.getByLabelText('Choose the document type'); + + userEvent.click(document_type_input); + await waitFor(() => { + const el_selected_document = screen.getByText('Test document 1 name'); + fireEvent.change(el_selected_document); + }); + expect(await screen.findByText('Example: 0123456789')).toBeInTheDocument(); + }); }); diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx index d83994230356..69b4289829ec 100644 --- a/packages/account/src/Components/forms/idv-form.tsx +++ b/packages/account/src/Components/forms/idv-form.tsx @@ -117,116 +117,127 @@ const IDVForm = ({ }; return ( - -
-
-
-
-
-
-
- - {({ field }: FieldProps) => ( - - - { - handleBlur(e); - if (!getDocument(e.target.value)) { - resetDocumentItemSelected(); - } - }} - onChange={handleChange} - onItemSelection={(item: TDocument) => { - if (item.text === 'No results found' || !item.text) { - setSelectedDoc(''); - resetDocumentItemSelected(); - } else { - bindDocumentData(item); - } - }} - required - /> - - - +
+
+
+
+
+
+ + {({ field }: FieldProps) => ( + + + { + handleBlur(e); + if (!getDocument(e.target.value)) { + resetDocumentItemSelected(); + } + }} + onChange={handleChange} + onItemSelection={(item: TDocument) => { + if (item.text === 'No results found' || !item.text) { + setSelectedDoc(''); + resetDocumentItemSelected(); + } else { + bindDocumentData(item); } - label={localize('Choose the document type')} - placeholder={localize('Please select')} - list_items={document_list} - value={values.document_type.text} - onChange={e => { - handleChange(e); - const selected_document = getDocument(e.target.value); - bindDocumentData(selected_document); - }} - use_text={true} - required - /> - - - )} - -
- {values?.document_type?.id !== IDV_NOT_APPLICABLE_OPTION.id && ( + }} + required + /> + + + { + handleChange(e); + const selected_document = getDocument(e.target.value); + bindDocumentData(selected_document); + }} + use_text={true} + required + /> + + + )} + +
+ {values?.document_type?.id !== IDV_NOT_APPLICABLE_OPTION.id && ( +
{({ field }: FieldProps) => ( - - - onKeyUp(e, 'document_number') - } - className='additional-field' - required - label={ - values.document_type.id && - generatePlaceholderText(selected_doc) + + onKeyUp(e, 'document_number') + } + required + label={ + values.document_type.id && + generatePlaceholderText(selected_doc) + } + /> + )} + +
+ {values.document_type.additional?.display_name && ( +
+ + {({ field }: FieldProps) => { + const additional_document_placeholder = localize( + 'Enter your {{document_name}}', + { + document_name: + values.document_type?.additional?.display_name?.toLowerCase() ?? + localize('additional document number'), } - /> - {values.document_type.additional?.display_name && ( + ); + return ( - )} - - )} - -
- )} -
+ ); + }} + + + )} + + )}
-
- + + ); }; diff --git a/packages/account/src/Constants/idv-document-config.ts b/packages/account/src/Constants/idv-document-config.ts index c63b2dcdf1d0..7c85a45c45c6 100644 --- a/packages/account/src/Constants/idv-document-config.ts +++ b/packages/account/src/Constants/idv-document-config.ts @@ -93,6 +93,7 @@ const getIDVDocumentConfig = () => ({ national_id_no_photo: { new_display_name: localize('National ID (No Photo)'), example_format: 'CM12345678PE1D', + additional_document_example_format: '0123456789', }, }, zw: { diff --git a/packages/account/src/Helpers/__tests__/utils.spec.tsx b/packages/account/src/Helpers/__tests__/utils.spec.tsx index e8faed2780ac..d391084d7d9e 100644 --- a/packages/account/src/Helpers/__tests__/utils.spec.tsx +++ b/packages/account/src/Helpers/__tests__/utils.spec.tsx @@ -30,15 +30,29 @@ describe('generatePlaceholderText', () => { it('should return the correct placeholder text for passport', () => { expect(generatePlaceholderText('passport')).toEqual('Enter your document number'); }); + + it('should return the correct placeholder text for NIN for Uganda', () => { + expect(generatePlaceholderText('national_id_no_photo')).toEqual( + 'Enter your National Identification Number (NIN)' + ); + }); }); describe('documentAdditionalError', () => { + const config = { + format: /^[a-z]+$/, + display_name: 'additional doc number', + }; it('should set the correct additional document error when format is incorrect', () => { - expect(documentAdditionalError('testdoc', '/[a-z]/')).toEqual('Please enter the correct format. '); + expect(documentAdditionalError('test1doc', config)).toEqual('Please enter the correct format. '); }); it('should set the correct additional document error when value is not provided', () => { - expect(documentAdditionalError('', '/[a-z]+/')).toEqual('Please enter your document number. '); + expect(documentAdditionalError('', config)).toEqual('Please enter your additional doc number. '); + }); + + it('should return no error when input matches the config', () => { + expect(documentAdditionalError('testdoc', config)).toBeNull(); }); }); diff --git a/packages/account/src/Helpers/utils.tsx b/packages/account/src/Helpers/utils.tsx index 7dd38ecac073..ee68e4af9a72 100644 --- a/packages/account/src/Helpers/utils.tsx +++ b/packages/account/src/Helpers/utils.tsx @@ -17,15 +17,17 @@ import { TServerError } from '../Types'; import { LANGUAGE_CODES } from '../Constants/onfido'; export const documentAdditionalError = ( - document_additional: string | undefined, - document_additional_format: string + additional_document_value: string | undefined, + document_additional_config: FormikValues ) => { let error_message = null; - if (!document_additional) { - error_message = localize('Please enter your document number. '); + if (!additional_document_value) { + error_message = localize('Please enter your {{document_name}}. ', { + document_name: document_additional_config?.display_name?.toLowerCase() ?? localize('document number'), + }); } else { - const format_regex = getRegex(document_additional_format); - if (!format_regex.test(document_additional)) { + const format_regex = getRegex(document_additional_config?.format); + if (!format_regex.test(additional_document_value)) { error_message = localize('Please enter the correct format. '); } } @@ -103,6 +105,8 @@ export const generatePlaceholderText = (selected_doc: string): string => { return localize('Enter Driver License Reference number'); case 'ssnit': return localize('Enter your SSNIT number'); + case 'national_id_no_photo': + return localize('Enter your National Identification Number (NIN)'); default: return localize('Enter your document number'); } @@ -147,8 +151,8 @@ export const isDocumentTypeValid = (document_type: FormikValues) => { return undefined; }; -export const isAdditionalDocumentValid = (document_type: FormikValues, document_additional?: string) => { - const error_message = documentAdditionalError(document_additional, document_type.additional?.format); +export const isAdditionalDocumentValid = (document_type: FormikValues, additional_document_value?: string) => { + const error_message = documentAdditionalError(additional_document_value, document_type?.additional); if (error_message) { return localize(error_message) + getExampleFormat(document_type.additional?.example_format); } @@ -167,6 +171,9 @@ export const isDocumentNumberValid = (document_number: string, document_type: Fo case 'ssnit': document_name = 'SSNIT number'; break; + case 'national_id_no_photo': + document_name = 'NIN'; + break; default: document_name = 'document number'; break; diff --git a/packages/core/src/sass/app/_common/components/account-common.scss b/packages/core/src/sass/app/_common/components/account-common.scss index dc81c134b420..3bd3f832a316 100644 --- a/packages/core/src/sass/app/_common/components/account-common.scss +++ b/packages/core/src/sass/app/_common/components/account-common.scss @@ -477,13 +477,27 @@ margin-bottom: unset; } } + &-container { + display: flex; + flex-direction: column; + } } } } .additional-field { margin-top: 0.8rem; - margin-bottom: 2rem; + margin-bottom: 2rem !important; + @include mobile { + margin-top: 1.6rem; + } + + .dc-input { + margin-bottom: unset; + &__bottom-label { + margin-bottom: -2rem; + } + } } }