[COJ] Likhith/186/enhance idv form for uganda (deriv-com#11295)

* 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

* 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: ✨ incorporated new images and merged checkbox feature

* feat: ✨ 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: 💫 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 <shahzaib@deriv.com>

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('<IDVForm/>', () => {
-    const mock_props = {
+    const mock_props: React.ComponentProps<typeof IDVForm> = {
         selected_country: {
             value: 'tc',
             identity: {
@@ -99,4 +100,62 @@ describe('<IDVForm/>', () => {
             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<typeof IDVForm> = {
+            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(<IDVForm {...new_props} />, {
+            wrapper: ({ children }) => (
+                <Formik initialValues={new_values} onSubmit={jest.fn()}>
+                    {() => children}
+                </Formik>
+            ),
+        });
+
+        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();
+    });
 });