Show global notices in all pages

[MAILPOET-2390]

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} />

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}`;
+        <Notices />
-        return (
+        { Object.values(flags).map((flag) => {
-          <div key={flag.name}>
+          const id = `experimental-feature-${flag.name}`;
-            <label htmlFor={id}>
+          return (
-              <input
+            <div key={flag.name}>
-                id={id}
+              <label htmlFor={id}>
-                type="checkbox"
+                <input
-                name={flag.name}
+                  id={id}
-                defaultChecked={flag.value}
+                  type="checkbox"
-                onChange={handleChange}
+                  name={flag.name}
-              />
+                  defaultChecked={flag.value}
-              {' '}
+                  onChange={handleChange}
-              {flag.name}
+                />
-            </label>
+                {' '}
-          </div>
+                {flag.name}
-        );
+              </label>
-      })}
+            </div>
+          );
+        })}
+      </>
     </GlobalContext.Provider>
   );
 };

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>
 );
 

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>

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} />

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({

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) => (

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} />);
+};

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} />

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}

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

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} />

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} />