Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

Commit 2310157

Browse files
ali-fsakmal-deriv
andauthored
Ali / New real account signup flow (#6725)
* WIP: New real account signup flow * eslint fix * responsive form-progress * eslint fix * fix required rules and list of available currencies * fix some default values and requirement rules * minor bugfix * Added websocket, UI fixes, content changes * add T&C and minor fixes * add T&C and minor fixes * css responsive bugfix * minor bugfix * minor bugfix * minor bugfixs * fix currency list bug * mobile view bugfix * mobile view bugfix * minor css bugfix * minor css bugfix * fix center select and minor css fix * exclude special countries form new signup flow * update the list of excluded countries * minor bugfixes * minor bugfixes * change some text for CW * revert some text changes duo to new design * eslint fix Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com>
1 parent bec3580 commit 2310157

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1843
-146
lines changed

scripts/config/pages.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@ module.exports = [
2121

2222
['trading', 'app/trade/trading', 'default', 'SmartTrader'],
2323

24+
// TODO: Remove 'maltainvestws' and 'realws' after completely change the signup flow for all countries as these only being used for exceptional countries.
2425
['new_account/maltainvestws', 'app/new_account/financial', 'default', 'Financial Account Opening'],
2526
['new_account/realws', 'app/new_account/real', 'default', 'Real Money Account Opening'],
27+
['new_account/real_account', 'app/new_account/real_account', 'default', 'Real Account Opening'],
2628
['new_account/virtualws', 'app/new_account/virtual', 'default', 'Create New Demo Account'],
2729
['new_account/welcome', 'app/new_account/welcome_page', 'default', 'Welcome to Binary.com'],
28-
['new_account/welcome_onboarding', 'app/new_account/welcome_onboarding', 'default', 'Welcome to Binary.com'],
30+
['new_account/welcome_onboarding', 'app/new_account/welcome_onboarding', 'default', 'Welcome to Binary.com'],
2931

3032
['resources', 'app/resources/index', 'default', 'Resources'],
3133
['resources/asset_indexws', 'app/resources/asset_index', 'full_width', 'Asset Index'],

src/javascript/_common/check_password.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const checkPassword = (password_selector, should_show_error) => {
8686
const removeCheck = (password_selector, should_reset_meter) => {
8787
const el_password = document.querySelector(password_selector);
8888
const el_meter_bar = el_password.parentNode.querySelector('.password--meter-fill');
89-
const password_value = el_password.value.trim();
89+
const password_value = (el_password.value || '').trim();
9090
const el_feedback_message = el_password.parentNode.querySelector('.password--message');
9191
if (el_meter_bar && password_value.length < 1 || should_reset_meter) {
9292
el_meter_bar.style.transform = 'scale(0, 1)';

src/javascript/app/base/binary_pages.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,10 @@ const Accounts = require('../pages/user/accounts');
4040
const LostPassword = require('../pages/user/lost_password');
4141
const MetaTrader = require('../pages/user/metatrader/metatrader');
4242
const TypesOfAccounts = require('../pages/user/metatrader/types_of_accounts');
43+
// TODO: Remove 'FinancialAccOpening' and 'RealAccOpening' after completely change the signup flow for all countries
4344
const FinancialAccOpening = require('../pages/user/new_account/financial_acc_opening');
4445
const RealAccOpening = require('../pages/user/new_account/real_acc_opening');
46+
const RealAccountOpening = require('../pages/user/new_account/real_account_opening');
4547
const VirtualAccOpening = require('../pages/user/new_account/virtual_acc_opening');
4648
const WelcomePage = require('../pages/user/new_account/welcome_page');
4749
const WelcomePageOnboarding = require('../pages/user/new_account/welcome_onboarding');
@@ -109,6 +111,7 @@ const pages_config = {
109111
logged_inws : { module: LoggedInHandler },
110112
lost_passwordws : { module: LostPassword, not_authenticated: true },
111113
malta : { module: StaticPages.Locations },
114+
// TODO: Remove 'maltainvestws' after completely change the signup flow for all countries
112115
maltainvestws : { module: FinancialAccOpening, is_authenticated: true },
113116
market_timesws : { module: TradingTimesUI, no_mf: true, no_blocked_country: true },
114117
metals : { module: GetStarted.Metals },
@@ -120,7 +123,9 @@ const pages_config = {
120123
portfoliows : { module: Portfolio, is_authenticated: true, needs_currency: true },
121124
professional : { module: professionalClient, is_authenticated: true, only_real: true },
122125
profit_tablews : { module: ProfitTable, is_authenticated: true, needs_currency: true },
126+
// TODO: Remove 'realws' after completely change the signup flow for all countries
123127
realws : { module: RealAccOpening, is_authenticated: true },
128+
real_account : { module: RealAccountOpening, is_authenticated: true },
124129
redirect : { module: Redirect },
125130
regulation : { module: Regulation },
126131
reset_passwordws : { module: ResetPassword },

src/javascript/app/base/header.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const BinaryPjax = require('./binary_pjax');
22
const Client = require('./client');
33
const BinarySocket = require('./socket');
4-
const showHidePulser = require('../common/account_opening').showHidePulser;
54
const getCurrencyDisplayCode = require('../common/currency').getCurrencyDisplayCode;
65
const getLandingCompanyValue = require('../../_common/base/client_base').getLandingCompanyValue;
76
const isAuthenticationAllowed = require('../../_common/base/client_base').isAuthenticationAllowed;
@@ -136,20 +135,20 @@ const Header = (() => {
136135
return;
137136
}
138137

139-
const showUpgrade = (url, localized_text) => {
138+
const showUpgrade = (url, params, localized_text) => {
140139
applyToAllElements(upgrade_msg, (el) => {
141140
el.setVisibility(1);
142141
applyToAllElements('a', (ele) => {
143-
ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url));
142+
ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url, params));
144143
}, '', el);
145144
});
146145
};
147146

148-
const showUpgradeBtn = (url, localized_text) => {
147+
const showUpgradeBtn = (url, params, localized_text) => {
149148
applyToAllElements(upgrade_msg, (el) => {
150149
el.setVisibility(1);
151150
applyToAllElements('a.button', (ele) => {
152-
ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url));
151+
ele.html(createElement('span', { text: localized_text })).setVisibility(1).setAttribute('href', Url.urlFor(url, params));
153152
}, '', el);
154153
});
155154
};
@@ -186,9 +185,9 @@ const Header = (() => {
186185
if (show_upgrade_msg) {
187186
const upgrade_url = upgrade_info.can_upgrade_to.length > 1
188187
? 'user/accounts'
189-
: Object.values(upgrade_info.upgrade_links)[0];
190-
showUpgrade(upgrade_url, upgrade_link_txt);
191-
showUpgradeBtn(upgrade_url, upgrade_btn_txt);
188+
: 'new_account/real_account';
189+
showUpgrade(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_link_txt);
190+
showUpgradeBtn(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_btn_txt);
192191
} else {
193192
applyToAllElements(upgrade_msg, (el) => {
194193
applyToAllElements('a', (ele) => {
@@ -203,9 +202,9 @@ const Header = (() => {
203202
getElementById('virtual-wrapper').setVisibility(0);
204203
const upgrade_url = upgrade_info.can_upgrade_to.length > 1
205204
? 'user/accounts'
206-
: Object.values(upgrade_info.upgrade_links)[0];
207-
showUpgrade(upgrade_url, upgrade_link_txt);
208-
showUpgradeBtn(upgrade_url, upgrade_btn_txt);
205+
: 'new_account/real_account';
206+
showUpgrade(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_link_txt);
207+
showUpgradeBtn(upgrade_url, `account_type=${upgrade_info.can_upgrade_to[0]}`, upgrade_btn_txt);
209208

210209
if (/new_account/.test(window.location.href)) {
211210
showHidePulser(0);
@@ -217,6 +216,8 @@ const Header = (() => {
217216
});
218217
};
219218

219+
const showHidePulser = (should_show) => { $('.upgrademessage').children('a').setVisibility(should_show); };
220+
220221
const showHideNewAccount = (upgrade_info) => {
221222
if (upgrade_info.can_upgrade || upgrade_info.can_open_multi) {
222223
changeAccountsText(1, localize('Create Account'));

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('AccountOpening', () => {
1212
expect(AccountOpening.redirectAccount()).to.eq(1);
1313
});
1414
it('will not redirect client who is already on maltainvest account opening page again', () => {
15-
setURL(`${Url.websiteUrl()}en/maltainvestws.html`);
15+
setURL(`${Url.websiteUrl()}en/new_account/real_account.html?account_type=maltainvest`);
1616
expect(AccountOpening.redirectAccount()).to.eq(0);
1717
});
1818
it('will redirect client who cannot upgrade their account to the previous page', () => {

src/javascript/app/common/account_opening.js

Lines changed: 123 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ const moment = require('moment');
44
const generateBirthDate = require('./attach_dom/birth_date_picker');
55
const FormManager = require('./form_manager');
66
const BinaryPjax = require('../base/binary_pjax');
7-
const Client = require('../base/client');
7+
const Header = require('../base/header');
88
const BinarySocket = require('../base/socket');
9+
const Client = require('../base/client');
910
const professionalClient = require('../pages/user/account/settings/professional_client');
11+
const param = require('../../_common/url').param;
12+
const ClientBase = require('../../_common/base/client_base');
1013
const CommonFunctions = require('../../_common/common_functions');
14+
const getElementById = require('../../_common/common_functions').getElementById;
1115
const localize = require('../../_common/localize').localize;
1216
const State = require('../../_common/storage').State;
1317
const toISOFormat = require('../../_common/string_util').toISOFormat;
@@ -16,14 +20,47 @@ const urlFor = require('../../_common/url').urlFor;
1620
const getPropertyValue = require('../../_common/utility').getPropertyValue;
1721

1822
const AccountOpening = (() => {
23+
24+
const excluded_countries = ['im', 'au', 'sg', 'no'];
25+
26+
const getSinupPageLink = (upgrade_info, account_type) => {
27+
const get_settings = State.getResponse('get_settings');
28+
const country_code = get_settings.country_code;
29+
if (excluded_countries.includes(country_code)) { // old flow
30+
return urlFor(upgrade_info.upgrade_links[account_type]);
31+
} // new flow
32+
return urlFor('/new_account/real_account', `account_type=${account_type}`);
33+
34+
};
35+
1936
const redirectAccount = () => {
2037
const upgrade_info = Client.getUpgradeInfo();
21-
2238
if (!upgrade_info.can_upgrade) {
2339
BinaryPjax.loadPreviousUrl();
2440
return -1;
2541
}
42+
const country_code = State.getResponse('get_settings').country_code;
2643

44+
if (window.location.pathname.includes('/real_account')) { // new signup flow
45+
if (excluded_countries.includes(country_code)) {
46+
BinaryPjax.load('user/accounts');
47+
}
48+
const real_account_signup_target = param('account_type');
49+
const is_in_correct_path = upgrade_info.can_upgrade_to.some(lc => lc === real_account_signup_target);
50+
if (!is_in_correct_path) {
51+
const upgradable_accounts_count = upgrade_info.can_upgrade_to.length;
52+
if (upgradable_accounts_count > 1) {
53+
BinaryPjax.load('user/accounts');
54+
} else if (upgradable_accounts_count === 1) {
55+
window.location.replace(urlFor('/new_account/real_account', `account_type=${upgrade_info.can_upgrade_to[0]}`));
56+
}
57+
return 1;
58+
}
59+
return 0;
60+
} // old signup flow (only for excluded countries)
61+
if (!excluded_countries.includes(country_code)) {
62+
BinaryPjax.load('user/accounts');
63+
}
2764
if (!upgrade_info.is_current_path) {
2865
const upgradable_accounts_count = Object.keys(upgrade_info.upgrade_links).length;
2966
if (upgradable_accounts_count > 1) {
@@ -34,6 +71,17 @@ const AccountOpening = (() => {
3471
return 1;
3572
}
3673
return 0;
74+
75+
};
76+
77+
const showResponseError = (response) => {
78+
getElementById('loading').setVisibility(0);
79+
getElementById('real_account_wrapper').setVisibility(1);
80+
const $notice_box = $('#client_message').find('.notice-msg');
81+
$('#submit-message').empty();
82+
$notice_box.text(response.msg_type === 'sanity_check' ? localize('There was some invalid character in an input field.') : response.error.message).end()
83+
.setVisibility(1);
84+
$.scrollTo($notice_box, 500, { offset: -150 });
3785
};
3886

3987
const populateForm = (form_id, getValidations, is_financial) => {
@@ -205,21 +253,6 @@ const AccountOpening = (() => {
205253
}
206254
};
207255

208-
const handleTaxIdentificationNumber = () => {
209-
BinarySocket.wait('get_settings').then((response) => {
210-
const tax_identification_number = response.get_settings.tax_identification_number;
211-
if (tax_identification_number) {
212-
$('#lbl_tax_identification_number').text(tax_identification_number);
213-
CommonFunctions.getElementById('row_lbl_tax_identification_number').setVisibility(1);
214-
$('#tax_identification_number')
215-
.val(tax_identification_number) // Set value for validation
216-
.attr({ 'data-force': true, 'data-value': tax_identification_number });
217-
} else {
218-
CommonFunctions.getElementById('row_tax_identification_number').setVisibility(1);
219-
}
220-
});
221-
};
222-
223256
const handleState = (states_list, form_id, getValidations) => {
224257
const address_state_id = '#address_state';
225258
BinarySocket.wait('get_settings').then((response) => {
@@ -256,6 +289,7 @@ const AccountOpening = (() => {
256289
}
257290
});
258291
};
292+
259293
const handleNewAccount = (response, message_type) => {
260294
if (response.error) {
261295
const error_message = response.error.message;
@@ -275,6 +309,21 @@ const AccountOpening = (() => {
275309
}
276310
};
277311

312+
const handleTaxIdentificationNumber = () => {
313+
BinarySocket.wait('get_settings').then((response) => {
314+
const tax_identification_number = response.get_settings.tax_identification_number;
315+
if (tax_identification_number) {
316+
$('#lbl_tax_identification_number').text(tax_identification_number);
317+
CommonFunctions.getElementById('row_lbl_tax_identification_number').setVisibility(1);
318+
$('#tax_identification_number')
319+
.val(tax_identification_number) // Set value for validation
320+
.attr({ 'data-force': true, 'data-value': tax_identification_number });
321+
} else {
322+
CommonFunctions.getElementById('row_tax_identification_number').setVisibility(1);
323+
}
324+
});
325+
};
326+
278327
const commonValidations = () => {
279328
const residence = Client.get('residence');
280329
const req = [
@@ -313,7 +362,7 @@ const AccountOpening = (() => {
313362
id = $(this).attr('id');
314363
if (!/^(tnc|address_state|chk_professional|chk_tax_id|citizen)$/.test(id)) {
315364
validation = { selector: `#${id}`, validations: ['req'] };
316-
if (id === 'not_pep') {
365+
if (id === 'pep_declaration') {
317366
validation.exclude_request = 1;
318367
validation.validations = [['req', { message: localize('Please confirm that you are not a politically exposed person.') }]];
319368
}
@@ -323,6 +372,54 @@ const AccountOpening = (() => {
323372
return validations;
324373
};
325374

375+
const setCurrencyForFinancialAccount = async (currency_to_set) => {
376+
sessionStorage.removeItem('new_financial_account_set_currency');
377+
await BinarySocket.wait('authorize');
378+
const response = await BinarySocket.send({ set_account_currency: currency_to_set });
379+
if (response.error) {
380+
showResponseError(response);
381+
} else {
382+
Client.set('currency', currency_to_set);
383+
BinarySocket.send({ balance: 1 });
384+
BinarySocket.send({ payout_currencies: 1 }, { forced: true });
385+
Header.displayAccountStatus();
386+
setTimeout(() => { window.location.replace(urlFor('user/set-currency') || urlFor('trading')); }, 500); // need to redirect not using pjax
387+
}
388+
};
389+
390+
const createNewAccount = async (account_details, submit_button) => {
391+
FormManager.disableButton(submit_button);
392+
const is_maltainvest_account = !!account_details.new_account_maltainvest;
393+
account_details.client_type = $('#chk_professional').is(':checked') ? 'professional' : 'retail';
394+
delete account_details.tax_identification_confirm;
395+
delete account_details.tnc;
396+
delete account_details.pep_declaration;
397+
delete account_details.fs_professional;
398+
399+
// Set currency after account is created for Maltainvest only
400+
if (is_maltainvest_account && account_details.currency) {
401+
const currency = account_details.currency;
402+
delete account_details.currency;
403+
sessionStorage.setItem('new_financial_account_set_currency', currency);
404+
}
405+
406+
const response = await BinarySocket.send(account_details);
407+
if (response.error) {
408+
if (response.error.code === 'show risk disclaimer') return true;
409+
showResponseError(response);
410+
} else {
411+
localStorage.setItem('is_new_account', 1);
412+
const email = Client.get('email');
413+
const loginid = response[is_maltainvest_account ? 'new_account_maltainvest' : 'new_account_real'].client_id;
414+
const token = response[is_maltainvest_account ? 'new_account_maltainvest' : 'new_account_real'].oauth_token;
415+
ClientBase.setNewAccount({ email, loginid, token });
416+
if (is_maltainvest_account) window.location.reload();
417+
else window.location.replace(urlFor('user/set-currency'));
418+
}
419+
FormManager.enableButton(submit_button);
420+
return false;
421+
};
422+
326423
const showHidePulser = (should_show) => { $('.upgrademessage').children('a').setVisibility(should_show); };
327424

328425
const registerPepToggle = () => {
@@ -334,13 +431,17 @@ const AccountOpening = (() => {
334431
};
335432

336433
return {
337-
redirectAccount,
338-
populateForm,
339-
handleNewAccount,
340434
commonValidations,
435+
createNewAccount,
436+
excluded_countries,
437+
getSinupPageLink,
438+
handleNewAccount,
439+
populateForm,
440+
redirectAccount,
441+
registerPepToggle,
341442
selectCheckboxValidation,
443+
setCurrencyForFinancialAccount,
342444
showHidePulser,
343-
registerPepToggle,
344445
};
345446
})();
346447

0 commit comments

Comments
 (0)