parent brach merge

package.json

@@ -25,6 +25,7 @@
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
         "@types/react-router-dom": "^5.1.6",
+        "@types/react-virtualized": "^9.21.21",
         "@typescript-eslint/eslint-plugin": "^5.8.0",
         "@typescript-eslint/parser": "^5.8.0",
         "ts-jest": "^26.4.2",

packages/account/build/constants.js

@@ -18,6 +18,7 @@ const {
 const IS_RELEASE = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging';
 
 const ALIASES = {
+    Assets: path.resolve(__dirname, '../src/Assets'),
     Components: path.resolve(__dirname, '../src/Components'),
     Containers: path.resolve(__dirname, '../src/Containers'),
     Constants: path.resolve(__dirname, '../src/Constants'),
@@ -35,19 +36,19 @@ const ALIASES = {
 const rules = (is_test_env = false, is_mocha_only = false) => [
     ...(is_test_env && !is_mocha_only
         ? [
-            {
-                test: /\.(js|jsx|ts|tsx)$/,
-                exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
-                include: /src/,
-                loader: 'eslint-loader',
-                enforce: 'pre',
-                options: {
-                    formatter: require('eslint-formatter-pretty'),
-                    configFile: path.resolve(__dirname, '../.eslintrc.js'),
-                    ignorePath: path.resolve(__dirname, '../.eslintignore'),
-                },
-            },
-        ]
+              {
+                  test: /\.(js|jsx|ts|tsx)$/,
+                  exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
+                  include: /src/,
+                  loader: 'eslint-loader',
+                  enforce: 'pre',
+                  options: {
+                      formatter: require('eslint-formatter-pretty'),
+                      configFile: path.resolve(__dirname, '../.eslintrc.js'),
+                      ignorePath: path.resolve(__dirname, '../.eslintignore'),
+                  },
+              },
+          ]
         : []),
     {
         test: /\.(js|jsx|ts|tsx)$/,
@@ -78,24 +79,24 @@ const rules = (is_test_env = false, is_mocha_only = false) => [
     },
     is_test_env
         ? {
-            test: /\.(sc|sa|c)ss$/,
-            loaders: 'null-loader',
-        }
+              test: /\.(sc|sa|c)ss$/,
+              loaders: 'null-loader',
+          }
         : {
-            test: /\.(sc|sa|c)ss$/,
-            use: css_loaders,
-        },
+              test: /\.(sc|sa|c)ss$/,
+              use: css_loaders,
+          },
 ];
 
 const MINIMIZERS = !IS_RELEASE
     ? []
     : [
-        new TerserPlugin({
-            test: /\.js$/,
-            parallel: 2,
-        }),
-        new CssMinimizerPlugin(),
-    ];
+          new TerserPlugin({
+              test: /\.js$/,
+              parallel: 2,
+          }),
+          new CssMinimizerPlugin(),
+      ];
 
 const plugins = () => [
     new CleanWebpackPlugin(),

packages/account/build/webpack.config.js

@@ -52,12 +52,11 @@ module.exports = function (env) {
             'self-exclusion': 'Components/self-exclusion',
             'scrollbars-container': 'Components/scrollbars-container',
             'sent-email-modal': 'Components/sent-email-modal',
-            'text-container': 'Components/text-container',
             'terms-of-use': 'Components/terms-of-use',
             'terms-of-use-config': 'Configs/terms-of-use-config',
             'proof-of-identity-config': 'Configs/proof-of-identity-config',
             'proof-of-identity-form-on-signup': 'Components/poi/poi-form-on-signup',
-            'proof-of-identity-containerfor-mt5':
+            'proof-of-identity-container-for-mt5':
                 'Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5',
             'poi-poa-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx',
         },

packages/account/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     moduleNameMapper: {
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^Assets/(.*)$': '<rootDir>/src/Assets/$1',
         '^Components/(.*)$': '<rootDir>/src/Components/$1',
         '^Constants/(.*)$': '<rootDir>/src/Constants/$1',
         '^Configs/(.*)$': '<rootDir>/src/Configs/$1',

packages/account/src/Components/demo-message/__test__/demo-message.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DemoMessage from '../demo-message';
+
+// eslint-disable-next-line react/display-name
+jest.mock('Components/icon-with-message', () => () => <div>DemoMessage</div>);
+
+it('should render DemoMessage component', () => {
+    render(<DemoMessage />);
+    expect(screen.getByText('DemoMessage')).toBeInTheDocument();
+});

packages/account/src/Components/demo-message/demo-message.jsx → packages/account/src/Components/demo-message/demo-message.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { localize } from '@deriv/translations';
 import IconWithMessage from 'Components/icon-with-message';
 
-const DemoMessage = ({ has_demo_icon, has_button }) => (
+type TDemoMessage = {
+    has_demo_icon?: boolean;
+    has_button?: boolean;
+};
+
+const DemoMessage = ({ has_demo_icon, has_button }: TDemoMessage) => (
     <IconWithMessage
         icon={has_demo_icon ? 'IcPoaLockDemo' : 'IcPoaLock'}
         message={localize('This feature is not available for demo accounts.')}
         has_button={has_button}
     />
 );
 
-DemoMessage.propTypes = {
-    has_button: PropTypes.bool,
-    has_demo_icon: PropTypes.bool,
-    full_width: PropTypes.bool,
-};
-
 export default DemoMessage;

packages/account/src/Components/demo-message/index.ts

@@ -0,0 +1,3 @@
+import DemoMessage from './demo-message';
+
+export default DemoMessage;

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

@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { isDesktop, isMobile } from '@deriv/shared';
 import IdvDocumentSubmit from '../idv-document-submit';
 
-jest.mock('../../../Assets/ic-document-submit-icon.svg', () => jest.fn(() => 'DocumentSubmitLogo'));
+jest.mock('Assets/ic-document-submit-icon.svg', () => jest.fn(() => 'DocumentSubmitLogo'));
 jest.mock('../utils.js', () => ({
     getDocumentData: function (country_code, key) {
         const data = {

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

@@ -7,8 +7,8 @@ import { localize, Localize } from '@deriv/translations';
 import { formatInput, WS } from '@deriv/shared';
 import FormFooter from 'Components/form-footer';
 import { getDocumentData, getRegex } from './utils';
-import BackButtonIcon from '../../../Assets/ic-poi-back-btn.svg';
-import DocumentSubmitLogo from '../../../Assets/ic-document-submit-icon.svg';
+import BackButtonIcon from 'Assets/ic-poi-back-btn.svg';
+import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
 
 const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, is_from_external }) => {
     const [document_list, setDocumentList] = React.useState([]);

packages/account/src/Components/poi/idv-status/idv-limited/__tests__/idv-limited.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import IdvNoSubmissions from '../idv-limited';
 
-jest.mock('../../../Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
+jest.mock('Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
 
 describe('<IdvNoSubmissions/>', () => {
     const mockHandleRequireSubmission = jest.fn();

packages/account/src/Components/poi/idv-status/idv-limited/idv-limited.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import IdvDocumentRejected from '../../../../Assets/ic-idv-document-rejected.svg';
+import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
 
 const IdvNoSubmissions = ({ handleRequireSubmission }) => {
     return (

packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import IdvRejected from '../idv-rejected';
 
-jest.mock('../../../../../Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
+jest.mock('Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
 
 describe('<IdvRejected/>', () => {
     const mockHandleRequireSubmission = jest.fn();

packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import IdvDocumentRejected from '../../../../Assets/ic-idv-document-rejected.svg';
+import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
 
 const IdvRejected = ({ handleRequireSubmission }) => {
     return (

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

@@ -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/idv-submit-complete.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
-import IdvDocumentPending from '../../../../Assets/ic-idv-document-pending.svg';
+import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
 
 const IdvSubmitComplete = ({ needs_poa, is_from_external }) => {
     const poa_button = !is_from_external && <PoaButton custom_text={localize('Submit proof of address')} />;

packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js

@@ -10,7 +10,7 @@ jest.mock('@deriv/shared', () => ({
     isMobile: jest.fn(() => false),
 }));
 
-jest.mock('../../../../../Assets/ic-idv-verified.svg', () => jest.fn(() => 'mockedSVGIcon'));
+jest.mock('Assets/ic-idv-verified.svg', () => jest.fn(() => 'mockedSVGIcon'));
 
 describe('<IdvVerified />', () => {
     const needs_poa_header = /your id is verified\. you will also need to submit proof of your address\./i;

packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.jsx

@@ -3,7 +3,7 @@ import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
-import IdvDocumentVerified from '../../../../Assets/ic-idv-verified.svg';
+import IdvDocumentVerified from 'Assets/ic-idv-verified.svg';
 
 const IdvVerified = ({ needs_poa, is_from_external }) => {
     const header_Text = needs_poa

packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx

@@ -15,7 +15,7 @@ import {
 } from '@deriv/components';
 import { isDesktop, formatInput, isMobile } from '@deriv/shared';
 import { getDocumentData, getRegex } from '../../idv-document-submit/utils';
-import DocumentSubmitLogo from '../../../../Assets/ic-document-submit-icon.svg';
+import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
 
 export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, onNext, value, has_idv_error }) => {
     const [document_list, setDocumentList] = React.useState([]);

packages/account/src/Components/proof-of-identity-container-for-mt5/proof-of-identity-container-for-mt5.scss

@@ -0,0 +1,17 @@
+.manual-poi {
+    .dc-timeline {
+        &__container {
+            flex: 1;
+            max-width: 63.4rem;
+
+            @at-root .manual-poi--mobile .dc-timeline__container {
+                max-width: none;
+            }
+        }
+        &__title {
+            font-size: var(--text-size-s);
+            line-height: 2.4rem;
+            margin: -4px 0 2.4rem;
+        }
+    }
+}

packages/account/src/Sections/Security/Passwords/deriv-password.jsx

@@ -6,9 +6,9 @@ import { Localize, localize } from '@deriv/translations';
 import FormSubHeader from 'Components/form-sub-header';
 import SentEmailModal from 'Components/sent-email-modal';
 import UnlinkModal from 'Components/unlink-modal';
-import DerivComLogo from '../../../Assets/ic-brand-deriv-red.svg';
-import DerivGoLight from '../../../Assets/ic-brand-deriv-go-light.svg';
-import DerivGoDark from '../../../Assets/ic-brand-deriv-go-dark.svg';
+import DerivComLogo from 'Assets/ic-brand-deriv-red.svg';
+import DerivGoLight from 'Assets/ic-brand-deriv-go-light.svg';
+import DerivGoDark from 'Assets/ic-brand-deriv-go-dark.svg';
 
 const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identity_provider }) => {
     const [is_unlink_modal_open, setIsUnlinkModalOpen] = React.useState(false);

packages/account/src/Sections/Security/Passwords/passwords-platform.jsx

@@ -71,14 +71,7 @@ const PasswordsPlatform = ({ email, has_dxtrade_accounts, has_mt5_accounts }) =>
                     <React.Fragment>
                         <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
                             <Localize
-                                i18n_default_text='Your {{platform_name_dxtrade}} password is for logging in to your {{platform_name_dxtrade}} accounts on the web and mobile apps.'
-                                values={{ platform_name_dxtrade }}
-                            />
-                        </Text>
-                        <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
-                            <Localize
-                                i18n_default_text='Click the <0>Change password</0> button to change your {{platform_name_dxtrade}} password.'
-                                components={[<strong key={0} />]}
+                                i18n_default_text='Use the {{platform_name_dxtrade}} password to log in to your {{platform_name_dxtrade}} accounts on the web and mobile apps.'
                                 values={{ platform_name_dxtrade }}
                             />
                         </Text>

packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx

@@ -22,7 +22,7 @@ const ShowDemoMessage = () => (
         </Text>
     </div>
 );
-const ProofOfIdentityContainerforMt5 = ({
+const ProofOfIdentityContainerForMt5 = ({
     account_status,
     fetchResidenceList,
     height,
@@ -97,4 +97,4 @@ const ProofOfIdentityContainerforMt5 = ({
     );
 };
 
-export default ProofOfIdentityContainerforMt5;
+export default ProofOfIdentityContainerForMt5;

packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx

@@ -27,10 +27,10 @@ const POISubmission = ({
 }) => {
     const [submission_status, setSubmissionStatus] = React.useState(); // selecting, submitting, complete
     const [submission_service, setSubmissionService] = React.useState();
-    const [selected_country, setSelectedCountry] = React.useState();
+    const [selected_country, setSelectedCountry] = React.useState({});
 
     const handleSelectionNext = () => {
-        if (selected_country) {
+        if (Object.keys(selected_country).length) {
             const { submissions_left: idv_submissions_left } = idv;
             const { submissions_left: onfido_submissions_left } = onfido;
             const is_idv_supported = selected_country.identity.services.idv.is_country_supported;