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 ( +
); } + 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 ( - - ); + return ( + + ); + } + return null; }; export default PremiumBanner;