Display friendlier mailer errors when sending paused

[MAILPOET-1699]

assets/js/src/newsletters/listings/mixins.jsx

@@ -421,44 +421,80 @@ const MailerMixin = {
     }
   },
   getMailerError(state) {
-    let mailerErrorNotice;
     if (state.meta.mta_log.error.operation === 'migration') {
-      mailerErrorNotice = state.meta.mta_log.error.error_message;
       return (
         <div>
-          <p>{ mailerErrorNotice }</p>
+          <p>{ state.meta.mta_log.error.error_message }</p>
         </div>
       );
     }
-    const mailerCheckSettingsNotice = ReactStringReplace(
+
-      MailPoet.I18n.t('mailerCheckSettingsNotice'),
+    // offer MSS when PHPMail is failing
-      /\[link\](.*?)\[\/link\]/g,
+    let mailerErrorCheckSettings;
-      match => (
+    if (state.meta.mta_method === 'PHPMail') {
-        <a href="?page=mailpoet-settings#mta" key="check-sending">{ match }</a>
+      mailerErrorCheckSettings = (
-      )
+        <>
-    );
+          <p>{ MailPoet.I18n.t('mailerSendErrorCheckConfiguration') }</p>
-    if (state.meta.mta_log.error.operation === 'send') {
+          <br />
-      mailerErrorNotice = MailPoet.I18n.t('mailerSendErrorNotice')
+          <p>
-        .replace('%$1s', state.meta.mta_method)
+            {
-        .replace('%$2s', state.meta.mta_log.error.error_message);
+              ReactStringReplace(
+                MailPoet.I18n.t('mailerSendErrorUseSendingService'),
+                /<b>(.*?)<\/b>/g,
+                match => <b>{ match }</b>
+              )
+            }
+          </p>
+          <p>
+            <a
+              href="https://www.mailpoet.com/free-plan/?utm_source=plugin&utm_campaign=sending-error"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              { MailPoet.I18n.t('mailerSendErrorSignUpForSendingService') }
+            </a>
+          </p>
+          <br />
+        </>
+      );
     } else {
-      mailerErrorNotice = MailPoet.I18n.t('mailerConnectionErrorNotice')
+      mailerErrorCheckSettings = (
-        .replace('%$1s', state.meta.mta_log.error.error_message);
+        <p>
+          {
+            ReactStringReplace(
+              MailPoet.I18n.t('mailerCheckSettingsNotice'),
+              /\[link\](.*?)\[\/link\]/g,
+              match => <a href="?page=mailpoet-settings#mta" key="check-sending">{ match }</a>
+            )
+          }
+        </p>
+      );
     }
+
+    // append error code if available
+    let mailerErrorMessage = state.meta.mta_log.error.error_message;
     if (state.meta.mta_log.error.error_code) {
-      mailerErrorNotice += ` ${MailPoet.I18n.t('mailerErrorCode')
+      mailerErrorMessage += mailerErrorMessage ? ', ' : '';
-        .replace('%$1s', state.meta.mta_log.error.error_code)}`;
+      mailerErrorMessage += MailPoet.I18n.t('mailerErrorCode').replace('%$1s', state.meta.mta_log.error.error_code);
     }
-    // eslint-disable-next-line react/no-danger
+
-    mailerErrorNotice = <p dangerouslySetInnerHTML={{ __html: mailerErrorNotice }} />;
     return (
       <div>
-        { mailerErrorNotice }
+        <p>
-        <p>{ mailerCheckSettingsNotice }</p>
+          {
+            state.meta.mta_log.error.operation === 'send'
+              ? MailPoet.I18n.t('mailerSendErrorNotice').replace('%$1s', state.meta.mta_method)
+              : MailPoet.I18n.t('mailerConnectionErrorNotice')
+          }
+          :
+          {' '}
+          <i>{ mailerErrorMessage }</i>
+        </p>
+        { mailerErrorCheckSettings }
         <p>
           <a
             href="javascript:;"
-            className="button"
+            className="button button-primary"
             onClick={MailerMixin.resumeMailerSending}
           >
             { MailPoet.I18n.t('mailerResumeSendingButton') }

views/newsletters.html

@@ -278,8 +278,11 @@
     'backToPostNotifications': __('Back to Post notifications'),
     'noSubscribers': __('No subscribers!'),
 
-    'mailerSendErrorNotice': __('Sending is paused because %$1s prevents MailPoet from delivering emails with the following error: %$2s'),
+    'mailerSendErrorNotice': __('Sending has been paused due to a technical issue with %$1s'),
-    'mailerConnectionErrorNotice': __('Sending is paused because the following connection issue prevents MailPoet from delivering emails: %$1s'),
+    'mailerSendErrorCheckConfiguration': __('Please check your sending method configuration, you may need to consult with your hosting company.'),
+    'mailerSendErrorUseSendingService': __('The easy alternative is to <b>send emails with MailPoet Sending Service</b> instead, like thousand of other users do.'),
+    'mailerSendErrorSignUpForSendingService': __('Sign up for free in minutes'),
+    'mailerConnectionErrorNotice': __('Sending is paused because the following connection issue prevents MailPoet from delivering emails'),
     'mailerErrorCode': __('Error code: %$1s'),
     'mailerCheckSettingsNotice': __('Check your [link]sending method settings[/link].'),
     'mailerResumeSendingButton': __('Resume sending'),