Kate/90808/90829/ To migrate turbos-card-body, turbos-trade-description, barrier-selector and barrier-list to TS together with their tests

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TurbosTradeDescription } from '../turbos-trade-description';
+
+describe('<TurbosTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<TurbosTradeDescription />);
+        expect(screen.getByText(/Barrier is the level where if the spot price crosses this/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector.jsx → packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector.tsx

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import BarriersList from './barriers-list.jsx';
+import BarriersList from './barriers-list';
 import TradeTypeTabs from './trade-type-tabs.jsx';
 import { Button, Icon, MobileDialog, Text, Popover } from '@deriv/components';
 import { connect } from 'Stores/connect';
@@ -9,7 +8,21 @@ import Fieldset from 'App/Components/Form/fieldset.jsx';
 import { isMobile } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 
-const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrier_choices }) => {
+type Ttarget = {
+    target: {
+        name: string;
+        value: string;
+    };
+};
+
+type TBarrierSelector = {
+    barrier_1: string;
+    onChange: (arg0: Ttarget) => void;
+    setHoveredBarrier: (barrier: string | null) => void;
+    turbos_barrier_choices: Array<string>;
+};
+
+const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrier_choices }: TBarrierSelector) => {
     const [is_barriers_table_expanded, setIsBarriersTableExpanded] = React.useState(false);
     const [is_mobile_tooltip_visible, setIsMobileTooltipVisible] = React.useState(false);
     const [selected_barrier, setSelectedBarrier] = React.useState(barrier_1);
@@ -22,7 +35,7 @@ const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrie
         setSelectedBarrier(barrier_1);
     };
 
-    const onBarrierClick = barrier => {
+    const onBarrierClick = (barrier: string) => {
         setHoveredBarrier(null);
         setSelectedBarrier(barrier);
         if (!isMobile()) {
@@ -69,7 +82,7 @@ const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrie
             <Popover
                 alignment='bottom'
                 icon='info'
-                zIndex={9999}
+                zIndex={'9999'}
                 message={header_tooltip_text}
                 is_open={is_mobile_tooltip_visible}
                 onClick={toggleMobileTooltip}
@@ -121,7 +134,7 @@ const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrie
                     list={turbos_barrier_choices}
                     selected_item={selected_barrier}
                     onClick={onBarrierClick}
-                    onHover={barrier => setHoveredBarrier(barrier)}
+                    onHover={(barrier: string | null) => setHoveredBarrier(barrier)}
                 />
             </MobileDialog>
         </React.Fragment>
@@ -172,7 +185,7 @@ const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrie
                             list={turbos_barrier_choices}
                             selected_item={selected_barrier}
                             onClick={onBarrierClick}
-                            onHover={barrier => setHoveredBarrier(barrier)}
+                            onHover={(barrier: string | null) => setHoveredBarrier(barrier)}
                         />
                     </Fieldset>
                 </CSSTransition>
@@ -181,13 +194,6 @@ const BarrierSelector = ({ barrier_1, onChange, setHoveredBarrier, turbos_barrie
     );
 };
 
-BarrierSelector.propTypes = {
-    barrier_1: PropTypes.string,
-    onChange: PropTypes.func,
-    setHoveredBarrier: PropTypes.func,
-    turbos_barrier_choices: PropTypes.arrayOf(PropTypes.string),
-};
-
 export default connect(({ modules }) => ({
     barrier_1: modules.trade.barrier_1,
     onChange: modules.trade.onChange,

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/barriers-list.jsx → packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/barriers-list.tsx

@@ -1,11 +1,28 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { Text, ThemedScrollbars } from '@deriv/components';
 
-const BarriersList = ({ active_item_classname, base_classname, selected_item, className, list, onClick, onHover }) => {
-    const onMouseEnter = barrier => {
+type TBarriersLIst = {
+    active_item_classname: string;
+    base_classname: string;
+    selected_item: string;
+    className: string;
+    list: Array<string>;
+    onClick: (barrier: string) => void;
+    onHover: (barrier: string | null) => void;
+};
+
+const BarriersList = ({
+    active_item_classname,
+    base_classname,
+    selected_item,
+    className,
+    list,
+    onClick,
+    onHover,
+}: TBarriersLIst) => {
+    const onMouseEnter = (barrier: string) => {
         if (selected_item !== barrier) {
             onHover(barrier);
         }
@@ -44,21 +61,11 @@ const BarriersList = ({ active_item_classname, base_classname, selected_item, cl
             >
                 {localize('Distance to spot')}
             </Text>
-            <ThemedScrollbars height={isMobile() ? 'calc(100% - 5.5rem)' : null} autohide={false}>
+            <ThemedScrollbars height={isMobile() ? 'calc(100% - 5.5rem)' : ''} autohide={false}>
                 <ul className={className}>{barriers_list}</ul>
             </ThemedScrollbars>
         </React.Fragment>
     );
 };
 
-BarriersList.propTypes = {
-    active_item_classname: PropTypes.string,
-    base_classname: PropTypes.string,
-    selected_item: PropTypes.string,
-    className: PropTypes.string,
-    list: PropTypes.arrayOf(PropTypes.string),
-    onClick: PropTypes.func,
-    onHover: PropTypes.func,
-};
-
 export default React.memo(BarriersList);

packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx

@@ -10,7 +10,7 @@ import {
     isRiseFallEqual,
 } from 'Stores/Modules/Trading/Helpers/allow-equals';
 import { MultiplierOptionsWidget } from 'Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx';
-import BarrierSelector from './TradeParams/Turbos/barrier-selector.jsx';
+import BarrierSelector from './TradeParams/Turbos/barrier-selector';
 import RiskManagementInfo from '../Elements/Multiplier/risk-management-info.jsx';
 import MobileWidget from '../Elements/mobile-widget.jsx';
 import ContractType from '../../Containers/contract-type.jsx';

packages/trader/src/Modules/Trading/Containers/trade-params.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Amount from 'Modules/Trading/Components/Form/TradeParams/amount.jsx';
 import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx';
-import BarrierSelector from 'Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector.jsx';
+import BarrierSelector from 'Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector';
 import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
 import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
 import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx';