Unify duplicated API error notices

[MAILPOET-2844]

assets/js/src/listing/notices.jsx

@@ -25,6 +25,10 @@ const MailerError = (props) => {
   if (!props.mta_log.error || props.mta_log.status !== 'paused' || props.mta_log.error.operation === 'authorization') {
     return null;
   }
+  // do not display MailPoet API Key error twice
+  if (props.mta_log.error.operation === 'send' && props.mta_method === 'MailPoet' && MailPoet.hasInvalidMssApiKey) {
+    return null;
+  }
   if (props.mta_log.error.operation === 'migration') {
     return (
       <div className="mailpoet_notice notice notice-warning">

assets/js/src/newsletters/send.jsx

@@ -15,7 +15,6 @@ import { fromUrl } from 'common/thumbnail.ts';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import ReactStringReplace from 'react-string-replace';
-import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
 import slugify from 'slugify';
 import { GlobalContext } from 'context/index.jsx';
 
@@ -478,10 +477,6 @@ class NewsletterSend extends React.Component {
           onChange={this.handleFormChange}
           onSubmit={this.handleSave}
         >
-          <InvalidMssKeyNotice
-            mssKeyInvalid={window.mailpoet_mss_key_invalid}
-            subscribersCount={window.mailpoet_subscribers_count}
-          />
           <p>
             <Button variant="secondary" type="submit" automationId="email-save-draft">
               {MailPoet.I18n.t('saveDraftAndClose')}

assets/js/src/notices/invalid_mss_key_notice.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Notice from 'notices/notice';
 import MailPoet from 'mailpoet';
+import ReactStringReplace from 'react-string-replace';
 
 type Props = {
   mssKeyInvalid: boolean;
@@ -12,7 +13,15 @@ const InvalidMssKeyNotice = ({ mssKeyInvalid, subscribersCount }: Props) => {
   return (
     <Notice type="error" timeout={false} closable={false} renderInPlace>
       <h3>{MailPoet.I18n.t('allSendingPausedHeader')}</h3>
-      <p>{MailPoet.I18n.t('allSendingPausedBody')}</p>
+      <p>
+        {
+          ReactStringReplace(
+            MailPoet.I18n.t('allSendingPausedBody'),
+            /\[link\](.*?)\[\/link\]/g,
+            (match) => <a href="?page=mailpoet-settings#premium" key="check-sending">{ match }</a>
+          )
+        }
+      </p>
       <p>
         <a
           href={`https://account.mailpoet.com?s=${subscribersCount}`}

views/newsletters.html

@@ -294,7 +294,7 @@
     'schedule': __('Schedule'),
 
     'allSendingPausedHeader': __('All sending is currently paused!'),
-    'allSendingPausedBody': __('Your key to send with MailPoet is invalid.'),
+    'allSendingPausedBody': __('Your [link]API key[/link] to send with MailPoet is invalid.'),
     'allSendingPausedLink': __('Purchase a key'),
 
     'next': __('Next'),

views/segments.html

@@ -99,7 +99,7 @@
     'numberOfItemsSingular': __('1 item'),
     'numberOfItemsMultiple': __('%$1d items'),
     'allSendingPausedHeader': __('All sending is currently paused!'),
-    'allSendingPausedBody': __('Your key to send with MailPoet is invalid.'),
+    'allSendingPausedBody': __('Your [link]API key[/link] to send with MailPoet is invalid.'),
     'allSendingPausedLink': __('Purchase a key'),
 
     'segmentDescriptionTip': __('This text box is for your own use and is never shown to your subscribers.'),

views/subscribers/subscribers.html

@@ -118,7 +118,7 @@
     'WPUsersSegment': __('WordPress Users'),
     'WPUserEditNotice': __('This subscriber is a registered WordPress user. [link]Edit his/her profile[/link] to change his/her email.'),
     'allSendingPausedHeader': __('All sending is currently paused!'),
-    'allSendingPausedBody': __('Your key to send with MailPoet is invalid.'),
+    'allSendingPausedBody': __('Your [link]API key[/link] to send with MailPoet is invalid.'),
     'allSendingPausedLink': __('Purchase a key'),
     'statsListingActionTitle': __('Statistics'),
     'statsHeading': _x('Stats: %s', 'This is a heading for the subscribers statistics page example: "Stats: mailpoet@example.com"'),