Skip to content

Commit

Permalink
yauheni/likhith/Combined/wall 400/idv error message handled (deriv-co…
Browse files Browse the repository at this point in the history 
…m#8884)

* chore: new pr for wall 400

* feat: ✨ incorporated change to display the id document name

* chore: country selector warning if failed

* fix: ♻️ resolved comments

* refactor: css file rename

* feat: resolved code smell

* refactor: expired and failed different warnings

* refactor: failed messaged moved to country selector

* chore: 💚 trigger build

* refactor: review comments

* refactor: review comments css

* fix: 🐛 incorporated message to display document type

* fix: resolved code smell

* fix: 🐛 incorporated generic error message

* fix: 🐛 added missing dependency

* chore: 🔀 synced with master

* fix: ♻️ incorporated review comments

* fix: resolved un necessary render issue

* fix: 🐛 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: 🐛 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: 🐛 minor CSS fix

* fix: green message responsive position

* fix: green message full width

* fix: ✅ 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: ♻️ 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: ♻️ incorporated review comments

* refactor: rename properties

* refactor: remove is_appstore from tests

* refactor: styles refactor

* fix: ⚡ reduced duplicate data

* fix: incorporated review comments

* fix: ♻️ incorporated review comments

* chore: Trigger Build

* fix: 🚚 modified path

* chore: remove unused fila and variable, updated icons

* revert: 🍻 removed icon changes

* refactor: removed formatting

* fix: removed assignment of default values

* fix: 🐛 unable to select a new doc supporting country

* fix: 🐛 resolved re-render issue

* fix: ⚡ resolved message issue

* refactor: 🚚 renamed varibales

* fix: 🧪 failing testcase

* fix: 🐛 resolved issues with failure messages

* fix: 🐛 resolved issue with DIEL accounts

* fix: 🐛 fixed issue for DIEL clients

* fix: styling issues

* fix: ts error for format-response

* fix: 🚚 fixed path

* fix: 🚚 fixed path

* fix: 🐛 resolved styling bugs

* fix: 🐛 resolved styling bugs

* fix: 🔥 incorporated new styles to fix icon size

* fix: 🔥 incorporated new styles to fix icon size

* fix: ✅ fixed failing testcase

* fix: 💚 eslint issues

* fix: layout styles

* fix: style issues

* fix: styles

* fix: moved common styles to core

* fix: 💄 updated styles

* refactor: incorporated review comments

* Merge branch 'master' into combined/wall-400/IDV-error-message-handled

---------

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 <shahzaib@deriv.com>
  • Loading branch information
@likhith-deriv @yauheni-deriv @shahzaib-deriv
4 people authored Oct 4, 2023
1 parent ad3eb3b commit 164c4c7
Show file tree
Hide file tree
Showing 55 changed files with 2,742 additions and 1,771 deletions.
1 change: 1 addition & 0 deletions packages/account/src/Assets/ic-poi-dob-example.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/account/src/Assets/ic-poi-name-example.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions packages/account/src/Components/form-body/form-body.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
import React from 'react';
import { ScrollbarsContainer } from '../scrollbars-container/scrollbars-container';
import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components';
import classNames from 'classnames';

type TFormBody = {
scroll_offset?: string;
className?: string;
};

export const FormBody = ({ children, scroll_offset }: React.PropsWithChildren<TFormBody>) => (
export const FormBody = ({ children, scroll_offset, className }: React.PropsWithChildren<TFormBody>) => (
<React.Fragment>
<DesktopWrapper>
<ScrollbarsContainer className='account__scrollbars_container--grid-layout' scroll_offset={scroll_offset}>
<ScrollbarsContainer
className={classNames('account__scrollbars_container--grid-layout', className)}
scroll_offset={scroll_offset}
>
{children}
</ScrollbarsContainer>
</DesktopWrapper>
<MobileWrapper>
<Div100vhContainer
className='account__scrollbars_container--grid-layout'
className={classNames('account__scrollbars_container--grid-layout', className)}
height_offset={scroll_offset || '200px'}
>
{children}
Expand Down
120 changes: 120 additions & 0 deletions packages/account/src/Components/forms/__tests__/idv-form.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import IDVForm from '../idv-form';
import { Formik } from 'formik';

jest.mock('Helpers/utils', () => ({
...jest.requireActual('Helpers/utils'),
getDocumentData: jest.fn((country_code, key) => {
const data = {
tc: {
document_1: {
new_display_name: '',
example_format: '5436454364243',
sample_image: '',
},
document_2: {
new_display_name: '',
example_format: 'A-52431',
sample_image: '',
},
},
};
return data[country_code][key];
}),
}));

jest.mock('formik', () => ({
...jest.requireActual('formik'),
useFormikContext: jest.fn(() => ({
values: {
document_type: {},
document_number: '',
},
errors: {},
touched: {},
setFieldValue: jest.fn(),
setFieldTouched: jest.fn(),
validateForm: jest.fn(),
validateField: jest.fn(),
handleBlur: jest.fn(),
handleChange: jest.fn(),
})),
}));

jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
isDesktop: jest.fn(() => true),
isMobile: jest.fn(() => false),
}));

