Likhith/kyc 195/display idv error messages

packages/account/src/Components/form-body-section/form-body-section.tsx

@@ -60,7 +60,7 @@ const FormBodySection = ({
                     ) : (
                         <React.Fragment>
                             <Text as='p' size={isMobile() ? 'xxs' : 'xs'} weight='bold'>
-                                <Localize i18n_default_text='Example' />
+                                <Localize i18n_default_text='Example :' />
                             </Text>
                             <div className='account-form__section-side-note__example-image'>{side_note}</div>
                         </React.Fragment>

packages/account/src/Components/form-body/form-body.tsx

@@ -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}

packages/account/src/Components/forms/__tests__/idv-form.spec.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import IDVForm from '../idv-form';
+
+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('@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();
+        });
+    });
+});

packages/account/src/Components/forms/idv-form.tsx

@@ -1,34 +1,38 @@
 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 } 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 [selected_doc, setSelectedDoc] = React.useState('');
 
     const { documents_supported: document_data } = selected_country?.identity?.services?.idv ?? {};
 
+    const { errors, touched, values, handleBlur, handleChange, setFieldValue }: FormikProps<TIDVFormValues> =
+        useFormikContext();
     const default_document = {
         id: '',
         text: '',
@@ -74,6 +78,7 @@ const IDVForm = ({
                     example_format,
                 };
             });
+
             if (can_skip_document_verification) {
                 setDocumentList([...new_document_list, IDV_NOT_APPLICABLE_OPTION]);
             } else {
@@ -91,10 +96,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);
@@ -126,38 +133,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
@@ -184,7 +185,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,