deriv-com · sandeep-deriv · Aug 9, 2023 · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023
@@ -77,7 +77,6 @@
     .trade-container {
         &__fieldset {
             flex: 1;
-            margin-left: 0.4rem;
 
             .dc-button-menu__wrapper {
                 height: 4rem;

@@ -0,0 +1,83 @@
+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',
+    entry_spot_display_value: '1046.80',
+    sell_price: 1046.8,
+};
+
+const mockCardLabels = () => ({
+    BARRIER: 'Barrier',
+    CONTRACT_VALUE: 'Contract value',
+    ENTRY_SPOT: 'Entry spot',
+    TAKE_PROFIT: 'Take profit',
+    TOTAL_PROFIT_LOSS: 'Total profit/loss',
+    PURCHASE_PRICE: 'Buy price',
+});
+
+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;
+        });
+    });
+
+    it('renders header and values correctly', () => {
+        render(<TurbosCardBody {...mock_props} />);
+        const buy_price_header = screen.getByText(mockCardLabels().PURCHASE_PRICE);
+        expect(buy_price_header).toBeInTheDocument();
+        const buy_price_amount = screen.getByText('1,044.00');
+        expect(buy_price_amount).toBeInTheDocument();
+
+        const entry_spot_header = screen.getByText(mockCardLabels().ENTRY_SPOT);
+        expect(entry_spot_header).toBeInTheDocument();
+        const entry_spot_amount = screen.getByText('1,046.80');
+        expect(entry_spot_amount).toBeInTheDocument();
+
+        const barrier_header = screen.getByText(mockCardLabels().BARRIER);
+        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();
+    });
+});
@@ -11,16 +11,16 @@ import { ResultStatusIcon } from '../result-overlay/result-overlay';
 import ProgressSliderMobile from '../../progress-slider-mobile';
 import AccumulatorCardBody from './accumulator-card-body';
 import MultiplierCardBody from './multiplier-card-body';