describe('<IDVForm/>', () => {
const mock_props = {
selected_country: {
value: 'tc',
identity: {
services: {
idv: {
documents_supported: {
document_1: {
display_name: 'Test document 1 name',
format: '5436454364243',
},
document_2: {
display_name: 'Test document 2 name',
format: 'A54321',
},
},
has_visual_sample: 1,
},
},
},
},
};

const mock_values = {
document_type: {
display_name: 'Test document 1 name',
format: '5436454364243',
id: '1',
value: 'document_1',
},
document_number: '5436454364243',
};

it('should render IDVForm component', () => {
render(<IDVForm {...mock_props} />, {
wrapper: ({ children }) => (
<Formik initialValues={mock_values} onSubmit={jest.fn()}>
{() => children}
</Formik>
),
});

const document_type_input = screen.getByLabelText('Choose the document type');
const document_number_input = screen.getByLabelText('Enter your document number');

expect(document_type_input).toBeInTheDocument();
expect(document_number_input).toBeInTheDocument();
});

it('Should change the document type value when document type is changed', async () => {
render(<IDVForm {...mock_props} />, {
wrapper: ({ children }) => (
<Formik initialValues={mock_values} onSubmit={jest.fn()}>
{() => children}
</Formik>
),
});

const document_type_input = screen.getByLabelText('Choose the document type');

userEvent.click(document_type_input);
expect(await screen.findByText('Test document 1 name')).toBeInTheDocument();
userEvent.tab();
await waitFor(() => {
expect(screen.queryByText('Test document 1 name')).not.toBeInTheDocument();
});
});
});
96 changes: 48 additions & 48 deletions packages/account/src/Components/forms/idv-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
import React from 'react';
import classNames from 'classnames';
import { Field, FieldProps } from 'formik';
import { localize } from '@deriv/translations';
import { formatInput, getIDVNotApplicableOption } from '@deriv/shared';
import { Field, FormikProps, FieldProps, useFormikContext } from 'formik';
import { ResidenceList } from '@deriv/api-types';
import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative, Text } from '@deriv/components';
import { formatInput, getIDVNotApplicableOption } from '@deriv/shared';
import { localize } from '@deriv/translations';
import {
getDocumentData,
preventEmptyClipboardPaste,
generatePlaceholderText,
getExampleFormat,
} from '../../Helpers/utils';
import { TDocument, TIDVForm } from 'Types';
import { TDocument, TIDVFormValues } from '../../Types';

type TIDVFormProps = {
selected_country: ResidenceList[0];
hide_hint?: boolean;
class_name?: string;
can_skip_document_verification?: boolean;
};

const IDVForm = ({
errors,
touched,
values,
handleBlur,
handleChange,
setFieldValue,
class_name,
selected_country,
hide_hint,
can_skip_document_verification = false,
}: TIDVForm) => {
const [document_list, setDocumentList] = React.useState<TDocument[]>([]);
}: TIDVFormProps) => {
const [document_list, setDocumentList] = React.useState<Array<TDocument>>([]);
const [document_image, setDocumentImage] = React.useState<string | null>(null);
const [selected_doc, setSelectedDoc] = React.useState('');

const { documents_supported: document_data, has_visual_sample } = selected_country?.identity?.services?.idv ?? {};

const { errors, touched, values, handleBlur, handleChange, setFieldValue }: FormikProps<TIDVFormValues> =
useFormikContext();
const default_document = {
id: '',
text: '',
Expand Down Expand Up @@ -93,10 +97,12 @@ const IDVForm = ({
};

const onKeyUp = (e: { target: HTMLInputElement }, document_name: string) => {
const { example_format } =
document_name === 'document_number' ? values.document_type : values.document_type.additional;
const example_format =
document_name === 'document_number'
? values?.document_type?.example_format
: values?.document_type?.additional?.example_format;
let current_input: string | null = null;
current_input = example_format.includes('-')
current_input = example_format?.includes('-')
? formatInput(example_format, current_input ?? e.target.value, '-')
: e.target.value;
setFieldValue(document_name, current_input, true);
Expand Down Expand Up @@ -135,38 +141,32 @@ const IDVForm = ({
{({ field }: FieldProps) => (
<React.Fragment>
<DesktopWrapper>
<div className='document-dropdown'>
<Autocomplete
{...field}
name='document_type'
data-lpignore='true'
error={touched.document_type && errors.document_type}
autoComplete='off'
type='text'
label={localize('Choose the document type')}
list_items={document_list}
value={values.document_type.text}
onBlur={(e: { target: HTMLInputElement }) => {
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
/>
</div>
<Autocomplete
{...field}
data-lpignore='true'
error={touched.document_type && errors.document_type}
autoComplete='off'
type='text'
label={localize('Choose the document type')}
list_items={document_list}
value={values.document_type.text}
onBlur={(e: { target: HTMLInputElement }) => {
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
/>
</DesktopWrapper>
<MobileWrapper>
<SelectNative
Expand All @@ -193,7 +193,7 @@ const IDVForm = ({
)}
</Field>
</fieldset>
{values.document_type.id !== IDV_NOT_APPLICABLE_OPTION.id && (
{values?.document_type?.id !== IDV_NOT_APPLICABLE_OPTION.id && (
<fieldset
className={classNames({
'proof-of-identity__fieldset-input': !hide_hint,
Expand Down
Loading

0 comments on commit 164c4c7

Please sign in to comment.