Kate/87485/add Turbos to the Trade types list

packages/components/src/components/icon-trade-types/icon-trade-types.jsx

@@ -71,7 +71,7 @@ const IconTradeTypes = ({ type, className, ...props }) => {
             return <Icon icon='IcTradetypeTicklow' className={className} color='brand' {...props} />;
         case 'turboslong':
             return <Icon icon='IcTradetypeMultdown' className={className} color='brand' {...props} />;
-        case 'turbosshort':
+        case 'turbosshot':
             return <Icon icon='IcTradetypeMultup' className={className} color='brand' {...props} />;
         case 'upordown':
             return <Icon icon='IcTradetypeUpordown' className={className} color='brand' {...props} />;

packages/components/src/components/icon/icons.js

@@ -300,6 +300,7 @@ import './common/ic-calendar.svg';
 import './common/ic-cat-all.svg';
 import './common/ic-cat-multiplier.svg';
 import './common/ic-cat-options.svg';
+import './common/ic-cat-turbos.svg';
 import './common/ic-chart.svg';
 import './common/ic-chat.svg';
 import './common/ic-checkmark-blue.svg';
@@ -746,6 +747,8 @@ import './tradetype/ic-tradetype-runhigh.svg';
 import './tradetype/ic-tradetype-runlow.svg';
 import './tradetype/ic-tradetype-tickhigh.svg';
 import './tradetype/ic-tradetype-ticklow.svg';
+import './tradetype/ic-tradetype-turboslong.svg';
+import './tradetype/ic-tradetype-turbosshort.svg';
 import './tradetype/ic-tradetype-upordown.svg';
 import './underlying/ic-underlying-1HZ100V.svg';
 import './underlying/ic-underlying-1HZ10V.svg';

packages/components/src/components/mobile-dialog/mobile-dialog.jsx

@@ -134,7 +134,7 @@ MobileDialog.propTypes = {
     has_close_icon: PropTypes.bool,
     portal_element_id: PropTypes.string.isRequired,
     renderTitle: PropTypes.func,
-    title: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     visible: PropTypes.bool,
     wrapper_classname: PropTypes.string,
     header_classname: PropTypes.string,

packages/components/stories/icon/icons.js

@@ -309,6 +309,7 @@ export const icons =
         'IcCatAll',
         'IcCatMultiplier',
         'IcCatOptions',
+        'IcCatTurbos',
         'IcChart',
         'IcChat',
         'IcCheckmarkBlue',
@@ -441,6 +442,7 @@ export const icons =
         'IcNetellerLight',
         'IcNewFile',
         'IcNoAd',
+        'IcNoData',
         'IcNoOrder',
         'IcNotificationClear',
         'IcNotification',
@@ -772,6 +774,8 @@ export const icons =
         'IcTradetypeRunlow',
         'IcTradetypeTickhigh',
         'IcTradetypeTicklow',
+        'IcTradetypeTurboslong',
+        'IcTradetypeTurbosshort',
         'IcTradetypeUpordown',
     ],
     'underlying': [

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

@@ -208,6 +208,24 @@ const IconTradeCategory = ({ category, className }) => {
                     </React.Fragment>
                 );
                 break;
+            case 'turbosshort':
+                IconCategory = (
+                    <React.Fragment>
+                        <div className='category-wrapper'>
+                            <Icon icon='IcTradetypeTurbosshort' 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' />
+                        </div>
+                    </React.Fragment>
+                );
+                break;
             default:
                 IconCategory = (
                     <div className='category-wrapper'>

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

@@ -17,6 +17,7 @@ import ImageSpread from 'Assets/SvgComponents/trade_explanations/img-spread.svg'
 import ImageStaysInGoesOut from 'Assets/SvgComponents/trade_explanations/img-stays-in-goes-out.svg';
 import ImageTickHighLow from 'Assets/SvgComponents/trade_explanations/img-tick-high-low.svg';
 import ImageTouch from 'Assets/SvgComponents/trade_explanations/img-touch.svg';
+import ImageTurbos from 'Assets/SvgComponents/trade_explanations/img-turbos.svg';
 
 // TODO: Replace static image svgs with themed GIFs or animated SVGs
 const TradeCategoriesGIF = ({ category }) => {
@@ -57,6 +58,10 @@ const TradeCategoriesGIF = ({ category }) => {
             return <ImageTickHighLow />;
         case 'touch':
             return <ImageTouch />;
+        case 'turbosshort':
+            return <ImageTurbos />;
+        case 'turboslong':
+            return <ImageTurbos />;
         default:
             return null;
     }

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

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { localize } from '@deriv/translations';
+import { TurbosShortTradeDescription } from './turbosshort-trade-description';
+import { TurbosLongTradeDescription } from './turboslong-trade-description';
 
 // Templates are from Binary 1.0, it should be checked if they need change or not and add all of trade types
 
@@ -422,6 +424,12 @@ const TradeCategories = ({ category }) => {
                     </React.Fragment>
                 );
                 break;
+            case 'turbosshort':
+                TradeTypeTemplate = <TurbosShortTradeDescription />;
+                break;
+            case 'turboslong':
+                TradeTypeTemplate = <TurbosLongTradeDescription />;
+                break;
             default:
                 TradeTypeTemplate = <p>{localize('Description not found.')}</p>;
                 break;

packages/trader/src/Assets/Trading/Categories/turboslong-trade-description.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { localize } from '@deriv/translations';
+
+export const TurbosLongTradeDescription = () => {
+    const content = [
+        {
+            type: 'paragraph',
+            text: localize(
+                'Predict the market direction, size and also how confident you are that the spot price will not touch the barrier.'
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: localize(
+                'If you select “Long”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always above the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Long” contract if you think the market will grow strongly without falling.'
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: localize(
+                'Barrier is the level where if the spot price crosses this, then this option will go worthless. This is also used in the calculation of the payout per point. It is expressed in a distance from the spot. Select a further distance to have a lower chance of options getting worthless. We’ve limited the maximum payout for every contract, and it differs for every asset. Your contract will be closed automatically when the maximum payout is reached.'
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: localize('You will earn a profit if the payout is higher than the stake.'),
+        },
+        {
+            type: 'paragraph',
+            text: localize(
+                'You can determine the expiry for your contract by setting the duration and you can also sell your contract early.'
+            ),
+        },
+    ];
+
+    return (
+        <React.Fragment>
+            {content.map(({ type, text }, index) =>
+                /* We're using the array’s indexes as keys in this “static” list, which is never re-ordered, for better performance. https://www.developerway.com/posts/react-key-attribute
+            We're not using text itself as keys here because text will update each time platform language is changed. */
+                type === 'heading' ? (
+                    <h2 key={index}>
+                        <strong>{text}</strong>
+                    </h2>
+                ) : (
+                    <p key={index}>{text}</p>
+                )
+            )}
+        </React.Fragment>
+    );
+};

packages/trader/src/Assets/Trading/Categories/turbosshort-trade-description.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { localize } from '@deriv/translations';
+
+export const TurbosShortTradeDescription = () => {
+    const content = [
+        {
+            type: 'paragraph',
+            text: localize(
+                'Predict the market direction, size and also how confident you are that the spot price will not touch the barrier.'
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: localize(
+                'If you select “Short”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always below the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Short” contract if you think the market will decay strongly without rising.'
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: localize(
+                'Barrier is the level where if the spot price crosses this, then this option will go worthless. This is also used in the calculation of the payout per point. It is expressed in a distance from the spot. Select a further distance to have a lower chance of options getting worthless. We’ve limited the maximum payout for every contract, and it differs for every asset. Your contract will be closed automatically when the maximum payout is reached.'
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: localize('You will earn a profit if the payout is higher than the stake.'),
+        },
+        {
+            type: 'paragraph',
+            text: localize(
+                'You can determine the expiry for your contract by setting the duration and you can also sell your contract early.'
+            ),
+        },
+    ];
+
+    return (
+        <React.Fragment>
+            {content.map(({ type, text }, index) =>
+                /* We're using the array’s indexes as keys in this “static” list, which is never re-ordered, for better performance. https://www.developerway.com/posts/react-key-attribute
+            We're not using text itself as keys here because text will update each time platform language is changed. */
+                type === 'heading' ? (
+                    <h2 key={index}>
+                        <strong>{text}</strong>
+                    </h2>
+                ) : (
+                    <p key={index}>{text}</p>
+                )
+            )}
+        </React.Fragment>
+    );
+};

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info-header.jsx

@@ -2,19 +2,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 
-const Header = ({ onClickGoBack, title }) => (
+const Header = ({ onClickGoBack, text_size = 's', title }) => (
     <div className='contract-type-info__action-bar'>
         <span className='contract-type-info__icon' id='dt_contract_info_back_nav' onClick={onClickGoBack}>
             <Icon icon='IcArrowLeftBold' />
         </span>
-        <Text size='s' weight='bold' color='prominent' className='contract-type-info__title'>
+        <Text size={text_size} weight='bold' color='prominent' className='contract-type-info__title'>
             {title}
         </Text>
     </div>
 );
 
 Header.propTypes = {
     onClickGoBack: PropTypes.func,
+    text_size: PropTypes.string,
     title: PropTypes.string,
 };
 

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, ThemedScrollbars, Carousel } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import TradeCategories from 'Assets/Trading/Categories/trade-categories.jsx';
 import TradeCategoriesGIF from 'Assets/Trading/Categories/trade-categories-gif.jsx';
@@ -14,7 +15,11 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
                 <div className='contract-type-info__gif'>
                     <TradeCategoriesGIF category={type.value} />
                 </div>
-                <ThemedScrollbars className='contract-type-info__scrollbars' height='300px' autohide={false}>
+                <ThemedScrollbars
+                    className='contract-type-info__scrollbars'
+                    height={!isMobile() ? '300px' : ''}
+                    autohide={false}
+                >
                     <div className='contract-type-info__content'>
                         <TradeCategories category={type.value} />
                     </div>
@@ -32,7 +37,6 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
             </div>
         );
     });
-
     return (
         <Carousel
             className='contract-type-info'
@@ -43,7 +47,7 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
                 handleNavigationClick(contract_types[active_index]);
             }}
             list={cards}
-            width={290}
+            width={isMobile() ? 328 : 290}
         />
     );
 };