+import TurbosCardBody from './turbos-card-body';
 import VanillaOptionsCardBody from './vanilla-options-card-body';
 import { TContractInfo, TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
-import { ContractUpdate } from '@deriv/api-types';
 import { TToastConfig } from '../../types/contract.types';
 import { TGetCardLables } from '../../types/common.types';
 
 export type TGeneralContractCardBodyProps = {
     addToast: (toast_config: TToastConfig) => void;
     contract_info: TContractInfo;
-    contract_update: ContractUpdate;
+    contract_update: TContractInfo['contract_update'];
     connectWithContractUpdate?: (contract_update_form: React.ElementType) => React.ElementType;
     currency: string;
     current_focus?: string;
@@ -34,16 +34,17 @@ export type TGeneralContractCardBodyProps = {
     onMouseLeave: () => void;
     removeToast: (toast_id: string) => void;
     setCurrentFocus: (name: string) => void;
-    status: string;
+    status?: string;
     toggleCancellationWarning: () => void;
     progress_slider?: React.ReactNode;
-    is_accumulator?: boolean;
     is_positions?: boolean;
 };
 
 export type TContractCardBodyProps = {
+    is_accumulator?: boolean;
     is_multiplier: boolean;
     server_time: moment.Moment;
+    is_turbos?: boolean;
     is_vanilla?: boolean;
 } & TGeneralContractCardBodyProps;
 
@@ -63,6 +64,7 @@ const ContractCardBody = ({
     is_multiplier,
     is_positions,
     is_sold,
+    is_turbos,
     is_vanilla,
     onMouseLeave,
     removeToast,
@@ -90,51 +92,61 @@ const ContractCardBody = ({
         />
     );
 
+    const toggle_card_dialog_props = {
+        addToast,
+        connectWithContractUpdate,
+        current_focus,
+        error_message_alignment,
+        getContractById,
+        onMouseLeave,
+        removeToast,
+        setCurrentFocus,
+    };
+
     let card_body;
 
     if (is_multiplier) {
         card_body = (
             <MultiplierCardBody
-                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}
                 has_progress_slider={has_progress_slider}
                 progress_slider={progress_slider_mobile_el}
                 is_mobile={is_mobile}
                 is_sold={is_sold}
-                onMouseLeave={onMouseLeave}
                 status={status}
-                removeToast={removeToast}
-                setCurrentFocus={setCurrentFocus}
                 should_show_cancellation_warning={should_show_cancellation_warning}
                 toggleCancellationWarning={toggleCancellationWarning}
+                {...toggle_card_dialog_props}
             />
         );
     } else if (is_accumulator) {
         card_body = (
             <AccumulatorCardBody
-                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}
                 indicative={indicative}
                 is_sold={is_sold}
-                onMouseLeave={onMouseLeave}
                 status={status}
-                removeToast={removeToast}
-                setCurrentFocus={setCurrentFocus}
                 is_positions={is_positions}
+                {...toggle_card_dialog_props}
+            />
+        );
+    } else if (is_turbos) {
+        card_body = (
+            <TurbosCardBody
+                contract_info={contract_info}
+                contract_update={contract_update}
+                currency={currency}
+                getCardLabels={getCardLabels}
+                is_sold={is_sold}
+                status={status}
+                progress_slider_mobile_el={progress_slider_mobile_el}
+                {...toggle_card_dialog_props}
             />
         );
     } else if (is_vanilla) {
@@ -209,7 +221,7 @@ const ContractCardBody = ({
             <MobileWrapper>
                 <div
                     className={classNames('dc-contract-card__separatorclass', {
-                        'dc-contract-card__body-wrapper': !is_multiplier,
+                        'dc-contract-card__body-wrapper': !is_multiplier && !is_turbos,
                     })}
                 >
                     {card_body}

@@ -15,7 +15,7 @@ export type TCardFooterPropTypes = {
     is_sell_requested: boolean;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
-    onFooterEntered: () => void;
+    onFooterEntered?: () => void;
     server_time: moment.Moment;
     should_show_transition: boolean;
 };

@@ -1,14 +1,17 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
+import { localize } from '@deriv/translations';
 import {
     isHighLow,
     getCurrentTick,
     getGrowthRatePercentage,
-    isBot,
+    getContractSubtype,
     isAccumulatorContract,
+    isBot,
     isOnlyUpsDownsContract,
     isMobile,
+    isTurbosContract,
 } from '@deriv/shared';
 import ContractTypeCell from './contract-type-cell';
 import Button from '../../button';
@@ -66,28 +69,42 @@ const ContractCardHeader = ({
     const is_accumulator = isAccumulatorContract(contract_type);
     const is_only_ups_downs = isOnlyUpsDownsContract(contract_type);
     const is_mobile = isMobile();
-    const contract_type_list_info = [
-        {
-            is_param_displayed: multiplier,
-            displayed_param: `x${multiplier}`,
-        },
-        {
-            is_param_displayed: is_accumulator,
-            displayed_param: `${getGrowthRatePercentage(growth_rate || 0)}%`,
-        },
-    ];
+    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 || 0)}%`,
+            },
+            {
+                is_param_displayed: is_turbos,
+                displayed_param:
+                    getContractSubtype(contract_type || '') === 'Long' ? localize('Long') : localize('Short'),
+            },
+        ],
+        [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_mobile && 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
@@ -176,7 +193,7 @@ const ContractCardHeader = ({
                     />
                 )}
             </DesktopWrapper>
-        </>
+        </React.Fragment>
     );
 };
 

@@ -9,15 +9,15 @@ export type TContractCardSellProps = {
     contract_info: TContractInfo;
     getCardLabels: TGetCardLables;
     is_sell_requested: boolean;
-    onClickSell: (contract_id?: number) => void;
+    onClickSell?: (contract_id?: number) => void;
 };
 
 const ContractCardSell = ({ contract_info, getCardLabels, is_sell_requested, onClickSell }: TContractCardSellProps) => {
     const is_valid_to_sell = isValidToSell(contract_info);
     const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
 
     const onClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
-        onClickSell(contract_info.contract_id);
+        onClickSell?.(contract_info.contract_id);
         ev.stopPropagation();
         ev.preventDefault();
     };