Update stats page banners for new free plan limit [MAILPOET-2492]

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

@@ -2,13 +2,8 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 
 const PremiumBanner = () => {
-  if (window.mailpoet_display_detailed_stats) {
+  if (!window.mailpoet_display_detailed_stats) {
-    return null;
+    const ctaButton = (
-  }
-
-  let ctaButton = null;
-  if (window.mailpoet_subscribers_count <= window.mailpoet_free_premium_subscribers_limit) {
-    ctaButton = (
       <a
         className="button"
         href={MailPoet.MailPoetComUrlFactory.getFreePlanUrl({ utm_medium: 'stats', utm_campaign: 'signup' })}
@@ -18,26 +13,43 @@ const PremiumBanner = () => {
         {MailPoet.I18n.t('premiumBannerCtaFree')}
       </a>
     );
-  } else {
+
-    ctaButton = (
+    return (
-      <a
+      <div className="mailpoet_stats_premium_banner">
-        className="button"
+        <h1>{MailPoet.I18n.t('premiumBannerTitle')}</h1>
-        href={MailPoet.MailPoetComUrlFactory.getPricingPageUrl(window.mailpoet_subscribers_count)}
+        <p>{ctaButton}</p>
-        target="_blank"
+        <a href="admin.php?page=mailpoet-premium">{MailPoet.I18n.t('premiumBannerLink')}</a>
-        rel="noopener noreferrer"
+      </div>
-      >
-        {MailPoet.I18n.t('premiumBannerCtaPremium')}
-      </a>
     );
   }
+  if (window.mailpoet_subscribers_limit_reached) {
+    const hasValidApiKey = window.mailpoet_has_valid_api_key;
+    const title = MailPoet.I18n.t('subscribersLimitNoticeTitle')
+      .replace('[subscribersLimit]', window.mailpoet_subscribers_limit);
+    const youReachedTheLimit = MailPoet.I18n.t(hasValidApiKey ? 'yourPlanLimit' : 'freeVersionLimit')
+      .replace('[subscribersLimit]', window.mailpoet_subscribers_limit);
+    const upgradeLink = hasValidApiKey
+      ? 'https://account.mailpoet.com/upgrade'
+      : `https://account.mailpoet.com/?s=${window.mailpoet_subscribers_count + 1}`;
 
-  return (
+    return (
-    <div className="mailpoet_stats_premium_banner">
+      <div className="mailpoet_stats_premium_banner">
-      <h1>{MailPoet.I18n.t('premiumBannerTitle')}</h1>
+        <h1>{title}</h1>
-      <p>{ctaButton}</p>
+        <p>{youReachedTheLimit}</p>
-      <a href="admin.php?page=mailpoet-premium">{MailPoet.I18n.t('premiumBannerLink')}</a>
+        <p>
-    </div>
+          <a
-  );
+            target="_blank"
+            rel="noopener noreferrer"
+            className="button"
+            href={upgradeLink}
+          >
+            {MailPoet.I18n.t('upgradeNow')}
+          </a>
+        </p>
+      </div>
+    );
+  }
+  return null;
 };
 
 export default PremiumBanner;