Hamza/ 88943 /feat: add Long & Short Tabs to trade params for desktop

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

@@ -137,18 +137,18 @@ export const getContractTypesConfig: TGetContractTypesConfig = symbol => ({
         config: { hide_duration: true },
     }, // hide Duration for Multiplier contracts for now
     turboslong: {
-        title: localize('Long'),
+        title: localize('Turbos'),
         trade_types: ['TURBOSLONG'],
         basis: ['stake'],
         barrier_count: 1,
-        components: ['barrier_selector', 'take_profit'],
+        components: ['trade_type_tab', 'barrier_selector', 'take_profit'],
     },
     turbosshort: {
-        title: localize('Short'),
+        title: localize('Turbos'),
         trade_types: ['TURBOSSHORT'],
         basis: ['stake'],
         barrier_count: 1,
-        components: ['barrier_selector', 'take_profit'],
+        components: ['trade_type_tab', 'barrier_selector', 'take_profit'],
     },
 });
 

packages/trader/src/Assets/Trading/Categories/icon-trade-categories.jsx

@@ -208,20 +208,15 @@ const IconTradeCategory = ({ category, className }) => {
                     </React.Fragment>
                 );
                 break;
+            case 'turboslong':
             case 'turbosshort':
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon icon='IcTradetypeTurbosshort' className='category-type' color='brand' />
+                            <Icon icon='IcTradetypeTurboslong' className='category-type' color='brand' />
                         </div>
-                    </React.Fragment>
-                );
-                break;
-            case 'turboslong':
-                IconCategory = (
-                    <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon icon='IcTradetypeTurboslong' className='category-type' color='brand' />
+                            <Icon icon='IcTradetypeTurbosshort' className='category-type' color='brand' />
                         </div>
                     </React.Fragment>
                 );

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

@@ -6,7 +6,11 @@ const List = ({ handleInfoClick, handleSelect, list, name, value }) =>
     list.map((contract_category, key) => {
         const contract_types = contract_category.contract_types?.filter(contract_type => {
             const base_contract_type = /^(.*)_equal$/.exec(contract_type.value)?.[1];
+            const is_turbosshort = contract_type.value === 'turbosshort';
 
+            if (is_turbosshort) {
+                return contract_category.contract_types.some(c => c.value === is_turbosshort);
+            }
             if (base_contract_type) {
                 return !contract_category.contract_types.some(c => c.value === base_contract_type);
             }

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

@@ -53,7 +53,7 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
         if (selected_item && selected_item.value !== value) {
             onChange({ target: { name, value: selected_item.value } });
         }
-    }, [selected_item, onChange, name, value]);
+    }, [selected_item, onChange, name]);
 
     const handleInfoClick = clicked_item => {
         setInfoDialogVisibility(!is_info_dialog_open);

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/trade-type-tab.jsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonToggle } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+
+const TradeTypeTab = ({ className, onChange }) => {
+    const [selectedValue, setSelectedValue] = React.useState('');
+    const tab_list = [
+        { text: localize('Long'), value: 'turboslong' },
+        { text: localize('Short'), value: 'turbosshort' },
+    ];
+
+    const onTabChange = e => {
+        if (e.target.value !== selectedValue.value) {
+            const name = 'contract_type';
+            const result = tab_list.find(res => res.value === e.target.value);
+            setSelectedValue(prevState => ({
+                ...prevState,
+                name: result ? result.text : e.target.name,
+                value: e.target.value,
+            }));
+            onChange({ target: { name, value: e.target.value } });
+        }
+    };
+
+    return (
+        <div className={classNames('trade-container__trade-type-tab', className)}>
+            <ButtonToggle
+                id='dt_advanced_duration_toggle'
+                buttons_arr={tab_list}
+                name={'contract_type'}
+                is_animated={true}
+                onChange={e => onTabChange(e)}
+                value={selectedValue.value}
+            />
+        </div>
+    );
+};
+
+TradeTypeTab.propTypes = {
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+};
+
+export default connect(({ modules }) => ({
+    onChange: modules.trade.onChange,
+}))(TradeTypeTab);

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

@@ -6,6 +6,7 @@ import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx';
 import BarrierSelector from 'Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector.jsx';
 import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
 import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit.jsx';
+import TradeTypeTab from 'Modules/Trading/Components/Form/TradeParams/Turbos/trade-type-tab.jsx';
 import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx';
 import StopLoss from 'Modules/Trading/Components/Form/TradeParams/Multiplier/stop-loss.jsx';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
@@ -20,6 +21,7 @@ const TradeParams = ({ form_components, is_minimized }) => {
     return (
         <React.Fragment>
             {isVisible('duration') && <Duration key={'duration'} is_minimized={is_minimized} />}
+            {isVisible('trade_type_tab') && <TradeTypeTab key={'trade_type_tab'} is_minimized={is_minimized} />}
             {isVisible('barrier') && <Barrier key={'barrier'} is_minimized={is_minimized} />}
             {isVisible('barrier_selector') && <BarrierSelector key={'barrier_selector'} />}
             {isVisible('last_digit') && <LastDigit key={'last_digit'} is_minimized={is_minimized} />}

packages/trader/src/sass/app/modules/trading.scss

@@ -528,6 +528,14 @@
             align-self: flex-end;
         }
     }
+    &__trade-type-tab {
+        border-radius: 4px;
+        padding: 0.8rem;
+        margin-bottom: 0.4rem;
+        background-color: var(--general-section-1);
+        border-color: var(--general-section-1);
+        color: var(--text-general);
+    }
     &__deal-cancellation-popover {
         width: 28rem;
     }