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;