Merge branch 'master' into likhith/KYC-362/track-idv-opt-out-during-a…

…ccount-creation

__mocks__/globals.js

@@ -0,0 +1,4 @@
+// Mock copy-anything module which is causing issues with jest in coveralls
+jest.mock('copy-anything', () => ({
+    copy: jest.fn(),
+}));

packages/account/src/App.tsx

@@ -17,8 +17,11 @@ const App = ({ passthrough }: TAppProps) => {
     const { root_store, WS } = passthrough;
     setWebsocket(WS);
 
+    const { notification_messages_ui: Notifications } = root_store.ui;
+
     return (
         <StoreProvider store={root_store}>
+            {Notifications && <Notifications />}
             <Routes />
             <ResetTradingPassword />
         </StoreProvider>

packages/account/src/Components/account-limits/account-limits-article.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { StaticUrl } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
@@ -29,8 +28,4 @@ const AccountLimitsArticle = ({ is_from_derivgo }: TAccountLimitsArticle) => {
     return <AccountArticle title={localize('Account limits')} descriptions={getDescription()} />;
 };
 
-AccountLimitsArticle.propTypes = {
-    is_from_derivgo: PropTypes.bool,
-};
-
 export default AccountLimitsArticle;

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

@@ -1,20 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Field, FormikProps, FormikHandlers, FieldProps } from 'formik';
-import { ResidenceList } from '@deriv/api-types';
+import { Field, FieldProps } from 'formik';
 import { localize } from '@deriv/translations';
-import { formatInput, IDV_NOT_APPLICABLE_OPTION } from '@deriv/shared';
+import { formatInput, getIDVNotApplicableOption } from '@deriv/shared';
 import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative, Text } from '@deriv/components';
 import { getDocumentData, preventEmptyClipboardPaste, generatePlaceholderText, getExampleFormat } from 'Helpers/utils';
