Kate / DTRA-396 / [Package 6] Tech debt (#10018)

* feat: add key files from prev tech tebt branch

* feat: add digits file from prev branch

* feat: add contract types file from prev branch

* feat: add trade params mobile from prev branch

* fix: remove duplicates

* Maryia/dtra-401/TS migration: multiplier components (#34)

* chore: migrate cancel-deal to ts

* chore: migrate expiration & expiration modal

* chore: migrated multiplier

* chore: migrate stop-loss

* chore: migrate take-profit

* chore: migrate widgets

* build: trigger build with empty commit

* Kate / DTRA-398 / TS migration: Widget components in Trader package (#33)

* refactor: ts of contract replay widget

* refactor: ts of mobile widgets

* refactor: ts of chart widgets

* refactor: ts of top widgets

* refactor: ts of top widgets

* refactor: types for widgets

* refactor: apply suggestions

* refactor: add position prop

* fix: extention of the imported file

* chore: replace some localizes (#36)

* Kate / DTRA-400 / [Refactoring]: delete duplicated unused files from Markers folder in Trader package and migrate to TS marker.jsx (#37)

* refactor: marker folder

* fix: change file extension in test

* Kate / DTRA-404 / [Refactoring]: Divide trade-categories.tsx file and cover changes with tests (#35)

* refactor: add rise fall description

* refactor: separate stay end high contract description

* refactor: separate description of digits contracts

* refactor: separate asian reset runhighlow touch contracts

* refactor: separate callputspread lb tickhighlow and vanilla contracts

* refactor: separate multipliers contract

* refactor: add unit tests for contract descriptions

* refactor: add more tests

* refactor: add tests for touch ans vanilla contracts

* refactor: tests for trade categories

* refactor: contract description structure

* refactor: apply suggestions

* refactor: add missing test case

* Maryia/DTRA-403/feat: migrate Routes files in Trader package to TS (#38)

* feat: migrate routes files to ts

* fix: routes extension

* refactor: for consistency

* refactor: import order

* refactor: renamed prop types

* refactor: type for consistency

* refactor: remove index as key

* fix: ts migrate settingsmodal and remove unused file (#39)

* fix: ts migrate settingsmodal and remove unused file

* fix: failing tests

* Kate/ fix: code smells (#40)

* fix: code smells

* chore: empty commit

* fix: function arguments

* refactor: tests

* fix: codesmells

* refactor: code smells

* chore: change optional chaining

* refactor: tests

* refactor: tests for widgets component

* fix: tests

* fix: conflicts

* fix: more conflicts

* fix: tests

* refactor: add more test cases

* fix: types in tests

* fix: test extention

* fix: return turbos back to types

* fix: revert unplanned files

* fix: code smells (#42)

* fix: test extention

* fix: bug with inserting objecting into the backticks

* fix: file extention after ts migration

* chore: sort imports

* chore: revert file

* chore: revert wallet changes

* chore: remove extra file

* chore: apply nit

* fix: language switching issue with the chart

---------

Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>
Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com>

packages/components/src/components/dialog/dialog.tsx

@@ -26,7 +26,7 @@ type TDialog = {
     onConfirm: () => void;
     onEscapeButtonCancel?: () => void;
     portal_element_id?: string;
-    title?: string | JSX.Element;
+    title?: React.ReactNode;
 };
 
 const Dialog = ({

packages/components/src/components/dropdown/dropdown.tsx

@@ -26,6 +26,7 @@ type TDropdown = {
     };
     has_symbol?: boolean;
     hint?: string;
+    id?: string;
     initial_offset?: number;
     initial_height_offset?: number;
     is_align_text_left?: boolean;

packages/components/src/components/input-wth-checkbox/input-with-checkbox.tsx

@@ -29,11 +29,11 @@ type TInputWithCheckbox = {
         e: React.ChangeEvent<HTMLInputElement> | { target: { name: string; value: number | string | boolean } }
     ) => void;
     setCurrentFocus: (name: string | null) => void;
-    tooltip_label?: string;
+    tooltip_label?: React.ReactNode;
     tooltip_alignment?: TPosition;
     error_message_alignment: string;
     value: number | string;
-    is_disabled: boolean;
+    is_disabled?: boolean;
 };
 const InputWithCheckbox = ({
     addToast,

packages/stores/src/mockStore.ts

@@ -355,11 +355,14 @@ const mock = (): TStores & { is_mock: boolean } => {
             notification_messages_ui: jest.fn(),
             openPositionsDrawer: jest.fn(),
             openRealAccountSignup: jest.fn(),
+            onChangeUiStore: jest.fn(),
+            setChartCountdown: jest.fn(),
             setIsWalletModalVisible: jest.fn(),
             setHasOnlyForwardingContracts: jest.fn(),
             setIsClosingCreateRealAccountModal: jest.fn(),
             setMobileLanguageMenuOpen: jest.fn(),
             setRealAccountSignupEnd: jest.fn(),
+            setPromptHandler: jest.fn(),
             setPurchaseState: jest.fn(),
             setAppContentsScrollRef: jest.fn(),
             shouldNavigateAfterChooseCrypto: jest.fn(),
@@ -370,8 +373,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             toggleSetCurrencyModal: jest.fn(),
             addToast: jest.fn(),
             removeToast: jest.fn(),
-            reports_route_tab_index: 1,
             resetPurchaseStates: jest.fn(),
+            reports_route_tab_index: 1,
             should_show_cancellation_warning: false,
             toggleCancellationWarning: jest.fn(),
             toggleUnsupportedContractModal: jest.fn(),
@@ -405,6 +408,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_reset_trading_password_modal_visible: false,
             setResetTradingPasswordModalOpen: jest.fn(),
             vanilla_trade_type: 'VANILLALONGCALL',
+            is_chart_countdown_visible: false,
             is_additional_kyc_info_modal_open: false,
             toggleAdditionalKycInfoModal: jest.fn(),
             is_kyc_information_submitted_modal_open: false,
@@ -516,11 +520,12 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_accumulator: false,
             is_multiplier: false,
             is_turbos: false,
-            onHoverPosition: jest.fn(),
             onBuyResponse: jest.fn(),
+            onHoverPosition: jest.fn(),
             onClickCancel: jest.fn(),
             onClickSell: jest.fn(),
             onMount: jest.fn(),
+            onUnmount: jest.fn(),
             open_accu_contract: null,
             positions: [],
             removePositionById: jest.fn(),
@@ -537,6 +542,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             clearError: jest.fn(),
             contracts: [],
             error_message: '',
+            filtered_contracts: [],
             getContractById: jest.fn(),
             granularity: 0,
             has_crossed_accu_barriers: false,
@@ -589,6 +595,8 @@ const mock = (): TStores & { is_mock: boolean } => {
                 is_digit_contract: false,
                 is_ended: false,
             },
+            removeErrorMessage: jest.fn(),
+            error_message: '',
         },
         chart_barrier_store: {},
         active_symbols: {

packages/stores/types.ts

@@ -574,6 +574,7 @@ type TUiStore = {
     is_wallet_modal_visible: boolean;
     is_chart_asset_info_visible?: boolean;
     is_chart_layout_default: boolean;
+    is_chart_countdown_visible: boolean;
     is_closing_create_real_account_modal: boolean;
     is_kyc_information_submitted_modal_open: boolean;
     is_dark_mode_on: boolean;
@@ -594,7 +595,9 @@ type TUiStore = {
     openRealAccountSignup: (
         value: 'maltainvest' | 'svg' | 'add_crypto' | 'choose' | 'add_fiat' | 'set_currency' | 'manage'
     ) => void;
+    onChangeUiStore: ({ name, value }: { name: string; value: number | null }) => void;
     notification_messages_ui: React.ElementType;
+    setChartCountdown: (value: boolean) => void;
     populateFooterExtensions: (
         footer_extensions:
             | [
@@ -618,6 +621,10 @@ type TUiStore = {
     setRealAccountSignupEnd: (status: boolean) => void;
     setPurchaseState: (index: number) => void;
     sub_section_index: number;
+    setPromptHandler: (
+        condition: boolean,
+        cb?: (() => void) | ((route_to: RouteComponentProps['location'], action: string) => boolean)
+    ) => void;
     setSubSectionIndex: (index: number) => void;
     shouldNavigateAfterChooseCrypto: (value: Omit<string, TRoutes> | TRoutes) => void;
     toggleAccountsDialog: () => void;
@@ -683,6 +690,7 @@ type TPortfolioStore = {
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
     onMount: () => void;
+    onUnmount: () => void;
     open_accu_contract: TPortfolioPosition | null;
     positions: TPortfolioPosition[];
     removePositionById: (contract_id?: number) => void;
@@ -758,24 +766,15 @@ type TContractTradeStore = {
     clearError: () => void;
     contracts: TContractStore[];
     error_message: string;
+    filtered_contracts: TPortfolioPosition[];
     getContractById: (contract_id?: number) => TContractStore;
     granularity: null | number;
     has_crossed_accu_barriers: boolean;
     has_error: boolean;
     last_contract: TContractStore | Record<string, never>;
     markers_array: Array<{
         type: string;
-        contract_info: {
-            accu_barriers_difference:
-                | boolean
-                | {
-                      top: string;
-                      bottom: string;
-                      font: string;
-                  };
-            has_crossed_accu_barriers: boolean;
-            is_accumulator_trade_without_contract: boolean;
-        };
+        contract_info: TPortfolioPosition['contract_info'];
         key: string;
         price_array: [string, string];
         epoch_array: [number];
@@ -939,6 +938,8 @@ type TContractReplay = {
         is_digit_contract: boolean;
         is_ended: boolean;
     };
+    removeErrorMessage: () => void;
+    error_message: string;
 };
 type TGtmStore = {
     is_gtm_applicable: boolean;

packages/trader/src/App/Components/Elements/Errors/error-component.tsx

@@ -4,11 +4,11 @@ import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
 type TErrorComponent = {
-    header: string;
+    header: React.ReactNode;
     message: React.ReactNode;
     is_dialog: boolean;
     redirect_label: string;
-    redirectOnClick: () => void;
+    redirectOnClick: (() => void) | null;
     should_show_refresh: boolean;
 };
 

packages/trader/src/App/Components/Routes/__tests__/helpers.spec.js → packages/trader/src/App/Components/Routes/__tests__/helpers.spec.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as Helpers from '../helpers';
 import { routes } from '@deriv/shared';
 import getRoutesConfig from '../../../Constants/routes-config';
@@ -23,9 +22,9 @@ describe('Helpers', () => {
         });
         it('should return route_info when path is in routes_config and is not nested', () => {
             const result = Helpers.findRouteByPath(routes.trade, getRoutesConfig());
-            expect(result.path).toBe(routes.trade);
-            expect(result.exact).toBe(true);
-            expect(result.component).toBe(Trade);
+            expect(result?.path).toBe(routes.trade);
+            expect(result?.exact).toBe(true);
+            expect(result?.component).toBe(Trade);
         });
     });
 
@@ -46,7 +45,7 @@ describe('Helpers', () => {
 
     describe('getPath', () => {
         it('should return param values in params as a part of path', () => {
-            expect(Helpers.getPath('/contract/:contract_id', { contract_id: 37511105068 })).toBe(
+            expect(Helpers.getPath('/contract/:contract_id', { contract_id: '37511105068' })).toBe(
                 '/contract/37511105068'
             );
             expect(
@@ -63,7 +62,7 @@ describe('Helpers', () => {
 
     describe('getContractPath', () => {
         it('should return the path of contract with contract_id passed', () => {
-            expect(Helpers.getContractPath(1234)).toBe('/contract/1234');
+            expect(Helpers.getContractPath('1234')).toBe('/contract/1234');
         });
     });
 });

packages/trader/src/App/Components/Routes/binary-link.jsx → packages/trader/src/App/Components/Routes/binary-link.tsx

@@ -1,13 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { findRouteByPath, normalizePath } from './helpers';
 import getRoutesConfig from '../../Constants/routes-config';
 
+type TBinaryLinkProps = React.PropsWithChildren<{
+    active_class?: string;
+    className?: string;
+    to?: string;
+    onClick?: () => void;
+}>;
+
 // TODO: solve circular dependency problem
 // when binary link is imported into components present in routes config
 // or into their descendants
-const BinaryLink = ({ active_class = '', to, children, ...props }) => {
+const BinaryLink = ({ active_class = '', to, children, ...props }: TBinaryLinkProps) => {
     const path = normalizePath(to);
     const route = findRouteByPath(path, getRoutesConfig());
 
@@ -32,10 +38,4 @@ const BinaryLink = ({ active_class = '', to, children, ...props }) => {
     );
 };
 
-BinaryLink.propTypes = {
-    active_class: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
-    to: PropTypes.string,
-};
-
 export default BinaryLink;

packages/trader/src/App/Components/Routes/binary-routes.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+import getRoutesConfig from 'App/Constants/routes-config';
+import { TBinaryRoutesProps, TRouteConfig } from 'Types';
+import RouteWithSubRoutes from './route-with-sub-routes';
+
+const BinaryRoutes = (props: TBinaryRoutesProps) => (
+    <React.Suspense fallback={<div />}>
+        <Switch>
+            {getRoutesConfig().map((route: TRouteConfig, index) => (
+                /* Index is the only thing that can be used for the key here because the only other property
+                that can be used as a key and available in every route is a localized title returned from getTitle() which,
+                when used, causes severe bugs upon switching between languages! */
+                <RouteWithSubRoutes key={index} {...route} {...props} />
+            ))}
+        </Switch>
+    </React.Suspense>
+);
+
+export default BinaryRoutes;

packages/trader/src/App/Components/Routes/helpers.ts

@@ -0,0 +1,39 @@
+import { matchPath, RouteProps } from 'react-router';
+import { routes } from '@deriv/shared';
+import { TRouteConfig } from 'Types';
+
+export const normalizePath = (path = '') => (path.startsWith('/') ? path : `/${path || ''}`); // Default to '/'
+
+export const findRouteByPath = (path: string, routes_config?: TRouteConfig[]): RouteProps | undefined => {
+    let result: RouteProps | undefined;
+
+    routes_config?.some(route_info => {
+        let match_path;
+        try {
+            match_path = matchPath(path, route_info);
+        } catch (e: unknown) {
+            if (/undefined/.test((e as Error).message)) {
+                return undefined;
+            }
+        }
+
+        if (match_path) {
+            result = route_info;
+            return true;
+        } else if (route_info.routes) {
+            result = findRouteByPath(path, route_info.routes);
+            return result;
+        }
+        return false;
+    });
+
+    return result;
+};
+
+export const isRouteVisible = (route?: TRouteConfig, is_logged_in?: boolean) =>
+    !(route?.is_authenticated && !is_logged_in);
+
+export const getPath = (route_path: string, params: { [key: string]: string } = {}) =>
+    Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
+
+export const getContractPath = (contract_id = '') => getPath(routes.contract, { contract_id });

packages/trader/src/App/Components/Routes/index.ts

@@ -0,0 +1,7 @@
+import BinaryLink from './binary-link';
+import RouteWithSubRoutes from './route-with-sub-routes';
+import BinaryRoutes from './binary-routes';
+
+export * from './helpers';
+export { BinaryLink, RouteWithSubRoutes };
+export default BinaryRoutes;