Kate / DTRA-269 / [Package 2] Tech debt TS + refactoring of Trader pa…

…ckage (binary-com#9284)

* fix: ts-migrate screen small

* fix: sass was unable to be found

* chore: add key files from prev branch

* chore: empty commit

* Maryia/dtra-279/TS migration [Trader]: TradeModals, MarketUnavailableModal & UnsupportedContractModal (#16)

* maryia/WEBREL-323/feat: ts migration of base-store (#18)

* chore: start ts migration of base-store

* chore: add more types to BaseStore

* chore: added more types to base-store

* chore: added more types to base-store

* chore: finalize base-store ts migration

* chore: reorder imports

* Maryia/webrel-483/TS migration of ContractType function (#17)

* chore: start ts migration

* chore: continue ts migration of contract-types

* chore: add more types to contract-types

* chore: add type for getContractValues return value

* chore: improve reduce types

* fix: sonarcloud issues (#19)

* chore: update reg exp

* chore: remove code smell

* chore: remove security hotspot

* chore: update reg exp

* chore: update reg exp to prev version

* fix: conflict

* fix: ts error

* refactor: apply suggestions

* fix: resolve more conflicts

* fix: conflicts in start date

* fix: type of onchangestartdate

* fix: type of contract cat list in usetraderstore

* fix: types in contract type and allow equals

* refactor: aplly part of suggestions

* refactor: remove unused type

* refactor: remove wrong types

* refactor: types of time

* refactor: revert changes

* chore: empty commit

* fix: more conflicts

---------

Co-authored-by: Henry Hein <henry@regentmarkets.com>
Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com>
Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>

packages/components/src/components/collapsible/collapsible.tsx

@@ -4,11 +4,11 @@ import { useSwipeable } from 'react-swipeable';
 import ArrowButton from './arrow-button';
 
 type TCollapsible = {
-    as: React.ElementType;
+    as?: React.ElementType;
     is_collapsed?: boolean;
     position?: 'top' | 'bottom';
     onClick: (state: boolean) => void;
-    title: string;
+    title?: string;
 };
 
 const swipe_config = {

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

@@ -98,7 +98,7 @@ const Dialog = ({
         }
     };
 
-    const validateClickOutside = () => dismissable || !!(has_close_icon && is_visible && is_closed_on_cancel);
+    const validateClickOutside = () => !!(dismissable || (has_close_icon && is_visible && is_closed_on_cancel));
 
     useOnClickOutside(wrapper_ref, handleClose, validateClickOutside);
 

packages/shared/src/utils/helpers/__tests__/start-date.ts

@@ -1,9 +1,10 @@
+import { ContractsFor } from '@deriv/api-types';
 import { buildForwardStartingConfig } from '../start-date';
 
 describe('start_date', () => {
     describe('buildForwardStartingConfig', () => {
         it('Returns empty object when forward_starting_options and forward_starting_dates are both empties', () => {
-            const contract = {
+            const contract: ContractsFor['available'][number] = {
                 barrier_category: 'euro_atm',
                 barriers: 0,
                 contract_category: 'callput',
@@ -19,7 +20,8 @@ describe('start_date', () => {
                 start_type: 'spot',
                 submarket: 'major_pairs',
                 underlying_symbol: 'frxAUDJPY',
-                forward_starting_options: [],
+                forward_starting_options:
+                    [] as unknown as ContractsFor['available'][number]['forward_starting_options'],
             };
             /* eslint-disable no-unused-expressions */
             expect(buildForwardStartingConfig(contract, [])).toHaveLength(0);

packages/shared/src/utils/helpers/start-date.ts

@@ -1,16 +1,6 @@
 import moment from 'moment';
 import { toMoment } from '../date';
-
-type TForwardStartingDates = {
-    blackouts?: unknown[];
-    close?: string;
-    date: string;
-    open?: string;
-};
-
-type TContract = {
-    forward_starting_options: TForwardStartingDates[];
-};
+import { ContractsFor } from '@deriv/api-types';
 
 type TConfig = {
     text: string;
@@ -21,19 +11,22 @@ type TConfig = {
     }[];
 }[];
 
-export const buildForwardStartingConfig = (contract: TContract, forward_starting_dates: TForwardStartingDates[]) => {
+export const buildForwardStartingConfig = (
+    contract: ContractsFor['available'][number],
+    forward_starting_dates?: TConfig
+) => {
     const forward_starting_config: TConfig = [];
 
     if ((contract.forward_starting_options || []).length) {
-        contract.forward_starting_options.forEach(option => {
-            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date));
+        (contract.forward_starting_options ?? []).forEach(option => {
+            const duplicated_option = forward_starting_config.find(opt => opt.value === parseInt(option.date ?? ''));
             const current_session = { open: toMoment(option.open), close: toMoment(option.close) };
             if (duplicated_option) {
                 duplicated_option.sessions.push(current_session);
             } else {
                 forward_starting_config.push({
                     text: toMoment(option.date).format('ddd - DD MMM, YYYY'),
-                    value: parseInt(option.date),
+                    value: parseInt(option.date ?? ''),
                     sessions: [current_session],
                 });
             }

packages/stores/src/mockStore.ts

@@ -328,9 +328,9 @@ const mock = (): TStores & { is_mock: boolean } => {
             setPurchaseState: jest.fn(),
             shouldNavigateAfterChooseCrypto: jest.fn(),
             toggleLanguageSettingsModal: jest.fn(),
+            toggleServicesErrorModal: jest.fn(),
             toggleLinkExpiredModal: jest.fn(),
             toggleSetCurrencyModal: jest.fn(),
-            toggleServicesErrorModal: jest.fn(),
             addToast: jest.fn(),
             removeToast: jest.fn(),
             reports_route_tab_index: 1,
@@ -513,6 +513,10 @@ const mock = (): TStores & { is_mock: boolean } => {
             eventHandler: jest.fn(),
             setLoginFlag: jest.fn(),
         },
+        pushwoosh: {},
+        contract_replay: {},
+        chart_barrier_store: {},
+        active_symbols: {},
     };
 };
 

packages/stores/types.ts

@@ -423,6 +423,11 @@ type TCommonStoreError = {
     should_show_refresh: boolean;
     type?: string;
 };
+type TCommonStoreServicesError = {
+    code?: string;
+    message?: string;
+    type?: string;
+};
 
 type TCommonStore = {
     isCurrentLanguage(language_code: string): boolean;
@@ -438,8 +443,8 @@ type TCommonStore = {
     changeSelectedLanguage: (key: string) => void;
     current_language: string;
     is_language_changing: boolean;
+    services_error: TCommonStoreServicesError;
     is_socket_opened: boolean;
-    services_error: { code: string; message: string; type: string } | Record<string, never>;
     setAppstorePlatform: (value: string) => void;
     app_routing_history: TAppRoutingHistory[];
     getExchangeRate: (from_currency: string, to_currency: string) => Promise<number>;
@@ -734,6 +739,10 @@ export type TCoreStores = {
     notifications: TNotificationStore;
     traders_hub: TTradersHubStore;
     gtm: TGtmStore;
+    pushwoosh: Record<string, unknown>;
+    contract_replay: Record<string, unknown>;
+    chart_barrier_store: Record<string, unknown>;
+    active_symbols: Record<string, unknown>;
 };
 
 export type TStores = TCoreStores & {

packages/trader/src/App/Components/Elements/Modals/MarketUnavailableModal/index.ts

@@ -0,0 +1,3 @@
+import MarketUnavailableModal from './market-unavailable';
+
+export default MarketUnavailableModal;

packages/trader/src/App/Components/Elements/Modals/MarketUnavailableModal/market-unavailable.jsx → packages/trader/src/App/Components/Elements/Modals/MarketUnavailableModal/market-unavailable.tsx

@@ -1,13 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog } from '@deriv/components';
 import { getPlatformSettings } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 
-const MarketUnavailableModal = observer(({ onCancel, onConfirm }) => {
+type TMarketUnavailableModalProps = {
+    is_loading?: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+};
+
+const MarketUnavailableModal = observer(({ is_loading, onCancel, onConfirm }: TMarketUnavailableModalProps) => {
     const { ui } = useStore();
-    const { disableApp, enableApp, is_loading, has_only_forward_starting_contracts: is_visible } = ui;
+    const { disableApp, enableApp, has_only_forward_starting_contracts: is_visible } = ui;
 
     return (
         <Dialog
@@ -38,9 +43,4 @@ const MarketUnavailableModal = observer(({ onCancel, onConfirm }) => {
     );
 });
 
-MarketUnavailableModal.propTypes = {
-    onCancel: PropTypes.func,
-    onConfirm: PropTypes.func,
-};
-
 export default MarketUnavailableModal;

packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/constants.ts

@@ -1,6 +1,6 @@
 import { localize } from '@deriv/translations';
 
-export const getTitle = (type: string) => {
+export const getTitle = (type?: string) => {
     switch (type) {
         case 'buy':
             return localize('Purchase Error');

packages/trader/src/App/Components/Elements/Modals/ServicesErrorModal/services-error-modal.tsx

@@ -8,9 +8,9 @@ import CompanyWideLimitExceededModal from './company-wide-limit-exceeded-modal';
 import AccountVerificationRequiredModal from './account-verification-required-modal';
 
 type TServicesError = {
-    code: string;
-    message: string;
-    type: string;
+    code?: string;
+    message?: string;
+    type?: string;
 };
 
 type TPropServicesErrorModel = {

packages/trader/src/App/Components/Elements/Modals/UnsupportedContractModal/index.js → packages/trader/src/App/Components/Elements/Modals/UnsupportedContractModal/index.ts

@@ -1,3 +1,3 @@
-import UnsupportedContractModal from './unsupported-contract-modal.jsx';
+import UnsupportedContractModal from './unsupported-contract-modal';
 
 export default UnsupportedContractModal;

packages/trader/src/App/Components/Elements/Modals/UnsupportedContractModal/unsupported-contract-modal.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Dialog } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+import { website_name } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+
+type TUnsupportedContractModalProps = {
+    is_loading?: boolean;
+    is_visible?: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+};
+
+const UnsupportedContractModal = observer(
+    ({ is_loading, is_visible: is_modal_visible, onConfirm, onClose }: TUnsupportedContractModalProps) => {
+        const { ui } = useStore();
+        const { disableApp, enableApp, is_unsupported_contract_modal_visible } = ui;
+        const is_visible = !!(is_unsupported_contract_modal_visible || is_modal_visible);
+
+        return (
+            <Dialog
+                title={localize('We’re working on it')}
+                confirm_button_text={localize('Stay on {{website_domain}}', { website_domain: website_name })}
+                cancel_button_text={localize('Go to Binary.com')}
+                onConfirm={onConfirm}
+                onCancel={onClose}
+                disableApp={disableApp}
+                enableApp={enableApp}
+                is_loading={is_loading}
+                is_closed_on_cancel
+                is_visible={is_visible}
+            >
+                <Localize i18n_default_text='You’ve selected a trade type that is currently unsupported, but we’re working on it.' />
+            </Dialog>
+        );
+    }
+);
+
+export default UnsupportedContractModal;

packages/trader/src/App/Containers/Modals/index.ts

@@ -0,0 +1,3 @@
+import TradeModals from './trade-modals';
+
+export default TradeModals;

packages/trader/src/App/Containers/Modals/trade-modals.jsx → packages/trader/src/App/Containers/Modals/trade-modals.tsx

@@ -46,7 +46,7 @@ const TradeModals = observer(() => {
     const unsupportedContractOnClose = () => {
         const portfoliows_url = urlFor('user/portfoliows', { legacy: true });
         window.open(portfoliows_url, '_blank');
-        unsupportedContractOnConfirm(false);
+        unsupportedContractOnConfirm();
     };
 
     return (

packages/trader/src/Modules/Trading/Components/Elements/purchase-fieldset.tsx

@@ -19,7 +19,7 @@ type TPurchaseFieldset = {
     is_disabled: boolean;
     is_high_low: boolean;
     is_loading: boolean;
-    is_market_closed: boolean;
+    is_market_closed?: boolean;
     is_multiplier: boolean;
     is_proposal_empty: boolean;
     is_proposal_error: boolean;

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-amount-mobile.tsx

@@ -8,7 +8,7 @@ import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
 type TAccumulatorsAmountMobile = {
-    is_nativepicker: boolean;
+    is_nativepicker?: boolean;
 };
 
 const AccumulatorsAmountMobile = observer(({ is_nativepicker }: TAccumulatorsAmountMobile) => {

packages/trader/src/Modules/Trading/Components/Form/form-layout.tsx

@@ -10,7 +10,7 @@ type TFormLayout = {
 const Screen = Loadable({
     loader: () =>
         isMobile()
-            ? import(/* webpackChunkName: "screen-small" */ './screen-small.jsx')
+            ? import(/* webpackChunkName: "screen-small" */ './screen-small')
             : import(/* webpackChunkName: "screen-large" */ './screen-large'),
     loading: () => null,
     render(loaded, props) {