-import { TIDVFormValues } from 'Types';
-
-type TIDVForm = {
-    selected_country: ResidenceList[0];
-    hide_hint?: boolean;
-    class_name?: string;
-    can_skip_document_verification: boolean;
-} & Partial<FormikHandlers> &
-    FormikProps<TIDVFormValues>;
+import { TDocumentList, TIDVForm } from 'Types';
 
 const IDVForm = ({
     errors,
@@ -28,7 +19,7 @@ const IDVForm = ({
     hide_hint,
     can_skip_document_verification = false,
 }: TIDVForm) => {
-    const [document_list, setDocumentList] = React.useState<TDocumentList>([]);
+    const [document_list, setDocumentList] = React.useState<TDocumentList[]>([]);
     const [document_image, setDocumentImage] = React.useState<string | null>(null);
     const [selected_doc, setSelectedDoc] = React.useState('');
 
@@ -42,6 +33,8 @@ const IDVForm = ({
         sample_image: '',
     };
 
+    const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
+
     React.useEffect(() => {
         if (document_data && selected_country && selected_country.value) {
             const document_types = Object.keys(document_data);
@@ -85,7 +78,7 @@ const IDVForm = ({
                 setDocumentList([...new_document_list]);
             }
         }
-    }, [document_data, selected_country, can_skip_document_verification]);
+    }, [document_data, selected_country, can_skip_document_verification, IDV_NOT_APPLICABLE_OPTION]);
 
     const resetDocumentItemSelected = () => {
         setFieldValue('document_type', default_document, true);
@@ -105,7 +98,7 @@ const IDVForm = ({
         setFieldValue(document_name, current_input, true);
     };
 
-    const bindDocumentData = (item: TDocumentList[0]) => {
+    const bindDocumentData = (item: TDocumentList) => {
         setFieldValue('document_type', item, true);
         setSelectedDoc(item?.id);
         if (item?.id === IDV_NOT_APPLICABLE_OPTION.id) {
@@ -156,7 +149,7 @@ const IDVForm = ({
                                                                     }
                                                                 }}
                                                                 onChange={handleChange}
-                                                                onItemSelection={(item: TDocumentList[0]) => {
+                                                                onItemSelection={(item: TDocumentList) => {
                                                                     if (
                                                                         item.text === 'No results found' ||
                                                                         !item.text

packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

@@ -741,4 +741,20 @@ describe('<PersonalDetails/>', () => {
         const el_tax_residence = screen.getByTestId('selected_value');
         expect(el_tax_residence).toHaveTextContent('Malta');
     });
+
+    it('should disable tax_residence field if it is immutable from BE', () => {
+        isMobile.mockReturnValue(false);
+        isDesktop.mockReturnValue(true);
+        const new_props = {
+            ...props,
+            is_mf: true,
+            value: {
+                ...props.value,
+                tax_residence: 'France',
+            },
+            disabled_items: ['salutation', 'first_name', 'last_name', 'date_of_birth', 'tax_residence'],
+        };
+        renderwithRouter(<PersonalDetails {...new_props} />);
+        expect(screen.getByTestId('tax_residence')).toBeDisabled();
+    });
 });

packages/account/src/Components/personal-details/personal-details.jsx

@@ -13,7 +13,7 @@ import {
     isDesktop,
     isMobile,
     PlatformContext,
-    IDV_NOT_APPLICABLE_OPTION,
+    getIDVNotApplicableOption,
     removeEmptyPropertiesFromObject,
 } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
@@ -83,6 +83,7 @@ const PersonalDetails = ({
         residence_list,
         real_account_signup_target,
     });
+    const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
 
     const validateIDV = values => {
         const errors = {};

packages/account/src/Components/poa-address-mismatch-hint-box/__test__/poa-address-mismatch-hint-box.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import POAAddressMismatchHintBox from '../poa-address-mismatch-hint-box';
+
+describe('POAAddressMismatchHintBox', () => {
+    it('should render POAAddressMismatchHintBox', () => {
+        render(<POAAddressMismatchHintBox />);
+        expect(
+            screen.getByText(
+                /it appears that the address in your document doesn’t match the address in your deriv profile\. please update your personal details now with the correct address\./i
+            )
+        ).toBeInTheDocument();
+    });
+});

packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx

@@ -61,7 +61,7 @@ describe('<IdvDocumentSubmit/>', () => {
                             document_1: { display_name: 'Test document 1 name', format: '5436454364243' },
                             document_2: { display_name: 'Test document 2 name', format: 'A54321' },
                         },
-                        has_visual_sample: true,
+                        has_visual_sample: 1,
                     },
                 },
             },
@@ -80,7 +80,7 @@ describe('<IdvDocumentSubmit/>', () => {
         expect(screen.queryByText('Please select a document type.')).not.toBeInTheDocument();
 
         const inputs = screen.getAllByRole<HTMLTextAreaElement>('textbox');
-        expect(inputs.length).toBe(5);
+        expect(inputs).toHaveLength(5);
         expect(inputs[0].name).toBe('document_type');
         expect(inputs[1].name).toBe('document_number');
     });

packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button } from '@deriv/components';
 import { Formik } from 'formik';
 import { localize } from '@deriv/translations';
 import {
     WS,
-    IDV_NOT_APPLICABLE_OPTION,
+    getIDVNotApplicableOption,
     toMoment,
     filterObjProperties,
     isDesktop,
@@ -19,16 +18,16 @@ import BackButtonIcon from 'Assets/ic-poi-back-btn.svg';
 import IDVForm from 'Components/forms/idv-form';
 import PersonalDetailsForm from 'Components/forms/personal-details-form';
 import FormSubHeader from 'Components/form-sub-header';
-import { GetSettings, IdentityVerificationAddDocumentResponse } from '@deriv/api-types';
-import { TIDVFormValues } from 'Types';
+import { GetSettings, IdentityVerificationAddDocumentResponse, ResidenceList } from '@deriv/api-types';
+import { TIDVFormValues, TInputFieldValues, TDocumentList } from 'Types';
 
 type TIDVDocumentSubmitProps = {
-    handleBack: () => void;
+    account_settings: GetSettings;
+    getChangeableFields: () => Array<string>;
+    handleBack: React.MouseEventHandler;
     handleViewComplete: () => void;
-    selected_country: { text: string; value: string };
     is_from_external: boolean;
-    account_settings: GetSettings;
-    getChangeableFields: () => string[];
+    selected_country: ResidenceList[0];
 };
 
 const IdvDocumentSubmit = ({
@@ -60,28 +59,29 @@ const IdvDocumentSubmit = ({
         ...form_initial_values,
     };
 
-    const getExampleFormat = example_format => {
+    const getExampleFormat = (example_format: string) => {
         return example_format ? localize('Example: ') + example_format : '';
     };
+    const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
 
-    const shouldHideHelperImage = document_id => document_id === IDV_NOT_APPLICABLE_OPTION.id;
+    const shouldHideHelperImage = (document_id: string) => document_id === IDV_NOT_APPLICABLE_OPTION.id;
 
-    const isDocumentTypeValid = document_type => {
+    const isDocumentTypeValid = (document_type: TDocumentList) => {
         if (!document_type?.text) {
             return localize('Please select a document type.');
         }
         return undefined;
     };
 
-    const isAdditionalDocumentValid = (document_type, document_additional) => {
+    const isAdditionalDocumentValid = (document_type: TDocumentList, document_additional: string) => {
         const error_message = documentAdditionalError(document_additional, document_type.additional?.format);
         if (error_message) {
             return localize(error_message) + getExampleFormat(document_type.additional?.example_format);
         }
         return undefined;
     };
 
-    const isDocumentNumberValid = (document_number, document_type) => {
+    const isDocumentNumberValid = (document_number: string, document_type: Required<TDocumentList>) => {
         const is_document_number_invalid = document_number === document_type.example_format;
         if (!document_number) {
             return localize('Please enter your document number. ') + getExampleFormat(document_type.example_format);
@@ -96,7 +96,7 @@ const IdvDocumentSubmit = ({
     };
 
     const validateFields = (values: TIDVFormValues) => {
-        const errors = {};
+        const errors: Partial<TInputFieldValues> = {};
         const { document_type, document_number, document_additional } = values;
         const needs_additional_document = !!document_type.additional;
 
@@ -234,13 +234,4 @@ const IdvDocumentSubmit = ({
     );
 };
 
-IdvDocumentSubmit.propTypes = {
-    account_settings: PropTypes.object,
-    getChangeableFields: PropTypes.func,
-    handleBack: PropTypes.func,
-    handleViewComplete: PropTypes.func,
-    is_from_external: PropTypes.bool,
-    selected_country: PropTypes.object,
-};
-
 export default IdvDocumentSubmit;