Add premium banner when premium plugin is missing

[MAILPOET-3102]

assets/css/src/components-plugin/_stats.scss

@@ -16,6 +16,11 @@
   margin-bottom: 3rem;
 }
 
+.mailpoet_stat_triple-spaced .mailpoet-premium-required,
+.mailpoet-stat-subscriber-engagement .mailpoet-premium-required {
+  margin: 70px auto;
+}
+
 .mailpoet_stat_force-wrap {
   word-break: break-all;
 }
@@ -29,12 +34,6 @@
   width: 60%;
 }
 
-.mailpoet_stats_premium_banner {
-  background-color: #fed2bf;
-  padding: 10px;
-  text-align: center;
-}
-
 @include breakpoint-max-width(520px) {
   .mailpoet_stat_info {
     display: none;

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

@@ -137,7 +137,9 @@ class CampaignStatsPage extends React.Component {
           </div>
 
           <h2>{MailPoet.I18n.t('subscriberEngagement')}</h2>
-          {Hooks.applyFilters('mailpoet_newsletters_subscriber_engagement', <PremiumBanner />, location, match.params, newsletter)}
+          <div className="mailpoet-stat-subscriber-engagement">
+            {Hooks.applyFilters('mailpoet_newsletters_subscriber_engagement', <PremiumBanner />, location, match.params, newsletter)}
+          </div>
         </div>
       </>
     );

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
+import PremiumRequired from 'common/premium_required/premium_required';
 
 const PremiumBanner = () => {
   if (!window.mailpoet_display_detailed_stats) {
@@ -14,12 +15,23 @@ const PremiumBanner = () => {
       </a>
     );
 
+    const description = (
+      <>
+        {MailPoet.I18n.t('premiumBannerDescription')}
+        {' '}
+        <a href="admin.php?page=mailpoet-premium">
+          {MailPoet.I18n.t('learnMore')}
+        </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>
+      <PremiumRequired
+        title={MailPoet.I18n.t('premiumFeature')}
+        message={description}
+        actionButton={ctaButton}
+      />
     );
   }
   if (window.mailpoet_subscribers_limit_reached) {

views/newsletters.html

@@ -201,7 +201,7 @@
     'pickCampaignType': __('Select type of email'),
     'createFirstEmailTitle': __('Create your first email'),
     'seeVideoGuide': __('See video guide'),
-    'premiumFeature': __('This is a Premium feature.'),
+    'premiumFeature': __('This is a Premium feature'),
     'learnMore': __('Learn more'),
     'regularNewsletterTypeTitle': __('Newsletter'),
     'regularNewsletterTypeDescription': __('Send a newsletter with images, buttons, dividers, and social bookmarks. Or, just send a basic text email.'),
@@ -219,6 +219,7 @@
     'postNotificationSubjectLineTip': __("Insert [newsletter:total] to show number of posts, [newsletter:post_title] to show the latest post's title & [newsletter:number] to display the issue number."),
     'activate': __('Activate'),
     'sendWelcomeEmailWhen': __('Send this Welcome Email when...'),
+    'premiumBannerDescription': __('Learn more about your subscribers and optimize your campaigns. See who opened your emails, which links they clicked, and then use the data to make your emails even better. And if you run a WooCommerce store, you’ll also see the revenue earned per email.'),
 
     'daily': __('Once a day at...'),
     'weekly': __('Weekly on...'),
@@ -429,10 +430,7 @@
     'subscriberEngagement': __('Subscriber Engagement'),
     'googleAnalytics': __('Google Analytics campaign name'),
 
-    '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'),
 
     'gaCampaignLine': __('Google Analytics Campaign'),
     'gaCampaignTip': __('For example, “Spring email”. [link]Read the guide.[/link]'),