Kate/refactor after last review (#117)

* refactor: delete extra filed in object

* refactor: add storeProvider and mockStore for tests

* chore: optimise code size

* fix: bug with contract info slider

* fix: bug with contract info and refactor widget component

* chore: rename constant for tests

* refactor: add T prefix

* chore: remove extra const

packages/shared/src/utils/constants/contract.tsx

@@ -485,11 +485,10 @@ export const getSupportedContracts = (is_high_low?: boolean) =>
         },
     } as const);
 
-export const getContractConfig = (is_high_low?: boolean) =>
-    ({
-        ...getSupportedContracts(is_high_low),
-        ...getUnsupportedContracts(),
-    } as const);
+export const getContractConfig = (is_high_low?: boolean) => ({
+    ...getSupportedContracts(is_high_low),
+    ...getUnsupportedContracts(),
+});
 
 /*
 // TODO we can combine getContractTypeDisplay and getContractTypePosition functions.

packages/shared/src/utils/contract/contract-types.ts

@@ -1,4 +1,4 @@
-import { ContractUpdate, ProposalOpenContract } from '@deriv/api-types';
+import { ContractUpdate, ProposalOpenContract as TProposalOpenContract } from '@deriv/api-types';
 
 export type TStatus = 'open' | 'sold' | 'won' | 'lost' | 'cancelled';
 
@@ -14,7 +14,7 @@ export type TIsEnded = Partial<TGetFinalPrice> & {
     is_settleable?: 0 | 1;
 };
 
-export type TContractInfo = ProposalOpenContract & {
+export type TContractInfo = TProposalOpenContract & {
     tick_stream?: TTickItem[];
     cancellation?: {
         ask_price?: number;

packages/trader/src/Assets/Trading/Categories/turbos-trade-description.tsx

@@ -5,41 +5,34 @@ import { Text } from '@deriv/components';
 export const TurbosTradeDescription = () => {
     const content = [
         {
-            type: 'paragraph',
             text: localize(
                 'Predict the market direction, size and also how confident you are that the spot price will not touch the barrier.'
             ),
         },
         {
-            type: 'paragraph',
             text: localize(
                 'If you select “Long”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always above the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Long” contract if you think the market will grow strongly without falling.'
             ),
         },
         {
-            type: 'paragraph',
             text: localize(
                 'If you select “Short”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always below the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Short” contract if you think the market will decay strongly without rising.'
             ),
         },
         {
-            type: 'paragraph',
             text: localize(
                 'Barrier is the level where if the spot price crosses this, then this option will go worthless. This is also used in the calculation of the payout per point. It is expressed in a distance from the spot. Select a further distance to have a lower chance of options getting worthless.'
             ),
         },
         {
-            type: 'paragraph',
             text: localize(
                 'We’ve limited the maximum payout for every contract, and it differs for every asset. Your contract will be closed automatically when the maximum payout is reached.'
             ),
         },
         {
-            type: 'paragraph',
             text: localize('You will earn a profit if the payout is higher than the stake.'),
         },
         {
-            type: 'paragraph',
             text: localize(
                 'You can determine the expiry for your contract by setting the duration and you can also sell your contract early.'
             ),
@@ -48,8 +41,8 @@ export const TurbosTradeDescription = () => {
 
     return (
         <React.Fragment>
-            {content.map(({ type, text }, index) => (
-                <Text as='p' key={index.toString() + type}>
+            {content.map(({ text }, index) => (
+                <Text as='p' key={index.toString()}>
                     {text}
                 </Text>
             ))}

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx

@@ -9,7 +9,7 @@ import { getContractTypes } from '../../../../Helpers/contract-type';
 
 const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }) => {
     const contract_types = getContractTypes(list, item).filter(
-        i => i.value !== 'rise_fall_equal' && i.value !== 'turboslong'
+        i => i.value !== 'rise_fall_equal' && i.value !== 'turbosshort'
     );
 
     const cards = contract_types.map((type, idx) => {

packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx

@@ -12,7 +12,6 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
     const [selected_category, setSelectedCategory] = React.useState(null);
     const [search_query, setSearchQuery] = React.useState('');
     const [item, setItem] = React.useState(null);
-    const [selected_item, setSelectedItem] = React.useState(null);
 
     const handleClickOutside = React.useCallback(
         event => {
@@ -44,19 +43,11 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
             setDialogVisibility(false);
             setInfoDialogVisibility(false);
             setItem(clicked_item);
-            setSelectedItem(clicked_item);
             setSelectedCategory(key);
+            onChange({ target: { name, value: clicked_item.value } });
         }
     };
 
-    React.useEffect(() => {
-        if (selected_item && selected_item.value !== value) {
-            onChange({ target: { name, value: selected_item.value } });
-        }
-        // don't include value into the dependency array, it'll breake TradeTypeTab component
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selected_item, onChange, name]);
-
     const handleInfoClick = clicked_item => {
         setInfoDialogVisibility(!is_info_dialog_open);
 
@@ -168,7 +159,7 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
     const selected_contract_index = () => {
         const contract_types_arr = list_with_category()?.flatMap(category => category.contract_types);
         return contract_types_arr
-            .filter(type => type.value !== 'rise_fall_equal')
+            .filter(type => type.value !== 'rise_fall_equal' && type.value !== 'turbosshort')
             .findIndex(type => type.value === item?.value);
     };
 

packages/trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx

@@ -3,32 +3,29 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import TradeTypeTabs from '../trade-type-tabs';
-import { useStore } from '@deriv/stores';
+import { StoreProvider, mockStore } from '@deriv/stores';
 
-const mocked_root_store: Partial<ReturnType<typeof useStore>> = {
-    modules: {
-        trade: {
-            contract_type: 'turboslong',
-            onChange: jest.fn(() => {
-                if (mocked_root_store.modules) {
-                    mocked_root_store.modules.trade.contract_type = 'turbosshort';
-                }
-            }),
-            vanilla_trade_type: 'VANILLALONGCALL',
+describe('Trade Type Tabs', () => {
+    const mock_root_store = mockStore({
+        modules: {
+            trade: {
+                contract_type: 'turboslong',
+                onChange: jest.fn(() => {
+                    if (mock_root_store.modules) {
+                        mock_root_store.modules.trade.contract_type = 'turbosshort';
+                    }
+                }),
+                vanilla_trade_type: 'VANILLALONGCALL',
+            },
         },
-    },
-};
-
-jest.mock('@deriv/stores', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    observer: <T,>(Component: T) => Component,
-    useStore: () => mocked_root_store,
-}));
+    });
 
-describe('Trade Type Tabs', () => {
     it('should render Long & Short tabs when contract_type = turboslong', () => {
-        render(<TradeTypeTabs />);
+        render(
+            <StoreProvider store={mock_root_store}>
+                <TradeTypeTabs />
+            </StoreProvider>
+        );
         const long_tab = screen.getByText('Long');
         const short_tab = screen.getByText('Short');
         [long_tab, short_tab].forEach(tab => {
@@ -37,10 +34,14 @@ describe('Trade Type Tabs', () => {
     });
 
     it('should render Call & Put tabs when contract_type = vanilla, and vanilla_trade_type = VANILLALONGCALL', () => {
-        if (mocked_root_store.modules) {
-            mocked_root_store.modules.trade.contract_type = 'vanilla';
+        if (mock_root_store.modules) {
+            mock_root_store.modules.trade.contract_type = 'vanilla';
         }
-        render(<TradeTypeTabs />);
+        render(
+            <StoreProvider store={mock_root_store}>
+                <TradeTypeTabs />
+            </StoreProvider>
+        );
         const call_tab = screen.getByText('Call');
         const put_tab = screen.getByText('Put');
         [call_tab, put_tab].forEach(tab => {
@@ -49,10 +50,14 @@ describe('Trade Type Tabs', () => {
     });
 
     it('should not render if contract_type is other than turbos or vanillas', () => {
-        if (mocked_root_store.modules) {
-            mocked_root_store.modules.trade.contract_type = 'invalid_type';
+        if (mock_root_store.modules) {
+            mock_root_store.modules.trade.contract_type = 'invalid_type';
         }
-        render(<TradeTypeTabs />);
+        render(
+            <StoreProvider store={mock_root_store}>
+                <TradeTypeTabs />
+            </StoreProvider>
+        );
         const long_tab = screen.queryByText('Long');
         const short_tab = screen.queryByText('Short');
         [long_tab, short_tab].forEach(tab => {
@@ -61,14 +66,18 @@ describe('Trade Type Tabs', () => {
     });
 
     it('should call onChange when a tab is clicked', () => {
-        if (mocked_root_store.modules) {
-            mocked_root_store.modules.trade.contract_type = 'turboslong';
+        if (mock_root_store.modules) {
+            mock_root_store.modules.trade.contract_type = 'turboslong';
         }
-        render(<TradeTypeTabs />);
+        render(
+            <StoreProvider store={mock_root_store}>
+                <TradeTypeTabs />
+            </StoreProvider>
+        );
 
         const short_tab = screen.getByText('Short');
         userEvent.click(short_tab);
 
-        expect(mocked_root_store.modules?.trade.contract_type).toBe('turbosshort');
+        expect(mock_root_store.modules?.trade.contract_type).toBe('turbosshort');
     });
 });