Maryia/Refactoring Notifications System (#4459)

* Maryia/NotificationStore draft [WIP] * Maryia/prepared initial NotificationStore * Maryia/started using NotificationStore * Maryia/fix for successful launching after adding NotificationStore * Maryia/changed custom_notifications & setClientNotifications interface * Maryia/small fix for updated run-panel-store * Maryia/connected NotificationStore to Bot & fixed handleClientNotifications * Maryia/Put all reactions for notifications into NotificationStore + added should_show_popups * Maryia/minor fix to pass circleci tests * Maryia/removed extra setClientNotifications() calls * Maryia/Showing popups in DTrader after it finishes mounting * Maryia/started refactoring as per review comments
deriv-com · Feb 3, 2022 · 1e5ecc8 · 1e5ecc8 · vercel · Feb 3, 2022
1 parent 8b60cf3
commit 1e5ecc8
Show file tree

Hide file tree

Showing 28 changed files with 1,040 additions and 1,079 deletions.
diff --git a/packages/account/src/Sections/Profile/FinancialAssessment/financial-assessment.jsx b/packages/account/src/Sections/Profile/FinancialAssessment/financial-assessment.jsx
@@ -980,14 +980,14 @@ FinancialAssessment.propTypes = {
     routeBackInApp: PropTypes.func,
 };
 
-export default connect(({ client, common, ui }) => ({
+export default connect(({ client, common, notifications }) => ({
     is_authentication_needed: client.is_authentication_needed,
     is_financial_account: client.is_financial_account,
     is_svg: client.is_svg,
     is_trading_experience_incomplete: client.is_trading_experience_incomplete,
     is_virtual: client.is_virtual,
     platform: common.platform,
-    removeNotificationByKey: ui.removeNotificationByKey,
-    removeNotificationMessage: ui.removeNotificationMessage,
+    removeNotificationByKey: notifications.removeNotificationByKey,
+    removeNotificationMessage: notifications.removeNotificationMessage,
     routeBackInApp: common.routeBackInApp,
 }))(withRouter(FinancialAssessment));
diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx
@@ -1224,7 +1224,7 @@ PersonalDetailsForm.propTypes = {
     history: PropTypes.object,
 };
 
-export default connect(({ client }) => ({
+export default connect(({ client, notifications }) => ({
     account_settings: client.account_settings,
     has_residence: client.has_residence,
     getChangeableFields: client.getChangeableFields,
@@ -1238,5 +1238,5 @@ export default connect(({ client }) => ({
     states_list: client.states_list,
     fetchResidenceList: client.fetchResidenceList,
     fetchStatesList: client.fetchStatesList,
-    refreshNotifications: client.refreshNotifications,
+    refreshNotifications: notifications.refreshNotifications,
 }))(withRouter(PersonalDetailsForm));
diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.jsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.jsx
@@ -470,12 +470,12 @@ ProofOfAddressForm.propTypes = {
     states_list: PropTypes.array,
 };
 
-export default connect(({ client, ui }) => ({
+export default connect(({ client, notifications }) => ({
     account_settings: client.account_settings,
     is_eu: client.is_eu,
-    addNotificationByKey: ui.addNotificationMessageByKey,
-    removeNotificationMessage: ui.removeNotificationMessage,
-    removeNotificationByKey: ui.removeNotificationByKey,
+    addNotificationByKey: notifications.addNotificationMessageByKey,
+    removeNotificationMessage: notifications.removeNotificationMessage,
+    removeNotificationByKey: notifications.removeNotificationByKey,
     states_list: client.states_list,
     fetchResidenceList: client.fetchResidenceList,
     fetchStatesList: client.fetchStatesList,

diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address.jsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address.jsx
@@ -25,9 +25,9 @@ ProofOfAddress.propTypes = {
     refreshNotifications: PropTypes.func,
 };
 
-export default connect(({ client }) => ({
+export default connect(({ client, notifications }) => ({
     is_mx_mlt: client.landing_company_shortcode === 'iom' || client.landing_company_shortcode === 'malta',
     is_switching: client.is_switching,
     is_virtual: client.is_virtual,
-    refreshNotifications: client.refreshNotifications,
+    refreshNotifications: notifications.refreshNotifications,
 }))(ProofOfAddress);
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity.jsx
@@ -42,13 +42,13 @@ const ProofOfIdentity = ({
     );
 };
 
-export default connect(({ client, common }) => ({
+export default connect(({ client, common, notifications }) => ({
     account_status: client.account_status,
     app_routing_history: common.app_routing_history,
     fetchResidenceList: client.fetchResidenceList,
     is_switching: client.is_switching,
     is_virtual: client.is_virtual,
-    refreshNotifications: client.refreshNotifications,
+    refreshNotifications: notifications.refreshNotifications,
     routeBackInApp: common.routeBackInApp,
     should_allow_authentication: client.should_allow_authentication,
 }))(withRouter(ProofOfIdentity));
diff --git a/packages/bot-web-ui/src/stores/index.js b/packages/bot-web-ui/src/stores/index.js
@@ -25,6 +25,7 @@ export default class RootStore {
         this.core = core;
         this.ui = core.ui;
         this.common = core.common;
+        this.notifications = core.notifications;
         this.ws = ws;
         this.dbot = dbot;
         this.server_time = core.common.server_time;

diff --git a/packages/bot-web-ui/src/stores/run-panel-store.js b/packages/bot-web-ui/src/stores/run-panel-store.js
@@ -270,15 +270,15 @@ export default class RunPanelStore {
     }
 
     registerReactions() {
-        const { client, common, ui } = this.root_store.core;
+        const { client, common, notifications } = this.root_store.core;
 
         const registerIsSocketOpenedListener = () => {
             if (common.is_socket_opened) {
                 this.disposeIsSocketOpenedListener = reaction(
                     () => client.loginid,
                     loginid => {
                         if (loginid && this.is_running) {
-                            ui.addNotificationMessage(switch_account_notification);
+                            notifications.addNotificationMessage(switch_account_notification);
                         }
                         this.dbot.terminateBot();
                         this.unregisterBotListeners();
@@ -462,25 +462,25 @@ export default class RunPanelStore {
 
     @action.bound
     showErrorMessage(data) {
-        const { journal, ui } = this.root_store;
+        const { journal, notifications } = this.root_store;
         journal.onError(data);
         if (journal.journal_filters.some(filter => filter === message_types.ERROR)) {
             this.toggleDrawer(true);
             this.setActiveTabIndex(run_panel.JOURNAL);
         } else {
-            ui.addNotificationMessage(journalError(this.switchToJournal));
-            ui.removeNotificationMessage({ key: 'bot_error' });
+            notifications.addNotificationMessage(journalError(this.switchToJournal));
+            notifications.removeNotificationMessage({ key: 'bot_error' });
         }
     }
 
     @action.bound
     switchToJournal() {
-        const { journal, ui } = this.root_store;
+        const { journal, notifications } = this.root_store;
         journal.journal_filters.push(message_types.ERROR);
         this.setActiveTabIndex(run_panel.JOURNAL);
         this.toggleDrawer(true);
-        ui.toggleNotificationsModal();
-        ui.removeNotificationByKey({ key: 'bot_error' });
+        notifications.toggleNotificationsModal();
+        notifications.removeNotificationByKey({ key: 'bot_error' });
     }
 
     unregisterBotListeners = () => {

diff --git a/packages/core/src/App/Components/Elements/Errors/error-component.jsx b/packages/core/src/App/Components/Elements/Errors/error-component.jsx
@@ -90,8 +90,8 @@ ErrorComponent.propTypes = {
     type: PropTypes.string,
 };
 
-export default connect(({ client, ui }) => ({
-    removeNotificationMessageByKey: ui.removeNotificationMessageByKey,
+export default connect(({ client, notifications, ui }) => ({
+    removeNotificationMessageByKey: notifications.removeNotificationMessageByKey,
     showCloseMxMltAccountPopup: ui.showCloseMxMltAccountPopup,
     has_malta_account: client.has_malta_account,
     can_have_mlt_account: client.can_have_mlt_account,

diff --git a/packages/core/src/App/Containers/CloseMxMltAccountModal/close-mx-mlt-account-modal.jsx b/packages/core/src/App/Containers/CloseMxMltAccountModal/close-mx-mlt-account-modal.jsx
@@ -175,13 +175,13 @@ CloseMxMltAccountModal.propTypes = {
     is_close_mx_mlt_account_modal_visible: PropTypes.bool,
 };
 
-export default connect(({ client, ui }) => ({
+export default connect(({ client, notifications, ui }) => ({
     is_close_mx_mlt_account_modal_visible: ui.is_close_mx_mlt_account_modal_visible,
     is_loading: ui.is_loading,
     is_logged_in: client.is_logged_in,
     country_standpoint: client.country_standpoint,
     can_have_mlt_account: client.can_have_mlt_account,
     has_malta_account: client.has_malta_account,
-    removeNotificationMessageByKey: ui.removeNotificationMessageByKey,
+    removeNotificationMessageByKey: notifications.removeNotificationMessageByKey,
     showCloseMxMltAccountPopup: ui.showCloseMxMltAccountPopup,
 }))(CloseMxMltAccountModal);
diff --git a/packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx b/packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx
@@ -226,7 +226,7 @@ DashboardPlatformHeader.propTypes = {
     toggleNotifications: PropTypes.func,
 };
 
-export default connect(({ client, common, modules, ui }) => ({
+export default connect(({ client, common, modules, notifications, ui }) => ({
     account_status: client.account_status,
     app_routing_history: common.app_routing_history,
     balance: client.balance,
@@ -237,16 +237,16 @@ export default connect(({ client, common, modules, ui }) => ({
     is_dark_mode: ui.is_dark_mode_on,
     is_logged_in: client.is_logged_in,
     is_mt5_allowed: client.is_mt5_allowed,
-    is_notifications_visible: ui.is_notifications_visible,
+    is_notifications_visible: notifications.is_notifications_visible,
     is_onramp_tab_visible: modules.cashier.onramp.is_onramp_tab_visible,
     is_p2p_enabled: modules.cashier.general_store.is_p2p_enabled,
     is_payment_agent_transfer_visible: modules.cashier.payment_agent_transfer.is_payment_agent_transfer_visible,
     is_payment_agent_visible: modules.cashier.payment_agent.is_payment_agent_visible,
     is_account_transfer_visible: modules.cashier.account_transfer.is_account_transfer_visible,
     is_virtual: client.is_virtual,
     logoutClient: client.logout,
-    notifications_count: ui.filtered_notifications.length,
+    notifications_count: notifications.filtered_notifications.length,
     setDarkMode: ui.setDarkMode,
     should_allow_authentication: client.should_allow_authentication,
-    toggleNotifications: ui.toggleNotificationsModal,
+    toggleNotifications: notifications.toggleNotificationsModal,
 }))(withRouter(DashboardPlatformHeader));
diff --git a/packages/core/src/App/Containers/Layout/header/default-header.jsx b/packages/core/src/App/Containers/Layout/header/default-header.jsx
@@ -10,7 +10,6 @@ import RealAccountSignup from 'App/Containers/RealAccountSignup';
 import SetAccountCurrencyModal from 'App/Containers/SetAccountCurrencyModal';
 import NewVersionNotification from 'App/Containers/new-version-notification.jsx';
 import { connect } from 'Stores/connect';
-import { clientNotifications } from 'Stores/Helpers/client-notifications';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
 import { AccountsInfoLoader } from 'App/Components/Layout/Header/Components/Preloader';
 import TempAppSettings from 'App/Containers/Layout/temp-app-settings.jsx';
@@ -22,6 +21,7 @@ const DefaultHeader = ({
     addNotificationMessage,
     app_routing_history,
     balance,
+    client_notifications,
     currency,
     country_standpoint,
     disableApp,
@@ -60,7 +60,7 @@ const DefaultHeader = ({
     toggleNotifications,
 }) => {
     const toggle_menu_drawer_ref = React.useRef(null);
-    const addUpdateNotification = () => addNotificationMessage(clientNotifications().new_version_available);
+    const addUpdateNotification = () => addNotificationMessage(client_notifications.new_version_available);
     const removeUpdateNotification = React.useCallback(
         () => removeNotificationMessage({ key: 'new_version_available' }),
         [removeNotificationMessage]
@@ -195,6 +195,7 @@ DefaultHeader.propTypes = {
     addNotificationMessage: PropTypes.func,
     app_routing_history: PropTypes.array,
     balance: PropTypes.string,
+    client_notifications: PropTypes.object,
     currency: PropTypes.string,
     disableApp: PropTypes.func,
     enableApp: PropTypes.func,
@@ -228,14 +229,15 @@ DefaultHeader.propTypes = {
     toggleNotifications: PropTypes.func,
 };
 
-export default connect(({ client, common, ui, menu, modules }) => ({
+export default connect(({ client, common, ui, menu, modules, notifications }) => ({
     acc_switcher_disabled_message: ui.account_switcher_disabled_message,
     account_status: client.account_status,
     account_type: client.account_type,
     should_allow_authentication: client.should_allow_authentication,
-    addNotificationMessage: ui.addNotificationMessage,
+    addNotificationMessage: notifications.addNotificationMessage,
     app_routing_history: common.app_routing_history,
     balance: client.balance,
+    client_notifications: notifications.client_notifications,
     currency: client.currency,
     country_standpoint: client.country_standpoint,
     disableApp: ui.disableApp,
@@ -252,7 +254,7 @@ export default connect(({ client, common, ui, menu, modules }) => ({
     is_logging_in: client.is_logging_in,
     is_mt5_allowed: client.is_mt5_allowed,
     is_dxtrade_allowed: client.is_dxtrade_allowed,
-    is_notifications_visible: ui.is_notifications_visible,
+    is_notifications_visible: notifications.is_notifications_visible,
     is_p2p_enabled: modules.cashier.general_store.is_p2p_enabled,
     is_payment_agent_transfer_visible: modules.cashier.payment_agent_transfer.is_payment_agent_transfer_visible,
     is_onramp_tab_visible: modules.cashier.onramp.is_onramp_tab_visible,
@@ -262,12 +264,12 @@ export default connect(({ client, common, ui, menu, modules }) => ({
     is_virtual: client.is_virtual,
     logoutClient: client.logout,
     menu_items: menu.extensions,
-    notifications_count: ui.filtered_notifications.length,
+    notifications_count: notifications.filtered_notifications.length,
     openRealAccountSignup: ui.openRealAccountSignup,
     replaceCashierMenuOnclick: modules.cashier.general_store.replaceCashierMenuOnclick,
     platform: common.platform,
-    removeNotificationMessage: ui.removeNotificationMessage,
+    removeNotificationMessage: notifications.removeNotificationMessage,
     setDarkMode: ui.setDarkMode,
     toggleAccountsDialog: ui.toggleAccountsDialog,
-    toggleNotifications: ui.toggleNotificationsModal,
+    toggleNotifications: notifications.toggleNotificationsModal,
 }))(withRouter(DefaultHeader));
diff --git a/packages/core/src/App/Containers/NotificationsDialog/notifications-dialog.jsx b/packages/core/src/App/Containers/NotificationsDialog/notifications-dialog.jsx
@@ -175,9 +175,9 @@ NotificationsDialog.propTypes = {
     toggleDialog: PropTypes.func,
 };
 
-export default connect(({ ui, common }) => ({
-    notifications: ui.filtered_notifications,
+export default connect(({ common, notifications }) => ({
+    notifications: notifications.filtered_notifications,
     app_routing_history: common.app_routing_history,
-    removeNotificationByKey: ui.removeNotificationByKey,
-    removeNotificationMessage: ui.removeNotificationMessage,
+    removeNotificationByKey: notifications.removeNotificationByKey,
+    removeNotificationMessage: notifications.removeNotificationMessage,
 }))(NotificationsDialog);
diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx
@@ -336,7 +336,7 @@ AccountWizard.propTypes = {
     residence_list: PropTypes.array,
 };
 
-export default connect(({ client, ui }) => ({
+export default connect(({ client, notifications, ui }) => ({
     account_settings: client.account_settings,
     is_fully_authenticated: client.is_fully_authenticated,
     realAccountSignup: client.realAccountSignup,
@@ -351,7 +351,7 @@ export default connect(({ client, ui }) => ({
     states_list: client.states_list,
     fetchStatesList: client.fetchStatesList,
     fetchResidenceList: client.fetchResidenceList,
-    refreshNotifications: client.refreshNotifications,
+    refreshNotifications: notifications.refreshNotifications,
     fetchFinancialAssessment: client.fetchFinancialAssessment,
     financial_assessment: client.financial_assessment,
 }))(AccountWizard);
diff --git a/packages/core/src/App/Containers/app-notification-messages.jsx b/packages/core/src/App/Containers/app-notification-messages.jsx
@@ -76,6 +76,7 @@ const AppNotificationMessages = ({
     has_iom_account,
     has_malta_account,
     is_logged_in,
+    should_show_popups,
 }) => {
     const [style, setStyle] = React.useState({});
     const [notifications_ref, setNotificationsRef] = React.useState(null);
@@ -105,6 +106,8 @@ const AppNotificationMessages = ({
     const notifications_limit = isMobile() ? max_display_notifications_mobile : max_display_notifications;
     const notifications_sublist = notifications.slice(0, notifications_limit);
 
+    if (!should_show_popups) return null;
+
     return notifications_sublist.length ? (
         <div ref={ref => setNotificationsRef(ref)} className='notification-messages-bounds'>
             <Portal>
@@ -149,13 +152,14 @@ AppNotificationMessages.propTypes = {
     removeNotificationMessage: PropTypes.func,
 };
 
-export default connect(({ ui, client }) => ({
-    marked_notifications: ui.marked_notifications,
-    notification_messages: ui.notification_messages,
-    removeNotificationMessage: ui.removeNotificationMessage,
-    markNotificationMessage: ui.markNotificationMessage,
+export default connect(({ client, notifications }) => ({
+    marked_notifications: notifications.marked_notifications,
+    notification_messages: notifications.notification_messages,
+    removeNotificationMessage: notifications.removeNotificationMessage,
+    markNotificationMessage: notifications.markNotificationMessage,
     landing_company_shortcode: client.landing_company_shortcode,
     has_iom_account: client.has_iom_account,
     has_malta_account: client.has_malta_account,
     is_logged_in: client.is_logged_in,
+    should_show_popups: notifications.should_show_popups,
 }))(AppNotificationMessages);
diff --git a/packages/core/src/App/app.js b/packages/core/src/App/app.js
@@ -59,9 +59,10 @@ const initStore = notification_messages => {
     // TODO: Re-enable and update browser checking
     // OutdatedBrowser.init(root_store);!
     root_store.client.init();
-    root_store.ui.init(notification_messages);
     root_store.common.init();
     root_store.pushwoosh.init();
+    root_store.notifications.init();
+    root_store.ui.init(notification_messages);
 
     return root_store;
 };