Aizad/ Added Goto Deriv Popup for account creation

src/javascript/app/base/header.js

@@ -19,6 +19,8 @@ const createElement            = require('../../_common/utility').createElement;
 const findParent               = require('../../_common/utility').findParent;
 const template                 = require('../../_common/utility').template;
 const Currency                 = require('../common/currency');
+const Dialog                   = require('../common/attach_dom/dialog');
+const getLanguage              = require('../../_common/language').get;
 
 const Header = (() => {
     const onLoad = () => {
@@ -147,20 +149,21 @@ const Header = (() => {
                 return;
             }
 
-            const showUpgrade = (url, params, localized_text) => {
+            const showUpgrade = (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, params));
+                        ele.html(createElement('span', { text: localized_text })).setVisibility(1);
+                        ele.addEventListener('click', showGoToDerivAlertPopup);
                     }, '', el);
                 });
             };
 
-            const showUpgradeBtn = (url, params, localized_text) => {
+            const showUpgradeBtn = (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, params));
+                        ele.html(createElement('span', { text: localized_text })).setVisibility(1).addEventListener('click', showGoToDerivAlertPopup);
                     }, '', el);
                 });
             };
@@ -195,11 +198,8 @@ const Header = (() => {
                 });
 
                 if (show_upgrade_msg) {
-                    const upgrade_url = upgrade_info.can_upgrade_to.length > 1
-                        ? 'user/accounts'
-                        : '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);
+                    showUpgrade(upgrade_link_txt);
+                    showUpgradeBtn(upgrade_btn_txt);
                 } else {
                     applyToAllElements(upgrade_msg, (el) => {
                         applyToAllElements('a', (ele) => {
@@ -212,11 +212,8 @@ const Header = (() => {
                 }
             } else if (show_upgrade_msg) {
                 getElementById('virtual-wrapper').setVisibility(0);
-                const upgrade_url = upgrade_info.can_upgrade_to.length > 1
-                    ? 'user/accounts'
-                    : '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);
+                showUpgrade(upgrade_link_txt);
+                showUpgradeBtn(upgrade_btn_txt);
 
                 if (/new_account/.test(window.location.href)) {
                     showHidePulser(0);
@@ -228,11 +225,25 @@ const Header = (() => {
         });
     };
 
+    const showGoToDerivAlertPopup = () => {
+        const url_on_confirm = `https://app.deriv.com/?lang=${getLanguage()}`;
+        Dialog.confirm({
+            id               : 'go-to-deriv-popup',
+            localized_title  : localize('Go to Deriv to add an account'),
+            localized_message: localize('You\'ll be able to log in to Deriv using your Binary.com credentials.'),
+            cancel_text      : localize('Cancel'),
+            ok_text          : localize('Go to Deriv'),
+            onConfirm        : () => { window.location.href = url_on_confirm; },
+        });
+    };
+
     const showHidePulser = (should_show) => { $('.upgrademessage').children('a').setVisibility(should_show); };
 
     const showHideNewAccount = (upgrade_info) => {
-        if (upgrade_info.can_upgrade || upgrade_info.can_open_multi) {
+        const user_accounts = getElementById('user_accounts');
+        if ((upgrade_info.can_upgrade || upgrade_info.can_open_multi) && user_accounts) {
             changeAccountsText(1, localize('Create Account'));
+            user_accounts.addEventListener('click', () => showGoToDerivAlertPopup());
         } else {
             changeAccountsText(0, localize('Accounts List'));
         }
@@ -517,6 +528,7 @@ const Header = (() => {
         loginOnClick,
         switchLoginid,
         loginIDOnClick,
+        showGoToDerivAlertPopup,
     };
 })();
 

src/javascript/app/pages/cashier/cashier.js

@@ -339,10 +339,12 @@ const Cashier = (() => {
 
                 } else {
                     el_paymentmethod_deposit.on('click', () => {
-                        el_paymentmethod_deposit.attr('href', Url.urlFor('/new_account/real_account'));
+                        Header.showGoToDerivAlertPopup();
+                        return false;
                     });
                     el_paymentmethod_withdraw.on('click', () => {
-                        el_paymentmethod_withdraw.attr('href', Url.urlFor('/new_account/real_account'));
+                        Header.showGoToDerivAlertPopup();
+                        return false;
                     });
                 }
             });

src/javascript/app/pages/user/accounts.js

@@ -3,7 +3,7 @@ const SetCurrency          = require('./set_currency');
 const BinaryPjax           = require('../../base/binary_pjax');
 const Client               = require('../../base/client');
 const BinarySocket         = require('../../base/socket');
-const AccountOpening       = require('../../common/account_opening');
+const Header               = require('../../base/header');
 const showPopup            = require('../../common/attach_dom/popup');
 const Currency             = require('../../common/currency');
 const localize             = require('../../../_common/localize').localize;
@@ -129,17 +129,12 @@ const Accounts = (() => {
                     })))
                     .append($('<td/>', { text: getAvailableMarkets(account), datath: table_headers.available_markets }))
                     .append($('<td/>')
-                        .html($(
-                            '<a/>',
-                            {
-                                class: 'button',
-                                href : AccountOpening.getSinupPageLink(
-                                    upgrade_info,
-                                    upgrade_info.can_upgrade_to[index]
-                                ),
-                            },
-                        )
-                            .html($('<span/>', { text: localize('Create account'), class: 'padding-x-30' })))));
+                        .html($('<button/>', {
+                            id   : 'change_currency_btn',
+                            class: 'button no-margin',
+                            type : 'button',
+                            text : localize('Create account'),
+                        }).on('click', () => Header.showGoToDerivAlertPopup()))));
         });
     };
 

