Shayan/82304/components shared ts migration parent 2 (binary-com#7586)

* feat: 🎨 migrated code to tsx

* refactor: ts migration for poi/status/rejected-reasons

* refactor: ts migration for unsupported

* refactor: ts migration for selfie-upload

* feat: 🎨 migrated scollbar to tsx

* refactor: replace .jsx

* feat: 🎨 migrated testcases to tsx

* refactor: change object to FormikValues

* refactor: ts migration for documents-upload.tsx

* refactor: ts migration for documents-upload.tsx

* refactor: ts migration for documents-uploads

* refactor: ts migration for card-details

* refactor: ts migration for card-details

* fix: resolve conflicts

* refactor: change FormikValues to more specific values for data

* refactor: change FormikValues to more specific values for data

* fix: empty

* fix: circle ci error fixed

* fix: circle ci does not pass issue

* fix: ts error for verified.tsx

* fix: cfd-account-card ts error

* fix: cfd-account-card ts error

* fix: cfd-account-card ts error

* fix: resolve conflicts

* refactor: ts migration for idv-document-submit

* fix: fix circle ci

* refactor: 🎨 migrated poi-onfido-not-required to tsx

* refactor: 🎨 migrated to ts

* refactor: 🎨 migrated upload complete to tsx

* refactor: 🎨 migrated status to ts

* refactor: 🎨 inorporated review comments

* fix: 🐛 resolved failing test

* fix: 🐛 fixed fialing test cases

* refactor: remove debugger and replace any with React.SVGAttributes

* refactor: ts mirgration for iput fields

* redeploy: resolving conflicts

* refactor: ts migration

* fix: ts migration fix

* fix: downgrade webpack-cli version due to unsupported option attribute error

* refactor: ts migration for financial details and test

* refactor: some more type annotations

* refactor: change null to empty string

* refactor: pr follow up

* refactor: remove duplicates value and change interface to type

* refactor: ts migration for detail-components

* refactor: remove unused variables and declare empty string

* refactor: remove undefined

* refactor: remove type and add default value in useState

* refactor: change some type script rules and remove any

* refactor: ts migration for unsupported

* refactor: remove .jsx

* refactor: ts migration for self-exclusion-context

* refactor: change some logic

* refactor: renaming e to is_cfd_poi_completed

* refactor: add types to self exclusion context

* refactor: update to latest typescript rules

* refactor: remove unused ts migration logic

* refactor: ts_migration_for_self_exclusion_confirm_limits

* refactor: remove .jsx

* refactor: ts migration for self exclusion confirm limits

* refactor: ts migration for index.js

* refactor: ts migration for utils.js

* refactor: ts migration for self-exclusion-footer.js

* refactor: use dynamic values which already exist in the code base

* refactor: fix ts error

* build: updated package.json

* chore: removed any in financial-details

* chore: removed any from test files

* build: updated package-lock

* chore: refactor idv document submit tsx

* fix: updated idv-document-submit and its test file

* fix: fixed circle-ci failing issue

* fix: resolved pr comments

* chore: checking regex issue

* fix: updated import loader regex

* fix: removed extra function call

* chore: updated import loader regex

* fix: remove allowing space at the begining of import stateent from the regex

* fix: revert loader regex

* fix: fixed Financial assessment fields are disabled in creating real MF account

* fix: revert unintended change

* fix: fixing build errors [WIP]

* fix: revert config files to js to fix the build error

* ci: 💚 trigger build

* fix: resolved pr comment

* fix: fixing sonarcloud error

* chore: updated svg type

---------

Co-authored-by: shayan khaleghparast <iman@firstsource.tech>
Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com>
Co-authored-by: tay suisin <suisin@regentmarkets.com>
Co-authored-by: ashraf-deriv <ashraf@deriv.com>
Co-authored-by: Shayan Khaleghparast <iman@re-work.dev>
Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Co-authored-by: hirad-deriv <hirad@re-work.dev>

packages/account/build/webpack.config.js

@@ -52,7 +52,7 @@ module.exports = function (env) {
             'proof-of-identity-form-on-signup': 'Components/poi/poi-form-on-signup',
             '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.jsx',
+            '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.jsx',
             'self-exclusion': 'Components/self-exclusion',

packages/account/package.json

@@ -15,8 +15,8 @@
     },
     "scripts": {
         "start": "npm run test && npm run serve",
-        "serve": "echo \"Serving...\" && webpack --progress --watch --config \"./build/webpack.config.js\"",
-        "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
+        "serve": "echo \"Serving...\" && NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config \"./build/webpack.config.js\"",
+        "build": "f () { NODE_OPTIONS='-r ts-node/register' webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
         "build:travis": "rimraf dist && webpack --config \"./build/webpack.config.js\"  --mode=production",
         "test": "echo \"No test specified\"",
         "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",

packages/account/src/Components/address-details/__tests__/address-details.spec.tsx

@@ -12,7 +12,7 @@ jest.mock('@deriv/shared', () => ({
     makeCancellablePromise: jest.fn(() => ({ cancel: jest.fn(), promise: Promise.resolve('resolved') })),
 }));
 
-jest.mock('../../real-account-signup/helpers/utils.js', () => ({
+jest.mock('../../real-account-signup/helpers/utils.ts', () => ({
     splitValidationResultTypes: jest.fn(() => ({
         errors: {},
         warnings: {},

packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx

@@ -9,7 +9,7 @@ jest.mock('@deriv/shared', () => ({
     isMobile: jest.fn().mockReturnValue(false),
 }));
 
-jest.mock('../../real-account-signup/helpers/utils.js', () => ({
+jest.mock('../../real-account-signup/helpers/utils.ts', () => ({
     splitValidationResultTypes: jest.fn(() => ({
         warnings: {},
         errors: {},

packages/account/src/Components/financial-details/__tests__/financial-details.spec.js → packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { isDesktop, isMobile } from '@deriv/shared';
-import FinancialDetails from '../financial-details';
+import FinancialDetails, { TFinancialInformationAndTradingExperience, TFinancialDetails } from '../financial-details';
+import { FormikValues } from 'formik';
 
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
@@ -13,7 +14,7 @@ const modal_root_el = document.createElement('div');
 modal_root_el.setAttribute('id', 'modal_root');
 document.body.appendChild(modal_root_el);
 
-const fields_enums = {
+const fields_enums: TFinancialInformationAndTradingExperience = {
     account_turnover_enum: [
         { value: 'account turnover 1', text: 'account turnover 1' },
         { value: 'account turnover 2', text: 'account turnover 2' },
@@ -47,20 +48,44 @@ const fields_enums = {
         { value: 'source of wealth 1', text: 'source of wealth 1' },
         { value: 'source of wealth 2', text: 'source of wealth 2' },
     ],
+    employment_status_enum: [
+        { value: 'employment status 1', text: 'employment status 1' },
+        { value: 'employment status 2', text: 'employment status 2' },
+    ],
 };
 
 describe('<FinancialDetails />', () => {
-    let mock_props = {};
+    let mock_props: TFinancialDetails & TFinancialInformationAndTradingExperience = {
+        getCurrentStep: jest.fn(),
+        goToNextStep: jest.fn(),
+        onCancel: jest.fn(),
+        onSave: jest.fn(),
+        onSubmit: jest.fn(),
+        validate: jest.fn(() => ({ errors: {} })),
+        goToPreviousStep: jest.fn(() => ({ errors: {} })),
+        value: {},
+        income_source_enum: [{}],
+        employment_status_enum: [{}],
+        employment_industry_enum: [{}],
+        occupation_enum: [{}],
+        source_of_wealth_enum: [{}],
+        education_level_enum: [{}],
+        net_income_enum: [{}],
+        estimated_worth_enum: [{}],
+        account_turnover_enum: [{}],
+        forex_trading_experience_enum: [{}],
+        forex_trading_frequency_enum: [{}],
+        binary_options_trading_experience_enum: [{}],
+        binary_options_trading_frequency_enum: [{}],
+        cfd_trading_experience_enum: [{}],
+        cfd_trading_frequency_enum: [{}],
+        other_instruments_trading_experience_enum: [{}],
+        other_instruments_trading_frequency_enum: [{}],
+    };
 
     beforeEach(() => {
         mock_props = {
-            getCurrentStep: jest.fn(),
-            goToNextStep: jest.fn(),
-            onCancel: jest.fn(),
-            onSave: jest.fn(),
-            onSubmit: jest.fn(),
-            validate: jest.fn(() => ({ errors: {} })),
-            value: {},
+            ...mock_props,
             ...fields_enums,
         };
     });
@@ -89,8 +114,8 @@ describe('<FinancialDetails />', () => {
     });
 
     it('should render "FinancialDetails" for mobile', () => {
-        isDesktop.mockReturnValue(false);
-        isMobile.mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
 
         render(<FinancialDetails {...mock_props} />);
 
@@ -116,36 +141,41 @@ describe('<FinancialDetails />', () => {
     });
 
     it('should trigger "Previous" or "Submit" button', async () => {
-        isDesktop.mockReturnValue(false);
-        isMobile.mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
 
         render(<FinancialDetails {...mock_props} />);
 
         fieldsRenderCheck();
 
         const select_inputs = screen.getAllByRole('combobox');
 
-        const account_turnover_select = select_inputs.find(option => option.name === 'account_turnover');
-
-        const education_level_select = select_inputs.find(option => option.name === 'education_level');
-        const employment_indystry_select = select_inputs.find(option => option.name === 'employment_industry');
-        const estimated_worth_select = select_inputs.find(option => option.name === 'estimated_worth');
-        const income_source_select = select_inputs.find(option => option.name === 'income_source');
-        const net_income_select = select_inputs.find(option => option.name === 'net_income');
-        const occuppation_select = select_inputs.find(option => option.name === 'occupation');
-
-        const source_of_wealth_select = select_inputs.find(option => option.name === 'source_of_wealth');
-
-        fireEvent.change(account_turnover_select, { target: { value: 'account turnover 1' } });
-
-        fireEvent.change(education_level_select, { target: { value: 'education level 2' } });
-        fireEvent.change(employment_indystry_select, { target: { value: 'employment industry 1' } });
-        fireEvent.change(estimated_worth_select, { target: { value: 'estimated worth 2' } });
-        fireEvent.change(income_source_select, { target: { value: 'income source 1' } });
-        fireEvent.change(net_income_select, { target: { value: 'net income 1' } });
-        fireEvent.change(occuppation_select, { target: { value: 'occupation 2' } });
-
-        fireEvent.change(source_of_wealth_select, { target: { value: 'source of wealth 1' } });
+        const account_turnover_select = select_inputs.find(
+            (option: FormikValues) => option.name === 'account_turnover'
+        );
+        const education_level_select = select_inputs.find((option: FormikValues) => option.name === 'education_level');
+        const employment_indystry_select = select_inputs.find(
+            (option: FormikValues) => option.name === 'employment_industry'
+        );
+        const estimated_worth_select = select_inputs.find((option: FormikValues) => option.name === 'estimated_worth');
+        const income_source_select = select_inputs.find((option: FormikValues) => option.name === 'income_source');
+        const net_income_select = select_inputs.find((option: FormikValues) => option.name === 'net_income');
+        const occuppation_select = select_inputs.find((option: FormikValues) => option.name === 'occupation');
+
+        const source_of_wealth_select = select_inputs.find(
+            (option: FormikValues) => option.name === 'source_of_wealth'
+        );
+
+        fireEvent.change(account_turnover_select as HTMLElement, { target: { value: 'account turnover 1' } });
+
+        fireEvent.change(education_level_select as HTMLElement, { target: { value: 'education level 2' } });
+        fireEvent.change(employment_indystry_select as HTMLElement, { target: { value: 'employment industry 1' } });
+        fireEvent.change(estimated_worth_select as HTMLElement, { target: { value: 'estimated worth 2' } });
+        fireEvent.change(income_source_select as HTMLElement, { target: { value: 'income source 1' } });
+        fireEvent.change(net_income_select as HTMLElement, { target: { value: 'net income 1' } });
+        fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'occupation 2' } });
+
+        fireEvent.change(source_of_wealth_select as HTMLElement, { target: { value: 'source of wealth 1' } });
 
         const btns = screen.getAllByRole('button');
         expect(btns[1]).toHaveTextContent('Next');

packages/account/src/Components/financial-details/financial-details-partials.tsx

@@ -508,7 +508,7 @@ export const AccountTurnover = ({
 );
 
 type TForexTradingExperience = {
-    forex_trading_experience_enum: object[];
+    forex_trading_experience_enum?: object[];
 };
 
 export const ForexTradingExperience = ({
@@ -564,7 +564,7 @@ export const ForexTradingExperience = ({
 );
 
 type TForexTradingFrequency = {
-    forex_trading_frequency_enum: object[];
+    forex_trading_frequency_enum?: object[];
 };
 
 export const ForexTradingFrequency = ({
@@ -620,7 +620,7 @@ export const ForexTradingFrequency = ({
 );
 
 type TBinaryOptionsTradingExperience = {
-    binary_options_trading_experience_enum: object[];
+    binary_options_trading_experience_enum?: object[];
 };
 
 export const BinaryOptionsTradingExperience = ({
@@ -676,7 +676,7 @@ export const BinaryOptionsTradingExperience = ({
 );
 
 type TBinaryOptionsTradingFrequency = {
-    binary_options_trading_frequency_enum: object[];
+    binary_options_trading_frequency_enum?: object[];
 };
 
 export const BinaryOptionsTradingFrequency = ({
@@ -732,7 +732,7 @@ export const BinaryOptionsTradingFrequency = ({
 );
 
 type TCFDTradingExperience = {
-    cfd_trading_experience_enum: object[];
+    cfd_trading_experience_enum?: object[];
 };
 
 export const CFDTradingExperience = ({
@@ -788,7 +788,7 @@ export const CFDTradingExperience = ({
 );
 
 type TCFDTradingFrequency = {
-    cfd_trading_frequency_enum: object[];
+    cfd_trading_frequency_enum?: object[];
 };
 
 export const CFDTradingFrequency = ({
@@ -844,7 +844,7 @@ export const CFDTradingFrequency = ({
 );
 
 type TOtherInstrumentsTradingExperience = {
-    other_instruments_trading_experience_enum: object[];
+    other_instruments_trading_experience_enum?: object[];
 };
 
 export const OtherInstrumentsTradingExperience = ({
@@ -906,7 +906,7 @@ export const OtherInstrumentsTradingExperience = ({
 );
 
 type TOtherInstrumentsTradingFrequency = {
-    other_instruments_trading_frequency_enum: object[];
+    other_instruments_trading_frequency_enum?: object[];
 };
 
 export const OtherInstrumentsTradingFrequency = ({