From 3fc48006c2e10dffdcced9a08666242e43e5c03e Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Thu, 12 Dec 2019 14:23:15 +0100
Subject: [PATCH] Show global notices in all pages

[MAILPOET-2390]
---
 .../src/dynamic_segments/dynamic_segments.jsx |  2 +
 .../experimental_features.jsx                 | 40 ++++++++++---------
 assets/js/src/form_editor/form_editor.jsx     |  6 ++-
 assets/js/src/forms/forms.jsx                 |  2 +
 assets/js/src/help/help.jsx                   |  2 +
 .../js/src/newsletters/listings/standard.jsx  |  3 ++
 assets/js/src/newsletters/newsletters.jsx     |  2 +
 assets/js/src/notices/notices.jsx             |  8 ++++
 assets/js/src/segments/segments.jsx           |  2 +
 assets/js/src/settings/settings.jsx           |  2 +
 .../src/subscribers/importExport/import.jsx   |  2 +
 assets/js/src/subscribers/subscribers.jsx     |  2 +
 assets/js/src/wizard/wizard.jsx               |  2 +
 13 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 assets/js/src/notices/notices.jsx

diff --git a/assets/js/src/dynamic_segments/dynamic_segments.jsx b/assets/js/src/dynamic_segments/dynamic_segments.jsx
index fbe7e9d35b..5a92bb38ee 100644
--- a/assets/js/src/dynamic_segments/dynamic_segments.jsx
+++ b/assets/js/src/dynamic_segments/dynamic_segments.jsx
@@ -5,10 +5,12 @@ import { HashRouter, Switch, Route } from 'react-router-dom';
 import DynamicSegmentList from 'dynamic_segments/list.jsx';
 import DynamicSegmentForm from 'dynamic_segments/form.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
+      <Notices />
       <Switch>
         <Route path="/new" component={DynamicSegmentForm} />
         <Route path="/edit/:id" component={DynamicSegmentForm} />
diff --git a/assets/js/src/experimental_features/experimental_features.jsx b/assets/js/src/experimental_features/experimental_features.jsx
index fe4c42a999..d13c0ffb95 100644
--- a/assets/js/src/experimental_features/experimental_features.jsx
+++ b/assets/js/src/experimental_features/experimental_features.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import MailPoet from 'mailpoet';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const ExperimentalFeatures = () => {
   const [flags, setFlags] = useState(null);
@@ -61,24 +62,27 @@ const ExperimentalFeatures = () => {
 
   return (
     <GlobalContext.Provider value={contextValue}>
-      { Object.values(flags).map((flag) => {
-        const id = `experimental-feature-${flag.name}`;
-        return (
-          <div key={flag.name}>
-            <label htmlFor={id}>
-              <input
-                id={id}
-                type="checkbox"
-                name={flag.name}
-                defaultChecked={flag.value}
-                onChange={handleChange}
-              />
-              {' '}
-              {flag.name}
-            </label>
-          </div>
-        );
-      })}
+      <>
+        <Notices />
+        { Object.values(flags).map((flag) => {
+          const id = `experimental-feature-${flag.name}`;
+          return (
+            <div key={flag.name}>
+              <label htmlFor={id}>
+                <input
+                  id={id}
+                  type="checkbox"
+                  name={flag.name}
+                  defaultChecked={flag.value}
+                  onChange={handleChange}
+                />
+                {' '}
+                {flag.name}
+              </label>
+            </div>
+          );
+        })}
+      </>
     </GlobalContext.Provider>
   );
 };
diff --git a/assets/js/src/form_editor/form_editor.jsx b/assets/js/src/form_editor/form_editor.jsx
index f502ca381c..d32d7289f9 100644
--- a/assets/js/src/form_editor/form_editor.jsx
+++ b/assets/js/src/form_editor/form_editor.jsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 import Editor from './components/editor.jsx';
 import initStore from './store/store.jsx';
 import initBlocks from './blocks/blocks.jsx';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
-    <Editor />
+    <>
+      <Notices />
+      <Editor />
+    </>
   </GlobalContext.Provider>
 );
 
diff --git a/assets/js/src/forms/forms.jsx b/assets/js/src/forms/forms.jsx
index 82c6f97f75..e49850e17b 100644
--- a/assets/js/src/forms/forms.jsx
+++ b/assets/js/src/forms/forms.jsx
@@ -2,11 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, HashRouter } from 'react-router-dom';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 import FormList from './list.jsx';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
+      <Notices />
       <Route path="*" component={FormList} />
     </HashRouter>
   </GlobalContext.Provider>
diff --git a/assets/js/src/help/help.jsx b/assets/js/src/help/help.jsx
index 89fc088916..8a2a7dbe9b 100644
--- a/assets/js/src/help/help.jsx
+++ b/assets/js/src/help/help.jsx
@@ -9,10 +9,12 @@ import SystemInfo from 'help/system_info.jsx';
 import SystemStatus from 'help/system_status.jsx';
 import YourPrivacy from 'help/your_privacy.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
+      <Notices />
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/knowledgeBase" />} />
         <Route path="/knowledgeBase" component={KnowledgeBase} />