src/javascript/app/pages/user/set_currency.js

@@ -1,4 +1,3 @@
-const moment             = require('moment');
 const setIsForNewAccount = require('./account/settings/personal_details').setIsForNewAccount;
 const GetCurrency        = require('./get_currency');
 const BinaryPjax         = require('../../base/binary_pjax');
@@ -330,32 +329,27 @@ const SetCurrency = (() => {
         });
     };
 
-    const onConfirm = ($currency_list, $error, should_create_account, redirect_to, all_fiat, all_crypto) => {
+    const onConfirm = ($currency_list, $error, should_create_account, redirect_to) => {
         removeError($error);
         const $selected_currency = $currency_list.find('.selected');
-        const has_fiat_account    = Client.hasCurrencyType('fiat');
 
         if ($selected_currency.length) {
             const selected_currency = $selected_currency.attr('id');
             let request = {};
 
             if (popup_action === 'switch_account') {
                 if (selected_currency === 'NEW'){
-                    localStorage.setItem('popup_action', 'multi_account');
-                    if (!all_fiat && !all_crypto && has_fiat_account) {
-                        onLoad(null, false, false, true);
-                    } else {
-                        onLoad(null, false, all_fiat, all_crypto);
-                    }
+                    cleanupPopup();
+                    Header.showGoToDerivAlertPopup();
                 } else {
                     cleanupPopup();
                     Header.switchLoginid(getLoginid(selected_currency), redirect_to, true);
                 }
-
                 return;
             }
             if (should_create_account) {
-                request = populateReqMultiAccount(selected_currency);
+                cleanupPopup();
+                Header.showGoToDerivAlertPopup();
             } else {
                 request = { set_account_currency: selected_currency };
             }
@@ -478,39 +472,6 @@ const SetCurrency = (() => {
         }
     };
 
-    const populateReqMultiAccount = (selected_currency) => {
-        const get_settings = State.getResponse('get_settings');
-
-        const request = {
-            new_account_real      : 1,
-            currency              : selected_currency,
-            date_of_birth         : moment.utc(+get_settings.date_of_birth * 1000).format('YYYY-MM-DD'),
-            salutation            : get_settings.salutation,
-            first_name            : get_settings.first_name,
-            last_name             : get_settings.last_name,
-            address_line_1        : get_settings.address_line_1,
-            address_line_2        : get_settings.address_line_2,
-            address_city          : get_settings.address_city,
-            address_state         : get_settings.address_state,
-            address_postcode      : get_settings.address_postcode,
-            phone                 : get_settings.phone,
-            account_opening_reason: get_settings.account_opening_reason,
-            citizen               : get_settings.citizen,
-            place_of_birth        : get_settings.place_of_birth,
-            residence             : Client.get('residence'),
-            ...(get_settings.tax_identification_number && {
-                tax_identification_number: get_settings.tax_identification_number,
-            }),
-            ...(get_settings.tax_residence && {
-                tax_residence: get_settings.tax_residence,
-            }),
-        };
-        Object.keys(request).forEach(key => {
-            if (!request[key] || request[key] === '') delete request[key];
-        });
-        return request;
-    };
-
     const cleanupPopup = () => {
         localStorage.removeItem('popup_action');
         $('.lightbox').remove();

src/sass/_common/header.scss

@@ -22,6 +22,7 @@ body #topbar {
         color: $COLOR_WHITE;
         white-space: nowrap;
         text-decoration: none;
+        cursor: pointer;
     }
     #select_language {
         top: -3px;