diff --git a/assets/js/src/newsletters/campaign_stats/premium_banner.jsx b/assets/js/src/newsletters/campaign_stats/premium_banner.jsx index 9ac2eebe62..ca615fad46 100644 --- a/assets/js/src/newsletters/campaign_stats/premium_banner.jsx +++ b/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) { - return null; - } - - let ctaButton = null; - if (window.mailpoet_subscribers_count <= window.mailpoet_free_premium_subscribers_limit) { - ctaButton = ( + if (!window.mailpoet_display_detailed_stats) { + const ctaButton = ( { {MailPoet.I18n.t('premiumBannerCtaFree')} ); - } else { - ctaButton = ( - - {MailPoet.I18n.t('premiumBannerCtaPremium')} - + + return ( +
+

{MailPoet.I18n.t('premiumBannerTitle')}

+

{ctaButton}

+ {MailPoet.I18n.t('premiumBannerLink')} +
); } + 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 ( -
-

{MailPoet.I18n.t('premiumBannerTitle')}

-

{ctaButton}

- {MailPoet.I18n.t('premiumBannerLink')} -
- ); + return ( +
+

{title}

+

{youReachedTheLimit}

+

+ + {MailPoet.I18n.t('upgradeNow')} + +

+
+ ); + } + return null; }; export default PremiumBanner;