Shaheer/wall 1229 (#9240)

* feat: ✨ adds financial assessment notification

* refactor: 🎨 sorts the object block

* feat: ✨ displays financial assessment notification on trigger from backend

* chore: 🚑 resolves merge conflict with master

* test: 🧪 adds test case for app-notification

* test: 🧪 adds test cases for notification

packages/core/src/App/Components/Elements/NotificationMessage/__tests__/notification.spec.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Notification from '../notification.jsx';
 
+jest.mock('../../../Routes', () => ({
+    BinaryLink: 'mockedBinaryLink',
+}));
+
 describe('Notification component', () => {
     it('should render the NotificationBanner component when "data.type" is "news"', () => {
         render(<Notification data={{ type: 'news' }} />);
@@ -38,4 +42,22 @@ describe('Notification component', () => {
         const element = screen.getByTestId('dt_default_component');
         expect(element).toBeInTheDocument();
     });
+
+    it('should render the "notify_financial_assessment" notification', () => {
+        const mock_props = {
+            action: {
+                route: '/account/financial-assessment',
+                text: 'Start now',
+            },
+            header: 'Pending action required',
+            key: 'notify_financial_assessment',
+            message: 'Please complete your financial assessment.',
+            should_show_again: true,
+            type: 'warning',
+        };
+        render(<Notification data={mock_props} />);
+        expect(screen.getByText('Pending action required')).toBeInTheDocument();
+        expect(screen.getByText('Please complete your financial assessment.')).toBeInTheDocument();
+        expect(screen.getByText('Start now')).toBeInTheDocument();
+    });
 });

packages/core/src/App/Containers/__tests__/app-notification-messages.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AppNotificationMessages from '../app-notification-messages';
+
+jest.mock('Stores/connect', () => ({
+    __esModule: true,
+    default: 'mockedDefaultExport',
+    connect:
+        () =>
+        <T,>(Component: T) =>
+            Component,
+}));
+
+jest.mock('react-router-dom', () => ({
+    useLocation: jest.fn(() => ({
+        pathname: '/appstore/traders-hub',
+    })),
+}));
+
+jest.mock('react-transition-group', () => ({
+    TransitionGroup: jest.fn(({ children }) => <div>{children}</div>),
+    CSSTransition: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+jest.mock('../../Components/Elements/NotificationMessage', () => jest.fn(() => 'mockedNotification'));
+
+describe('AppNotificationMessages', () => {
+    it('should render the component', () => {
+        const mock_props = {
+            marked_notifications: [],
+            notification_messages: [
+                {
+                    action: {
+                        route: '/account/financial-assessment',
+                        text: 'Start now',
+                    },
+                    header: 'Pending action required',
+                    key: 'notify_financial_assessment',
+                    message: 'Please complete your financial assessment.',
+                    should_show_again: true,
+                    type: 'warning',
+                },
+            ],
+            landing_company_shortcode: 'svg',
+            has_iom_account: false,
+            has_malta_account: false,
+            is_logged_in: true,
+            should_show_popups: true,
+        };
+        render(<AppNotificationMessages {...mock_props} />);
+        expect(screen.getByText('mockedNotification')).toBeInTheDocument();
+    });
+});

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

@@ -123,6 +123,7 @@ const AppNotificationMessages = ({
                   'identity',
                   'install_pwa',
                   'need_fa',
+                  'notify_financial_assessment',
                   'poi_name_mismatch',
                   'poa_address_mismatch_failure',
                   'poa_address_mismatch_success',

packages/core/src/Stores/Helpers/client-notifications.js

@@ -71,6 +71,7 @@ export const priority_toast_messages = [
     'need_fa',
     'p2p_daily_limit_increase',
     'authenticate',
+    'notify_financial_assessment',
     'mt5_notification',
     ...maintenance_notifications,
 ];

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

@@ -260,6 +260,7 @@ export default class ClientStore extends BaseStore {
             default_currency: computed,
             should_allow_authentication: computed,
             is_financial_assessment_incomplete: computed,
+            is_financial_assessment_needed: computed,
             is_authentication_needed: computed,
             is_identity_verification_needed: computed,
             real_account_creation_unlock_date: computed,
@@ -716,6 +717,10 @@ export default class ClientStore extends BaseStore {
         return this.account_status?.status?.includes('financial_assessment_not_complete');
     }
 
+    get is_financial_assessment_needed() {
+        return this.account_status?.status?.includes('financial_assessment_notification');
+    }
+
     get is_authentication_needed() {
         return !this.is_fully_authenticated && !!this.account_status?.authentication?.needs_verification?.length;
     }

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

@@ -292,6 +292,7 @@ export default class NotificationStore extends BaseStore {
             has_enabled_two_fa,
             has_changed_two_fa,
             is_poi_dob_mismatch,
+            is_financial_assessment_needed,
             is_financial_information_incomplete,
             has_restricted_mt5_account,
             has_mt5_account_with_rejected_poa,
@@ -376,6 +377,12 @@ export default class NotificationStore extends BaseStore {
                 this.addNotificationMessage(this.client_notifications.close_mx_mlt_account);
             }
 
+            if (is_financial_assessment_needed) {
+                this.addNotificationMessage(this.client_notifications.notify_financial_assessment);
+            } else {
+                this.removeNotificationByKey({ key: this.client_notifications.notify_financial_assessment.key });
+            }
+
             // Acuity notification is available for both Demo and Real desktop clients
             this.addNotificationMessage(this.client_notifications.acuity);
             if (!has_acuity_mt5_download && getPathname() === platform_name.DMT5) {
@@ -1081,6 +1088,17 @@ export default class NotificationStore extends BaseStore {
                 },
                 type: 'warning',
             },
+            notify_financial_assessment: {
+                action: {
+                    route: routes.financial_assessment,
+                    text: localize('Start now'),
+                },
+                header: localize('Pending action required'),
+                key: 'notify_financial_assessment',
+                message: localize('Please complete your financial assessment.'),
+                should_show_again: true,
+                type: 'warning',
+            },
             password_changed: {
                 key: 'password_changed',
                 header: localize('Password updated.'),

packages/stores/src/mockStore.ts

@@ -113,6 +113,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_eu_country: false,
             has_residence: false,
             is_financial_account: false,
+            is_financial_assessment_needed: false,
             is_financial_information_incomplete: false,
             is_low_risk: false,
             is_identity_verification_needed: false,

packages/stores/types.ts

@@ -276,6 +276,7 @@ type TClientStore = {
     has_residence: boolean;
     is_authorize: boolean;
     is_financial_account: boolean;
+    is_financial_assessment_needed: boolean;
     is_financial_information_incomplete: boolean;
     is_identity_verification_needed: boolean;
     is_landing_company_loaded: boolean;