Merge pull request deriv-com#488 from maryia-binary-org/58845_brandin…

…g_removal

Maryia/Feat: Config for branding removal

src/javascript/app/base/header.js

@@ -18,6 +18,7 @@ const applyToAllElements       = require('../../_common/utility').applyToAllElem
 const createElement            = require('../../_common/utility').createElement;
 const findParent               = require('../../_common/utility').findParent;
 const getTopLevelDomain        = require('../../_common/utility').getTopLevelDomain;
+const getPlatformSettings      = require('../../../templates/_common/brand.config').getPlatformSettings;
 const getHostname              = require('../../_common/utility').getHostname;
 const template                 = require('../../_common/utility').template;
 const Language                 = require('../../_common/language');
@@ -112,7 +113,7 @@ const Header = (() => {
         });
 
         applyToAllElements('.header__logo', (el) => {
-            el.src = Url.urlForStatic(`${header_icon_base_path}logo_smart_trader.svg`);
+            el.src = Url.urlForStatic(`${header_icon_base_path}${getPlatformSettings('smarttrader').icon}`);
         });
 
         applyToAllElements('.logout-icon', (el) => {
@@ -163,53 +164,54 @@ const Header = (() => {
 
         const platforms          = {
             dtrader: {
-                name     : 'DTrader',
+                name     : getPlatformSettings('dtrader').name,
                 desc     : localize('A whole new trading experience on a powerful yet easy to use platform.'),
                 link     : main_domain,
-                icon     : 'ic-brand-dtrader.svg',
+                icon     : getPlatformSettings('dtrader').icon,
                 on_mobile: true,
             },
             ...(should_show_bots ? {
                 dbot: {
-                    name     : 'DBot',
+                    name     : getPlatformSettings('dbot').name,
                     desc     : localize('Automated trading at your fingertips. No coding needed.'),
                     link     : `${main_domain}/bot`,
-                    icon     : 'ic-brand-dbot.svg',
+                    icon     : getPlatformSettings('dbot').icon,
                     on_mobile: true,
                 },
             } : {}),
             ...(should_show_dmt5 ? {
                 dmt5: {
-                    name     : 'DMT5',
-                    desc     : localize('Trade on Deriv MetaTrader 5 (DMT5), the all-in-one FX and CFD trading platform.'),
+                    name: getPlatformSettings('dmt5').name,
+                    desc: localize('Trade on [_1] ([_2]), the all-in-one FX and CFD trading platform.',
+                        [getPlatformSettings('dmt5').full_name, getPlatformSettings('dmt5').name]),
                     link     : `${main_domain}/mt5`,
-                    icon     : 'ic-brand-dmt5.svg',
+                    icon     : getPlatformSettings('dmt5').icon,
                     on_mobile: true,
 
                 },
             } : {}),
             ...(should_show_xtrade ? {
                 derivx: {
-                    name     : 'Deriv X',
+                    name     : getPlatformSettings('dxtrade').name,
                     desc     : localize('Trade FX and CFDs on a customisable, easy-to-use trading platform.'),
                     link     : `${main_domain}/derivx`,
-                    icon     : 'ic-brand-dxtrade.svg',
+                    icon     : getPlatformSettings('dxtrade').icon,
                     on_mobile: true,
                 },
             } : {}),
             smarttrader: {
-                name     : 'SmartTrader',
+                name     : getPlatformSettings('smarttrader').name,
                 desc     : localize('Trade the world\'s markets with our popular user-friendly platform.'),
                 link     : '#',
-                icon     : 'logo_smart_trader.svg',
+                icon     : getPlatformSettings('smarttrader').icon,
                 on_mobile: true,
             },
             ...(should_show_bots ? {
                 binarybot: {
-                    name     : 'Binary Bot',
+                    name     : getPlatformSettings('bbot').name,
                     desc     : localize('Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.'),
                     link     : `https://bot.deriv.${getTopLevelDomain()}`,
-                    icon     : 'ic-brand-binarybot.svg',
+                    icon     : getPlatformSettings('bbot').icon,
                     on_mobile: true,
                 },
             } : {}),

src/templates/_common/_layout/header.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { getPlatformSettings } from '../brand.config';
+
+const platform_name = getPlatformSettings('smarttrader').name;
 
 const MobileMenu = () => (
     <div id='mobile__container' className='mobile__container mobile-show'>
@@ -18,7 +21,7 @@ const MobileMenu = () => (
                     <div id='mobile__platform-switcher-current' className='mobile__platform-switcher-current' >
                         <div className='mobile__platform-switcher-container'>
                             <img className='header__logo mobile__platform-switcher-logo' />
-                            <div className='mobile__platform-switcher-header platform__switcher-header'>{it.L('SmartTrader')}</div>
+                            <div className='mobile__platform-switcher-header platform__switcher-header'>{it.L('[_1]', platform_name)}</div>
                         </div>
                         <img id='mobile__platform-switcher-expand' className='mobile__platform-switcher-expand header__expand' />
                     </div>
@@ -80,7 +83,7 @@ const Header = () => (
                 <img id='header__hamburger' className='header__hamburger mobile-show' />
                 <div id='platform__switcher' className='header__menu-item platform__switcher mobile-hide'>
                     <img className='header__logo' />
-                    <div className='platform__switcher-header'>{it.L('SmartTrader')}</div>
+                    <div className='platform__switcher-header'>{it.L('[_1]', platform_name)}</div>
                     <img id='platform__switcher-expand' className='header__icon header__expand' />
                 </div>
                 <div className='header__menu-item header__menu-links client_logged_in invisible mobile-hide'>

src/templates/_common/brand.config.js

@@ -0,0 +1,38 @@
+const brand_config_data = {
+    brand_name: 'Deriv',
+    platforms : {
+        smarttrader: {
+            name: 'SmartTrader',
+            icon: 'logo_smart_trader.svg',
+        },
+        dtrader: {
+            name: 'DTrader',
+            icon: 'ic-brand-dtrader.svg',
+        },
+        dbot: {
+            name: 'DBot',
+            icon: 'ic-brand-dbot.svg',
+        },
+        dmt5: {
+            name     : 'DMT5',
+            full_name: 'Deriv MetaTrader 5',
+            icon     : 'ic-brand-dmt5.svg',
+        },
+        dxtrade: {
+            name: 'Deriv X',
+            icon: 'ic-brand-dxtrade.svg',
+        },
+        bbot: {
+            name: 'Binary Bot',
+            icon: 'ic-brand-binarybot.svg',
+        },
+    },
+};
+
+const getBrandName = () => brand_config_data.brand_name;
+const getPlatformSettings = platform_key => brand_config_data.platforms[platform_key];
+
+module.exports = {
+    getBrandName,
+    getPlatformSettings,
+};

src/templates/_common/components/title.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { getBrandName } from '../brand.config';
 
 const Title = () => (
-    <title>{`${it.title ? `${it.L(it.title)} | ` : ''}${it.L('Online trading platform')} | Deriv`}</title>
+    <title>{`${it.title ? `${it.L(it.title)} | ` : ''}${it.L('Online trading platform')} | ${getBrandName()}`}</title>
 );
 
 export default Title;