binary-com · sandeep-deriv · Aug 9, 2023 · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
@@ -66,7 +66,7 @@
     "dependencies": {
         "@deriv/bot-skeleton": "^1.0.0",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-charts": "1.1.6",
+        "@deriv/deriv-charts": "1.1.7",
         "@deriv/shared": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",

@@ -77,7 +77,6 @@
     .trade-container {
         &__fieldset {
             flex: 1;
-            margin-left: 0.4rem;
 
             .dc-button-menu__wrapper {
                 height: 4rem;

@@ -0,0 +1,117 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import TurbosCardBody from '../turbos-card-body';
+
+const contract_info: TContractInfo = {
+    contract_id: 1,
+    bid_price: 1044.02,
+    buy_price: 1044.0,
+    profit: 50,
+    barrier: '10904.80',
+    current_spot_display_value: '1046.80',
+    sell_spot: 1046.8,
+    entry_spot: 1054,
+    is_valid_to_sell: 1,
+};
+
+const mockCardLabels = () => ({
+    BARRIER_LEVEL: 'Barrier level',
+    CURRENT_PRICE: 'Current price',
+    STAKE: 'Stake',
+    BUY_PRICE: 'Buy price',
+    TAKE_PROFIT: 'Take profit',
+    TOTAL_PROFIT_LOSS: 'Total profit/loss',
+    PAYOUT: 'Payout',
+    PROFIT_LOSS: 'Profit/Loss',
+    POTENTIAL_PROFIT_LOSS: 'Potential profit/loss',
+});
+
+describe('TurbosCardBody', () => {
+    const mock_props = {
+        addToast: jest.fn(),
+        connectWithContractUpdate: jest.fn(),
+        contract_info,
+        contract_update: {
+            take_profit: {
+                display_name: 'Take profit',
+                order_amount: 0,
+                order_date: 1678948046,
+            },
+        },
+        currency: 'USD',
+        current_focus: null,
+        error_message_alignment: 'left',
+        getCardLabels: mockCardLabels,
+        getContractById: jest.fn(),
+        is_sold: false,
+        onMouseLeave: jest.fn(),
+        removeToast: jest.fn(),
+        setCurrentFocus: jest.fn(),
+        status: 'profit',
+        progress_slider_mobile_el: false,
+    };
+    beforeAll(() => {
+        (ReactDOM.createPortal as jest.Mock) = jest.fn(component => {
+            return component;
+        });
+    });
+
+    // is_sold = false
+    it('renders stake amount correctly', () => {
+        render(<TurbosCardBody {...mock_props} />);
+        const stake_header = screen.getByText(mockCardLabels().STAKE);
+        expect(stake_header).toBeInTheDocument();
+        const stake_amount = screen.getByText('1,044.00');
+        expect(stake_amount).toBeInTheDocument();
+
+        const current_price_header = screen.getByText(mockCardLabels().CURRENT_PRICE);
+        expect(current_price_header).toBeInTheDocument();
+        const current_price_amount = screen.getByText('1,046.80');
+        expect(current_price_amount).toBeInTheDocument();
+
+        const barrier_header = screen.getByText(mockCardLabels().BARRIER_LEVEL);
+        expect(barrier_header).toBeInTheDocument();
+        const barrier_level = screen.getByText('10,904.80');
+        expect(barrier_level).toBeInTheDocument();
+
+        const take_profit_header = screen.getByText(mockCardLabels().TAKE_PROFIT);
+        expect(take_profit_header).toBeInTheDocument();
+        const take_profit_amount = screen.getByText('-');
+        expect(take_profit_amount).toBeInTheDocument();
+
+        const total_profit_loss_header = screen.getByText(mockCardLabels().TOTAL_PROFIT_LOSS);
+        expect(total_profit_loss_header).toBeInTheDocument();
+        const total_profit_loss_amount = screen.getByText('50.00');
+        expect(total_profit_loss_amount).toBeInTheDocument();
+    });
+
+    // is_sold = true
+    it('renders headers when contract is sold', () => {
+        render(<TurbosCardBody {...mock_props} is_sold />);
+
+        const profit_loss_header = screen.getByText(mockCardLabels().PROFIT_LOSS);
+        expect(profit_loss_header).toBeInTheDocument();
+        const profit_loss_amount = screen.getByText('1,044.00');
+        expect(profit_loss_amount).toBeInTheDocument();
+
+        const payout_header = screen.getByText(mockCardLabels().PAYOUT);
+        expect(payout_header).toBeInTheDocument();
+        const payout_amount = screen.getByText('1,046.80');
+        expect(payout_amount).toBeInTheDocument();
+
+        const buy_price_header = screen.getByText(mockCardLabels().BUY_PRICE);
+        expect(buy_price_header).toBeInTheDocument();
+        const buy_price_amount = screen.getByText('1,054.00');
+        expect(buy_price_amount).toBeInTheDocument();
+
+        const take_profit_header = screen.queryByText(mockCardLabels().TAKE_PROFIT);
+        expect(take_profit_header).not.toBeInTheDocument();
+        const take_profit_amount = screen.queryByText('-');
+        expect(take_profit_amount).not.toBeInTheDocument();
+
+        expect(screen.getByText('Barrier level')).toBeInTheDocument();
+        expect(screen.queryByText('Current price')).not.toBeInTheDocument();
+    });
+});
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx
@@ -12,6 +12,7 @@ import { ResultStatusIcon } from '../result-overlay/result-overlay.jsx';
 import ProgressSliderMobile from '../../progress-slider-mobile';
 import AccumulatorCardBody from './accumulator-card-body.jsx';
 import MultiplierCardBody from './multiplier-card-body.jsx';
+import TurbosCardBody from './turbos-card-body';
 import VanillaOptionsCardBody from './vanilla-options-card-body.jsx';
 
 const ContractCardBody = ({
@@ -30,6 +31,7 @@ const ContractCardBody = ({
     is_multiplier,
     is_positions,
     is_sold,
+    is_turbos,
     is_vanilla,
     onMouseLeave,
     removeToast,
@@ -104,6 +106,26 @@ const ContractCardBody = ({
                 is_positions={is_positions}
             />
         );
+    } else if (is_turbos) {
+        card_body = (
+            <TurbosCardBody
+                addToast={addToast}
+                connectWithContractUpdate={connectWithContractUpdate}
+                contract_info={contract_info}
+                contract_update={contract_update}
+                currency={currency}
+                current_focus={current_focus}
+                error_message_alignment={error_message_alignment}
+                getCardLabels={getCardLabels}
+                getContractById={getContractById}
+                is_sold={is_sold}
+                onMouseLeave={onMouseLeave}
+                status={status}
+                removeToast={removeToast}
+                setCurrentFocus={setCurrentFocus}
+                progress_slider_mobile_el={progress_slider_mobile_el}
+            />
+        );
     } else if (is_vanilla) {
         card_body = (
             <VanillaOptionsCardBody
@@ -179,7 +201,7 @@ const ContractCardBody = ({
                     className={
                         ('dc-contract-card__separatorclass',
                         classNames({
-                            'dc-contract-card__body-wrapper': !is_multiplier,
+                            'dc-contract-card__body-wrapper': !is_multiplier && !is_turbos,
                         }))
                     }
                 >
@@ -203,6 +225,7 @@ ContractCardBody.propTypes = {
     is_accumulator: PropTypes.bool,
     is_mobile: PropTypes.bool,
     is_multiplier: PropTypes.bool,
+    is_turbos: PropTypes.bool,
     is_positions: PropTypes.bool,
     is_sold: PropTypes.bool,
     is_vanilla: PropTypes.bool,

diff --git a/...ages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx b/...ages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx
@@ -2,7 +2,15 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { isHighLow, getCurrentTick, getGrowthRatePercentage, isBot, isAccumulatorContract } from '@deriv/shared';
+import {
+    isHighLow,
+    getCurrentTick,
+    getGrowthRatePercentage,
+    getContractSubtype,
+    isBot,
+    isAccumulatorContract,
+    isTurbosContract,
+} from '@deriv/shared';
 import ContractTypeCell from './contract-type-cell.jsx';
 import Button from '../../button';
 import Icon from '../../icon';
@@ -41,28 +49,41 @@ const ContractCardHeader = ({
     const { is_pathname_bot } = isBot();
     const is_sold = !!contract_info.is_sold || is_contract_sold;
     const is_accumulator = isAccumulatorContract(contract_type);
-    const contract_type_list_info = [
-        {
-            is_param_displayed: multiplier,
-            displayed_param: `x${multiplier}`,
-        },
-        {
-            is_param_displayed: is_accumulator,
-            displayed_param: `${getGrowthRatePercentage(growth_rate)}%`,
-        },
-    ];
+    const is_turbos = isTurbosContract(contract_type);
+
+    const contract_type_list_info = React.useMemo(
+        () => [
+            {
+                is_param_displayed: multiplier,
+                displayed_param: `x${multiplier}`,
+            },
+            {
+                is_param_displayed: is_accumulator,
+                displayed_param: `${getGrowthRatePercentage(growth_rate)}%`,
+            },
+            {
+                is_param_displayed: is_turbos,
+                displayed_param: getContractSubtype(contract_type),
+            },
+        ],
+        [multiplier, growth_rate, is_accumulator, is_turbos, contract_type]
+    );
+
     const displayed_trade_param =
         contract_type_list_info.find(contract_type_item_info => contract_type_item_info.is_param_displayed)
             ?.displayed_param || '';
 
     return (
-        <>
+        <React.Fragment>
             <div
                 className={classNames('dc-contract-card__grid', 'dc-contract-card__grid-underlying-trade', {
-                    'dc-contract-card__grid-underlying-trade--mobile': is_mobile && !multiplier && !is_accumulator,
+                    'dc-contract-card__grid-underlying-trade--mobile':
+                        is_mobile && !multiplier && !is_accumulator && !is_turbos,
                     'dc-contract-card__grid-underlying-trade--trader': !is_pathname_bot,
                     'dc-contract-card__grid-underlying-trade--trader--accumulator': is_accumulator,
-                    'dc-contract-card__grid-underlying-trade--trader--accumulator-sold': is_accumulator && is_sold,
+                    [`dc-contract-card__grid-underlying-trade--trader--${
+                        is_accumulator ? 'accumulator' : 'turbos'
+                    }-sold`]: (is_accumulator || is_turbos) && is_sold,
                 })}
             >
                 <div id='dc-contract_card_underlying_label' className='dc-contract-card__underlying-name'>
@@ -136,7 +157,7 @@ const ContractCardHeader = ({
                     />
                 )}
             </DesktopWrapper>
-        </>
+        </React.Fragment>
     );
 };
 

diff --git a/...ages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx b/...ages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx
@@ -7,6 +7,7 @@ import {
     getLimitOrderAmount,
     isCryptocurrency,
     isDeepEqual,
+    isMultiplierContract,
     pick,
     getTotalProfit,
 } from '@deriv/shared';
@@ -23,6 +24,7 @@ const ContractUpdateForm = props => {
         current_focus,
         error_message_alignment,
         getCardLabels,
+        is_turbos,
         is_accumulator,
         onMouseLeave,
         removeToast,
@@ -64,9 +66,12 @@ const ContractUpdateForm = props => {
 
     const is_take_profit_valid = has_contract_update_take_profit ? contract_update_take_profit > 0 : isValid(stop_loss);
     const is_stop_loss_valid = has_contract_update_stop_loss ? contract_update_stop_loss > 0 : isValid(take_profit);
-    const is_valid_accu_contract_update = is_accumulator && !!is_take_profit_valid;
-    const is_valid_contract_update =
-        is_valid_accu_contract_update || (is_valid_to_cancel ? false : !!(is_take_profit_valid || is_stop_loss_valid));
+    const is_multiplier = isMultiplierContract(contract_info.contract_type);
+    const is_valid_contract_update = is_multiplier
+        ? is_valid_to_cancel
+            ? false
+            : !!(is_take_profit_valid || is_stop_loss_valid)
+        : !!is_take_profit_valid;
 
     const getStateToCompare = _state => {
         const props_to_pick = [
@@ -119,7 +124,7 @@ const ContractUpdateForm = props => {
             onChange={onChange}
             error_message_alignment={error_message_alignment || 'right'}
             value={contract_profit_or_loss.contract_update_take_profit}
-            is_disabled={!is_accumulator && !!is_valid_to_cancel}
+            is_disabled={is_multiplier && !!is_valid_to_cancel}
             setCurrentFocus={setCurrentFocus}
         />
     );
@@ -178,11 +183,11 @@ const ContractUpdateForm = props => {
             </MobileWrapper>
             <div
                 className={classNames('dc-contract-card-dialog__form', {
-                    'dc-contract-card-dialog__form-accumulator': is_accumulator,
+                    'dc-contract-card-dialog__form--no-stop-loss': is_accumulator || is_turbos,
                 })}
             >
                 <div className='dc-contract-card-dialog__input'>{take_profit_input}</div>
-                {!is_accumulator && <div className='dc-contract-card-dialog__input'>{stop_loss_input}</div>}
+                {is_multiplier && <div className='dc-contract-card-dialog__input'>{stop_loss_input}</div>}
                 <div className='dc-contract-card-dialog__button'>
                     <Button
                         text={getCardLabels().APPLY}
@@ -203,6 +208,7 @@ ContractUpdateForm.propTypes = {
     error_message_alignment: PropTypes.string,
     getCardLabels: PropTypes.func,
     is_accumulator: PropTypes.bool,
+    is_turbos: PropTypes.bool,
     onMouseLeave: PropTypes.func,
     removeToast: PropTypes.func,
     setCurrentFocus: PropTypes.func,

@@ -73,7 +73,7 @@
             grid-gap: 1.6rem;
             margin: 1.6rem;
 
-            &-accumulator {
+            &--no-stop-loss {
                 grid-template-rows: auto 1fr;
             }
         }