chore: created common chunk (deriv-com#15374)

* chore: optimize webpack

* fix: removed console

* fix: added preset into babel

* fix: resolved issue with testcase execution

* fix: incorporated jest fix

* fix: ts issues

* fix: updated package versions

* fix: suppressed types

* fix: build issue

* chore: eplaced classnames with clsx package

* fix: poi config and limited_spec

* fix: resolved type errors in files

* fix: resolved type errors in files

* fix: resolved types of poi components

* fix: resolved type issue with fil-uploader and idv-document-submit

* fix: type issues with helper, poa-button, reset-trading-password, route-with-subroutes

* fix: type

* fix: api types

* fix: connected apps section

* fix: types in personal-details, binary-link and ta-form

* fix: types in utils, currency-selector, card, store/types

* fix: types of poa-container, expaned-card, routes-config, terms-of-use, radio-button

* fix: type for accoun-limit, article, api-token- idv-document-submit

* fix: types of self-exclusion

* fix: testcases for account-limit, detail-component

* fix: self exclusion

* fix: api token

* fix: testcases for Self-exclusion, account-limit

* fix: file-uploader

* fix: personal-details type

* fix: api-token

* fix: account-limits

* fix: file-uploader

* fix: reset-trading-password-modal

* fix: reset-trading-password-modal

* fix: type issues in build

* fix: type issues in build

* fix: type issues in build

* chore: created common chunk

* fix: package json issue

* fix: updated babel config for core

* fix: type and config issue

* chore: lazy loaded some sections

* chore: lazyloaded connected-apps and login-history

* fix: failing testcase

* chore: webpack chunk config

* fix: removed unused webpack entries

* fix: webpack chunk render issue

* fix: webpack chunk creation

---------

Co-authored-by: amina-deriv <[email protected]>

packages/account/build/webpack.config.js

@@ -9,58 +9,19 @@ module.exports = function (env) {
         devtool: IS_RELEASE ? 'source-map' : 'eval-cheap-module-source-map',
         entry: {
             account: path.resolve(__dirname, '../src', 'index.tsx'),
-            'accept-risk-config': 'Configs/accept-risk-config',
-            'account-limits': 'Components/account-limits',
-            'address-details': 'Components/address-details',
             'address-details-config': 'Configs/address-details-config',
-            'api-token': 'Components/api-token',
-            'currency-selector': 'Components/currency-selector',
             'currency-selector-config': 'Configs/currency-selector-config',
             'currency-radio-button-group': 'Components/currency-selector/radio-button-group.tsx',
             'currency-radio-button': 'Components/currency-selector/radio-button.tsx',
-            'demo-message': 'Components/demo-message',
-            'error-component': 'Components/error-component',
-            'file-uploader-container': 'Components/file-uploader-container',
-            'financial-assessment': 'Sections/Assessment/FinancialAssessment',
-            'financial-details': 'Components/financial-details',
             'financial-details-config': 'Configs/financial-details-config',
-            'form-body': 'Components/form-body',
-            'form-footer': 'Components/form-footer',
-            'form-sub-header': 'Components/form-sub-header',
             'get-status-badge-config': 'Configs/get-status-badge-config',
-            'icon-message-content': 'Components/icon-message-content',
-            'leave-confirm': 'Components/leave-confirm',
-            'load-error-message': 'Components/load-error-message',
-            'personal-details': 'Components/personal-details',
             'personal-details-config': 'Configs/personal-details-config',
-            'poa-expired': 'Components/poa/status/expired',
-            'poa-needs-review': 'Components/poa/status/needs-review',
-            'poa-submitted': 'Components/poa/status/submitted',
-            'poa-unverified': 'Components/poa/status/unverified',
-            'poa-verified': 'Components/poa/status/verified',
-            'poi-expired': 'Components/poi/status/expired',
-            'poi-missing-personal-details': 'Components/poi/missing-personal-details',
-            'poi-unsupported': 'Components/poi/status/unsupported',
-            'poi-upload-complete': 'Components/poi/status/upload-complete',
-            'poi-verified': 'Components/poi/status/verified',
-            'proof-of-address-container': 'Sections/Verification/ProofOfAddress/proof-of-address-container',
-            'proof-of-identity': 'Sections/Verification/ProofOfIdentity/proof-of-identity.jsx',
-            'proof-of-identity-container': 'Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx',
-            'proof-of-identity-container-for-mt5':
-                'Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5',
             'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted',
-            'reset-trading-password-modal': 'Components/reset-trading-password-modal',
             'risk-tolerance-warning-modal': 'Components/trading-assessment/risk-tolerance-warning-modal',
-            'self-exclusion': 'Sections/Security/SelfExclusion',
-            'scrollbars-container': 'Components/scrollbars-container',
             'sent-email-modal': 'Components/sent-email-modal',
-            'terms-of-use': 'Components/terms-of-use',
             'terms-of-use-config': 'Configs/terms-of-use-config',
-            'trading-assessment': 'Sections/Assessment/TradingAssessment',
             'trading-assessment-config': 'Configs/trading-assessment-config',
-            'trading-assessment-new-user': 'Components/trading-assessment/trading-assessment-new-user',
             'test-warning-modal': 'Components/trading-assessment/test-warning-modal',
-            'trading-assessment-form': 'Components/trading-assessment/trading-assessment-form',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {
@@ -75,6 +36,34 @@ module.exports = function (env) {
             moduleIds: 'named',
             minimize: IS_RELEASE,
             minimizer: MINIMIZERS,
+            splitChunks: {
+                automaticNameDelimiter: '~',
+                cacheGroups: {
+                    default: {
+                        minChunks: 2,
+                        priority: -20,
+                        reuseExistingChunk: true,
+                    },
+                    defaultVendors: {
+                        idHint: 'vendors',
+                        priority: -10,
+                        test: /[\\/]node_modules[\\/]/,
+                    },
+                    assets: {
+                        chunks: 'all',
+                        name: 'assets',
+                        test: /[\\/]Assets[\\/]/,
+                        reuseExistingChunk: true,
+                        idHint: 'assets',
+                    },
+                },
+                chunks: 'all',
+                maxAsyncRequests: 30,
+                maxInitialRequests: 3,
+                minChunks: 1,
+                minSize: 102400,
+                minSizeReduction: 102400,
+            },
         },
         output: {
             filename: 'account/js/[name].js',
@@ -100,6 +89,7 @@ module.exports = function (env) {
                 '@deriv/api': '@deriv/api',
                 '@deriv/hooks': '@deriv/hooks',
                 '@deriv/stores': '@deriv/stores',
+                '@deriv/utils': '@deriv/utils',
                 '@deriv/quill-icons': `@deriv/quill-icons`,
                 '@deriv-com/utils': '@deriv-com/utils',
                 '@deriv-com/translations': '@deriv-com/translations',

packages/account/package.json

@@ -41,6 +41,7 @@
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
+        "@deriv/utils": "^1.0.0",
         "clsx": "^2.1.1",
         "formik": "^2.1.4",
         "i18n-iso-countries": "^6.8.0",

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Localize, localize } from '@deriv/translations';
-import AccountArticle from 'Components/article';
+import AccountArticle from '../article';
 
 const getDescription = () => [
     <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,

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

@@ -5,8 +5,8 @@ import { formatMoney, isDesktop, isMobile, useIsMounted } from '@deriv/shared';
 import { Loading, ThemedScrollbars } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
-import DemoMessage from 'Components/demo-message';
-import LoadErrorMessage from 'Components/load-error-message';
+import DemoMessage from '../demo-message';
+import LoadErrorMessage from '../load-error-message';
 import AccountLimitsArticle from './account-limits-article';
 import AccountLimitsContext, { TAccountLimitsContext } from './account-limits-context';
 import AccountLimitsExtraInfo from './account-limits-extra-info';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { localize } from '@deriv/translations';
 import IconWithMessage from '../icon-with-message';
 

packages/account/src/Components/poa/status/verified/verified.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@deriv/components';
 import { isNavigationFromP2P, isNavigationFromDerivGO } from '@deriv/shared';
 import { localize } from '@deriv/translations';

packages/account/src/Configs/poa-common-mistake-examples-config.tsx

@@ -7,8 +7,8 @@ import {
     DerivLightIcDocumentNameMismatchIcon,
     DerivLightIcEnvelopeIcon,
     DerivLightIcOldIssuedDocumentMoreThan6Icon,
+    DerivLightIcOldIssuedDocumentMoreThan12Icon,
 } from '@deriv/quill-icons';
-import Ic12MonthsIssuedDocument from '../Assets/ic-12-months-expiry.svg';
 
 type TExampleImageConfig = {
     image: React.ComponentType<React.SVGAttributes<SVGElement>>;
@@ -38,7 +38,7 @@ export const getExampleImagesConfig = (is_eu: boolean): Array<TExampleImageConfi
                   ref: 'old_6_month_issued_document',
               }
             : {
-                  image: Ic12MonthsIssuedDocument,
+                  image: DerivLightIcOldIssuedDocumentMoreThan12Icon,
                   description: <Localize i18n_default_text='Document issued more than 12-months ago.' />,
                   ref: 'old_12_month_issued_document',
               }),

packages/account/src/Constants/get-login-history-table-headers.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Localize } from '@deriv/translations';
 
 const getLoginHistoryTableHeaders = () => ({

packages/account/src/Constants/routes-config.tsx

@@ -1,12 +1,9 @@
 // /* eslint-disable @typescript-eslint/ban-ts-comment */
 // // @ts-nocheck [TODO] - Need to update the types of routes
 
-import React from 'react';
 import { routes, moduleLoader, makeLazyLoader } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import {
-    AccountLimits,
-    Passwords,
     Passkeys,
     PersonalDetails,
     TradingAssessment,
@@ -19,11 +16,7 @@ import {
     SelfExclusion,
     Account,
     ClosingAccount,
-    ConnectedApps,
-    LoginHistory,
-    AccountClosed,
     DeactivateAccount,
-    LanguageSettings,
     ProofOfIncome,
 } from '../Sections';
 
@@ -34,6 +27,37 @@ const Page404 = makeLazyLoader(
     () => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Modules/Page404')),
     () => <Loading />
 )();
+
+const Passwords = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/Passwords')),
+    () => <Loading />
+)();
+
+const AccountLimits = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/AccountLimits')),
+    () => <Loading />
+)();
+
+const AccountClosed = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/AccountClosed')),
+    () => <Loading />
+)();
+
+const LanguageSettings = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Profile/LanguageSettings')),
+    () => <Loading />
+)();
+
+const LoginHistory = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/LoginHistory')),
+    () => <Loading />
+)();
+
+const ConnectedApps = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/ConnectedApps')),
+    () => <Loading />
+)();
+
 export type TPage404 = typeof Page404;
 
 // Order matters

packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx

@@ -2,8 +2,8 @@ import { Redirect } from 'react-router-dom';
 import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { localize, getAllowedLanguages } from '@deriv/translations';
-import FormSubHeader from 'Components/form-sub-header';
-import LanguageRadioButton from 'Components/language-settings';
+import FormSubHeader from '../../../Components/form-sub-header';
+import LanguageRadioButton from '../../../Components/language-settings';
 
 const LanguageSettings = observer(() => {
     const { client, common, ui } = useStore();

packages/account/src/Sections/Security/AccountLimits/account-limits.tsx

@@ -1,4 +1,4 @@
-import AccountLimits from 'Components/account-limits/account-limits';
-import 'Components/account-limits/account-limits.scss';
+import AccountLimits from '../../../Components/account-limits/account-limits';
+import '../../../Components/account-limits/account-limits.scss';
 
 export default AccountLimits;

packages/account/src/Sections/Security/ConnectedApps/connected-apps-earn-more.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Localize } from '@deriv/translations';
-import Article from 'Components/article';
+import Article from '../../../Components/article';
 
 const openDerivAPIWebsite = () => {
     window.open('https://api.deriv.com/', '_blank', 'noopener');

packages/account/src/Sections/Security/ConnectedApps/connected-apps-info-bullets.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
 import clsx from 'clsx';
 import { Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
-import { CONNECTED_APPS_INFO_BULLETS } from 'Constants/connected-apps-config';
+import { CONNECTED_APPS_INFO_BULLETS } from '../../../Constants/connected-apps-config';
 
 type TConnectedAppsInfoBulletsProps = {
     class_name: string;

packages/account/src/Sections/Security/ConnectedApps/connected-apps-know-more.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Localize } from '@deriv/translations';
-import Article from 'Components/article';
+import Article from '../../../Components/article';
 
 const openAPIManagingWebsite = () => {
     window.open(

packages/account/src/Sections/Security/ConnectedApps/connected-apps.tsx

@@ -3,7 +3,7 @@ import { OauthApps } from '@deriv/api-types';
 import { Loading } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { WS } from '@deriv/shared';
-import ErrorComponent from 'Components/error-component';
+import ErrorComponent from '../../../Components/error-component';
 import ConnectedAppsKnowMore from './connected-apps-know-more';
 import ConnectedAppsInfo from './connected-apps-info';
 import ConnectedAppsEarnMore from './connected-apps-earn-more';

packages/account/src/Sections/Security/DeactivateAccount/deactivate-account.tsx

@@ -1,5 +1,4 @@
 // TODO: Remove once mobile team has changed this link
-import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { routes } from '@deriv/shared';
 

packages/account/src/Sections/Security/LoginHistory/__test__/login-history.spec.tsx

@@ -3,14 +3,15 @@ import { screen, render, waitFor } from '@testing-library/react';
 import { WS } from '@deriv/shared';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import LoginHistory from '../login-history';
-import { getLoginHistoryFormattedData } from '../../../../../../utils/src/getLoginHistoryFormattedData';
+import { getLoginHistoryFormattedData } from '@deriv/utils';
 
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     Loading: jest.fn(() => 'mockedLoading'),
 }));
 
-jest.mock('../../../../../../utils/src/getLoginHistoryFormattedData', () => ({
+jest.mock('@deriv/utils', () => ({
+    ...jest.requireActual('@deriv/utils'),
     getLoginHistoryFormattedData: jest.fn(),
 }));
 

packages/account/src/Sections/Security/LoginHistory/login-history-content.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Table } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
-import getLoginHistoryTableHeaders from 'Constants/get-login-history-table-headers';
+import getLoginHistoryTableHeaders from '../../../Constants/get-login-history-table-headers';
 import LoginHistoryTableRow from './login-history-table-row';
 import LoginHistoryListRow from './login-history-list-row';
 

packages/account/src/Sections/Security/LoginHistory/login-history-list-row.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import clsx from 'clsx';
-import { TLoginHistoryItems } from 'Types';
+import { TLoginHistoryItems } from '../../../Types';
 import { Table } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import getLoginHistoryTableHeaders from 'Constants/get-login-history-table-headers';
+import getLoginHistoryTableHeaders from '../../../Constants/get-login-history-table-headers';
 import ListCell from './list-cell';
 import { observer, useStore } from '@deriv/stores';
 

packages/account/src/Sections/Security/LoginHistory/login-history-table-row.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Table, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import { TLoginHistoryItems } from 'Types';
+import { TLoginHistoryItems } from '../../../Types';
 
 const LoginHistoryTableRow = ({ id, date, action, browser, ip, status }: TLoginHistoryItems) => {
     return (

packages/account/src/Sections/Security/LoginHistory/login-history.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Loading, ThemedScrollbars } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { WS, useIsMounted } from '@deriv/shared';
-import LoadErrorMessage from 'Components/load-error-message';
+import LoadErrorMessage from '../../../Components/load-error-message';
 import LoginHistoryContent from './login-history-content';
-import { getLoginHistoryFormattedData } from '../../../../../utils/src/getLoginHistoryFormattedData';
+import { getLoginHistoryFormattedData } from '@deriv/utils';
 
 type TLoginData = { id: number; date: string; action: string; browser: string; ip: string; status: string }[];
 

packages/account/src/Sections/Security/Passwords/deriv-email.tsx

@@ -4,9 +4,9 @@ import { useVerifyEmail } from '@deriv/api';
 import { toTitleCase } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
-import FormSubHeader from 'Components/form-sub-header';
-import SentEmailModal from 'Components/sent-email-modal';
-import UnlinkAccountModal from 'Components/unlink-account-modal';
+import FormSubHeader from '../../../Components/form-sub-header';
+import SentEmailModal from '../../../Components/sent-email-modal';
+import UnlinkAccountModal from '../../../Components/unlink-account-modal';
 
 type TVerifyEmailPayload = Parameters<ReturnType<typeof useVerifyEmail>['mutate']>[0];
 

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

@@ -7,8 +7,8 @@ import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 
 import DerivComLogo from 'Assets/ic-brand-deriv-red.svg';
-import FormSubHeader from 'Components/form-sub-header';
-import SentEmailModal from 'Components/sent-email-modal';
+import FormSubHeader from '../../../Components/form-sub-header';
+import SentEmailModal from '../../../Components/sent-email-modal';
 
 import PlatformDescription from './platform-description';