From f8cc1e6f2091c4a54dc8de875fb7e58ef271351a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Wed, 15 May 2019 14:31:59 +0200
Subject: [PATCH] New free plan announcement

[MAILPOET-2051]
---
 assets/css/src/components/_notice.scss        | 15 ++++++
 .../announcements/free_plan_announcement.jsx  | 54 +++++++++++++++++++
 .../js/src/newsletters/listings/heading.jsx   | 38 +++++++------
 views/newsletters.html                        |  7 +++
 webpack.config.js                             |  1 +
 5 files changed, 100 insertions(+), 15 deletions(-)
 create mode 100644 assets/js/src/announcements/free_plan_announcement.jsx

diff --git a/assets/css/src/components/_notice.scss b/assets/css/src/components/_notice.scss
index 5810d8765d..8d56c25d8a 100644
--- a/assets/css/src/components/_notice.scss
+++ b/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;
+  }
+}
diff --git a/assets/js/src/announcements/free_plan_announcement.jsx b/assets/js/src/announcements/free_plan_announcement.jsx
new file mode 100644
index 0000000000..ce2861b809
--- /dev/null
+++ b/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;
diff --git a/assets/js/src/newsletters/listings/heading.jsx b/assets/js/src/newsletters/listings/heading.jsx
index 761d743c7b..d679a76a90 100644
--- a/assets/js/src/newsletters/listings/heading.jsx
+++ b/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>
 );
 
 
diff --git a/views/newsletters.html b/views/newsletters.html
index 2c4b1f8903..9ecc70e5b5 100644
--- a/views/newsletters.html
+++ b/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.'),
diff --git a/webpack.config.js b/webpack.config.js
index d85279f46a..9420bfb374 100644
--- a/webpack.config.js
+++ b/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',