Display a notice for transactional emails opt-in

[MAILPOET-2724]

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

@@ -17,6 +17,7 @@ import {
 } from 'newsletters/listings/utils.jsx';
 import NewsletterTypes from 'newsletters/types.jsx';
 import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
+import TransactionalEmailsProposeOptInNotice from 'notices/transactional_emails_propose_opt_in_notice';
 import { GlobalContext } from 'context/index.jsx';
 
 const mailpoetTrackingEnabled = (!!(window.mailpoet_tracking_enabled));
@@ -231,6 +232,11 @@ class NewsletterListStandard extends React.Component {
 
         <FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} />
         <SubscribersLimitNotice />
+        <TransactionalEmailsProposeOptInNotice
+          mailpoetInstalledDaysAgo={window.mailpoet_installed_days_ago}
+          sendTransactionalEmails={window.mailpoet_send_transactional_emails}
+          mtaMethod={window.mailpoet_mta_method}
+        />
 
         <ListingTabs tab="standard" />
 

assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Notice from 'notices/notice';
+import MailPoet from 'mailpoet';
+
+type Props = {
+  mailpoetInstalledDaysAgo: number,
+  sendTransactionalEmails: boolean,
+  mtaMethod: string,
+}
+
+const TransactionalEmailsProposeOptInNotice = ({
+  mailpoetInstalledDaysAgo,
+  sendTransactionalEmails,
+  mtaMethod,
+}: Props) => {
+  const enable = () => {};
+
+  const onClose = () => {};
+
+  if (mailpoetInstalledDaysAgo < 30) return null;
+  if (sendTransactionalEmails) return null;
+  if (mtaMethod === 'PHPMail') return null;
+
+  return (
+    <Notice type="success" timeout={false} onClose={onClose}>
+      <h3>{MailPoet.I18n.t('transactionalEmailNoticeTitle')}</h3>
+      <p>
+        {MailPoet.I18n.t('transactionalEmailNoticeBody')}
+        {' '}
+        <a
+          href="https://kb.mailpoet.com/article/292-choose-how-to-send-your-wordpress-websites-emails"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {MailPoet.I18n.t('transactionalEmailNoticeBodyReadMore')}
+        </a>
+      </p>
+      <p>
+        <button
+          type="button"
+          className="button"
+          onClick={enable}
+        >
+          {MailPoet.I18n.t('transactionalEmailNoticeCTA')}
+        </button>
+      </p>
+    </Notice>
+  );
+};
+
+export default TransactionalEmailsProposeOptInNotice;

views/newsletters.html

@@ -52,6 +52,8 @@
       var mailpoet_editor_javascript_url = '<%= getJavascriptScriptUrl("newsletter_editor.js") %>';
       var mailpoet_subscribers_count = <%= subscriber_count %>;
       var mailpoet_newsletters_count = <%= newsletters_count %>;
+      var mailpoet_send_transactional_emails = <%= json_encode(settings.send_transactional_emails == '1') %>;
+      var settings = <%= json_encode(settings) %>;
 
       <% if not(premium_plugin_active) %>
         var mailpoet_free_premium_subscribers_limit = <%= free_premium_subscribers_limit %>;
@@ -318,6 +320,10 @@
     'backToPostNotifications': __('Back to Post notifications'),
     'noSubscribers': __('No subscribers!'),
 
+    'transactionalEmailNoticeTitle': __('Good news! MailPoet can now send your website’s emails too'),
+    'transactionalEmailNoticeBody': __('All of your WordPress and WooCommerce emails are sent with your hosting company, unless you have an SMTP plugin. Would you like such emails to be delivered with MailPoet’s active sending method for better deliverability?'),
+    'transactionalEmailNoticeBodyReadMore': _x('Read more.', 'This is a link that leads to more information about transactional emails'),
+    'transactionalEmailNoticeCTA': _x('Enable', 'Button, after clicking it we will enable transactional emails'),
     'mailerSendErrorNotice': __('Sending has been paused due to a technical issue with %$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 thousands of other users do.'),