New free plan announcement

[MAILPOET-2051]

assets/js/src/announcements/free_plan_announcement.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+class FreePlanAnnouncement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.dismissNotice = this.dismissNotice.bind(this);
+    this.state = {
+      announcement_seen: window.mailpoet_free_plan_announcement_seen,
+    };
+  }
+
+  dismissNotice() {
+    this.setState({ announcement_seen: true });
+    window.mailpoet_free_plan_announcement_seen = true;
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'settings',
+      action: 'set',
+      data: {
+        free_plan_announcement_seen: 1,
+      },
+    });
+  }
+
+  render() {
+    return (
+      (!this.state.announcement_seen)
+      && (
+        <div className="mailpoet_free_plan_announcement">
+          <h3>{MailPoet.I18n.t('freePlanTitle')}</h3>
+          <p>{MailPoet.I18n.t('freePlanDescription')}</p>
+          <a
+            className="button-primary"
+            href="https://www.mailpoet.com/free-plan/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {MailPoet.I18n.t('freePlanButton')}
+          </a>
+          <button
+            type="button"
+            className="notice-dismiss"
+            onClick={this.dismissNotice}
+          >
+            <span className="screen-reader-text">{MailPoet.I18n.t('dismissButton')}</span>
+          </button>
+        </div>
+      )
+    );
+  }
+}
+
+export default FreePlanAnnouncement;

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

@@ -1,23 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import MailPoet from 'mailpoet';
+import FreePlanAnnouncement from 'announcements/free_plan_announcement.jsx';
 
 const ListingHeading = () => (
-  <h1 className="title">
-    {MailPoet.I18n.t('pageTitle')}
-    <Link
-      id="mailpoet-new-email"
-      className="page-title-action"
-      to="/new"
-      onClick={() => MailPoet.trackEvent(
-        'Emails > Add New',
-        { 'MailPoet Free version': window.mailpoet_version }
-      )}
-      data-automation-id="new_email"
-    >
-      {MailPoet.I18n.t('new')}
-    </Link>
-  </h1>
+  <div>
+    {
+      MailPoet.FeaturesController.isSupported('new-free-plan')
+      && <FreePlanAnnouncement />
+    }
+
+    <h1 className="title">
+      {MailPoet.I18n.t('pageTitle')}
+      <Link
+        id="mailpoet-new-email"
+        className="page-title-action"
+        to="/new"
+        onClick={() => MailPoet.trackEvent(
+          'Emails > Add New',
+          { 'MailPoet Free version': window.mailpoet_version }
+        )}
+        data-automation-id="new_email"
+      >
+        {MailPoet.I18n.t('new')}
+      </Link>
+    </h1>
+  </div>
 );