Use Premium Modal on upgrade banner

[MAILPOET-5435]

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

@@ -1,10 +1,10 @@
-import jQuery from 'jquery';
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import { PremiumRequired } from 'common/premium_required/premium_required';
 import { Button } from 'common/button/button';
 import ReactStringReplace from 'react-string-replace';
+import { PremiumMessageWithModal } from 'common/premium_key/key_messages';
 
 type Props = {
   message: ReactNode;
@@ -12,7 +12,6 @@ type Props = {
 };
 
 const {
-  adminPluginsUrl,
   subscribersLimitReached,
   subscribersLimit,
   subscribersCount,
@@ -20,8 +19,6 @@ const {
   hasValidApiKey,
   hasValidPremiumKey,
   isPremiumPluginInstalled,
-  premiumPluginDownloadUrl,
-  premiumPluginActivationUrl,
   pluginPartialKey,
 } = MailPoet;
 
@@ -44,6 +41,10 @@ const getCtaButton = (message: string, link: string, target = '_blank') => (
   </Button>
 );
 
+const getPremiumCtaButton = (buttonText: string) => (
+  <PremiumMessageWithModal buttonText={buttonText} />
+);
+
 export function PremiumBannerWithUpgrade({
   message,
   actionButton,
@@ -51,8 +52,6 @@ export function PremiumBannerWithUpgrade({
   let bannerMessage: ReactNode;
   let ctaButton: ReactNode;
 
-  const [loading, setLoading] = useState(false);
-
   if (hasValidPremiumKey && (!isPremiumPluginInstalled || !premiumActive)) {
     bannerMessage = getBannerMessage(
       __(
@@ -61,49 +60,9 @@ export function PremiumBannerWithUpgrade({
       ),
     );
 
-    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,
-      )
-    );
+    ctaButton = isPremiumPluginInstalled
+      ? getPremiumCtaButton(__('Activate MailPoet Premium plugin', 'mailpoet'))
+      : getPremiumCtaButton(__('Download MailPoet Premium plugin', 'mailpoet'));
   } else if (subscribersLimitReached) {
     bannerMessage = getBannerMessage(
       __(
@@ -116,6 +75,9 @@ export function PremiumBannerWithUpgrade({
       ? MailPoet.MailPoetComUrlFactory.getUpgradeUrl(pluginPartialKey)
       : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
           +subscribersCount + 1,
+          null,
+          null,
+          null,
         );
 
     ctaButton = getCtaButton(__('Upgrade your plan', 'mailpoet'), link);

mailpoet/assets/js/src/common/premium_key/key_messages/premium_messages.tsx

@@ -21,19 +21,26 @@ function ActiveMessage(props: ActiveMessageProps) {
 }
 
 type PremiumMessageProps = {
-  message: string;
+  message?: string;
   buttonText: string;
 };
 
-function PremiumMessage(props: PremiumMessageProps) {
+function PremiumMessageWithModal(props: PremiumMessageProps) {
   const [showPremiumModal, setShowPremiumModal] = useState(false);
 
   return (
     <>
-      <div className="mailpoet_error mailpoet_install_premium_message">
-        {props.message}
-      </div>
-      <Button onClick={() => setShowPremiumModal(true)}>
+      {props.message && (
+        <div className="mailpoet_error mailpoet_install_premium_message">
+          {props.message}
+        </div>
+      )}
+      <Button
+        onClick={(e) => {
+          e.preventDefault();
+          setShowPremiumModal(true);
+        }}
+      >
         {props.buttonText}
       </Button>
       {showPremiumModal && (
@@ -71,7 +78,7 @@ type Props = {
   canUseSuccessClass: boolean;
 };
 
-export function PremiumMessages(props: Props) {
+function PremiumMessages(props: Props) {
   const { premiumStatus: status } = useSelector('getKeyActivationState')();
 
   switch (status) {
@@ -79,14 +86,14 @@ export function PremiumMessages(props: Props) {
       return <ActiveMessage canUseSuccessClass={props.canUseSuccessClass} />;
     case PremiumStatus.VALID_PREMIUM_PLUGIN_NOT_INSTALLED:
       return (
-        <PremiumMessage
+        <PremiumMessageWithModal
           message={__('MailPoet Premium is not installed.', 'mailpoet')}
           buttonText={__('Download MailPoet Premium plugin', 'mailpoet')}
         />
       );
     case PremiumStatus.VALID_PREMIUM_PLUGIN_NOT_ACTIVE:
       return (
-        <PremiumMessage
+        <PremiumMessageWithModal
           message={__(
             'MailPoet Premium is installed but not activated.',
             'mailpoet',
@@ -104,3 +111,5 @@ export function PremiumMessages(props: Props) {
 PremiumMessages.defaultProps = {
   keyMessage: '',
 };
+
+export { PremiumMessages, PremiumMessageWithModal };