Reuse existing component and fixed behavior checking premium accessibility

[MAILPOET-5429]

mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react';
+import jQuery from 'jquery';
+import { ReactNode, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import { PremiumRequired } from 'common/premium_required/premium_required';
@@ -11,6 +12,7 @@ type Props = {
 };
 
 const {
+  adminPluginsUrl,
   subscribersLimitReached,
   subscribersLimit,
   subscribersCount,
@@ -49,7 +51,9 @@ export function PremiumBannerWithUpgrade({
   let bannerMessage: ReactNode;
   let ctaButton: ReactNode;
 
-  if (anyValidKey && !premiumActive) {
+  const [loading, setLoading] = useState(false);
+
+  if (hasValidPremiumKey && (!isPremiumPluginInstalled || !premiumActive)) {
     bannerMessage = getBannerMessage(
       __(
         'Your current MailPoet plan includes advanced features, but they require the MailPoet Premium plugin to be installed and activated.',
@@ -57,16 +61,49 @@ export function PremiumBannerWithUpgrade({
       ),
     );
 
-    ctaButton = isPremiumPluginInstalled
-      ? getCtaButton(
-          __('Activate MailPoet Premium plugin', 'mailpoet'),
-          premiumPluginActivationUrl,
-          '_self',
-        )
-      : getCtaButton(
-          __('Download MailPoet Premium plugin', 'mailpoet'),
-          premiumPluginDownloadUrl,
-        );
+    ctaButton = isPremiumPluginInstalled ? (
+      <Button
+        withSpinner={loading}
+        href={premiumPluginActivationUrl}
+        rel="noopener noreferrer"
+        onClick={(e) => {
+          e.preventDefault();
+          setLoading(true);
+
+          jQuery
+            .get(premiumPluginActivationUrl)
+            .then((response) => {
+              if (response.includes('Plugin activated')) {
+                window.location.reload();
+              }
+            })
+            .catch(() => {
+              setLoading(false);
+              MailPoet.Notice.error(
+                ReactStringReplace(
+                  __(
+                    'We were unable to activate the premium plugin, please try visiting the [link]plugin page link[/link] to activate it manually.',
+                    'mailpoet',
+                  ),
+                  /\[link\](.*?)\[\/link\]/g,
+                  (match) =>
+                    `<a rel="noreferrer" href=${adminPluginsUrl}>${match}</a>`,
+                ).join(''),
+                { isDismissible: false },
+              );
+            });
+        }}
+      >
+        {loading
+          ? __('Activating MailPoet premium...', 'mailpoet')
+          : __('Activate MailPoet Premium plugin', 'mailpoet')}
+      </Button>
+    ) : (
+      getCtaButton(
+        __('Download MailPoet Premium plugin', 'mailpoet'),
+        premiumPluginDownloadUrl,
+      )
+    );
   } else if (subscribersLimitReached) {
     bannerMessage = getBannerMessage(
       __(

mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.tsx

@@ -2,112 +2,41 @@ import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import { Button } from 'common/button/button';
 import { PremiumRequired } from 'common/premium_required/premium_required';
-import { useState } from 'react';
-import jQuery from 'jquery';
-import ReactStringReplace from 'react-string-replace';
 import { withBoundary } from '../../common';
+import { PremiumBannerWithUpgrade } from '../../common/premium_banner_with_upgrade/premium_banner_with_upgrade';
 
 function SkipDisplayingDetailedStats() {
-  let ctaButton;
-  let description;
+  const ctaButton = (
+    <Button
+      href={MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
+        MailPoet.subscribersCount,
+        MailPoet.currentWpUserEmail,
+        'starter',
+        { utm_medium: 'stats', utm_campaign: 'signup' },
+      )}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {__('Upgrade', 'mailpoet')}
+    </Button>
+  );
 
-  const [loading, setLoading] = useState(false);
-
-  if (
-    MailPoet.hasValidPremiumKey &&
-    (!MailPoet.isPremiumPluginInstalled || !MailPoet.premiumActive)
-  ) {
-    description = (
-      <p>
-        {__(
-          'Your current MailPoet plan includes advanced features, but they require the MailPoet Premium plugin to be installed and activated.',
-          'mailpoet',
-        )}
-      </p>
-    );
-    ctaButton = (
-      <Button
-        withSpinner={loading}
-        href={MailPoet.premiumPluginActivationUrl}
-        rel="noopener noreferrer"
-        onClick={(e) => {
-          e.preventDefault();
-          setLoading(true);
-
-          jQuery
-            .get(MailPoet.premiumPluginActivationUrl)
-            .then((response) => {
-              if (response.includes('Plugin activated')) {
-                window.location.reload();
-              }
-            })
-            .catch(() => {
-              setLoading(false);
-              MailPoet.Notice.error(
-                ReactStringReplace(
-                  __(
-                    'We were unable to activate the premium plugin, please try visiting the [link]plugin page link[/link] to activate it manually.',
-                    'mailpoet',
-                  ),
-                  /\[link\](.*?)\[\/link\]/g,
-                  (match) =>
-                    `<a rel="noreferrer" href=${MailPoet.adminPluginsUrl}>${match}</a>`,
-                ).join(''),
-                { isDismissible: false },
-              );
-            });
-        }}
-      >
-        {loading
-          ? __('Activating MailPoet premium...', 'mailpoet')
-          : __('Activate MailPoet Premium plugin', 'mailpoet')}
-      </Button>
-    );
-    // If the premium plugin is not installed, we need to provide a download link
-    if (!MailPoet.isPremiumPluginInstalled) {
-      ctaButton = (
-        <Button
-          href={MailPoet.premiumPluginDownloadUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {__('Download MailPoet Premium plugin', 'mailpoet')}
-        </Button>
-      );
-    }
-  } else {
-    description = (
-      <p>
-        {__(
-          '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. All starting $10 per month.',
-          'mailpoet',
-        )}{' '}
-        <a href="admin.php?page=mailpoet-upgrade">
-          {__('Learn more', 'mailpoet')}
-        </a>
-        .
-      </p>
-    );
-    ctaButton = (
-      <Button
-        href={MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
-          MailPoet.subscribersCount,
-          MailPoet.currentWpUserEmail,
-          'starter',
-          { utm_medium: 'stats', utm_campaign: 'signup' },
-        )}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {__('Upgrade', 'mailpoet')}
-      </Button>
-    );
-  }
+  const description = (
+    <p>
+      {__(
+        '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. All starting $10 per month.',
+        'mailpoet',
+      )}{' '}
+      <a href="admin.php?page=mailpoet-upgrade">
+        {__('Learn more', 'mailpoet')}
+      </a>
+      .
+    </p>
+  );
 
   return (
     <div className="mailpoet-stats-premium-required">
-      <PremiumRequired
-        title={__('This is a Premium feature', 'mailpoet')}
+      <PremiumBannerWithUpgrade
         message={description}
         actionButton={ctaButton}
       />