[DTRA] / Kate / DTRA-919 / Update Turbos Contract (#14105)

* refactor: rename subtypes of turbos contract and refactor tests * refactor: apply general style for purchase button on mobile * feat: add contract basis to notification fro vanillas turbos and multipliers * refactor: css for purchase button and tests * refactor: apply suggestions * refactor: add field in contract config and expand functionality of the existing function * refactor: move check to the function
deriv-com · Apr 1, 2024 · 78f8434 · 78f8434
1 parent 6029392
commit 78f8434
Show file tree

Hide file tree

Showing 20 changed files with 109 additions and 75 deletions.
diff --git a/packages/components/stories/contract-card/statics/contract.js b/packages/components/stories/contract-card/statics/contract.js
@@ -183,12 +183,12 @@ export const getSupportedContracts = is_high_low => ({
         position: 'bottom',
     },
     TURBOSLONG: {
-        button_name: 'Long',
+        button_name: 'Up',
         name: 'Turbos',
         position: 'top',
     },
     TURBOSSHORT: {
-        button_name: 'Short',
+        button_name: 'Down',
         name: 'Turbos',
         position: 'bottom',
     },

diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js
@@ -3,6 +3,7 @@ import { action, computed, makeObservable, observable, reaction } from 'mobx';
 
 import { StaticUrl } from '@deriv/components';
 import {
+    checkServerMaintenance,
     daysSince,
     extractInfoFromShortcode,
     formatDate,
@@ -20,7 +21,6 @@ import {
     isHighLow,
     isMobile,
     isMultiplierContract,
-    checkServerMaintenance,
     isTurbosContract,
     LocalStore,
     routes,
@@ -201,11 +201,16 @@ export default class NotificationStore extends BaseStore {
         } = contract_info;
         const id = `${contract_id}_${status}`;
         if (this.trade_notifications.some(({ id: notification_id }) => notification_id === id)) return;
+        const contract_main_title = getTradeTypeName(contract_type, isHighLow({ shortcode }), false, true);
         this.trade_notifications.push({
             id,
             buy_price,
             contract_id,
-            contract_type: getTradeTypeName(contract_type, isHighLow({ shortcode }), isTurbosContract(contract_type)),
+            contract_type: `${contract_main_title} ${getTradeTypeName(
+                contract_type,
+                isHighLow({ shortcode }),
+                isTurbosContract(contract_type)
+            )}`.trim(),
             currency,
             profit: isMultiplierContract(contract_type) && !isNaN(profit) ? getTotalProfit(contract_info) : profit,
             status,

diff --git a/packages/shared/src/utils/constants/contract.ts b/packages/shared/src/utils/constants/contract.ts
@@ -477,28 +477,34 @@ export const getSupportedContracts = (is_high_low?: boolean) =>
         [CONTRACT_TYPES.MULTIPLIER.UP]: {
             name: localize('Up'),
             position: 'top',
+            main_title: localize('Multipliers'),
         },
         [CONTRACT_TYPES.MULTIPLIER.DOWN]: {
             name: localize('Down'),
             position: 'bottom',
+            main_title: localize('Multipliers'),
         },
         [CONTRACT_TYPES.TURBOS.LONG]: {
             name: localize('Turbos'),
-            button_name: localize('Long'),
+            button_name: localize('Up'),
             position: 'top',
+            main_title: localize('Turbos'),
         },
         [CONTRACT_TYPES.TURBOS.SHORT]: {
             name: localize('Turbos'),
-            button_name: localize('Short'),
+            button_name: localize('Down'),
             position: 'bottom',
+            main_title: localize('Turbos'),
         },
         [CONTRACT_TYPES.VANILLA.CALL]: {
             name: localize('Call'),
             position: 'top',
+            main_title: localize('Vanillas'),
         },
         [CONTRACT_TYPES.VANILLA.PUT]: {
             name: localize('Put'),
             position: 'bottom',
+            main_title: localize('Vanillas'),
         },
         [CONTRACT_TYPES.RUN_HIGH_LOW.HIGH]: {
             name: localize('Only Ups'),

diff --git a/packages/shared/src/utils/contract/__tests__/contract.spec.ts b/packages/shared/src/utils/contract/__tests__/contract.spec.ts
@@ -631,17 +631,17 @@ describe('getLastContractMarkerIndex', () => {
 describe('getLocalizedTurbosSubtype', () => {
     it('should return an empty string for non-turbos contracts', () => {
         render(ContractUtils.getLocalizedTurbosSubtype(CONTRACT_TYPES.CALL) as JSX.Element);
-        expect(screen.queryByText('Long')).not.toBeInTheDocument();
-        expect(screen.queryByText('Short')).not.toBeInTheDocument();
+        expect(screen.queryByText('Up')).not.toBeInTheDocument();
+        expect(screen.queryByText('Down')).not.toBeInTheDocument();
         expect(ContractUtils.getLocalizedTurbosSubtype(CONTRACT_TYPES.CALL)).toBe('');
     });
-    it('should render "Long" for CONTRACT_TYPES.TURBOS.LONG contract', () => {
+    it('should render "Up" for CONTRACT_TYPES.TURBOS.LONG contract', () => {
         render(ContractUtils.getLocalizedTurbosSubtype(CONTRACT_TYPES.TURBOS.LONG) as JSX.Element);
-        expect(screen.getByText('Long')).toBeInTheDocument();
+        expect(screen.getByText('Up')).toBeInTheDocument();
     });
-    it('should render "Short" for CONTRACT_TYPES.TURBOS.SHORT contract', () => {
+    it('should render "Down" for CONTRACT_TYPES.TURBOS.SHORT contract', () => {
         render(ContractUtils.getLocalizedTurbosSubtype(CONTRACT_TYPES.TURBOS.SHORT) as JSX.Element);
-        expect(screen.getByText('Short')).toBeInTheDocument();
+        expect(screen.getByText('Down')).toBeInTheDocument();
     });
 });
 

diff --git a/packages/shared/src/utils/contract/contract.tsx b/packages/shared/src/utils/contract/contract.tsx
@@ -316,9 +316,9 @@ export const getContractSubtype = (type = '') =>
 export const getLocalizedTurbosSubtype = (contract_type = '') => {
     if (!isTurbosContract(contract_type)) return '';
     return getContractSubtype(contract_type) === 'Long' ? (
-        <Localize i18n_default_text='Long' />
+        <Localize i18n_default_text='Up' />
     ) : (
-        <Localize i18n_default_text='Short' />
+        <Localize i18n_default_text='Down' />
     );
 };
 

diff --git a/packages/shared/src/utils/helpers/__tests__/market-underlying.spec.ts b/packages/shared/src/utils/helpers/__tests__/market-underlying.spec.ts
@@ -55,9 +55,9 @@ describe('market-underlying', () => {
             expect(getTradeTypeName(position.contract_type)).toBe('Rise');
             expect(getTradeTypeName(CONTRACT_TYPES.PUT)).toBe('Fall');
         });
-        it('should return the correct Long or Short contract type display name when show_button_name is true', () => {
-            expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.LONG, false, true)).toBe('Long');
-            expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.SHORT, false, true)).toBe('Short');
+        it('should return the correct Up or Down contract type display name when show_button_name is true', () => {
+            expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.LONG, false, true)).toBe('Up');
+            expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.SHORT, false, true)).toBe('Down');
         });
         it('should return Turbos for both Turbos contract types when show_button_name is false', () => {
             expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.LONG)).toBe('Turbos');
@@ -66,5 +66,18 @@ describe('market-underlying', () => {
         it('should return null if an incorrect contract_type is provided', () => {
             expect(getTradeTypeName(TRADE_TYPES.RISE_FALL)).toBe(null);
         });
+        it('should return main title for contracts which have such field if show_main_title is true', () => {
+            expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.LONG, false, false, true)).toBe('Turbos');
+            expect(getTradeTypeName(CONTRACT_TYPES.VANILLA.CALL, false, false, true)).toBe('Vanillas');
+            expect(getTradeTypeName(CONTRACT_TYPES.MULTIPLIER.DOWN, false, false, true)).toBe('Multipliers');
+        });
+        it('should not return main title for contracts which have not such field if show_main_title is true', () => {
+            expect(getTradeTypeName(CONTRACT_TYPES.FALL, false, false, true)).toBeFalsy;
+        });
+        it('should not return main title for contracts which have such field but show_main_title is false', () => {
+            expect(getTradeTypeName(CONTRACT_TYPES.TURBOS.LONG, false, false, false)).toBeFalsy;
+            expect(getTradeTypeName(CONTRACT_TYPES.VANILLA.CALL, false, false, false)).toBeFalsy;
+            expect(getTradeTypeName(CONTRACT_TYPES.MULTIPLIER.DOWN, false, false, false)).toBeFalsy;
+        });
     });
 });
diff --git a/packages/shared/src/utils/helpers/market-underlying.ts b/packages/shared/src/utils/helpers/market-underlying.ts
@@ -5,6 +5,7 @@ type TTradeConfig = {
     button_name?: JSX.Element;
     name: JSX.Element;
     position: string;
+    main_title?: JSX.Element;
 };
 
 type TMarketInfo = {
@@ -53,10 +54,16 @@ export const getMarketInformation = (shortcode: string): TMarketInfo => {
 export const getMarketName = (underlying: string) =>
     underlying ? getMarketNamesMap()[underlying.toUpperCase() as keyof typeof getMarketNamesMap] : null;
 
-export const getTradeTypeName = (category: string, is_high_low = false, show_button_name = false) => {
+export const getTradeTypeName = (
+    category: string,
+    is_high_low = false,
+    show_button_name = false,
+    show_main_title = false
+) => {
     const trade_type =
         category &&
         (getContractConfig(is_high_low)[category.toUpperCase() as keyof typeof getContractConfig] as TTradeConfig);
     if (!trade_type) return null;
+    if (show_main_title) return trade_type?.main_title ?? '';
     return (show_button_name && trade_type.button_name) || trade_type.name || null;
 };
diff --git a/...rader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx b/...rader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx
@@ -184,7 +184,7 @@ describe('<PositionsModalCard />', () => {
 
         expect(screen.queryByText(positions_card_loader)).not.toBeInTheDocument();
         expect(screen.getByText(symbol_display_name)).toBeInTheDocument();
-        expect(screen.getByText('Long')).toBeInTheDocument();
+        expect(screen.getByText('Up')).toBeInTheDocument();
         expect(screen.getByText(usd)).toBeInTheDocument();
         expect(screen.getByText(STAKE)).toBeInTheDocument();
         expect(screen.getByText(/10.00/i)).toBeInTheDocument();

diff --git a/packages/trader/src/Assets/SvgComponents/trade_explanations/img-turbos.svg b/packages/trader/src/Assets/SvgComponents/trade_explanations/img-turbos.svg
diff --git a/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx
@@ -31,8 +31,16 @@ const TurbosTradeDescription = ({
         {
             text: (
                 <Localize
-                    i18n_default_text='If you select <0>"Long"</0>, you’ll earn a payout if the spot price never drops below the barrier.<1 />If you select <0>"Short"</0>, you’ll earn a payout if the spot price never rises above the barrier.'
-                    components={[<strong key={0} />, <br key={1} />]}
+                    i18n_default_text='If you select <0>"Up"</0>, you’ll earn a payout if the spot price never drops below the barrier.'
+                    components={[<strong key={0} />]}
+                />
+            ),
+        },
+        {
+            text: (
+                <Localize
+                    i18n_default_text='If you select <0>"Down"</0>, you’ll earn a payout if the spot price never rises above the barrier.'
+                    components={[<strong key={0} />]}
                 />
             ),
         },

diff --git a/packages/trader/src/Assets/Trading/Categories/__tests__/trade-categories-gif.spec.tsx b/packages/trader/src/Assets/Trading/Categories/__tests__/trade-categories-gif.spec.tsx
@@ -407,11 +407,11 @@ describe('<TradeCategoriesGIF />', () => {
                 });
         });
     });
-    it('expect VideoTurbos to be rendered when trade category is TRADE_TYPES.TURBOS.LONG', async () => {
+    it('expect ImageTurbos to be rendered when trade category is TRADE_TYPES.TURBOS.LONG', async () => {
         jest.isolateModules(() => {
-            jest.doMock('../contract-type-description-video', () => ({
+            jest.doMock('Assets/SvgComponents/trade_explanations/img-turbos.svg', () => ({
                 __esModule: true,
-                default: jest.fn(() => 'VideoTurbos'),
+                default: jest.fn(() => 'ImageTurbos'),
             }));
 
             import('../trade-categories-gif')
@@ -422,7 +422,7 @@ describe('<TradeCategoriesGIF />', () => {
                             selected_contract_type={TRADE_TYPES.TURBOS.LONG}
                         />
                     );
-                    expect(screen.getByText(/videoturbos/i)).toBeInTheDocument();
+                    expect(screen.getByText(/imageturbos/i)).toBeInTheDocument();
                 })
                 .catch(error => {
                     throw new Error(error);

diff --git a/packages/trader/src/Assets/Trading/Categories/trade-categories-gif.tsx b/packages/trader/src/Assets/Trading/Categories/trade-categories-gif.tsx
@@ -12,6 +12,7 @@ import ImageReset from 'Assets/SvgComponents/trade_explanations/img-reset.svg';
 import ImageRunHighLow from 'Assets/SvgComponents/trade_explanations/img-run-high-low.svg';
 import ImageSpread from 'Assets/SvgComponents/trade_explanations/img-spread.svg';
 import ImageTickHighLow from 'Assets/SvgComponents/trade_explanations/img-tick-high-low.svg';
+import ImageTurbos from 'Assets/SvgComponents/trade_explanations/img-turbos.svg';
 import ContractTypeDescriptionVideo from './contract-type-description-video';
 import { TRADE_TYPES } from '@deriv/shared';
 
@@ -61,7 +62,7 @@ const TradeCategoriesGIF = ({
             return <ContractTypeDescriptionVideo selected_contract_type={selected_contract_type} />;
         case TRADE_TYPES.TURBOS.LONG:
         case TRADE_TYPES.TURBOS.SHORT:
-            return <ContractTypeDescriptionVideo selected_contract_type='turbos' />;
+            return <ImageTurbos />;
         case TRADE_TYPES.VANILLA.CALL:
         case TRADE_TYPES.VANILLA.PUT:
             return <ContractTypeDescriptionVideo selected_contract_type='vanilla' />;

diff --git a/packages/trader/src/Modules/Trading/Components/Elements/__tests__/purchase-button.spec.tsx b/packages/trader/src/Modules/Trading/Components/Elements/__tests__/purchase-button.spec.tsx
@@ -72,13 +72,22 @@ describe('<PurchaseButton />', () => {
         expect(screen.getByText(/Call/i)).toBeInTheDocument();
     });
 
-    it('should apply a specific classNames if is_loading === true', () => {
+    it('should apply specific classNames if is_loading === true', () => {
         renderComponent(<PurchaseButton {...default_mocked_props} is_vanilla is_loading index={0} />);
 
-        const purchase_button = screen.getByRole('button');
+        expect(screen.getByRole('button')).toHaveClass('btn-purchase--animated--slide');
+    });
+
+    it('should apply specific classNames if it is vanillas, turbos or accumulators contract type', () => {
+        renderComponent(<PurchaseButton {...default_mocked_props} is_vanilla />);
+
+        expect(screen.getByRole('button')).toHaveClass('btn-purchase--has-bottom-gradient-2');
+    });
+
+    it('should not apply any specific classNames if it is not vanillas, turbos or accumulators contract type', () => {
+        renderComponent(<PurchaseButton {...default_mocked_props} />);
 
-        expect(purchase_button).toHaveClass('btn-purchase--animated--slide');
-        expect(purchase_button).toHaveClass('btn-purchase--1__vanilla-opts');
+        expect(screen.getByRole('button')).not.toHaveClass('btn-purchase--has-bottom-gradient-2');
     });
 
     it('should call function setPurchaseState and onClickPurchase if purchase button was clicked', () => {

diff --git a/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.tsx b/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.tsx
@@ -119,8 +119,8 @@ const PurchaseButton = ({
                 'btn-purchase--multiplier': is_multiplier,
                 'btn-purchase--multiplier-deal-cancel': has_deal_cancellation,
                 'btn-purchase--turbos': is_turbos,
-                'btn-purchase--1__vanilla-opts': index === 0 && is_vanilla,
-                'btn-purchase--2__vanilla-opts': index === 1 && is_vanilla,
+                'btn-purchase--has-bottom-gradient-1': index === 0 && (is_accumulator || is_vanilla || is_turbos),
+                'btn-purchase--has-bottom-gradient-2': index === 1 && (is_vanilla || is_turbos),
             })}
             onClick={() => {
                 if (is_multiplier && mf_account_status === MT5_ACCOUNT_STATUS.PENDING) {

diff --git a/.../src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx b/.../src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx
@@ -54,7 +54,7 @@ const Info = observer(({ handleSelect, item, selected_value, list, info_banner }
             i.value !== RISE_FALL_EQUAL && i.value !== TURBOS.SHORT && i.value !== VANILLA.PUT
     );
     const has_toggle_buttons = /accumulator|turbos|vanilla|multiplier/i.test(selected_contract_type);
-    const should_show_video = /accumulator|turbos|vanilla|high_low|rise_fall|touch/i.test(selected_contract_type);
+    const should_show_video = /accumulator|vanilla|high_low|rise_fall|touch/i.test(selected_contract_type);
     const is_description_tab_selected = selected_tab === TABS.DESCRIPTION || !has_toggle_buttons;
     const is_glossary_tab_selected = selected_tab === TABS.GLOSSARY && has_toggle_buttons;
     const width = is_mobile ? '328' : '528';

diff --git a/...trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx b/...trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx
@@ -27,11 +27,11 @@ describe('Trade Type Tabs', () => {
             </TraderProviders>
         );
     };
-    it('should render Long & Short tabs when contract_type = TRADE_TYPES.TURBOS.LONG', () => {
+    it('should render Up & Down tabs when contract_type = TRADE_TYPES.TURBOS.LONG', () => {
         render(mockTradeTypeTabs(mock_root_store));
-        const long_tab = screen.getByText('Long');
-        const short_tab = screen.getByText('Short');
-        [long_tab, short_tab].forEach(tab => {
+        const up_tab = screen.getByText('Up');
+        const down_tab = screen.getByText('Down');
+        [up_tab, down_tab].forEach(tab => {
             expect(tab).toBeInTheDocument();
         });
     });
@@ -53,9 +53,9 @@ describe('Trade Type Tabs', () => {
             mock_root_store.modules.trade.contract_type = 'invalid_type';
         }
         render(mockTradeTypeTabs(mock_root_store));
-        const long_tab = screen.queryByText('Long');
-        const short_tab = screen.queryByText('Short');
-        [long_tab, short_tab].forEach(tab => {
+        const up_tab = screen.queryByText('Up');
+        const down_tab = screen.queryByText('Down');
+        [up_tab, down_tab].forEach(tab => {
             expect(tab).not.toBeInTheDocument();
         });
     });
@@ -66,8 +66,8 @@ describe('Trade Type Tabs', () => {
         }
         render(mockTradeTypeTabs(mock_root_store));
 
-        const short_tab = screen.getByText('Short');
-        userEvent.click(short_tab);
+        const down_tab = screen.getByText('Down');
+        userEvent.click(down_tab);
 
         expect(mock_root_store.modules?.trade.contract_type).toBe(TRADE_TYPES.TURBOS.SHORT);
     });