New free plan announcement

[MAILPOET-2051]

assets/css/src/components/_notice.scss

@@ -4,3 +4,18 @@
 
   p:empty { display: none; }
 }
+
+.mailpoet_free_plan_announcement {
+  background: #fff;
+  border-left: 4px solid #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 35px rgba(195, 65, 2, .2);
+  clear: both;
+  margin-bottom: 15px;
+  padding: 20px;
+  position: relative;
+
+  h3 {
+    margin: 0;
+  }
+}

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">
+  <div>
-    {MailPoet.I18n.t('pageTitle')}
+    {
-    <Link
+      MailPoet.FeaturesController.isSupported('new-free-plan')
-      id="mailpoet-new-email"
+      && <FreePlanAnnouncement />
-      className="page-title-action"
+    }
-      to="/new"
+
-      onClick={() => MailPoet.trackEvent(
+    <h1 className="title">
-        'Emails > Add New',
+      {MailPoet.I18n.t('pageTitle')}
-        { 'MailPoet Free version': window.mailpoet_version }
+      <Link
-      )}
+        id="mailpoet-new-email"
-      data-automation-id="new_email"
+        className="page-title-action"
-    >
+        to="/new"
-      {MailPoet.I18n.t('new')}
+        onClick={() => MailPoet.trackEvent(
-    </Link>
+          'Emails > Add New',
-  </h1>
+          { 'MailPoet Free version': window.mailpoet_version }
+        )}
+        data-automation-id="new_email"
+      >
+        {MailPoet.I18n.t('new')}
+      </Link>
+    </h1>
+  </div>
 );
 
 

views/newsletters.html

@@ -36,6 +36,7 @@
     var mailpoet_is_new_user = <%= newUser %>;
     var mailpoet_installed_at = '<%= settings.installed_at %>';
     var mailpoet_mss_active = <%= json_encode(mss_active) %>;
+    var mailpoet_free_plan_announcement_seen = !!+'<%= settings.free_plan_announcement_seen %>';
   </script>
 <% endblock %>
 
@@ -43,6 +44,8 @@
   <%= localize({
     'pageTitle': __('Emails'),
 
+    'dismissButton': __('Dismiss this notice.'),
+
     'tabStandardTitle': __('Newsletters'),
     'tabWelcomeTitle': __('Welcome Emails'),
     'tabNotificationTitle': __('Post Notifications'),
@@ -322,6 +325,10 @@
     'whatsNew': __("What’s new"),
     'updateMailPoetNotice': __('[link]Update MailPoet[/link] to see the latest changes'),
 
+    'freePlanTitle': __('A new and more generous free plan!'),
+    'freePlanDescription': __('MailPoet Premium and sending is now entirely free for users that have 1,000 subscribers or less.'),
+    'freePlanButton': __('Get MailPoet Premium for free now'),
+
     'congratulationsSendSuccessHeader': __('Congratulations, your newsletter is being sent!'),
     'congratulationsScheduleSuccessHeader': __('Congratulations, your newsletter is scheduled to be sent.'),
     'congratulationsWooSuccessHeader': __('Congratulations, your WooCommerce email has been activated.'),

webpack.config.js

@@ -255,6 +255,7 @@ const adminConfig = {
       'newsletters/listings/mixins.jsx',
       'newsletters/listings/heading.jsx',
       'announcements/feature_announcement.jsx',
+      'announcements/free_plan_announcement.jsx',
       'newsletters/types/automatic_emails/events_list.jsx',
       'newsletters/types/automatic_emails/breadcrumb.jsx',
       'newsletters/types/welcome/scheduling.jsx',