Amina/wall 575/maintenance notifications for site and cashier

packages/account/src/App.tsx

@@ -17,8 +17,11 @@ const App = ({ passthrough }: TAppProps) => {
     const { root_store, WS } = passthrough;
     initStore(root_store, WS);
 
+    const { notification_messages_ui: Notifications } = root_store.ui;
+
     return (
         <MobxContentProvider store={root_store}>
+            {Notifications && <Notifications />}
             <Routes />
             <ResetTradingPassword />
         </MobxContentProvider>

packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx

@@ -109,7 +109,6 @@ export const PersonalDetailsForm = ({
     refreshNotifications,
     showPOAAddressMismatchSuccessNotification,
     showPOAAddressMismatchFailureNotification,
-    Notifications,
     fetchResidenceList,
     fetchStatesList,
     has_residence,
@@ -555,7 +554,6 @@ export const PersonalDetailsForm = ({
                 dirty,
             }) => (
                 <React.Fragment>
-                    {Notifications && <Notifications />}
                     <LeaveConfirm onDirty={isMobile() ? showForm : null} />
                     {show_form && (
                         <Form
@@ -1286,7 +1284,6 @@ PersonalDetailsForm.propTypes = {
     refreshNotifications: PropTypes.func,
     showPOAAddressMismatchSuccessNotification: PropTypes.func,
     showPOAAddressMismatchFailureNotification: PropTypes.func,
-    Notifications: PropTypes.node,
     fetchResidenceList: PropTypes.func,
     fetchStatesList: PropTypes.func,
     has_residence: PropTypes.bool,
@@ -1300,7 +1297,7 @@ PersonalDetailsForm.propTypes = {
     is_language_changing: PropTypes.bool,
 };
 
-export default connect(({ client, notifications, ui, common }) => ({
+export default connect(({ client, notifications, common }) => ({
     account_settings: client.account_settings,
     authentication_status: client.authentication_status,
     has_residence: client.has_residence,
@@ -1319,7 +1316,6 @@ export default connect(({ client, notifications, ui, common }) => ({
     refreshNotifications: notifications.refreshNotifications,
     showPOAAddressMismatchSuccessNotification: notifications.showPOAAddressMismatchSuccessNotification,
     showPOAAddressMismatchFailureNotification: notifications.showPOAAddressMismatchFailureNotification,
-    Notifications: ui.notification_messages_ui,
     updateAccountStatus: client.updateAccountStatus,
     has_poa_address_mismatch: client.account_status.status?.includes('poa_address_mismatch'),
     is_language_changing: common.is_language_changing,

packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx

@@ -25,7 +25,6 @@ const TwoFactorAuthentication = ({
     setTwoFAStatus,
     getTwoFAStatus,
     has_enabled_two_fa,
-    Notifications,
     setTwoFAChangedStatus,
 }) => {
     const [is_loading, setLoading] = React.useState(true);
@@ -200,7 +199,6 @@ const TwoFactorAuthentication = ({
                     'two-factor__wrapper-dashboard': is_appstore,
                 })}
             >
-                {Notifications && <Notifications />}
                 {has_enabled_two_fa ? TwoFactorEnabled : TwoFactorDisabled}
             </div>
         </section>
@@ -213,16 +211,14 @@ TwoFactorAuthentication.propTypes = {
     setTwoFAStatus: PropTypes.func,
     getTwoFAStatus: PropTypes.func,
     has_enabled_two_fa: PropTypes.bool,
-    Notifications: PropTypes.node,
     setTwoFAChangedStatus: PropTypes.func,
 };
 
-export default connect(({ client, ui }) => ({
+export default connect(({ client }) => ({
     email_address: client.email_address,
     is_switching: client.is_switching,
     setTwoFAStatus: client.setTwoFAStatus,
     getTwoFAStatus: client.getTwoFAStatus,
     has_enabled_two_fa: client.has_enabled_two_fa,
-    Notifications: ui.notification_messages_ui,
     setTwoFAChangedStatus: client.setTwoFAChangedStatus,
 }))(TwoFactorAuthentication);

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

@@ -11,7 +11,11 @@ import Notification, {
     max_display_notifications_mobile,
 } from '../Components/Elements/NotificationMessage';
 import { useLocation } from 'react-router-dom';
-import { excluded_notifications, priority_toast_messages } from '../../Stores/Helpers/client-notifications';
+import {
+    excluded_notifications,
+    priority_toast_messages,
+    maintenance_notifications,
+} from '../../Stores/Helpers/client-notifications';
 
 const Portal = ({ children }) =>
     isMobile() ? ReactDOM.createPortal(children, document.getElementById('deriv_app')) : children;
@@ -107,6 +111,8 @@ const AppNotificationMessages = ({
         const is_not_marked_notification = !marked_notifications.includes(message.key);
         const is_non_hidden_notification = isMobile()
             ? [
+                  'system_maintenance',
+                  'site_maintenance',
                   'authenticate',
                   'deriv_go',
                   'document_needs_action',
@@ -145,7 +151,14 @@ const AppNotificationMessages = ({
 
         const is_only_for_p2p_notification =
             window.location.pathname !== routes.cashier_p2p || message?.platform === 'P2P';
-        return is_not_marked_notification && is_non_hidden_notification && is_only_for_p2p_notification;
+
+        const is_maintenance_notifications = maintenance_notifications.includes(message.key);
+
+        return (
+            is_not_marked_notification &&
+            is_non_hidden_notification &&
+            (is_only_for_p2p_notification || is_maintenance_notifications)
+        );
     });
 
     const notifications_limit = isMobile() ? max_display_notifications_mobile : max_display_notifications;
@@ -159,7 +172,9 @@ const AppNotificationMessages = ({
 
     const notifications_sublist =
         window.location.pathname === routes.cashier_deposit
-            ? filtered_excluded_notifications.filter(message => message.key.includes('switched_to_real'))
+            ? filtered_excluded_notifications.filter(
+                  message => message.key.includes('switched_to_real') || maintenance_notifications.includes(message.key)
+              )
             : filtered_excluded_notifications.slice(0, notifications_limit);
 
     if (!should_show_popups) return null;

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

@@ -64,4 +64,13 @@ export const getCashierValidations = cashier_arr => {
 // Notifications keys will not be added to localStorage and will appear again after user logout/login
 export const excluded_notifications = ['contract_sold', 'switched_to_real', 'has_changed_two_fa'];
 
-export const priority_toast_messages = ['svg', 'need_fa', 'p2p_daily_limit_increase', 'authenticate'];
+export const priority_toast_messages = [
+    'system_maintenance',
+    'site_maintenance',
+    'svg',
+    'need_fa',
+    'p2p_daily_limit_increase',
+    'authenticate',
+];
+
+export const maintenance_notifications = ['system_maintenance', 'site_maintenance'];

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

@@ -1729,19 +1729,6 @@ export default class ClientStore extends BaseStore {
 
     responseWebsiteStatus(response) {
         this.website_status = response.website_status;
-        if (this.website_status.message && this.website_status.message.length) {
-            this.root_store.notifications.addNotificationMessage({
-                key: 'maintenance',
-                header: localize('Site is being updated'),
-                message: localize(this.website_status.message),
-                type: 'warning',
-                is_persistent: true,
-            });
-        } else {
-            this.root_store.notifications.removeNotificationMessage({
-                key: 'maintenance',
-            });
-        }
     }
 
     responseLandingCompany(response) {

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

@@ -27,6 +27,7 @@ import {
     getCashierValidations,
     getStatusValidations,
     hasMissingRequiredField,
+    maintenance_notifications,
 } from './Helpers/client-notifications';
 import { sortNotifications, sortNotificationsMobile } from '../App/Components/Elements/NotificationMessage/constants';
 import BaseStore from './base-store';
@@ -223,10 +224,10 @@ export default class NotificationStore extends BaseStore {
     filterNotificationMessages() {
         if (LocalStore.get('active_loginid') !== 'null')
             this.resetVirtualBalanceNotification(LocalStore.get('active_loginid'));
-
         if (window.location.pathname === routes.personal_details) {
             this.notification_messages = this.notification_messages.filter(
-                notification => notification.platform === 'Account'
+                notification =>
+                    notification.platform === 'Account' || maintenance_notifications.includes(notification.key)
             );
         } else if (window.location.pathname !== routes.cashier_p2p) {
             this.notification_messages = this.notification_messages.filter(notification => {
@@ -315,6 +316,12 @@ export default class NotificationStore extends BaseStore {
 
         let has_missing_required_field;
 
+        if (website_status.message && website_status.message.length) {
+            this.addNotificationMessage(this.client_notifications.site_maintenance);
+        } else {
+            this.removeNotificationByKey({ key: this.client_notifications.site_maintenance });
+        }
+
         if (is_logged_in) {
             if (isEmptyObject(account_status)) return;
             const {
@@ -1233,6 +1240,14 @@ export default class NotificationStore extends BaseStore {
                     type: 'danger',
                 };
             },
+            site_maintenance: {
+                key: 'site_maintenance',
+                header: localize('We’re updating our site'),
+                message: localize('Some services may be temporarily unavailable.'),
+                type: 'warning',
+                should_show_again: true,
+                closeOnClick: notification_obj => this.markNotificationMessage({ key: notification_obj.key }),
+            },
             system_maintenance: (withdrawal_locked, deposit_locked) => {
                 let message, header;
                 if (isCryptocurrency(client_data.currency)) {
@@ -1253,16 +1268,18 @@ export default class NotificationStore extends BaseStore {
                         );
                     }
                 } else {
-                    header = localize('Scheduled cashier system maintenance');
+                    header = localize('Scheduled cashier maintenance');
                     message = localize(
-                        'Our cashier is temporarily down due to system maintenance. You can access the cashier in a few minutes when the maintenance is complete.'
+                        'The cashier is temporarily down due to maintenance. It will be available as soon as the maintenance is complete.'
                     );
                 }
                 return {
                     key: 'system_maintenance',
                     header,
                     message,
                     type: 'warning',
+                    should_show_again: true,
+                    closeOnClick: notification_obj => this.markNotificationMessage({ key: notification_obj.key }),
                 };
             },
             tax: {

packages/core/src/sass/app/_common/components/app-notification-message.scss

@@ -4,6 +4,7 @@
     z-index: 6;
     position: absolute;
     right: 0;
+    margin-top: 1.6rem;
 
     > div {
         display: flex;