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 5f8c03f24f..c1b12e164b 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,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') => ( ); +const getPremiumCtaButton = (buttonText: string) => ( + +); + 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 ? ( - - ) : ( - 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); diff --git a/mailpoet/assets/js/src/common/premium_key/key_messages/premium_messages.tsx b/mailpoet/assets/js/src/common/premium_key/key_messages/premium_messages.tsx index b231174564..6ae7c6b49d 100644 --- a/mailpoet/assets/js/src/common/premium_key/key_messages/premium_messages.tsx +++ b/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 ( <> -
- {props.message} -
- {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 ; case PremiumStatus.VALID_PREMIUM_PLUGIN_NOT_INSTALLED: return ( - ); case PremiumStatus.VALID_PREMIUM_PLUGIN_NOT_ACTIVE: return ( -