Merge remote-tracking branch 'upstream/master' into p2p-refactor

Author: farrah-deriv

package-lock.json

@@ -4,8 +4,13 @@ import { Field, FieldProps } from 'formik';
 import { localize } from '@deriv/translations';
 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 { TDocumentList, TIDVForm } from 'Types';
+import {
+    getDocumentData,
+    preventEmptyClipboardPaste,
+    generatePlaceholderText,
+    getExampleFormat,
+} from '../../Helpers/utils';
+import { TDocument, TIDVForm } from 'Types';
 
 const IDVForm = ({
     errors,
@@ -19,7 +24,7 @@ const IDVForm = ({
     hide_hint,
     can_skip_document_verification = false,
 }: TIDVForm) => {
-    const [document_list, setDocumentList] = React.useState<TDocumentList[]>([]);
+    const [document_list, setDocumentList] = React.useState<TDocument[]>([]);
     const [document_image, setDocumentImage] = React.useState<string | null>(null);
     const [selected_doc, setSelectedDoc] = React.useState('');
 
@@ -45,10 +50,8 @@ const IDVForm = ({
 
             const new_document_list = filtered_documents.map(key => {
                 const { display_name, format } = document_data[key];
-                const { new_display_name, example_format, sample_image } = getDocumentData(
-                    selected_country.value ?? '',
-                    key
-                );
+                const { new_display_name, example_format, sample_image, additional_document_example_format } =
+                    getDocumentData(selected_country.value ?? '', key);
                 const needs_additional_document = !!document_data[key].additional;
 
                 if (needs_additional_document) {
@@ -58,6 +61,7 @@ const IDVForm = ({
                         additional: {
                             display_name: document_data[key].additional?.display_name,
                             format: document_data[key].additional?.format,
+                            example_format: additional_document_example_format,
                         },
                         value: format,
                         sample_image,
@@ -98,7 +102,7 @@ const IDVForm = ({
         setFieldValue(document_name, current_input, true);
     };
 
-    const bindDocumentData = (item: TDocumentList) => {
+    const bindDocumentData = (item: TDocument) => {
         setFieldValue('document_type', item, true);
         setSelectedDoc(item?.id);
         if (item?.id === IDV_NOT_APPLICABLE_OPTION.id) {
@@ -221,6 +225,7 @@ const IDVForm = ({
                                                             onKeyUp={(e: { target: HTMLInputElement }) =>
                                                                 onKeyUp(e, 'document_number')
                                                             }
+                                                            className='additional-field'
                                                             required
                                                             label={generatePlaceholderText(selected_doc)}
                                                         />

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { Field, useFormikContext } from 'formik';
+import { Link } from 'react-router-dom';
 import {
     Autocomplete,
     Checkbox,
@@ -15,13 +15,13 @@ import {
 } from '@deriv/components';
 import { getLegalEntityName, isDesktop, isMobile, routes, validPhone } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import InlineNoteWithIcon from '../inline-note-with-icon';
-import { DateOfBirthField, FormInputField } from './form-fields.jsx';
-import FormBodySection from '../form-body-section';
 import FormSubHeader from '../form-sub-header';
 import PoiNameDobExample from '../../Assets/ic-poi-name-dob-example.svg';
-import { isFieldImmutable } from '../../Helpers/utils';
+import InlineNoteWithIcon from '../inline-note-with-icon';
+import FormBodySection from '../form-body-section';
+import { DateOfBirthField, FormInputField } from './form-fields.jsx';
 import { getEmploymentStatusList } from '../../Sections/Assessment/FinancialAssessment/financial-information-list';
+import { isFieldImmutable } from '../../Helpers/utils';
 
 const PersonalDetailsForm = props => {
     const {

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

@@ -3,7 +3,7 @@ import { createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { routes } from '@deriv/shared';
-import { PoaButton } from '../poa-button';
+import PoaButton from '../poa-button';
 
 describe('<PoaButton/>', () => {
     const history = createBrowserHistory();

packages/account/src/Components/poa/poa-button/__tests__/poa-button.spec.tsx

@@ -1,3 +1,3 @@
-import { PoaButton } from './poa-button';
+import PoaButton from './poa-button';
 
 export default PoaButton;

packages/account/src/Components/poa/poa-button/index.ts

@@ -7,10 +7,12 @@ type TPoaButton = {
     custom_text?: string;
 };
 
-export const PoaButton = ({ custom_text = localize('Submit proof of address') }: TPoaButton) => (
+const PoaButton = ({ custom_text = localize('Submit proof of address') }: TPoaButton) => (
     <ButtonLink className='account-management__button' to={routes.proof_of_address}>
         <Text className='dc-btn__text' as='p' weight='bold' data-testid='poa_button_text'>
             {custom_text}
         </Text>
     </ButtonLink>
 );
+
+export default PoaButton;

packages/account/src/Components/poa/poa-button/poa-button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import IconMessageContent from 'Components/icon-message-content';
+import IconMessageContent from '../icon-message-content';
 
 type TUnsupportedFailed = {
     error?: string;

packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx

@@ -12,14 +12,21 @@ import {
     removeEmptyPropertiesFromObject,
     formatIDVFormValues,
 } from '@deriv/shared';
-import { documentAdditionalError, getRegex, validate, makeSettingsRequest, validateName } from 'Helpers/utils';
+import {
+    documentAdditionalError,
+    getRegex,
+    validate,
+    makeSettingsRequest,
+    validateName,
+    getExampleFormat,
+} from 'Helpers/utils';
 import FormFooter from 'Components/form-footer';
 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, ResidenceList } from '@deriv/api-types';
-import { TIDVFormValues, TInputFieldValues, TDocumentList } from 'Types';
+import { GetSettings, ResidenceList, IdentityVerificationAddDocumentResponse } from '@deriv/api-types';
+import { TDocument, TInputFieldValues, TIDVFormValues } from 'Types';
 
 type TIDVDocumentSubmitProps = {
     account_settings: GetSettings;
@@ -58,29 +65,26 @@ const IdvDocumentSubmit = ({
         ...form_initial_values,
     };
 
-    const getExampleFormat = (example_format: string) => {
-        return example_format ? localize('Example: ') + example_format : '';
-    };
     const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
 
     const shouldHideHelperImage = (document_id: string) => document_id === IDV_NOT_APPLICABLE_OPTION.id;
 
-    const isDocumentTypeValid = (document_type: TDocumentList) => {
+    const isDocumentTypeValid = (document_type: TDocument) => {
         if (!document_type?.text) {
             return localize('Please select a document type.');
         }
         return undefined;
     };
 
-    const isAdditionalDocumentValid = (document_type: TDocumentList, document_additional: string) => {
+    const isAdditionalDocumentValid = (document_type: TDocument, 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: string, document_type: Required<TDocumentList>) => {
+    const isDocumentNumberValid = (document_number: string, document_type: Required<TDocument>) => {
         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);

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

@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import IdvSubmitComplete from '../idv-submit-complete';
 
-jest.mock('Assets/ic-idv-document-pending.svg', () => jest.fn(() => 'IdvDocumentPending'));
+jest.mock('../../../../../Assets/ic-idv-document-pending.svg', () => jest.fn(() => 'IdvDocumentPending'));
 
 describe('<IdvSubmitComplete/>', () => {
     const mock_props = {

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

@@ -1,5 +1,5 @@
-import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
-import PoaButton from 'Components/poa/poa-button';
+import IdvDocumentPending from '../../../../Assets/ic-idv-document-pending.svg';
+import PoaButton from '../../../poa/poa-button/poa-button';
 import React from 'react';
 import { Text } from '@deriv/components';
 import { localize } from '@deriv/translations';