Merge branch 'Change_of_social_icon_links_in_the_footer_for_uk_and_eu' of github.com:alamin-deriv/binary-static into Change_of_social_icon_links_in_the_footer_for_uk_and_eu

Author: alamin-deriv

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'],

scripts/js_texts/extracted_strings_app.js

@@ -258,6 +258,7 @@ module.exports = [
     'IP Address',
     'Identity card',
     'If it doesn’t work, download a QR code scanner from Google Play or the App Store',
+    'If you have an account with us, we\'ll send you a link to your email in a few minutes to reset your password.',
     'In the EU, financial binary options are only available to professional investors.',
     'In/Out',
     'Indicates required field',
@@ -395,7 +396,6 @@ module.exports = [
     'Please [_1]log in[_2] or [_3]sign up[_4] to view this page.',
     'Please accept the terms and conditions.',
     'Please check your email for further instructions.',
-    'Please check your email for the password reset link.',
     'Please choose a currency',
     'Please click on the link in the email to reset your binary password.',
     'Please click on the link in the email to reset your trading password.',
@@ -707,8 +707,8 @@ module.exports = [
     'Yes, I\'m sure',
     'You are categorised as a professional client.',
     'You are categorised as a retail client. Apply to be treated as a professional trader.',
-    'You are limited to one fiat account. You can change the currency of your fiat account anytime before you make a first-time deposit or create an MT5 account.',
-    'You can [_1]set a new currency[_2] before you deposit for the first time or create an MT5 account.',
+    'You are limited to one fiat account. You can change the currency of your fiat account anytime before you make a first-time [_1].',
+    'You can [_1]set a new currency[_2] before you deposit for the first [_3].',
     'You can close this window without interrupting your trade.',
     'You can no longer change the currency because you\'ve created an MT5 account.',
     'You can no longer change the currency because you\'ve made a first-time deposit.',
@@ -793,6 +793,8 @@ module.exports = [
     'close',
     'day',
     'days',
+    'deposit',
+    'deposit or create an MT5 account',
     'details',
     'e.g. United States',
     'for account [_1]',
@@ -810,6 +812,8 @@ module.exports = [
     'space',
     'tick',
     'ticks',
+    'time',
+    'time or create an MT5 account',
     '{SPAIN ONLY}However, Binary Investments (Europe) Ltd has assessed your knowledge and experience and deems the product appropriate for you.',
     '{SPAIN ONLY}This is a product with leverage. You should be aware that losses may be higher than the amount initially paid to purchase the product.',
     '{SPAIN ONLY}You are about to purchase a product that is not simple and may be difficult to understand: Contracts for difference and forex. As a general rule, the CNMV considers that such products are not appropriate for retail clients, due to their complexity.',

src/images/pages/welcome/cfd.svg

@@ -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/images/pages/welcome/ddown.svg

@@ -195,16 +195,23 @@ const ContentVisibility = (() => {
     };
 
     const centerSelect = ($el) => {
-        const option_width = getTextWidth($el.children(':selected').html());
-        const empty_space = '280' - option_width; // in mobile all select drop-downs are hardcoded to be at 280px in css
-        $el.css('text-indent', (empty_space / 2) - 7); // 7px is for the drop-down arrow
+        const option_width = getTextWidth($el.children(':selected').text());
+        const center_option_text = option_width / 2;
+        $el.css('text-indent', `calc(50% - ${center_option_text}px)`);
     };
 
     const centerAlignSelect = (should_init) => {
         $(window).off('resize', centerAlignSelect);
-        $center_select_m = ((typeof should_init === 'boolean' && should_init) || !$center_select_m) ? $('.center-select-m') : $center_select_m;
+        $('#frm_real #trading_experience_form select, #frm_real #financial_info_form select').addClass('center-select-m');
+        $center_select_m = ((typeof should_init === 'boolean' && should_init) || !$center_select_m) ? $('#frm_real .center-select-m') : $center_select_m;
 
         if ($(window).width() <= 480) {
+            const financial_form_selects = $('#frm_real select');
+            financial_form_selects.get().forEach((element) => {
+                const option_width = getTextWidth($(element).children(':selected').text());
+                const center_option_text = option_width / 2;
+                $(element).css('text-indent', `calc(50% - ${center_option_text}px)`);
+            });
             $center_select_m.on('change', function() {
                 centerSelect($(this));
             });

src/images/pages/welcome/doptions.svg

@@ -120,6 +120,7 @@ const DatePicker = (() => {
     const checkWidth = (selector) => {
         const $selector        = $(selector);
         const date_picker_conf = date_pickers[selector].config_data;
+        const value = $selector.attr('data-value') || $selector.val();
         if (window.innerWidth < 770) {
             if (!date_picker_conf.native) {
                 hide(selector);
@@ -128,15 +129,14 @@ const DatePicker = (() => {
             }
             if (checkInput('date', 'not-a-date') && $selector.attr('data-picker') !== 'native') {
                 hide(selector);
-                $selector.attr({ type: 'date', 'data-picker': 'native' }).val($selector.attr('data-value')).removeClass('clear');
+                $selector.attr({ type: 'date', 'data-picker': 'native' }).val(value).removeClass('clear');
                 if ($selector.attr('readonly')) $selector.attr('data-readonly', 'readonly').removeAttr('readonly');
                 if (date_picker_conf.minDate !== undefined) $selector.attr('min', toDate(date_picker_conf.minDate));
                 if (date_picker_conf.maxDate !== undefined) $selector.attr('max', toDate(date_picker_conf.maxDate));
                 return;
             }
         }
         if ((window.innerWidth > 769 && $selector.attr('data-picker') !== 'jquery') || (window.innerWidth < 770 && !checkInput('date', 'not-a-date'))) {
-            const value        = $selector.attr('data-value') || $selector.val();
             const format_value = value && date_picker_conf.type !== 'diff' ? toReadableFormat(moment(value)) : $selector.val();
             $selector.attr({ type: 'text', 'data-picker': 'jquery', 'data-value': value }).removeAttr('min max').val(format_value);
             if ($selector.attr('data-readonly')) $selector.attr('readonly', 'readonly').removeAttr('data-readonly');

src/images/pages/welcome/financial.svg

@@ -93,6 +93,9 @@ const Cashier = (() => {
         const has_upgrade         = upgrade_info.can_upgrade || upgrade_info.can_open_multi
                                     || can_change;
         const account_action_text = has_upgrade ? `<br />${localize('[_1]Manage your accounts[_2]', [`<a href=${Url.urlFor('user/accounts')}>`, '</a>'])}` : '';
+        const is_iom_client       = Client.get('residence') === 'im' || State.getResponse('website_status.clients_country') === 'im';
+        const change_text_for_iom = is_iom_client ? localize('time') : localize('time or create an MT5 account');
+        const url_user_account    = `<a href=${Url.urlFor('user/accounts')}>`;
 
         const missingCriteria = (has_mt5, has_transaction) => {
             const existing_mt5_msg          = localize('You can no longer change the currency because you\'ve created an MT5 account.') + account_action_text;
@@ -113,7 +116,7 @@ const Cashier = (() => {
         const currency_hint = Currency.isCryptocurrency(currency)
             ? localize('Don\'t want to trade in [_1]? You can open another cryptocurrency account.', `${Currency.getCurrencyDisplayCode(currency)}`) + account_action_text
             : has_no_mt5 && has_no_transaction
-                ? localize('You can [_1]set a new currency[_2] before you deposit for the first time or create an MT5 account.', can_change ? [`<a href=${Url.urlFor('user/accounts')}>`, '</a>'] : ['', ''])
+                ? localize('You can [_1]set a new currency[_2] before you deposit for the first [_3].', [can_change ? url_user_account : '', can_change ? '</a>' : '', change_text_for_iom])
                 : missingCriteria(!has_no_mt5, !has_no_transaction);
 
         elementInnerHtml(el_current_currency, currency_message);

src/images/pages/welcome/notsure.svg

@@ -15,14 +15,23 @@ const IPHistoryData = (() => {
             { name: 'IE',         regex: /trident\/\d+\.\d+;.*[rv:]+(\d+\.\d)/i },
             { name: 'Firefox',    regex: /firefox\/([\d\w.-]+)/i },
             { name: 'Binary app', regex: /binary\.com V([\d.]+)/i },
+            { name: 'iPhone', regex: /\b(iPhone\d*)\b.*(DP2P)\b/ig },
+            { name: 'Android', regex: /\b(Android\d*)\b.*(DP2P)\b/ig },
+            { name: 'Dart', regex: /dart\/([\d\w.-]+)/i },
         ];
         for (let i = 0; i < lookup.length; i++) {
             const info  = lookup[i];
-            const match = user_agent.match(info.regex);
+            let match = user_agent.match(info.regex);
             if (match !== null) {
+                let app;
+                if (['Android', 'iPhone'].includes(info.name)) {
+                    match = user_agent.match(/(:?DP2P\/([\d\w.-]+))/ig)[0].split('/');
+                    app = match[0];
+                }
                 return {
                     name   : info.name,
                     version: match[1],
+                    ...app && { app },
                 };
             }
         }

src/images/pages/welcome/synthetics.svg

@@ -12,7 +12,10 @@ const IPHistoryUI = (() => {
         const action       = localize(data.action /* localize-ignore */);  // from login_history API call, can be (login|logout)
         const browser      = data.browser;
         let browser_string = browser ? `${browser.name} v${browser.version}` : 'Unknown';
-        const patt         = /^(opera|chrome|safari|firefox|IE|Edge|SeaMonkey|Chromium|Binary app) v[0-9.]+$/i;
+        if (browser && browser.app) {
+            browser_string += ` ${browser.app} app`;
+        }
+        const patt         = /(opera|chrome|safari|firefox|IE|Edge|SeaMonkey|Chromium|Binary app|Android|iPhone|Dart) v[0-9.]+(\b.*DP2P app)?$/i;
         if (!patt.test(browser_string) && browser_string !== 'Unknown') {
             browser_string = 'Error';
         }

src/javascript/_autogenerated/ach.js

@@ -18,7 +18,8 @@ const LostPassword = (() => {
                     BinaryPjax.load(`${urlFor('user/reset_passwordws')}#token=${$('#txt_verification_code').val()}`);
                 }, false);
             } else {
-                $(form_id).html($('<div/>', { class: 'notice-msg', text: localize('Please check your email for the password reset link.') }));
+                $(form_id).html($('<div/>', { class: 'notice-msg', text: localize('If you have an account with us, we\'ll send you a link to your email in a few minutes to reset your password.') }));
+
             }
         } else if (response.error) {
             const $form_error = $('#form_error');

src/javascript/_autogenerated/es.js

@@ -633,9 +633,6 @@ const MetaTraderUI = (() => {
             $form.find('#view_3').find('#trading_password_new_user').setVisibility(1);
             if (has_mt5_account) {
                 $form.find('#trading_password_input').setVisibility(0);
-                $form.find('#new_user_cancel_button').on('click', () => {
-                    location.reload();
-                });
                 $form.find('#has_mt5_new_user_btn_submit_new_account').setVisibility(1);
             } else {
                 $form.find('#new_user_btn_submit_new_account').setVisibility(1);

src/javascript/_autogenerated/fr.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)]) }));
     };