diff --git a/assets/js/src/newsletters/listings/standard.jsx b/assets/js/src/newsletters/listings/standard.jsx
index 44f65cf796..6bb0a2608d 100644
--- a/assets/js/src/newsletters/listings/standard.jsx
+++ b/assets/js/src/newsletters/listings/standard.jsx
@@ -16,6 +16,7 @@ import {
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
 import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
+import { GlobalContext } from 'context/index.jsx';
 
 const mailpoetTrackingEnabled = (!!(window.mailpoet_tracking_enabled));
 
@@ -173,6 +174,8 @@ newsletterActions = addStatsCTAAction(newsletterActions);
 class NewsletterListStandard extends React.Component {
   static displayName = 'NewsletterListStandard';
 
+  static contextType = GlobalContext;
+
   static propTypes = {
     location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     match: PropTypes.shape({
diff --git a/assets/js/src/newsletters/newsletters.jsx b/assets/js/src/newsletters/newsletters.jsx
index 5f3f85d429..4777a02eed 100644
--- a/assets/js/src/newsletters/newsletters.jsx
+++ b/assets/js/src/newsletters/newsletters.jsx
@@ -21,6 +21,7 @@ import NewsletterListNotificationHistory from 'newsletters/listings/notification
 import NewsletterSendingStatus from 'newsletters/sending_status.jsx';
 import CampaignStatsPage from 'newsletters/campaign_stats/page.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const getAutomaticEmailsRoutes = () => {
   if (!window.mailpoet_automatic_emails) return [];
@@ -101,6 +102,7 @@ const routes = Hooks.applyFilters('mailpoet_newsletters_before_router', [
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
+      <Notices />
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/standard" />} />
         {routes.map((route) => (
diff --git a/assets/js/src/notices/notices.jsx b/assets/js/src/notices/notices.jsx
new file mode 100644
index 0000000000..2fea308c07
--- /dev/null
+++ b/assets/js/src/notices/notices.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { GlobalContext } from 'context/index.jsx';
+import Notice from './notice.jsx';
+
+export default () => {
+  const { notices } = React.useContext(GlobalContext);
+  return notices.items.map(({ id, ...props }) => <Notice key={id} {...props} />);
+};
diff --git a/assets/js/src/segments/segments.jsx b/assets/js/src/segments/segments.jsx
index 31dbf2456b..2c0f169660 100644
--- a/assets/js/src/segments/segments.jsx
+++ b/assets/js/src/segments/segments.jsx
@@ -5,12 +5,14 @@ import { HashRouter, Switch, Route } from 'react-router-dom';
 import SegmentList from 'segments/list.jsx';
 import SegmentForm from 'segments/form.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const container = document.getElementById('segments_container');
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
+      <Notices />
       <Switch>
         <Route path="/new" component={SegmentForm} />
         <Route path="/edit/:id" component={SegmentForm} />
diff --git a/assets/js/src/settings/settings.jsx b/assets/js/src/settings/settings.jsx
index 04e532caf1..599f200bcf 100644
--- a/assets/js/src/settings/settings.jsx
+++ b/assets/js/src/settings/settings.jsx
@@ -2,9 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import DefaultSender from 'settings/default_sender.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
+    <Notices />
     <DefaultSender
       senderAddress={window.mailpoet_settings_sender_adddress}
       senderName={window.mailpoet_settings_sender_name}
diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx
index 0b19859fba..bbd65dac87 100644
--- a/assets/js/src/subscribers/importExport/import.jsx
+++ b/assets/js/src/subscribers/importExport/import.jsx
@@ -6,6 +6,7 @@ import {
 import ScrollToTop from 'common/scroll_to_top.jsx';
 
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 import StepMethodSelection from './import/step_method_selection.jsx';
 import StepInputValidation from './import/step_input_validation.jsx';
 import StepDataManipulation from './import/step_data_manipulation.jsx';
@@ -22,6 +23,7 @@ const ImportSubscribers = () => {
   return (
     <GlobalContext.Provider value={contextValue}>
       <HashRouter>
+        <Notices />
         <ScrollToTop>
           <Switch>
             <Route
diff --git a/assets/js/src/subscribers/subscribers.jsx b/assets/js/src/subscribers/subscribers.jsx
index 235d5fe61f..863bf29e04 100644
--- a/assets/js/src/subscribers/subscribers.jsx
+++ b/assets/js/src/subscribers/subscribers.jsx
@@ -5,10 +5,12 @@ import { HashRouter, Switch, Route } from 'react-router-dom';
 import SubscriberList from 'subscribers/list.jsx';
 import SubscriberForm from 'subscribers/form.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 
 const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
+      <Notices />
       <Switch>
         <Route path="/new" component={SubscriberForm} />
         <Route path="/edit/:id" component={SubscriberForm} />
diff --git a/assets/js/src/wizard/wizard.jsx b/assets/js/src/wizard/wizard.jsx
index 928150b836..778f635683 100644
--- a/assets/js/src/wizard/wizard.jsx
+++ b/assets/js/src/wizard/wizard.jsx
@@ -7,6 +7,7 @@ import {
   Switch,
 } from 'react-router-dom';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 import WelcomeWizardStepsController from './welcome_wizard_controller.jsx';
 import WooCommerceImportController from './woocommerce_import_controller.jsx';
 import RevenueTrackingPermissionController from './revenue_tracking_permission.jsx';
@@ -22,6 +23,7 @@ const App = () => {
   return (
     <GlobalContext.Provider value={contextValue}>
       <HashRouter>
+        <Notices />
         <Switch>
           <Route path="/steps/:step" component={WelcomeWizardStepsController} />
           <Route path="/import" component={WooCommerceImportController} />