mitchell/Finalized new virtual signup flow

scripts/config/pages.js

@@ -25,6 +25,7 @@ module.exports = [
     ['new_account/realws',                      'app/new_account/real',                        'default',    'Real Money Account Opening'],
     ['new_account/virtualws',                   'app/new_account/virtual',                     'default',    'Create New Virtual-money Account'],
     ['new_account/welcome',                     'app/new_account/welcome_page',                'default',    'Welcome to Binary.com'],
+    ['new_account/welcome_onboarding',          'app/new_account/welcome_onboarding',             'default',    'Welcome to Binary.com'],
 
     ['resources',                               'app/resources/index',                         'default',    'Resources'],
     ['resources/asset_indexws',                 'app/resources/asset_index',                   'full_width', 'Asset Index'],

src/javascript/app/base/binary_pages.js

@@ -44,6 +44,7 @@ const FinancialAccOpening     = require('../pages/user/new_account/financial_acc
 const RealAccOpening          = require('../pages/user/new_account/real_acc_opening');
 const VirtualAccOpening       = require('../pages/user/new_account/virtual_acc_opening');
 const WelcomePage             = require('../pages/user/new_account/welcome_page');
+const WelcomePageOnboarding   = require('../pages/user/new_account/welcome_onboarding');
 const ResetPassword           = require('../pages/user/reset_password');
 const TradingResetPassword    = require('../pages/user/trading_reset_password');
 const SetCurrency             = require('../pages/user/set_currency');
@@ -136,6 +137,7 @@ const pages_config = {
     two_factor_authentication: { module: TwoFactorAuthentication,    is_authenticated: true },
     virtualws                : { module: VirtualAccOpening,          not_authenticated: true },
     welcome                  : { module: WelcomePage,                is_authenticated: true, only_virtual: true },
+    welcome_onboarding       : { module: WelcomePageOnboarding,      is_authenticated: true, only_virtual: true },
     withdrawws               : { module: PaymentAgentWithdraw,       is_authenticated: true, only_real: true },
 
     'affiliate-ib'           : { module: AffiliatesIBLanding },

src/javascript/app/pages/user/new_account/virtual_acc_opening.js

@@ -14,6 +14,7 @@ const State                    = require('../../../../_common/storage').State;
 const urlFor                   = require('../../../../_common/url').urlFor;
 const Utility                  = require('../../../../_common/utility');
 const isEuCountrySelected      = require('../../../../_common/utility').isEuCountrySelected;
+const ClientBase               = require('../../../../_common/base/client_base');
 const isBinaryApp              = require('../../../../config').isBinaryApp;
 
 const VirtualAccOpening = (() => {
@@ -104,7 +105,7 @@ const VirtualAccOpening = (() => {
         const req = [
             { selector: '#client_password', validations: ['req', 'password'] },
 
-            { selector: '#residence' },
+            { selector: '#residence' , validations: ['req'] },
             { selector: '#email_consent' },
             { request_field: 'utm_source',          value: TrafficSource.getSource(utm_data) },
             { request_field: 'new_account_virtual', value: 1 },
@@ -137,12 +138,13 @@ const VirtualAccOpening = (() => {
                     LocalStore.remove('signup_device');
                     BinarySocket.send({ get_account_status: 1 }).then((account_status) => {
                         const is_unwelcome_uk = account_status.get_account_status.status.some(status => status === 'unwelcome') && (/gb/.test(residence));
+                        const upgrade_info    = ClientBase.getBasicUpgradeInfo();
                         Client.processNewAccount({
                             email       : new_account.email,
                             loginid     : new_account.client_id,
                             token       : new_account.oauth_token,
                             is_virtual  : true,
-                            redirect_url: is_unwelcome_uk ? urlFor('new_account/realws') : urlFor('new_account/welcome'),
+                            redirect_url: getRedirectUrl(is_unwelcome_uk, residence, upgrade_info),
                         });
                     });
                 }
@@ -175,6 +177,17 @@ const VirtualAccOpening = (() => {
         }
     };
 
+    const getRedirectUrl = (is_unwelcome_uk, residence,  upgrade_info) => {
+
+        const { can_upgrade_to } = upgrade_info;
+        if (is_unwelcome_uk) return urlFor('new_account/realws');
+        if (can_upgrade_to.includes('svg') && residence !== 'au') {
+            return urlFor('new_account/welcome_onboarding');
+        }
+        if (residence === 'au') return urlFor('user/metatrader');
+
+        return urlFor('new_account/welcome');
+    };
     const showFormError = (message, url) => {
         $('#virtual-form').html($('<p/>', { html: Utility.template(message, [urlFor(url)]) }));
     };

src/javascript/app/pages/user/new_account/welcome_onboarding.js

@@ -0,0 +1,84 @@
+const BinarySocket     = require('../../../base/socket');
+const BinaryPjax       = require('../../../base/binary_pjax');
+const Client           = require('../../../base/client');
+const getElementById   = require('../../../../_common/common_functions').getElementById;
+const showLoadingImage = require('../../../../_common/utility').showLoadingImage;
+const ClientBase       = require('../../../../_common/base/client_base');
+const urlFor           = require('../../../../_common/url').urlFor;
+
+const WelcomePageOnboarding = (() => {
+
+    let welcome_container,
+        is_virtual,
+        upgrade_info,
+        cfd,
+        d_options,
+        not_sure;
+
+    const init = () => {
+        upgrade_info          = ClientBase.getBasicUpgradeInfo();
+        is_virtual            = Client.get('is_virtual');
+        welcome_container     = getElementById('welcome_container');
+        not_sure              = getElementById('default');
+        cfd                   = getElementById('cfd');
+        d_options             = getElementById('d_ptions');
+    };
+
+    const getCanUpgrade = (upgrade_type,  { can_upgrade_to } = upgrade_info) => can_upgrade_to.includes(upgrade_type);
+
+    const onLoad = () => {
+        BinarySocket.wait('authorize', 'landing_company', 'get_settings', 'get_account_status').then(() => {
+            init();
+
+            if (Client.hasAccountType('real')) {
+                BinaryPjax.load(Client.defaultRedirectUrl());
+                showLoadingImage(welcome_container, 'dark');
+            }
+            if (!getCanUpgrade('svg')) {
+                BinaryPjax.load(Client.defaultRedirectUrl());
+            }
+            not_sure.addEventListener('click', onClickNotSure);
+
+            cfd.addEventListener('click', onClickCFD);
+
+            d_options.addEventListener('click', onClickDigitalOptions);
+        });
+    };
+
+    const onClickNotSure = () => {
+        BinaryPjax.load(Client.defaultRedirectUrl());
+    };
+
+    const onClickCFD = () => {
+        if (is_virtual && upgrade_info.can_upgrade_to.length) {
+            if (getCanUpgrade('svg')) {
+                BinaryPjax.load(urlFor('/user/metatrader'));
+            }
+        } else {
+            BinaryPjax.load(Client.defaultRedirectUrl());
+        }
+    };
+
+    const onClickDigitalOptions = () => {
+        if (is_virtual && upgrade_info.can_upgrade_to.length){
+            if (getCanUpgrade('svg')) {
+                BinaryPjax.load(`${urlFor('trading')}?market=forex&formname=risefall`);
+            }
+        } else {
+            BinaryPjax.load(Client.defaultRedirectUrl());
+        }
+    };
+
+    const onUnload = () => {
+        cfd.removeEventListener('click', onClickCFD);
+        d_options.removeEventListener('click', onClickDigitalOptions);
+        not_sure.removeEventListener('click', onClickNotSure);
+    };
+
+    return {
+        onLoad,
+        onUnload,
+    };
+})();
+
+module.exports = WelcomePageOnboarding;

src/sass/_common/base/constants.scss

@@ -38,7 +38,7 @@ $COLOR_LIGHT_GRAY    : $fillColor;     // #f2f2f2
 $COLOR_GRAY          : $borderColor;   // #dedede
 $COLOR_DARK_GRAY     : #44484c;
 $COLOR_GREEN         : $positiveColor; // #2e8836
-
+$COLOR_GRAY_SUB      : #999999;
 // colors to remove
 $COLOR_GRAY_SHADE: $secondaryContentColor; // #c2c2c2
 $COLOR_DARK_GREEN: $darkPositiveColor;     // #14602b

src/sass/static/pages.scss

@@ -1388,6 +1388,75 @@ body #not_authenticated_financial ul.checked > li {
 }
 
 .welcome-content {
+    a:hover {
+        text-decoration: none;
+    }
+    &-container {
+        margin: 0 auto;
+        width: 80%;
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+        }
+    }
+    &-box {
+        max-height: 86px;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        border-radius: 9px;
+        margin-top: 10px;
+
+        &-desc {
+            overflow: hidden;
+            text-align: left;
+            margin-left: 15px;
+            width: 80%;
+            font-weight: 500;
+
+            @media only screen and (max-width: 576px) {
+                font-size: 13px;
+                margin-top: 0.6rem;
+                width: 70%;
+                word-wrap: break-word;
+                margin-left: 8px;
+            }
+
+            p {
+                margin: 0.4em 0;
+                line-height: 1.2em;
+            }
+            p.default:first-of-type {
+                margin-top: 1.1rem;
+            }
+        }
+        &-sub-options {
+            width: 100%;
+            font-size: 12px;
+            color: $COLOR_BLACK;
+            @media only screen and (max-width: 576px) {
+                font-size: xx-small;
+            }
+
+            span {
+                padding: 0 0.5rem;
+                border-left: 0.5px solid $COLOR_GRAY_SUB;
+                @media only screen and (max-width: 576px) {
+                    padding: 0 0.2rem;
+                }
+            }
+        }
+        &-arrow {
+            width: 5%;
+            position: relative;
+
+            &-image {
+                img {
+                    position: absolute;
+                    top: 50%;
+                }
+            }
+        }
+    }
     .box-grid .box {
         display: flex;
         flex-direction: column;

src/templates/_common/_layout/header.jsx

@@ -74,7 +74,7 @@ const Header = () => (
                                     </div>
                                     <div className='gr-9 gr-hide-m gr-hide-p binary-logo-text'>
                                         <div data-show='-maltainvest, -optionsblocked' />
-                                        <div data-show='maltainvest, optionsblocked' className='binary-type-logo-old' />
+                                        <div data-show='maltainvest, optionsblocked' />
                                     </div>
                                 </div>
                             </a>

src/templates/app/new_account/welcome_onboarding.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { SeparatorLine } from '../../_common/components/separator_line.jsx';
+
+const WelcomePageOnboarding = () => {
+
+    const dropdown = 'images/pages/welcome/ddown.svg';
+    const options = [
+        {
+            icon       : 'images/pages/welcome/cfd.svg',
+            title      : it.L('[_1]CFD[_2]','<strong>', '</strong>'),
+            desc       : it.L('[_1]Maximise returns[_2] by [_3]risking more[_4] than you put in.', '<strong>', '</strong>','<strong>', '</strong>'),
+            url        : it.url_for('user/metatrader'),
+            action_id  : 'cfd',
+            sub_options: ['Forex', 'Synthetics', 'Stocks and indices', 'Cryptocurrencies', 'Commodities'],
+        },
+        {
+            icon       : 'images/pages/welcome/doptions.svg',
+            title      : it.L('[_1]Digital Options[_1]','<strong>', '</strong>'),
+            desc       : it.L('Earn [_1]fixed returns[_2] by [_3]risking only[_4] what you put in.', '<strong>', '</strong>', '<strong>', '</strong>'),
+            url        : it.url_for('trading'),
+            action_id  : 'd_ptions',
+            sub_options: ['Forex', 'Synthetics', 'Stocks and indices', 'Commodities'],
+        },
+        {
+            icon     : 'images/pages/welcome/notsure.svg',
+            title    : it.L('[_1]Not Sure?[_1]' ,'<strong>', '</strong>'),
+            desc     : it.L('Let us introduce you to trading on Binary.'),
+            url      : it.url_for('trading'),
+            action_id: 'default',
+        },
+    ];
+
+    return (
+        <div id='welcome_container' className='center-text welcome-content'>
+            <h1>{it.L('Where would you like to start?')}</h1>
+            <SeparatorLine className='gr-padding-5' invisible />
+            <div className='welcome-content-container'>
+                {options.map(option => (<RenderOption
+                    key={option.title}
+                    option={option}
+                    dropdown={dropdown}
+                />))}
+            </div>
+            <SeparatorLine className='gr-padding-30' invisible />
+        </div>
+
+    );
+};
+
+const RenderOption = ({ option, dropdown }) => (
+    <div className='gr-12 gr-12-p gr-12-m gr-parent'>
+        <a
+            className='box border-gray welcome-content-box'
+            id={option.action_id}
+            href='javascript:;'
+        >
+            <div className='welcome-content-box-icon-container'>
+                <img key={option.icon} className='welcome-content-box-icon' src={it.url_for(option.icon)} />
+            </div>
+            <div className='welcome-content-box-desc'>
+                <p id='upgrade_text' className={`${option.action_id}`}>{option.title}</p>
+                <p >{option.desc}</p>
+                <div className='welcome-content-box-sub-options'>
+                    {option.sub_options && option.sub_options.map((icon) =>
+                        <span key={icon} alt={icon}>{icon}</span>
+                    )}
+                </div>
+            </div>
+            <div className='welcome-content-box-arrow'>
+                <div className='welcome-content-box-arrow-image'>
+                    <img  src={it.url_for(dropdown)} />
+                </div>
+            </div>
+        </a>
+    </div>
+);
+
+export default WelcomePageOnboarding;