Incorporated dialog and notification

packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx

@@ -197,6 +197,7 @@ const FinancialAssessment = ({
     const [is_btn_loading, setIsBtnLoading] = React.useState(false);
     const [is_submit_success, setIsSubmitSuccess] = React.useState(false);
     const [initial_form_values, setInitialFormValues] = React.useState({});
+
     const {
         income_source,
         employment_status,
@@ -229,7 +230,6 @@ const FinancialAssessment = ({
                         setApiInitialLoadError(data.error.message);
                         return;
                     }
-
                     setInitialFormValues(data.get_financial_assessment);
                     setIsLoading(false);
                 });

packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Withdrawal from '../withdrawal';
 import { Router } from 'react-router';
 import { createBrowserHistory } from 'history';
-import { isDesktop } from '@deriv/shared';
+import { isDesktop, routes } from '@deriv/shared';
 
 jest.mock('Stores/connect.js', () => ({
     __esModule: true,
@@ -32,6 +32,7 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
 }));
 
 describe('<Withdrawal />', () => {
+    let modal_root_el;
     const props = {
         check10kLimit: jest.fn(),
         recentTransactionOnMount: jest.fn(),
@@ -54,8 +55,19 @@ describe('<Withdrawal />', () => {
         is_virtual: false,
         verification_code: '',
         verify_error: {},
+        is_risk_client: false,
     };
 
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
     it('should render <CashierLocked /> component', () => {
         const history = createBrowserHistory();
 
@@ -248,4 +260,31 @@ describe('<Withdrawal />', () => {
 
         expect(props.setSideNotes).toHaveBeenCalledTimes(1);
     });
+
+    it('should show the Withdrawal block dialog when the user is categorized as a high risk client', () => {
+        const history = createBrowserHistory();
+
+        render(
+            <Router history={history}>
+                <Withdrawal {...props} is_risk_client={true} />
+            </Router>
+        );
+
+        expect(screen.getByRole('button', { name: /start assessment/i })).toBeInTheDocument();
+    });
+
+    it('should redirect user to financial assessment page on button click', () => {
+        const history = createBrowserHistory();
+
+        render(
+            <Router history={history}>
+                <Withdrawal {...props} is_risk_client={true} />
+            </Router>
+        );
+
+        const el_start_assessment_btn = screen.getByRole('button', { name: /start assessment/i });
+
+        fireEvent.click(el_start_assessment_btn);
+        expect(history.location.pathname).toBe(routes.financial_assessment);
+    });
 });

packages/cashier/src/pages/withdrawal/disable-withdrawal-modal.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, Modal, Text } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
+
+const DisableWithdrawalModal = ({ is_risk_client, onClick }) => {
+    return (
+        <Modal is_open={is_risk_client} small={isMobile()} className='center-risk-modal'>
+            <Modal.Body>
+                <Text as='p' size='s' align='center'>
+                    <Localize i18n_default_text='You can only make deposits at the moment. To enable withdrawals, please complete your financial assessment.' />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button type='button' large text={localize('Start assessment')} primary onClick={onClick} />
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default DisableWithdrawalModal;

packages/cashier/src/pages/withdrawal/withdrawal.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import { isCryptocurrency, isDesktop } from '@deriv/shared';
+import { isCryptocurrency, isDesktop, routes } from '@deriv/shared';
 import { connect } from 'Stores/connect';
 import CryptoWithdrawForm from './crypto-withdraw-form';
 import CryptoWithdrawReceipt from './crypto-withdraw-receipt';
@@ -17,6 +17,8 @@ import SideNote from 'Components/side-note';
 import USDTSideNote from 'Components/usdt-side-note';
 import CryptoTransactionsHistory from 'Components/crypto-transactions-history';
 import RecentTransaction from 'Components/recent-transaction';
+import DisableWithdrawalModal from './disable-withdrawal-modal';
+import { useHistory } from 'react-router-dom';
 
 const WithdrawalSideNote = ({ is_mobile, currency }) => {
     const notes = [
@@ -65,7 +67,12 @@ const Withdrawal = ({
     verification_code,
     willMountWithdraw,
     recentTransactionOnMount,
+    is_risk_client,
 }) => {
+    const [is_withdrawal_blocked, setIsWithdrawalBlocked] = React.useState(false);
+
+    const history = useHistory();
+
     React.useEffect(() => {
         if (!is_crypto_transactions_visible) {
             recentTransactionOnMount();
@@ -107,6 +114,10 @@ const Withdrawal = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currency, tab_index, crypto_transactions]);
 
+    React.useEffect(() => {
+        setIsWithdrawalBlocked(is_risk_client);
+    }, []);
+
     // TODO: Fix if conditions, use else if and combine conditions when possible
     if (is_system_maintenance) {
         if (is_cashier_locked || (is_withdrawal_locked && current_currency_type === 'crypto')) {
@@ -125,6 +136,19 @@ const Withdrawal = ({
     if (is_withdrawal_locked || is_10k_withdrawal_limit_reached) {
         return <WithdrawalLocked />;
     }
+
+    if (is_withdrawal_blocked) {
+        return (
+            <DisableWithdrawalModal
+                is_risk_client={is_withdrawal_blocked}
+                onClick={() => {
+                    setIsWithdrawalBlocked(false);
+                    history.push(routes.financial_assessment);
+                }}
+            />
+        );
+    }
+
     if (!+balance) {
         return (
             <>
@@ -178,6 +202,7 @@ Withdrawal.propTypes = {
     is_cashier_locked: PropTypes.bool,
     is_crypto: PropTypes.bool,
     is_crypto_transactions_visible: PropTypes.bool,
+    is_risk_client: PropTypes.bool,
     is_switching: PropTypes.bool,
     is_system_maintenance: PropTypes.bool,
     is_virtual: PropTypes.bool,
@@ -206,6 +231,7 @@ export default connect(({ client, modules }) => ({
     is_cashier_locked: modules.cashier.general_store.is_cashier_locked,
     is_crypto: modules.cashier.general_store.is_crypto,
     is_crypto_transactions_visible: modules.cashier.transaction_history.is_crypto_transactions_visible,
+    is_risk_client: client.is_risk_client,
     is_switching: client.is_switching,
     is_system_maintenance: modules.cashier.general_store.is_system_maintenance,
     is_virtual: client.is_virtual,

packages/core/src/App/Containers/app-notification-messages.jsx

@@ -42,10 +42,10 @@ const NotificationsContent = ({
     return (
         <div className='notification-messages' style={style}>
             <TransitionGroup component='div'>
-                {notifications.map((notification, idx) => (
+                {notifications.map(notification => (
                     <CSSTransition
                         appear={!is_notification_loaded}
-                        key={idx}
+                        key={notification.key}
                         in={!!notification.header}
                         timeout={150}
                         classNames={{

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

@@ -441,6 +441,15 @@ export default class ClientStore extends BaseStore {
         );
     }
 
+    @computed
+    get is_risk_client() {
+        return (
+            this.is_logged_in &&
+            this.is_withdrawal_lock &&
+            this.account_status?.status?.includes('financial_assessment_not_complete')
+        );
+    }
+
     @computed
     get is_authentication_needed() {
         return !this.is_fully_authenticated && !!this.account_status?.authentication?.needs_verification?.length;

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

@@ -189,6 +189,7 @@ export default class NotificationStore extends BaseStore {
             website_status,
             has_enabled_two_fa,
             is_poi_dob_mismatch,
+            is_risk_client,
         } = this.root_store.client;
         const { is_p2p_visible } = this.root_store.modules.cashier.general_store;
         const { is_10k_withdrawal_limit_reached } = this.root_store.modules.cashier.withdraw;
@@ -227,6 +228,12 @@ export default class NotificationStore extends BaseStore {
                 this.removeNotificationByKey({ key: this.client_notifications.two_f_a.key });
             }
 
+            if (is_risk_client) {
+                this.addNotificationMessage(this.client_notifications.risk_client);
+            } else {
+                this.removeNotificationByKey({ key: this.client_notifications.risk_client });
+            }
+
             if (is_poi_dob_mismatch) {
                 this.addNotificationMessage(this.client_notifications.poi_dob_mismatch);
             } else {
@@ -246,6 +253,7 @@ export default class NotificationStore extends BaseStore {
             ) {
                 this.addNotificationMessage(this.client_notifications.close_mx_mlt_account);
             }
+
             const client = accounts[loginid];
             if (client && !client.is_virtual) {
                 if (isEmptyObject(account_status)) return;
@@ -1038,7 +1046,20 @@ export default class NotificationStore extends BaseStore {
                     text: localize('Personal details'),
                 },
             },
+            risk_client: {
+                key: 'risk_client',
+                header: localize('You can only make deposits.'),
+                message: (
+                    <Localize i18n_default_text='You can only make deposits at the moment. To enable withdrawals and trading, please complete your financial assessment.' />
+                ),
+                type: 'warning',
+                action: {
+                    route: routes.financial_assessment,
+                    text: localize('Start assessment'),
+                },
+            },
         };
+
         this.client_notifications = notifications;
     }