[COJ] Evgeniy/coj-266/Add "I dont have any of these to idv options an…

…d redirect to manual" (binary-com#11996) * chore: [COJ] Evgeniy/coj-266/add I dont have any of these to idv options and redirect to manual * fix: unused imports remove * fix: subcards * fix: remove back button for manual mt5 * fix: max-width for manual mt5 * fix: idvfailed styles * fix: manual styles for mt5 * fix: idv to manual flow for mt5 (#39) * fix: idv to manual flow for mt5 * fix: console errors * fix: added null check * fix: identity page styling --------- Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
suisin-deriv · Jan 3, 2024 · ef7d53c · ef7d53c
1 parent 4e4aeb4
commit ef7d53c
Show file tree

Hide file tree

Showing 25 changed files with 526 additions and 458 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
@@ -158,4 +158,27 @@ describe('<IDVForm/>', () => {
         });
         expect(await screen.findByText('Example: 0123456789')).toBeInTheDocument();
     });
+
+    it("Should hide document number field when 'I dont have any of these is chosen'", 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');
+        const document_number_input = screen.getByText('Enter your document number');
+
+        expect(document_type_input).toBeVisible();
+        expect(document_number_input).toBeVisible();
+
+        userEvent.click(document_type_input);
+        userEvent.type(document_type_input, "I don't have any of these");
+
+        await waitFor(() => {
+            expect(document_number_input).not.toBeVisible();
+        });
+    });
 });
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
@@ -17,14 +17,16 @@ type TIDVFormProps = {
     selected_country: ResidenceList[0];
     hide_hint?: boolean;
     class_name?: string;
-    can_skip_document_verification?: boolean;
+    is_for_real_account_signup_modal?: boolean;
+    is_for_mt5: boolean;
 };
 
 const IDVForm = ({
     class_name,
     selected_country,
     hide_hint,
-    can_skip_document_verification = false,
+    is_for_real_account_signup_modal = false,
+    is_for_mt5 = false,
 }: TIDVFormProps) => {
     const [document_list, setDocumentList] = React.useState<Array<TDocument>>([]);
     const [selected_doc, setSelectedDoc] = React.useState('');
@@ -40,7 +42,10 @@ const IDVForm = ({
         example_format: '',
     };
 
-    const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
+    const IDV_NOT_APPLICABLE_OPTION = React.useMemo(
+        () => getIDVNotApplicableOption(is_for_real_account_signup_modal),
+        [is_for_real_account_signup_modal]
+    );
 
     React.useEffect(() => {
         if (document_data && selected_country && selected_country.value) {
@@ -79,13 +84,13 @@ const IDVForm = ({
                 };
             });
 
-            if (can_skip_document_verification) {
-                setDocumentList([...new_document_list, IDV_NOT_APPLICABLE_OPTION]);
-            } else {
+            if (is_for_mt5) {
                 setDocumentList([...new_document_list]);
+            } else {
+                setDocumentList([...new_document_list, IDV_NOT_APPLICABLE_OPTION]);
             }
         }
-    }, [document_data, selected_country, can_skip_document_verification, IDV_NOT_APPLICABLE_OPTION]);
+    }, [document_data, selected_country, IDV_NOT_APPLICABLE_OPTION, is_for_mt5]);
 
     const resetDocumentItemSelected = () => {
         setFieldValue('document_type', default_document, true);

diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import InlineNoteWithIcon from '../inline-note-with-icon';
 import classNames from 'classnames';
 import { Form, Formik } from 'formik';
+import { Analytics } from '@deriv/analytics';
 import {
     AutoHeightWrapper,
     Div100vhContainer,
@@ -12,6 +12,7 @@ import {
 } from '@deriv/components';
 import { getIDVNotApplicableOption, isDesktop, isMobile, removeEmptyPropertiesFromObject } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
+import { useStore, observer } from '@deriv/stores';
 import {
     isAdditionalDocumentValid,
     isDocumentNumberValid,
@@ -22,10 +23,9 @@ import PoiNameDobExample from '../../Assets/ic-poi-name-dob-example.svg';
 import FormSubHeader from '../form-sub-header';
 import IDVForm from '../forms/idv-form';
 import PersonalDetailsForm from '../forms/personal-details-form';
+import InlineNoteWithIcon from '../inline-note-with-icon';
 import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
 import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';
-import { useStore, observer } from '@deriv/stores';
-import { Analytics } from '@deriv/analytics';
 
 const PersonalDetails = observer(
     ({
@@ -221,8 +221,8 @@ const PersonalDetails = observer(
                                                     <FormSubHeader title={localize('Identity verification')} />
                                                     <IDVForm
                                                         selected_country={selected_country}
-                                                        hide_hint={true}
-                                                        can_skip_document_verification={true}
+                                                        hide_hint
+                                                        is_for_real_account_signup_modal
                                                     />
                                                 </React.Fragment>
                                             )}

diff --git a/...ges/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx b/...ges/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
@@ -10,6 +10,7 @@ const mock_store = mockStore({
     client: {
         getChangeableFields: jest.fn(() => []),
     },
+    ui: { is_desktop: true },
 });
 
 jest.mock('Assets/ic-document-submit-icon.svg', () => jest.fn(() => 'DocumentSubmitLogo'));
@@ -59,6 +60,7 @@ jest.mock('@deriv/shared', () => ({
 describe('<IdvDocumentSubmit/>', () => {
     const mock_props: React.ComponentProps<typeof IdvDocumentSubmit> = {
         handleBack: jest.fn(),
+        handleSelectionNext: jest.fn(),
         handleViewComplete: jest.fn(),
         selected_country: {
             value: 'tc',
@@ -109,7 +111,7 @@ describe('<IdvDocumentSubmit/>', () => {
             </StoreProvider>
         );
 
-        const backBtn = screen.getByRole('button', { name: /go back/i });
+        const backBtn = screen.getByRole('button', { name: /back/i });
         userEvent.click(backBtn);
         expect(mock_props.handleBack).toHaveBeenCalledTimes(1);