From 78f8434fce0fa996340b5a051ef10fc71530d2a8 Mon Sep 17 00:00:00 2001 From: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Date: Mon, 1 Apr 2024 04:58:37 +0300 Subject: [PATCH] [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 --- .../stories/contract-card/statics/contract.js | 4 +- .../core/src/Stores/notification-store.js | 9 ++++- .../shared/src/utils/constants/contract.ts | 10 ++++- .../utils/contract/__tests__/contract.spec.ts | 12 +++--- .../shared/src/utils/contract/contract.tsx | 4 +- .../__tests__/market-underlying.spec.ts | 19 ++++++++-- .../src/utils/helpers/market-underlying.ts | 9 ++++- .../__tests__/positions-modal-card.spec.tsx | 2 +- .../trade_explanations/img-turbos.svg | 1 + .../Description/turbos-trade-description.tsx | 12 +++++- .../__tests__/trade-categories-gif.spec.tsx | 8 ++-- .../Categories/trade-categories-gif.tsx | 3 +- .../__tests__/purchase-button.spec.tsx | 17 +++++++-- .../Components/Elements/purchase-button.tsx | 4 +- .../ContractTypeInfo/contract-type-info.tsx | 2 +- .../__tests__/trade-type-tabs.spec.tsx | 18 ++++----- .../Form/TradeParams/trade-type-tabs.tsx | 4 +- .../Helpers/__tests__/video-config.spec.ts | 3 -- .../Modules/Trading/Helpers/video-config.ts | 5 --- .../_common/components/purchase-button.scss | 38 ++++++++----------- 20 files changed, 109 insertions(+), 75 deletions(-) create mode 100644 packages/trader/src/Assets/SvgComponents/trade_explanations/img-turbos.svg diff --git a/packages/components/stories/contract-card/statics/contract.js b/packages/components/stories/contract-card/statics/contract.js index e617e1dbd173..901237665c30 100644 --- 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 index 23df19d23d9f..a58378eca11b 100644 --- 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 index 20f86e017e32..820ed30af7d5 100644 --- 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 index 00f5fda6cb73..e064e24c94f9 100644 --- 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 index 0e41148c5e64..0d100840fbfd 100644 --- 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' ? ( - + ) : ( - + ); }; diff --git a/packages/shared/src/utils/helpers/__tests__/market-underlying.spec.ts b/packages/shared/src/utils/helpers/__tests__/market-underlying.spec.ts index 89d8403a7032..a9996b9ec320 100644 --- 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 index 7eabadc13b82..87a81b35b097 100644 --- 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/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx index c7ac031038f9..f6649a8e632f 100644 --- a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx +++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx @@ -184,7 +184,7 @@ describe('', () => { 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 new file mode 100644 index 000000000000..39880d8c9997 --- /dev/null +++ b/packages/trader/src/Assets/SvgComponents/trade_explanations/img-turbos.svg @@ -0,0 +1 @@ + \ No newline at end of file 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 index 3affad09ddc1..c043a64a1953 100644 --- 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: ( ,
]} + i18n_default_text='If you select <0>"Up", you’ll earn a payout if the spot price never drops below the barrier.' + components={[]} + /> + ), + }, + { + text: ( + ]} /> ), }, 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 index 7c7b31dd0717..687b680c570d 100644 --- 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('', () => { }); }); }); - 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('', () => { 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 index 0c5a6b8b796c..b1820f39a7c8 100644 --- 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 ; case TRADE_TYPES.TURBOS.LONG: case TRADE_TYPES.TURBOS.SHORT: - return ; + return ; case TRADE_TYPES.VANILLA.CALL: case TRADE_TYPES.VANILLA.PUT: return ; 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 index d5956977b880..431a1b6633f4 100644 --- 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('', () => { 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(); - 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(); + + 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(); - 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 index 1f74ecc00212..d870a0b2c47f 100644 --- 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/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx index 98da495d5d58..795883dbc8ac 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx +++ b/packages/trader/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/packages/trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx index 1dad1d6493c6..275f71ac81e4 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/__tests__/trade-type-tabs.spec.tsx @@ -27,11 +27,11 @@ describe('Trade Type Tabs', () => { ); }; - 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); }); diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/trade-type-tabs.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/trade-type-tabs.tsx index 0b2ab730865f..3e27a586c6e9 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/trade-type-tabs.tsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/trade-type-tabs.tsx @@ -16,8 +16,8 @@ const TradeTypeTabs = observer(({ className }: TTradeTypeTabs) => { const is_turbos = isTurbosContract(contract_type); const is_vanilla = isVanillaContract(contract_type); const tab_list = [ - { text: localize('Long'), value: TRADE_TYPES.TURBOS.LONG, is_displayed: is_turbos }, - { text: localize('Short'), value: TRADE_TYPES.TURBOS.SHORT, is_displayed: is_turbos }, + { text: localize('Up'), value: TRADE_TYPES.TURBOS.LONG, is_displayed: is_turbos }, + { text: localize('Down'), value: TRADE_TYPES.TURBOS.SHORT, is_displayed: is_turbos }, { text: localize('Call'), value: TRADE_TYPES.VANILLA.CALL, is_displayed: is_vanilla }, { text: localize('Put'), value: TRADE_TYPES.VANILLA.PUT, is_displayed: is_vanilla }, ]; diff --git a/packages/trader/src/Modules/Trading/Helpers/__tests__/video-config.spec.ts b/packages/trader/src/Modules/Trading/Helpers/__tests__/video-config.spec.ts index e9e192a26962..e043393601bf 100644 --- a/packages/trader/src/Modules/Trading/Helpers/__tests__/video-config.spec.ts +++ b/packages/trader/src/Modules/Trading/Helpers/__tests__/video-config.spec.ts @@ -4,9 +4,6 @@ describe('getDescriptionVideoId', () => { it('should return an id for Vanillas description video in light theme', () => { expect(getDescriptionVideoId('vanilla', false)).toEqual(DESCRIPTION_VIDEO_ID.vanilla.light); }); - it('should return an id for Turbos description video in dark theme', () => { - expect(getDescriptionVideoId('turbos', true)).toEqual(DESCRIPTION_VIDEO_ID.turbos.dark); - }); it('should return an id for Accumulator description video in light theme', () => { expect(getDescriptionVideoId('accumulator', false)).toEqual(DESCRIPTION_VIDEO_ID.accumulator.light); }); diff --git a/packages/trader/src/Modules/Trading/Helpers/video-config.ts b/packages/trader/src/Modules/Trading/Helpers/video-config.ts index b91371b064ad..4383cb2cafc7 100644 --- a/packages/trader/src/Modules/Trading/Helpers/video-config.ts +++ b/packages/trader/src/Modules/Trading/Helpers/video-config.ts @@ -30,11 +30,6 @@ export const DESCRIPTION_VIDEO_ID: TDtraderVideoUrl = { dark: 'c91f2b9859dc95ce8eecf7df327aaf00', }, - turbos: { - light: 'd37ccbb8db358970b3628ee5e2b46ec3', - dark: 'aa5dfdd1f7d28c03d18a10c1d689389c', - }, - vanilla: { light: '9b8b6ae67d3a720e4aee2665889d17fb', dark: '8f04e9d768b8e08a1d87830c95c6b9c8', diff --git a/packages/trader/src/sass/app/_common/components/purchase-button.scss b/packages/trader/src/sass/app/_common/components/purchase-button.scss index 38b0a6dffa18..fd9ddb5ac8e9 100644 --- a/packages/trader/src/sass/app/_common/components/purchase-button.scss +++ b/packages/trader/src/sass/app/_common/components/purchase-button.scss @@ -217,19 +217,6 @@ var(--purchase-main-1) 100% ); } - - &__vanilla-opts { - @include mobile { - background: var(--purchase-section-1); - background: linear-gradient( - 0deg, - var(--purchase-section-1) 0%, - var(--purchase-section-1) 15%, - var(--purchase-main-1) 15%, - var(--purchase-main-1) 100% - ); - } - } } &--2 { background-color: var(--purchase-section-2); @@ -254,10 +241,22 @@ var(--purchase-main-2) 100% ); } + } - &__vanilla-opts { - @include mobile { + &--has-bottom-gradient { + @include mobile { + &-1 { background: var(--purchase-section-1); + background: linear-gradient( + 0deg, + var(--purchase-section-1) 0%, + var(--purchase-section-1) 15%, + var(--purchase-main-1) 15%, + var(--purchase-main-1) 100% + ); + } + &-2 { + background: var(--purchase-section-2); background: linear-gradient( 0deg, var(--purchase-section-2) 0%, @@ -268,6 +267,7 @@ } } } + &--disabled, &[disabled] { cursor: default; @@ -384,14 +384,6 @@ } } @include mobile { - background: var(--purchase-section-1); - background: linear-gradient( - 0deg, - var(--purchase-section-1) 0%, - var(--purchase-section-1) 15%, - var(--purchase-main-1) 15%, - var(--purchase-main-1) 100% - ); .btn-purchase { &__bottom, &__top {