Sync with master to get latest update

.github/CODEOWNERS

@@ -73,7 +73,7 @@
 #  deriv-app/account
 # ==============================================================
 
-/packages/account/**/*                                          @matin-deriv @amina-deriv
+/packages/account/**/*                                          @matin-deriv @amina-deriv @maryia-deriv
 
 
 # ==============================================================
@@ -118,13 +118,13 @@
 # ==============================================================
 
 /packages/api/**/*                                              @ali-hosseini-deriv @matin-deriv
-/packages/core/**/*                                             @ali-hosseini-deriv @matin-deriv
-/packages/shared/**/*                                           @ali-hosseini-deriv @matin-deriv
-/packages/components/**/*                                       @ali-hosseini-deriv @matin-deriv
-/packages/translations/**/*                                     @ali-hosseini-deriv @matin-deriv
-/packages/utils/**/*                                            @ali-hosseini-deriv @matin-deriv
+/packages/core/**/*                                             @ali-hosseini-deriv @matin-deriv @maryia-deriv
+/packages/shared/**/*                                           @ali-hosseini-deriv @matin-deriv @maryia-deriv
+/packages/components/**/*                                       @ali-hosseini-deriv @matin-deriv @maryia-deriv
+/packages/translations/**/*                                     @ali-hosseini-deriv @matin-deriv @maryia-deriv
+/packages/utils/**/*                                            @ali-hosseini-deriv @matin-deriv @maryia-deriv
 /packages/hooks/**/*                                            @ali-hosseini-deriv @matin-deriv
-/packages/stores/**/*                                           @ali-hosseini-deriv @matin-deriv
+/packages/stores/**/*                                           @ali-hosseini-deriv @matin-deriv @maryia-deriv
 
 
 # ==============================================================

packages/account/package.json

@@ -28,11 +28,11 @@
     },
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.8",
-        "@deriv/api-types": "^1.0.94",
+        "@deriv/api-types": "^1.0.116",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/shared": "^1.0.0",
-        "@deriv/stores":"^1.0.0",
+        "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "bowser": "^2.9.0",
         "classnames": "^2.2.6",

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,35 +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';
-
-type TDocumentList = Array<{
-    id: string;
-    text: string;
-    value?: string;
-    sample_image?: string;
-    example_format?: string;
-    additional?: any;
-}>;
-
-type TFormProps = {
-    document_type: TDocumentList[0];
-    document_number: string;
-    document_additional?: string;
-    error_message?: string;
-};
-
-type TIDVForm = {
-    selected_country: ResidenceList[0];
-    hide_hint?: boolean;
-    class_name?: string;
-    can_skip_document_verification: boolean;
-} & Partial<FormikHandlers> &
-    FormikProps<TFormProps>;
+import { TDocumentList, TIDVForm } from 'Types';
 
 const IDVForm = ({
     errors,
@@ -43,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('');
 
@@ -57,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);
@@ -100,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);
@@ -120,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) {
@@ -171,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/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/poi/idv-document-submit/idv-document-submit.tsx

@@ -1,23 +1,34 @@
 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,
     removeEmptyPropertiesFromObject,
+    formatIDVFormValues,
 } from '@deriv/shared';
 import { documentAdditionalError, getRegex, validate, makeSettingsRequest, validateName } 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';
+
+type TIDVDocumentSubmitProps = {
+    account_settings: GetSettings;
+    getChangeableFields: () => Array<string>;
+    handleBack: React.MouseEventHandler;
+    handleViewComplete: () => void;
+    is_from_external: boolean;
+    selected_country: ResidenceList[0];
+};
 
 const IdvDocumentSubmit = ({
     handleBack,
@@ -26,7 +37,7 @@ const IdvDocumentSubmit = ({
     is_from_external,
     account_settings,
     getChangeableFields,
-}) => {
+}: TIDVDocumentSubmitProps) => {
     const visible_settings = ['first_name', 'last_name', 'date_of_birth'];
     const form_initial_values = filterObjProperties(account_settings, visible_settings) || {};
 
@@ -48,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);
@@ -83,8 +95,8 @@ const IdvDocumentSubmit = ({
         return undefined;
     };
 
-    const validateFields = values => {
-        const errors = {};
+    const validateFields = (values: TIDVFormValues) => {
+        const errors: Partial<TInputFieldValues> = {};
         const { document_type, document_number, document_additional } = values;
         const needs_additional_document = !!document_type.additional;
 
@@ -127,25 +139,22 @@ const IdvDocumentSubmit = ({
             setSubmitting(false);
             return;
         }
+
         const submit_data = {
             identity_verification_document_add: 1,
-            document_number: values.document_number,
-            document_additional: values.document_additional || '',
-            document_type: values.document_type.id,
-            issuing_country: selected_country.value,
+            ...formatIDVFormValues(values, selected_country.value),
         };
 
-        if (submit_data.document_type === IDV_NOT_APPLICABLE_OPTION.id) {
-            return;
-        }
-        WS.send(submit_data).then(response => {
-            setSubmitting(false);
-            if (response.error) {
-                setErrors({ error_message: response.error.message });
-                return;
+        WS.send(submit_data).then(
+            (response: IdentityVerificationAddDocumentResponse & { error: { message: string } }) => {
+                setSubmitting(false);
+                if (response.error) {
+                    setErrors({ error_message: response.error.message });
+                    return;
+                }
+                handleViewComplete();
             }
-            handleViewComplete();
-        });
+        );
     };
 
     return (
@@ -225,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;