Create premium banner component for stats page

[MAILPOET-2104]

assets/css/src/components/_stats.scss

@@ -29,6 +29,12 @@
   width: 60%;
 }
 
+.mailpoet_stats_premium_banner {
+  background-color: $info-message-background-color;
+  padding: 10px;
+  text-align: center;
+}
+
 @media screen and (max-width: 520px) {
   .mailpoet_stat_info {
     display: none;

assets/css/src/components/newsletterEditor/_variables.scss

@@ -29,3 +29,5 @@ $newsletter-width: 660px;
 
 $text-line-height: 1.6em;
 $sidebar-text-size: 13px;
+
+$info-message-background-color: #fed2bf;

assets/js/src/newsletters/campaign_stats/premium_banner.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const PremiumBanner = () => {
+  if (window.mailpoet_premium_active) {
+    return null;
+  }
+
+  let ctaButton = null;
+  if (window.mailpoet_subscribers_count <= window.mailpoet_free_premium_subscribers_limit) {
+    ctaButton = (
+      <a
+        className="button"
+        href="https://www.mailpoet.com/free-plan/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {MailPoet.I18n.t('premiumBannerCtaFree')}
+      </a>
+    );
+  } else {
+    ctaButton = (
+      <a
+        className="button"
+        href={`https://www.mailpoet.com/pricing/?subscribers=${window.mailpoet_subscribers_count}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {MailPoet.I18n.t('premiumBannerCtaPremium')}
+      </a>
+    );
+  }
+
+  return (
+    <div className="mailpoet_stats_premium_banner">
+      <h1>{MailPoet.I18n.t('premiumBannerTitle')}</h1>
+      <p>{ctaButton}</p>
+      <a href="admin.php?page=mailpoet-premium">{MailPoet.I18n.t('premiumBannerLink')}</a>
+    </div>
+  );
+};
+
+export default PremiumBanner;

lib/Config/Menu.php

@@ -702,6 +702,8 @@ class Menu {
     $data['premium_plugin_active'] = License::getLicense();
     $data['is_woocommerce_active'] = $this->woocommerce_helper->isWooCommerceActive();
     $data['is_mailpoet_update_available'] = array_key_exists(Env::$plugin_path, $this->wp->getPluginUpdates());
+    $data['subscribers_count'] = Subscriber::getTotalSubscribers();
+    $data['free_premium_subscribers_limit'] = License::FREE_PREMIUM_SUBSCRIBERS_LIMIT;
 
     $user_id = $data['current_wp_user']['ID'];
 

lib/Util/License/License.php

@@ -2,6 +2,8 @@
 namespace MailPoet\Util\License;
 
 class License {
+  const FREE_PREMIUM_SUBSCRIBERS_LIMIT = 1000;
+
   static function getLicense($license = false) {
     if (!$license) {
       $license = defined('MAILPOET_PREMIUM_LICENSE') ?

views/newsletters.html

@@ -39,6 +39,8 @@
       var mailpoet_mss_active = <%= json_encode(mss_active) %>;
       var mailpoet_free_plan_announcement_seen = !!+'<%= settings.free_plan_announcement_seen %>';
       var mailpoet_mta_method = '<%= settings.mta.method %>';
+      var mailpoet_subscribers_count = <%= subscribers_count %>;
+      var mailpoet_free_premium_subscribers_limit = <%= free_premium_subscribers_limit %>;
     <% endautoescape %>
   </script>
 <% endblock %>
@@ -373,6 +375,11 @@
     'readMoreOnStats': __('Read more on stats.'),
     'clickedLinks': __('Clicked Links'),
     'subscriberEngagement': __('Subscriber Engagement'),
+
+    'premiumBannerTitle': __('Buy the Premium to see your stats', 'mailpoet'),
+    'premiumBannerCtaFree': __('Sign Up for Free', 'mailpoet'),
+    'premiumBannerCtaPremium': __('Purchase Now', 'mailpoet'),
+    'premiumBannerLink': __('Learn more about Premium', 'mailpoet'),
   }) %>
 <% endblock %>