Nikita/Cfd flow changes

packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx

@@ -120,6 +120,7 @@ const AccountSwitcher = props => {
             account_type === 'synthetic' ? props.has_malta_account : props.has_maltainvest_account;
 
         if (props.is_eu && !has_required_account) {
+            sessionStorage.setItem('cfd_account_needed', 1);
             closeAccountsDialog();
             props.openAccountNeededModal(
                 account_type === 'synthetic' ? props.standpoint.gaming_company : props.standpoint.financial_company,

packages/core/src/App/Containers/Modals/app-modals.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import MT5AccountNeededModal from 'App/Components/Elements/Modals/mt5-account-needed-modal.jsx';
 import RedirectNoticeModal from 'App/Components/Elements/Modals/RedirectNotice';
 import { connect } from 'Stores/connect';
+import { localize } from '@deriv/translations';
 
 const AccountSignupModal = React.lazy(() =>
     import(/* webpackChunkName: "account-signup-modal" */ '../AccountSignupModal')
@@ -28,10 +28,12 @@ const AppModals = ({
     is_set_residence_modal_visible,
     is_eu,
     is_logged_in,
+    account_needed_modal_props: { target },
+    openRealAccountSignup,
+    closeAccountNeededModal,
 }) => {
     const url_params = new URLSearchParams(useLocation().search);
     const url_action_param = url_params.get('action');
-
     let ComponentToLoad = null;
     switch (url_action_param) {
         case 'redirect_to_login':
@@ -55,7 +57,8 @@ const AppModals = ({
     }
 
     if (is_account_needed_modal_on) {
-        ComponentToLoad = <MT5AccountNeededModal />;
+        openRealAccountSignup(target, localize('DMT5 CFDs'));
+        closeAccountNeededModal();
     }
 
     if (is_reality_check_visible) {
@@ -78,4 +81,7 @@ export default connect(({ client, ui }) => ({
     is_eu: client.is_eu,
     is_logged_in: client.is_logged_in,
     is_reality_check_visible: client.is_reality_check_visible,
+    account_needed_modal_props: ui.account_needed_modal_props,
+    openRealAccountSignup: ui.openRealAccountSignup,
+    closeAccountNeededModal: ui.closeAccountNeededModal,
 }))(AppModals);

packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx

@@ -5,6 +5,7 @@ import { withRouter } from 'react-router-dom';
 import { Modal, DesktopWrapper, MobileDialog, MobileWrapper } from '@deriv/components';
 import { routes, isNavigationFromPlatform } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
+import { CFD_PASSWORD_MODAL_SESSION_STORAGE_STRING } from '@deriv/shared/src/utils/constants-storage/CFD';
 import { connect } from 'Stores/connect';
 import AccountWizard from './account-wizard.jsx';
 import AddCurrency from './add-currency.jsx';
@@ -254,10 +255,14 @@ const RealAccountSignup = ({
     };
 
     const showStatusDialog = curr => {
-        setParams({
-            active_modal_index: modal_pages_indices.status_dialog,
-            currency: curr,
-        });
+        if (sessionStorage.getItem('cfd_account_needed')) {
+            closeModalThenOpenCFD();
+        } else {
+            setParams({
+                active_modal_index: modal_pages_indices.status_dialog,
+                currency: curr,
+            });
+        }
     };
 
     const closeModalthenOpenWelcomeModal = curr => {
@@ -267,6 +272,12 @@ const RealAccountSignup = ({
         });
     };
 
+    const closeModalThenOpenCFD = () => {
+        closeRealAccountSignup();
+        sessionStorage.setItem(CFD_PASSWORD_MODAL_SESSION_STORAGE_STRING, '1');
+        history.push(`${routes.mt5}#real`);
+    };
+
     const closeModalThenOpenCashier = () => {
         replaceCashierMenuOnclick();
         closeRealAccountSignup();
@@ -342,6 +353,7 @@ const RealAccountSignup = ({
             return;
         }
         if (getActiveModalIndex() !== modal_pages_indices.status_dialog) {
+            sessionStorage.removeItem('cfd_account_needed');
             sessionStorage.removeItem('post_real_account_signup');
             localStorage.removeItem('real_account_signup_wizard');
         }
@@ -392,14 +404,8 @@ const RealAccountSignup = ({
 
     // set title and body of the modal
     const { title: Title, body: ModalContent } = modal_content[getActiveModalIndex()];
-    const {
-        account_wizard,
-        add_or_manage_account,
-        finished_set_currency,
-        status_dialog,
-        set_currency,
-        signup_error,
-    } = modal_pages_indices;
+    const { account_wizard, add_or_manage_account, finished_set_currency, status_dialog, set_currency, signup_error } =
+        modal_pages_indices;
 
     const has_close_icon = [account_wizard, add_or_manage_account, set_currency, signup_error].includes(
         getActiveModalIndex()

packages/core/src/Stores/index.js

@@ -1,3 +1,4 @@
+import CFDStore from '@deriv/trader/src/Stores/Modules/CFD/cfd-store';
 import ClientStore from './client-store';
 import CommonStore from './common-store';
 import GTMStore from './gtm-store';
@@ -17,5 +18,6 @@ export default class RootStore {
         this.rudderstack = new RudderStackStore(this);
         this.menu = new MenuStore(this);
         this.pushwoosh = new PushWooshStore(this);
+        this.cfd = new CFDStore(this);
     }
 }

packages/core/src/Stores/ui-store.js

@@ -443,6 +443,10 @@ export default class UIStore extends BaseStore {
             this.resetRealAccountSignupParams();
             this.setRealAccountSignupEnd(true);
         }, 300);
+        if(sessionStorage.getItem('cfd_account_needed')){
+            this.root_store.cfd.createCFDAccount({ type: 'financial', category: 'real' });
+            sessionStorage.removeItem('cfd_account_needed');
+        };
     }
 
     @action.bound

packages/shared/src/utils/constants-storage/CFD.js

@@ -0,0 +1 @@
+export const CFD_PASSWORD_MODAL_SESSION_STORAGE_STRING = 'open_cfd_password_modal';

packages/trader/src/Modules/CFD/Components/cfd-account-card.jsx

@@ -64,9 +64,9 @@ const PasswordBox = ({ platform, onClick }) => (
                 <Text size='xs'>•••••••••••••••</Text>
             </Popover>
         </div>
-        <Button className='cfd-account-card__password-action' tertiary onClick={onClick}>
-            {localize('Change')}
-        </Button>
+        <div className='cfd-account-card__password-action'>
+            <Icon icon='IcEdit' onClick={onClick} size={16}/>
+        </div>
     </div>
 );
 

packages/trader/src/Modules/CFD/Components/cfd-real-account-display.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { localize, Localize } from '@deriv/translations';
 import { DesktopWrapper, MobileWrapper, Carousel } from '@deriv/components';
 import { getAccountTypeFields, getAccountListKey, getCFDAccountKey, CFD_PLATFORMS } from '@deriv/shared';
+import { CFD_PASSWORD_MODAL_SESSION_STORAGE_STRING } from '@deriv/shared/src/utils/constants-storage/CFD';
 import specifications from 'Modules/CFD/Constants/cfd-specifications';
 import { CFDAccountCard } from './cfd-account-card.jsx';
 import { general_messages } from '../Constants/cfd-shared-strings';
@@ -33,6 +34,7 @@ const CFDRealAccountDisplay = ({
     isFinancialStpCardVisible,
     landing_companies,
     onSelectAccount,
+    openRealAccountSignup,
     openAccountTransfer,
     openPasswordModal,
     isAccountOfTypeDisabled,
@@ -58,6 +60,16 @@ const CFDRealAccountDisplay = ({
         platform === CFD_PLATFORMS.MT5;
     const [active_hover, setActiveHover] = React.useState(0);
 
+    const session_storage_open_password_modal = sessionStorage.getItem(CFD_PASSWORD_MODAL_SESSION_STORAGE_STRING);
+
+    React.useEffect(() => {
+        if (session_storage_open_password_modal) {
+            onSelectRealFinancial();
+            sessionStorage.removeItem(CFD_PASSWORD_MODAL_SESSION_STORAGE_STRING);
+            sessionStorage.removeItem('cfd_account_needed');
+        }
+    }, [onSelectRealFinancial, session_storage_open_password_modal]);
+
     const has_required_credentials = React.useMemo(() => {
         const { citizen, tax_identification_number, tax_residence } = account_settings;
 
@@ -101,7 +113,8 @@ const CFDRealAccountDisplay = ({
     };
     const onSelectRealFinancial = () => {
         if (is_eu && !has_maltainvest_account) {
-            openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('real CFDs'));
+            sessionStorage.setItem('cfd_account_needed', 1);
+            openRealAccountSignup('maltainvest', localize('DMT5 CFDs'));
         } else {
             onSelectAccount({ type: 'financial', category: 'real' });
         }

packages/trader/src/Modules/CFD/Containers/cfd-dashboard.jsx

@@ -241,6 +241,7 @@ class CFDDashboard extends React.Component {
             NotificationMessages,
             platform,
             openAccountNeededModal,
+            openRealAccountSignup,
             residence,
             residence_list,
             standpoint,
@@ -351,6 +352,7 @@ class CFDDashboard extends React.Component {
                                                               !!dxtrade_accounts_list_error
                                                     }
                                                     openAccountNeededModal={openAccountNeededModal}
+                                                    openRealAccountSignup={openRealAccountSignup}
                                                     current_list={current_list}
                                                     account_status={account_status}
                                                     has_cfd_account={has_cfd_account}
@@ -597,6 +599,7 @@ export default withRouter(
         is_fully_authenticated: client.is_fully_authenticated,
         openPasswordModal: modules.cfd.enableCFDPasswordModal,
         openAccountNeededModal: ui.openAccountNeededModal,
+        openRealAccountSignup: ui.openRealAccountSignup,
         is_loading: client.is_populating_mt5_account_list,
         residence: client.residence,
         residence_list: client.residence_list,

packages/trader/src/sass/app/modules/mt5/cfd-dashboard.scss

@@ -720,22 +720,23 @@
     }
     &__password {
         &-box {
-            display: flex;
-            align-items: center;
-        }
-        &-text {
+            display: grid;
+            grid-template-columns: 1fr 2.4rem;
             border: 1px solid var(--border-normal);
             border-radius: $BORDER_RADIUS;
+        }
+        &-text {
             padding: 0.4rem;
             font-family: Courier, monospace;
             overflow: hidden;
             margin-right: 0.4rem;
-            flex: 1;
         }
         &-action {
-            padding: 0;
-            height: auto;
-
+            display: grid;
+            justify-content: center;
+            align-content: center;
+            border-left: 1px solid var(--border-normal);
+            cursor: pointer;
             .dc-text {
                 font-size: var(--text-size-xxxs);
             }