Remove MailPoet.Notice

2020-02-17 01:41:53 +01:00
parent 493d6caffc
commit 2f2a00cbbe
10 changed files with 105 additions and 73 deletions
--- a/assets/js/src/experimental_features/experimental_features.jsx
+++ b/assets/js/src/experimental_features/experimental_features.jsx
@@ -7,24 +7,28 @@ import Notices from 'notices/notices.jsx';
 const ExperimentalFeatures = () => {
  const [flags, setFlags] = useState(null);
  const contextValue = useGlobalContextValue(window);
+  const [mounted, setMounted] = useState(false);

  useEffect(() => {
-    MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'featureFlags',
-      action: 'getAll',
-    }).done((response) => {
-      const flagsMap = response.data.reduce((obj, item) => ({ ...obj, [item.name]: item }), {});
-      setFlags(flagsMap);
-    }).fail((response) => {
-      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
-          { scroll: true }
-        );
-      }
-    });
-  }, []);
+    if (!mounted) {
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'featureFlags',
+        action: 'getAll',
+      }).done((response) => {
+        const flagsMap = response.data.reduce((obj, item) => ({ ...obj, [item.name]: item }), {});
+        setFlags(flagsMap);
+      }).fail((response) => {
+        if (response.errors.length > 0) {
+          contextValue.notices.error(
+            <>{response.errors.map((error) => <p>{error.message}</p>)}</>,
+            { scroll: true }
+          );
+        }
+      });
+      setMounted(true);
+    }
+  }, [contextValue.notices, mounted]);

  function handleChange(event) {
    const name = event.target.name;
@@ -41,11 +45,12 @@ const ExperimentalFeatures = () => {
      const flag = flags[name];
      flag.value = value;
      setFlags({ ...flags, [name]: flag });
-      MailPoet.Notice.success(`Feature '${name}' was ${value ? 'enabled' : 'disabled'}.`);
+      const message = `Feature '${name}' was ${value ? 'enabled' : 'disabled'}.`;
+      contextValue.notices.success(<p>{message}</p>);
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        contextValue.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@@ -13,6 +13,7 @@ import ListingFilters from 'listing/filters.jsx';
 import ListingItems from 'listing/listing_items.jsx';
 import MailerError from 'listing/notices.jsx';
 import { withRouter } from 'react-router-dom';
+import { GlobalContext } from 'context/index.jsx';

 class Listing extends React.Component {
  constructor(props) {
@@ -190,8 +191,8 @@ class Listing extends React.Component {
      });
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -266,8 +267,8 @@ class Listing extends React.Component {
      }
      this.getItems();
    }).fail((response) => {
-      MailPoet.Notice.error(
-        response.errors.map((error) => error.message),
+      this.context.notices.error(
+        response.errors.map((error) => <p key={error.message}>{error.message}</p>),
        { scroll: true }
      );
    });
@@ -295,8 +296,8 @@ class Listing extends React.Component {
      }
      this.getItems();
    }).fail((response) => {
-      MailPoet.Notice.error(
-        response.errors.map((error) => error.message),
+      this.context.notices.error(
+        response.errors.map((error) => <p key={error.message}>{error.message}</p>),
        { scroll: true }
      );
    });
@@ -324,8 +325,8 @@ class Listing extends React.Component {
      }
      this.getItems();
    }).fail((response) => {
-      MailPoet.Notice.error(
-        response.errors.map((error) => error.message),
+      this.context.notices.error(
+        response.errors.map((error) => <p key={error.message}>{error.message}</p>),
        { scroll: true }
      );
    });
@@ -344,8 +345,8 @@ class Listing extends React.Component {
    // redirect to default group
    this.handleGroup('all');
  }).fail((response) => {
-    MailPoet.Notice.error(
-      response.errors.map((error) => error.message),
+    this.context.notices.error(
+      response.errors.map((error) => <p key={error.message}>{error.message}</p>),
      { scroll: true }
    );
  });
@@ -383,8 +384,8 @@ class Listing extends React.Component {
      this.getItems();
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -685,6 +686,8 @@ class Listing extends React.Component {
  }
 }

+Listing.contextType = GlobalContext;
+
 /* eslint-disable react/require-default-props */
 Listing.propTypes = {
  limit: PropTypes.number,
--- a/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
+++ b/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
@@ -6,6 +6,7 @@ import EventOptions from 'newsletters/automatic_emails/events/event_options.jsx'
 import MailPoet from 'mailpoet';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
+import { GlobalContext } from 'context/index.jsx';

 const defaultAfterTimeType = 'immediate';
 const defaultAfterTimeNumber = 1;
@@ -205,8 +206,8 @@ class EventsConditions extends React.Component {
      history.push(`/template/${response.data.id}`);
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -245,6 +246,8 @@ class EventsConditions extends React.Component {
  }
 }

+EventsConditions.contextType = GlobalContext;
+
 EventsConditions.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
--- a/assets/js/src/newsletters/send.jsx
+++ b/assets/js/src/newsletters/send.jsx
@@ -15,6 +15,7 @@ import { withRouter } from 'react-router-dom';
 import ReactStringReplace from 'react-string-replace';
 import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
 import slugify from 'slugify';
+import { GlobalContext } from 'context/index.jsx';

 const generateGaTrackingCampaignName = (id, subject) => {
  const name = slugify(subject, { lower: true })
@@ -242,16 +243,16 @@ class NewsletterSend extends React.Component {
      if (_.isFunction(customResponse)) {
        customResponse();
      } else if (response.data.status === 'scheduled') {
-        MailPoet.Notice.success(
-          MailPoet.I18n.t('newsletterHasBeenScheduled')
+        this.context.notices.success(
+          <p>{MailPoet.I18n.t('newsletterHasBeenScheduled')}</p>
        );
        MailPoet.trackEvent('Emails > Newsletter sent', {
          scheduled: true,
          'MailPoet Free version': window.mailpoet_version,
        });
      } else {
-        MailPoet.Notice.success(
-          MailPoet.I18n.t('newsletterBeingSent'),
+        this.context.notices.success(
+          <p>{MailPoet.I18n.t('newsletterBeingSent')}</p>,
          { id: 'mailpoet_notice_being_sent' }
        );
        MailPoet.trackEvent('Emails > Newsletter sent', {
@@ -288,8 +289,8 @@ class NewsletterSend extends React.Component {
      const opts = this.state.item.options;
      // display success message depending on newsletter type
      if (response.data.type === 'welcome') {
-        MailPoet.Notice.success(
-          MailPoet.I18n.t('welcomeEmailActivated')
+        this.context.notices.success(
+          <p>{MailPoet.I18n.t('welcomeEmailActivated')}</p>
        );
        MailPoet.trackEvent('Emails > Welcome email activated', {
          'MailPoet Free version': window.mailpoet_version,
@@ -297,8 +298,8 @@ class NewsletterSend extends React.Component {
          Delay: `${opts.afterTimeNumber} ${opts.afterTimeType}`,
        });
      } else if (response.data.type === 'notification') {
-        MailPoet.Notice.success(
-          MailPoet.I18n.t('postNotificationActivated')
+        this.context.notices.success(
+          <p>{MailPoet.I18n.t('postNotificationActivated')}</p>
        );
        MailPoet.trackEvent('Emails > Post notifications activated', {
          'MailPoet Free version': window.mailpoet_version,
@@ -330,16 +331,11 @@ class NewsletterSend extends React.Component {
          },
        }).done(() => {
          this.props.history.push(`/${this.state.item.type || ''}`);
-          MailPoet.Notice.success(
-            MailPoet.I18n.t('newsletterSendingHasBeenResumed')
+          this.context.notices.success(
+            <p>{MailPoet.I18n.t('newsletterSendingHasBeenResumed')}</p>
          );
        }).fail((response) => {
-          if (response.errors.length > 0) {
-            MailPoet.Notice.error(
-              response.errors.map((error) => error.message),
-              { scroll: true }
-            );
-          }
+          this.showError(response);
        });
      })
        .fail((err) => {
@@ -356,8 +352,8 @@ class NewsletterSend extends React.Component {
    e.preventDefault();

    this.saveNewsletter(e).done(() => {
-      MailPoet.Notice.success(
-        MailPoet.I18n.t('newsletterUpdated')
+      this.context.notices.success(
+        <p>{MailPoet.I18n.t('newsletterUpdated')}</p>
      );
    }).done(() => {
      const path = this.state.item.type === 'automatic' ? this.state.item.options.group : this.state.item.type;
@@ -372,8 +368,8 @@ class NewsletterSend extends React.Component {
    const redirectTo = e.target.href;

    this.saveNewsletter(e).done(() => {
-      MailPoet.Notice.success(
-        MailPoet.I18n.t('newsletterUpdated')
+      this.context.notices.success(
+        <p>{MailPoet.I18n.t('newsletterUpdated')}</p>
      );
    }).done(() => {
      window.location = redirectTo;
@@ -407,8 +403,8 @@ class NewsletterSend extends React.Component {

  showError = (response) => {
    if (response.errors.length > 0) {
-      MailPoet.Notice.error(
-        response.errors.map((error) => error.message),
+      this.context.notices.error(
+        response.errors.map((error) => <p key={error.message}>{error.message}</p>),
        { scroll: true }
      );
    }
@@ -528,6 +524,8 @@ class NewsletterSend extends React.Component {
  }
 }

+NewsletterSend.contextType = GlobalContext;
+
 NewsletterSend.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
--- a/assets/js/src/newsletters/templates.jsx
+++ b/assets/js/src/newsletters/templates.jsx
@@ -8,6 +8,7 @@ import ImportTemplate from 'newsletters/templates/import_template.jsx';
 import Hooks from 'wp-js-hooks';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
+import { GlobalContext } from 'context/index.jsx';

 const getEditorUrl = (id) => `admin.php?page=mailpoet-newsletter-editor&id=${id}`;

@@ -87,8 +88,8 @@ class NewsletterTemplates extends React.Component {
      this.sortTemplates();
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -158,8 +159,8 @@ class NewsletterTemplates extends React.Component {
      }
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -277,6 +278,8 @@ class NewsletterTemplates extends React.Component {
  }
 }

+NewsletterTemplates.contextType = GlobalContext;
+
 NewsletterTemplates.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
--- a/assets/js/src/newsletters/templates/import_template.jsx
+++ b/assets/js/src/newsletters/templates/import_template.jsx
@@ -3,6 +3,7 @@ import _ from 'underscore';
 import MailPoet from 'mailpoet';
 import HelpTooltip from 'help-tooltip.jsx';
 import PropTypes from 'prop-types';
+import { GlobalContext } from 'context/index.jsx';

 class ImportTemplate extends React.Component {
  constructor(props) {
@@ -51,8 +52,8 @@ class ImportTemplate extends React.Component {
      afterImport(true, response.data);
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -77,7 +78,7 @@ class ImportTemplate extends React.Component {
          'MailPoet Free version': window.mailpoet_version,
        });
      } catch (err) {
-        MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
+        this.context.notices.error(<p>{MailPoet.I18n.t('templateFileMalformedError')}</p>);
      }
    };

@@ -115,6 +116,8 @@ class ImportTemplate extends React.Component {
  }
 }

+ImportTemplate.contextType = GlobalContext;
+
 ImportTemplate.propTypes = {
  beforeImport: PropTypes.func.isRequired,
  afterImport: PropTypes.func.isRequired,
--- a/assets/js/src/newsletters/templates/template_box.jsx
+++ b/assets/js/src/newsletters/templates/template_box.jsx
@@ -3,6 +3,7 @@ import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';

 import confirmAlert from 'common/confirm_alert.jsx';
+import { GlobalContext } from 'context/index.jsx';

 /**
 * props = {
@@ -35,8 +36,8 @@ class TemplateBox extends React.Component {
        afterDelete(true, id);
      }).fail((response) => {
        if (response.errors.length > 0) {
-          MailPoet.Notice.error(
-            response.errors.map((error) => error.message),
+          this.context.notices.error(
+            response.errors.map((error) => <p key={error.message}>{error.message}</p>),
            { scroll: true }
          );
        }
@@ -81,8 +82,8 @@ class TemplateBox extends React.Component {
      afterSelect(true, response.data.id);
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -158,6 +159,8 @@ class TemplateBox extends React.Component {
  }
 }

+TemplateBox.contextType = GlobalContext;
+
 TemplateBox.propTypes = {
  index: PropTypes.number.isRequired,
  id: PropTypes.string.isRequired,
--- a/assets/js/src/newsletters/types.jsx
+++ b/assets/js/src/newsletters/types.jsx
@@ -5,6 +5,7 @@ import Breadcrumb from 'newsletters/breadcrumb.jsx';
 import Hooks from 'wp-js-hooks';
 import _ from 'underscore';
 import { withRouter } from 'react-router-dom';
+import { GlobalContext } from 'context/index.jsx';

 class NewsletterTypes extends React.Component {
  constructor(props) {
@@ -108,7 +109,12 @@ class NewsletterTypes extends React.Component {
          'MailPoet Free version': window.mailpoet_version,
        });
      } catch (response) {
-        MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
+        if (response.errors.length > 0) {
+          this.context.notices.error(
+            response.errors.map((error) => <p key={error.message}>{error.message}</p>),
+            { scroll: true }
+          );
+        }
        return;
      }
    }
@@ -134,8 +140,8 @@ class NewsletterTypes extends React.Component {
    }).fail((response) => {
      this.setState({ isCreating: false });
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -289,6 +295,8 @@ class NewsletterTypes extends React.Component {
  }
 }

+NewsletterTypes.contextType = GlobalContext;
+
 NewsletterTypes.propTypes = {
  filter: PropTypes.func,
  history: PropTypes.shape({
--- a/assets/js/src/newsletters/types/notification/notification.jsx
+++ b/assets/js/src/newsletters/types/notification/notification.jsx
@@ -5,6 +5,7 @@ import Breadcrumb from 'newsletters/breadcrumb.jsx';
 import _ from 'underscore';
 import Scheduling from 'newsletters/types/notification/scheduling.jsx';
 import { withRouter } from 'react-router-dom';
+import { GlobalContext } from 'context/index.jsx';

 const field = {
  name: 'options',
@@ -45,8 +46,8 @@ class NewsletterNotification extends React.Component {
      this.showTemplateSelection(response.data.id);
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -84,6 +85,8 @@ class NewsletterNotification extends React.Component {
  }
 }

+NewsletterNotification.contextType = GlobalContext;
+
 NewsletterNotification.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
--- a/assets/js/src/newsletters/types/standard.jsx
+++ b/assets/js/src/newsletters/types/standard.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 import Breadcrumb from 'newsletters/breadcrumb.jsx';
 import { withRouter } from 'react-router-dom';
+import { GlobalContext } from 'context/index.jsx';

 class NewsletterStandard extends React.Component {
  componentDidMount() {
@@ -18,8 +19,8 @@ class NewsletterStandard extends React.Component {
      this.showTemplateSelection(response.data.id);
    }).fail((response) => {
      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map((error) => error.message),
+        this.context.notices.error(
+          response.errors.map((error) => <p key={error.message}>{error.message}</p>),
          { scroll: true }
        );
      }
@@ -40,6 +41,8 @@ class NewsletterStandard extends React.Component {
  }
 }

+NewsletterStandard.contextType = GlobalContext;
+
 NewsletterStandard.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,