From d31483db2d60cbbb1a8e42db41e0f07a476fe78d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Mon, 31 Jul 2023 16:41:20 +0200
Subject: [PATCH] Reuse existing component and fixed behavior checking premium
 accessibility

[MAILPOET-5429]
---
 .../premium_banner_with_upgrade.tsx           |  61 +++++++--
 .../campaign_stats/premium_banner.tsx         | 127 ++++--------------
 2 files changed, 77 insertions(+), 111 deletions(-)

diff --git a/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx b/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
index a3adbca53a..ef0a86c300 100644
--- a/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
+++ b/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(
       __(
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.tsx b/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.tsx
index bb4916040b..3ca67d0b93 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.tsx
+++ b/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}
       />