Ali / New real account signup flow

scripts/config/pages.js

@@ -21,11 +21,13 @@ module.exports = [
 
     ['trading',                                 'app/trade/trading',                           'default',    'SmartTrader'],
 
+    // TODO: Remove 'maltainvestws' and 'realws' after completely change the signup flow for all countries as these only being used for exceptional countries.
     ['new_account/maltainvestws',               'app/new_account/financial',                   'default',    'Financial Account Opening'],
     ['new_account/realws',                      'app/new_account/real',                        'default',    'Real Money Account Opening'],
+    ['new_account/real_account',                'app/new_account/real_account',                'default',    'Real Account Opening'],
     ['new_account/virtualws',                   'app/new_account/virtual',                     'default',    'Create New Demo 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'],
+    ['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/_common/check_password.js

@@ -86,7 +86,7 @@ const checkPassword = (password_selector, should_show_error) => {
 const removeCheck = (password_selector, should_reset_meter) => {
     const el_password = document.querySelector(password_selector);
     const el_meter_bar = el_password.parentNode.querySelector('.password--meter-fill');
-    const password_value = el_password.value.trim();
+    const password_value = (el_password.value || '').trim();
     const el_feedback_message = el_password.parentNode.querySelector('.password--message');
     if (el_meter_bar && password_value.length < 1 || should_reset_meter) {
         el_meter_bar.style.transform = 'scale(0, 1)';

src/javascript/app/base/binary_pages.js

@@ -40,8 +40,10 @@ const Accounts                = require('../pages/user/accounts');
 const LostPassword            = require('../pages/user/lost_password');
 const MetaTrader              = require('../pages/user/metatrader/metatrader');
 const TypesOfAccounts         = require('../pages/user/metatrader/types_of_accounts');
+// TODO: Remove 'FinancialAccOpening' and 'RealAccOpening' after completely change the signup flow for all countries
 const FinancialAccOpening     = require('../pages/user/new_account/financial_acc_opening');
 const RealAccOpening          = require('../pages/user/new_account/real_acc_opening');
+const RealAccountOpening      = require('../pages/user/new_account/real_account_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');
@@ -109,6 +111,7 @@ const pages_config = {
     logged_inws              : { module: LoggedInHandler },
     lost_passwordws          : { module: LostPassword,               not_authenticated: true },
     malta                    : { module: StaticPages.Locations },
+    // TODO: Remove 'maltainvestws' after completely change the signup flow for all countries
     maltainvestws            : { module: FinancialAccOpening,        is_authenticated: true },
     market_timesws           : { module: TradingTimesUI,             no_mf: true, no_blocked_country: true },
     metals                   : { module: GetStarted.Metals },
@@ -120,7 +123,9 @@ const pages_config = {
     portfoliows              : { module: Portfolio,                  is_authenticated: true, needs_currency: true },
     professional             : { module: professionalClient,         is_authenticated: true, only_real: true },
     profit_tablews           : { module: ProfitTable,                is_authenticated: true, needs_currency: true },
+    // TODO: Remove 'realws' after completely change the signup flow for all countries
     realws                   : { module: RealAccOpening,             is_authenticated: true },
+    real_account             : { module: RealAccountOpening,         is_authenticated: true },
     redirect                 : { module: Redirect },
     regulation               : { module: Regulation },
     reset_passwordws         : { module: ResetPassword },

src/javascript/app/base/header.js

@@ -1,7 +1,6 @@
 const BinaryPjax               = require('./binary_pjax');
 const Client                   = require('./client');
 const BinarySocket             = require('./socket');
-const showHidePulser           = require('../common/account_opening').showHidePulser;
 const getCurrencyDisplayCode   = require('../common/currency').getCurrencyDisplayCode;
 const getLandingCompanyValue   = require('../../_common/base/client_base').getLandingCompanyValue;
 const isAuthenticationAllowed  = require('../../_common/base/client_base').isAuthenticationAllowed;
@@ -136,20 +135,20 @@ const Header = (() => {
                 return;
             }
 
-            const showUpgrade = (url, localized_text) => {
+            const showUpgrade = (url, params, localized_text) => {
                 applyToAllElements(upgrade_msg, (el) => {
                     el.setVisibility(1);
                     applyToAllElements('a', (ele) => {
-                        ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url));
+                        ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url, params));
                     }, '', el);
                 });
             };
 
-            const showUpgradeBtn = (url, localized_text) => {
+            const showUpgradeBtn = (url, params, localized_text) => {
                 applyToAllElements(upgrade_msg, (el) => {
                     el.setVisibility(1);
                     applyToAllElements('a.button', (ele) => {
-                        ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url));
+                        ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url, params));
                     }, '', el);
                 });
             };
@@ -186,9 +185,9 @@ const Header = (() => {
                 if (show_upgrade_msg) {
                     const upgrade_url = upgrade_info.can_upgrade_to.length > 1
                         ? 'user/accounts'
-                        : Object.values(upgrade_info.upgrade_links)[0];
-                    showUpgrade(upgrade_url, upgrade_link_txt);
-                    showUpgradeBtn(upgrade_url, upgrade_btn_txt);
+                        : 'new_account/real_account';
+                    showUpgrade(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_link_txt);
+                    showUpgradeBtn(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_btn_txt);
                 } else {
                     applyToAllElements(upgrade_msg, (el) => {
                         applyToAllElements('a', (ele) => {
@@ -203,9 +202,9 @@ const Header = (() => {
                 getElementById('virtual-wrapper').setVisibility(0);
                 const upgrade_url = upgrade_info.can_upgrade_to.length > 1
                     ? 'user/accounts'
-                    : Object.values(upgrade_info.upgrade_links)[0];
-                showUpgrade(upgrade_url, upgrade_link_txt);
-                showUpgradeBtn(upgrade_url, upgrade_btn_txt);
+                    : 'new_account/real_account';
+                showUpgrade(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_link_txt);
+                showUpgradeBtn(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_btn_txt);
 
                 if (/new_account/.test(window.location.href)) {
                     showHidePulser(0);
@@ -217,6 +216,8 @@ const Header = (() => {
         });
     };
 
+    const showHidePulser = (should_show) => { $('.upgrademessage').children('a').setVisibility(should_show); };
+
     const showHideNewAccount = (upgrade_info) => {
         if (upgrade_info.can_upgrade || upgrade_info.can_open_multi) {
             changeAccountsText(1, localize('Create Account'));

src/javascript/app/common/__tests__/account_opening.js

@@ -12,7 +12,7 @@ describe('AccountOpening', () => {
             expect(AccountOpening.redirectAccount()).to.eq(1);
         });
         it('will not redirect client who is already on maltainvest account opening page again', () => {
-            setURL(`${Url.websiteUrl()}en/maltainvestws.html`);
+            setURL(`${Url.websiteUrl()}en/new_account/real_account.html?account_type=maltainvest`);
             expect(AccountOpening.redirectAccount()).to.eq(0);
         });
         it('will redirect client who cannot upgrade their account to the previous page', () => {

src/javascript/app/common/account_opening.js

@@ -4,10 +4,14 @@ const moment             = require('moment');
 const generateBirthDate  = require('./attach_dom/birth_date_picker');
 const FormManager        = require('./form_manager');
 const BinaryPjax         = require('../base/binary_pjax');
-const Client             = require('../base/client');
+const Header             = require('../base/header');
 const BinarySocket       = require('../base/socket');
+const Client             = require('../base/client');
 const professionalClient = require('../pages/user/account/settings/professional_client');
+const param              = require('../../_common/url').param;
+const ClientBase         = require('../../_common/base/client_base');
 const CommonFunctions    = require('../../_common/common_functions');
+const getElementById     = require('../../_common/common_functions').getElementById;
 const localize           = require('../../_common/localize').localize;
 const State              = require('../../_common/storage').State;
 const toISOFormat        = require('../../_common/string_util').toISOFormat;
@@ -16,14 +20,47 @@ const urlFor             = require('../../_common/url').urlFor;
 const getPropertyValue   = require('../../_common/utility').getPropertyValue;
 
 const AccountOpening = (() => {
+
+    const excluded_countries = ['im', 'au', 'sg', 'no'];
+
+    const getSinupPageLink = (upgrade_info, account_type) => {
+        const get_settings = State.getResponse('get_settings');
+        const country_code = get_settings.country_code;
+        if (excluded_countries.includes(country_code)) { // old flow
+            return urlFor(upgrade_info.upgrade_links[account_type]);
+        }  // new flow
+        return urlFor('/new_account/real_account', `account_type=${account_type}`);
+
+    };
+
     const redirectAccount = () => {
         const upgrade_info = Client.getUpgradeInfo();
-
         if (!upgrade_info.can_upgrade) {
             BinaryPjax.loadPreviousUrl();
             return -1;
         }
+        const country_code = State.getResponse('get_settings').country_code;
 
+        if (window.location.pathname.includes('/real_account')) { // new signup flow
+            if (excluded_countries.includes(country_code)) {
+                BinaryPjax.load('user/accounts');
+            }
+            const real_account_signup_target = param('account_type');
+            const is_in_correct_path = upgrade_info.can_upgrade_to.some(lc => lc === real_account_signup_target);
+            if (!is_in_correct_path) {
+                const upgradable_accounts_count = upgrade_info.can_upgrade_to.length;
+                if (upgradable_accounts_count > 1) {
+                    BinaryPjax.load('user/accounts');
+                } else if (upgradable_accounts_count === 1) {
+                    window.location.replace(urlFor('/new_account/real_account', `account_type=${upgrade_info.can_upgrade_to[0]}`));
+                }
+                return 1;
+            }
+            return 0;
+        }  // old signup flow (only for excluded countries)
+        if (!excluded_countries.includes(country_code)) {
+            BinaryPjax.load('user/accounts');
+        }
         if (!upgrade_info.is_current_path) {
             const upgradable_accounts_count = Object.keys(upgrade_info.upgrade_links).length;
             if (upgradable_accounts_count > 1) {
@@ -34,6 +71,17 @@ const AccountOpening = (() => {
             return 1;
         }
         return 0;
+
+    };
+
+    const showResponseError = (response) => {
+        getElementById('loading').setVisibility(0);
+        getElementById('real_account_wrapper').setVisibility(1);
+        const $notice_box = $('#client_message').find('.notice-msg');
+        $('#submit-message').empty();
+        $notice_box.text(response.msg_type === 'sanity_check' ? localize('There was some invalid character in an input field.') : response.error.message).end()
+            .setVisibility(1);
+        $.scrollTo($notice_box, 500, { offset: -150 });
     };
 
     const populateForm = (form_id, getValidations, is_financial) => {
@@ -205,21 +253,6 @@ const AccountOpening = (() => {
         }
     };
 
-    const handleTaxIdentificationNumber = () => {
-        BinarySocket.wait('get_settings').then((response) => {
-            const tax_identification_number = response.get_settings.tax_identification_number;
-            if (tax_identification_number) {
-                $('#lbl_tax_identification_number').text(tax_identification_number);
-                CommonFunctions.getElementById('row_lbl_tax_identification_number').setVisibility(1);
-                $('#tax_identification_number')
-                    .val(tax_identification_number) // Set value for validation
-                    .attr({ 'data-force': true, 'data-value': tax_identification_number });
-            } else {
-                CommonFunctions.getElementById('row_tax_identification_number').setVisibility(1);
-            }
-        });
-    };
-
     const handleState = (states_list, form_id, getValidations) => {
         const address_state_id = '#address_state';
         BinarySocket.wait('get_settings').then((response) => {
@@ -256,6 +289,7 @@ const AccountOpening = (() => {
             }
         });
     };
+
     const handleNewAccount = (response, message_type) => {
         if (response.error) {
             const error_message = response.error.message;
@@ -275,6 +309,21 @@ const AccountOpening = (() => {
         }
     };
 
+    const handleTaxIdentificationNumber = () => {
+        BinarySocket.wait('get_settings').then((response) => {
+            const tax_identification_number = response.get_settings.tax_identification_number;
+            if (tax_identification_number) {
+                $('#lbl_tax_identification_number').text(tax_identification_number);
+                CommonFunctions.getElementById('row_lbl_tax_identification_number').setVisibility(1);
+                $('#tax_identification_number')
+                    .val(tax_identification_number) // Set value for validation
+                    .attr({ 'data-force': true, 'data-value': tax_identification_number });
+            } else {
+                CommonFunctions.getElementById('row_tax_identification_number').setVisibility(1);
+            }
+        });
+    };
+
     const commonValidations = () => {
         const residence = Client.get('residence');
         const req = [
@@ -313,7 +362,7 @@ const AccountOpening = (() => {
             id = $(this).attr('id');
             if (!/^(tnc|address_state|chk_professional|chk_tax_id|citizen)$/.test(id)) {
                 validation = { selector: `#${id}`, validations: ['req'] };
-                if (id === 'not_pep') {
+                if (id === 'pep_declaration') {
                     validation.exclude_request = 1;
                     validation.validations = [['req', { message: localize('Please confirm that you are not a politically exposed person.') }]];
                 }
@@ -323,6 +372,54 @@ const AccountOpening = (() => {
         return validations;
     };
 
+    const setCurrencyForFinancialAccount = async (currency_to_set) => {
+        sessionStorage.removeItem('new_financial_account_set_currency');
+        await BinarySocket.wait('authorize');
+        const response = await BinarySocket.send({ set_account_currency: currency_to_set });
+        if (response.error) {
+            showResponseError(response);
+        } else {
+            Client.set('currency', currency_to_set);
+            BinarySocket.send({ balance: 1 });
+            BinarySocket.send({ payout_currencies: 1 }, { forced: true });
+            Header.displayAccountStatus();
+            setTimeout(() => { window.location.replace(urlFor('user/set-currency') || urlFor('trading')); }, 500); // need to redirect not using pjax
+        }
+    };
+
+    const createNewAccount = async (account_details, submit_button) => {
+        FormManager.disableButton(submit_button);
+        const is_maltainvest_account = !!account_details.new_account_maltainvest;
+        account_details.client_type = $('#chk_professional').is(':checked') ? 'professional' : 'retail';
+        delete account_details.tax_identification_confirm;
+        delete account_details.tnc;
+        delete account_details.pep_declaration;
+        delete account_details.fs_professional;
+
+        // Set currency after account is created for Maltainvest only
+        if (is_maltainvest_account && account_details.currency) {
+            const currency = account_details.currency;
+            delete account_details.currency;
+            sessionStorage.setItem('new_financial_account_set_currency', currency);
+        }
+
+        const response = await BinarySocket.send(account_details);
+        if (response.error) {
+            if (response.error.code === 'show risk disclaimer') return true;
+            showResponseError(response);
+        } else {
+            localStorage.setItem('is_new_account', 1);
+            const email = Client.get('email');
+            const loginid = response[is_maltainvest_account ? 'new_account_maltainvest' : 'new_account_real'].client_id;
+            const token = response[is_maltainvest_account ? 'new_account_maltainvest' : 'new_account_real'].oauth_token;
+            ClientBase.setNewAccount({ email, loginid, token });
+            if (is_maltainvest_account) window.location.reload();
+            else window.location.replace(urlFor('user/set-currency'));
+        }
+        FormManager.enableButton(submit_button);
+        return false;
+    };
+
     const showHidePulser = (should_show) => { $('.upgrademessage').children('a').setVisibility(should_show); };
 
     const registerPepToggle = () => {
@@ -334,13 +431,17 @@ const AccountOpening = (() => {
     };
 
     return {
-        redirectAccount,
-        populateForm,
-        handleNewAccount,
         commonValidations,
+        createNewAccount,
+        excluded_countries,
+        getSinupPageLink,
+        handleNewAccount,
+        populateForm,
+        redirectAccount,
+        registerPepToggle,
         selectCheckboxValidation,
+        setCurrencyForFinancialAccount,
         showHidePulser,
-        registerPepToggle,
     };
 })();