ali-hosseini-deriv · ali-hosseini-deriv · Nov 2, 2021 · Oct 25, 2021 · Oct 25, 2021 · Oct 26, 2021
diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -56,6 +56,7 @@ module.exports = function (env, argv) {
             'text-container': 'Components/text-container',
             'terms-of-use': 'Components/terms-of-use',
             'terms-of-use-config': 'Configs/terms-of-use-config',
+            'populate-verification-status': 'Sections/Verification/Helpers/verification',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

diff --git a/packages/account/src/Sections/Verification/Helpers/verification.js b/packages/account/src/Sections/Verification/Helpers/verification.js
@@ -1,19 +1,25 @@
-export const populateVerificationStatus = account_status => {
-    const { attempts, document, identity, needs_verification } = account_status.authentication;
+const populateVerificationStatus = account_status => {
+    const { attempts, document, identity, needs_verification } = {
+        ...account_status.authentication,
+        attempts: account_status.authentication.attempts || {},
+        needs_verification: account_status.authentication.needs_verification || {},
+    };
     const has_poa = !(document && document.status === 'none');
     const has_poi = !(identity && identity.status === 'none');
     const needs_poa = needs_verification.length && needs_verification.includes('document');
     const needs_poi = needs_verification.length && needs_verification.includes('identity');
 
-    const allow_document_upload = account_status.status.some(status => status === 'allow_document_upload');
-    const allow_poi_resubmission = account_status.status.some(status => status === 'allow_poi_resubmission');
-    const is_idv_disallowed = account_status.status.some(status => status === 'idv_disallowed');
+    const allow_document_upload = account_status?.status?.some(status => status === 'allow_document_upload');
+    const allow_poi_resubmission = account_status?.status?.some(status => status === 'allow_poi_resubmission');
+    const is_idv_disallowed = account_status?.status?.some(status => status === 'idv_disallowed');
 
-    const identity_status = identity.status;
+    const identity_status = identity?.status;
 
-    const { idv, onfido, manual } = identity.services;
-    const identity_last_attempt = attempts.latest;
-    const has_attempted_idv = !!(attempts.history.length && attempts.history.find(h => h.service === 'idv'));
+    const idv = identity?.services?.idv;
+    const onfido = identity?.services?.onfido;
+    const manual = identity?.services?.manual;
+    const identity_last_attempt = attempts?.latest;
+    const has_attempted_idv = !!(attempts?.history?.length && attempts?.history?.find(h => h.service === 'idv'));
 
     return {
         allow_document_upload,
@@ -32,3 +38,4 @@ export const populateVerificationStatus = account_status => {
         onfido,
     };
 };
+export default populateVerificationStatus;
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx
@@ -15,7 +15,7 @@ import POISubmission from './proof-of-identity-submission.jsx';
 import Onfido from './onfido.jsx';
 import IdvContainer from './idv.jsx';
 import { identity_status_codes, service_code } from './proof-of-identity-utils';
-import { populateVerificationStatus } from '../Helpers/verification';
+import populateVerificationStatus from '../Helpers/verification';
 
 const ProofOfIdentityContainer = ({
     account_status,

diff --git a/packages/core/src/App/Components/Layout/Header/account-actions.jsx b/packages/core/src/App/Components/Layout/Header/account-actions.jsx
@@ -33,6 +33,10 @@ const AccountActions = React.memo(
         openRealAccountSignup,
         toggleAccountsDialog,
         toggleNotifications,
+        has_any_real_account,
+        has_poa,
+        has_poi,
+        onClickUpgrade,
     }) => {
         const { is_dashboard } = React.useContext(PlatformContext);
 
@@ -110,7 +114,16 @@ const AccountActions = React.memo(
                                 />
                             </div>
                         )}
-                        {currency && (
+                        {(!has_poa || !has_poi) && !has_any_real_account && (
+                            <Button
+                                className='acc-info__button'
+                                has_effect
+                                text={localize('Upgrade')}
+                                onClick={onClickUpgrade}
+                                primary
+                            />
+                        )}
+                        {currency && has_any_real_account && (
                             <Button
                                 className='acc-info__button'
                                 has_effect
@@ -151,6 +164,10 @@ AccountActions.propTypes = {
     openRealAccountSignup: PropTypes.func,
     toggleAccountsDialog: PropTypes.any,
     toggleNotifications: PropTypes.any,
+    has_poa: PropTypes.bool,
+    has_poi: PropTypes.bool,
+    onClickUpgrade: PropTypes.func,
+    has_any_real_account: PropTypes.bool,
 };
 
 export { AccountActions };
diff --git a/packages/core/src/App/Containers/Layout/header/default-header.jsx b/packages/core/src/App/Containers/Layout/header/default-header.jsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
+import { populateVerificationStatus } from '@deriv/account';
 import { DesktopWrapper, MobileWrapper } from '@deriv/components';
 import { routes, isMobile, getDecimalPlaces, getPlatformInformation } from '@deriv/shared';
 import { AccountActions, MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
@@ -57,6 +58,7 @@ const DefaultHeader = ({
     setDarkMode,
     toggleAccountsDialog,
     toggleNotifications,
+    has_any_real_account,
 }) => {
     const toggle_menu_drawer_ref = React.useRef(null);
     const addUpdateNotification = () => addNotificationMessage(clientNotifications().new_version_available);
@@ -71,6 +73,13 @@ const DefaultHeader = ({
     }, [removeUpdateNotification]);
 
     const onClickDeposit = () => history.push(routes.cashier_deposit);
+
+    const verification_status = populateVerificationStatus(account_status);
+    const { has_poa, has_poi } = verification_status;
+    const onClickUpgrade = () => {
+        // TODO: here we should open POA and POI modal
+    };
+
     const filterPlatformsForClients = payload =>
         payload.filter(config => {
             if (config.link_to === routes.mt5) {
@@ -79,10 +88,7 @@ const DefaultHeader = ({
             if (config.link_to === routes.dxtrade) {
                 return is_dxtrade_allowed;
             }
-            if ((is_mf || is_options_blocked) && config.href === routes.smarttrader) {
-                return false;
-            }
-            return true;
+            return !((is_mf || is_options_blocked) && config.href === routes.smarttrader);
         });
     return (
         <header
@@ -168,6 +174,10 @@ const DefaultHeader = ({
                             toggleAccountsDialog={toggleAccountsDialog}
                             toggleNotifications={toggleNotifications}
                             openRealAccountSignup={openRealAccountSignup}
+                            has_any_real_account={has_any_real_account}
+                            has_poa={has_poa}
+                            has_poi={has_poi}
+                            onClickUpgrade={onClickUpgrade}
                         />
                     </div>
                 </div>
@@ -220,6 +230,7 @@ DefaultHeader.propTypes = {
 export default connect(({ client, common, ui, menu, modules }) => ({
     acc_switcher_disabled_message: ui.account_switcher_disabled_message,
     account_status: client.account_status,
+    has_any_real_account: client.has_any_real_account,
     account_type: client.account_type,
     should_allow_authentication: client.should_allow_authentication,
     addNotificationMessage: ui.addNotificationMessage,

diff --git a/packages/core/src/App/Containers/RealAccountSignup/status-dialog-container.jsx b/packages/core/src/App/Containers/RealAccountSignup/status-dialog-container.jsx
@@ -9,6 +9,8 @@ import { EXPERIAN, getExperianResult } from './helpers/constants';
 import { DialogHeading } from './helpers/dialog-heading.jsx';
 import { DialogMessage } from './helpers/dialog-message.jsx';
 import { DialogButtons } from './helpers/dialog-buttons.jsx';
+import { populateVerificationStatus } from '@deriv/account';
+import { clientNotifications } from '../../../Stores/Helpers/client-notifications';
 
 const MainIcon = ({ currency }) => <Icon icon={`IcCurrency-${currency.toLowerCase()}`} size={120} />;
 const Checkmark = ({ className }) => <Icon className={className} icon='IcCheckmarkCircle' color='green' size={24} />;
@@ -32,6 +34,8 @@ const StatusDialogContainer = ({
     is_isle_of_man_residence,
     landing_company_shortcode,
     switchToVirtual,
+    account_status,
+    addNotificationMessage,
 }) => {
     const closeModalAndOpenCashier = () => {
         closeModal();
@@ -47,6 +51,16 @@ const StatusDialogContainer = ({
         closeModal();
         history.push(routes.proof_of_address);
     };
+    const closeModalAndAddProofsNotifications = () => {
+        const { has_poa, has_poi } = populateVerificationStatus(account_status);
+        if (!has_poi) {
+            addNotificationMessage(clientNotifications().verify_poi);
+        }
+        if (!has_poa) {
+            addNotificationMessage(clientNotifications().verify_poa);
+        }
+        closeModal();
+    };
 
     /**
      * Get the status for the current account
@@ -92,7 +106,7 @@ const StatusDialogContainer = ({
                 />
             </div>
             <DialogButtons
-                closeModal={closeModal}
+                closeModal={closeModalAndAddProofsNotifications}
                 closeModalAndOpenPOI={closeModalAndOpenPOI}
                 closeModalAndOpenPOA={closeModalAndOpenPOA}
                 closeModalAndOpenCashier={closeModalAndOpenCashier}
@@ -118,7 +132,9 @@ StatusDialogContainer.propTypes = {
     is_belgium_residence: PropTypes.bool,
 };
 
-export default connect(({ client }) => ({
+export default connect(({ client, ui }) => ({
+    addNotificationMessage: ui.addNotificationMessage,
+    account_status: client.account_status,
     country_standpoint: client.country_standpoint,
     landing_company_shortcode: client.landing_company_shortcode,
     is_fully_authenticated: client.is_fully_authenticated,

diff --git a/packages/core/src/Stores/Helpers/client-notifications.js b/packages/core/src/Stores/Helpers/client-notifications.js
@@ -16,6 +16,7 @@ import { StaticUrl } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { BinaryLink } from 'App/Components/Routes';
 import { WS } from 'Services';
+import { populateVerificationStatus } from '@deriv/account';
 
 // TODO: Update links to app_2 links when components are done.
 /* eslint-disable react/jsx-no-target-blank */
@@ -129,17 +130,25 @@ export const clientNotifications = (ui = {}, client = {}) => {
                 type: 'warning',
             };
         },
-        authenticate: {
-            key: 'authenticate',
-            header: localize('Your account has not been verified'),
-            message: localize(
-                'Please submit your proof of identity and proof of address to verify your account in your account settings to access the cashier.'
-            ),
+        verify_poi: {
+            key: 'verify_poi',
+            header: localize('Please verify your identity'),
+            message: localize('To continue trading with us, please confirm who you are.'),
             action: {
                 route: routes.proof_of_identity,
-                text: localize('Go to my account settings'),
+                text: localize('Verify identity'),
             },
-            type: 'warning',
+            type: 'danger',
+        },
+        verify_poa: {
+            key: 'verify_poa',
+            header: localize('Please verify your address'),
+            message: localize('To continue trading with us, please confirm where you live.'),
+            action: {
+                route: routes.proof_of_address,
+                text: localize('Verify address'),
+            },
+            type: 'danger',
         },
         withdrawal_locked_review: {
             key: 'withdrawal_locked_review',
@@ -524,13 +533,8 @@ const checkAccountStatus = (
         cashier_validation,
     } = account_status;
 
-    const {
-        cashier_locked,
-        withdrawal_locked,
-        deposit_locked,
-        mt5_withdrawal_locked,
-        document_needs_action,
-    } = getStatusValidations(status);
+    const { cashier_locked, withdrawal_locked, deposit_locked, mt5_withdrawal_locked, document_needs_action } =
+        getStatusValidations(status);
 
     const {
         system_maintenance,
@@ -573,7 +577,13 @@ const checkAccountStatus = (
         } else if (ASK_CURRENCY) {
             addNotificationMessage(clientNotifications(ui_store).currency);
         } else if (ASK_AUTHENTICATE) {
-            addNotificationMessage(clientNotifications().authenticate);
+            const { has_poi, has_poa } = populateVerificationStatus(account_status);
+            if (!has_poi) {
+                addNotificationMessage(clientNotifications().verify_poi);
+            }
+            if (!has_poa) {
+                addNotificationMessage(clientNotifications().verify_poa);
+            }
         } else if (isAccountOfType('financial') && ASK_FINANCIAL_RISK_APPROVAL) {
             addNotificationMessage(clientNotifications().ask_financial_risk_approval);
         } else if (FinancialAssessmentRequired) {