diff --git a/assets/js/src/common/subscribers_limit.tsx b/assets/js/src/common/subscribers_limit.tsx
new file mode 100644
index 0000000000..b0b3bf759a
--- /dev/null
+++ b/assets/js/src/common/subscribers_limit.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import HelpTooltip from 'help-tooltip.jsx';
+
+type Props = {
+ subscribersLimit: number | false,
+};
+
+const SubscribersLimit = ({ subscribersLimit }: Props) => {
+ if (!subscribersLimit) return null;
+ return (
+
+ {MailPoet.I18n.t('subscribersInPlan')
+ .replace('%$1d', subscribersLimit.toLocaleString())}
+ {' '}
+
+
+ );
+};
+
+export default SubscribersLimit;
diff --git a/assets/js/src/segments/dynamic_segments_list.jsx b/assets/js/src/segments/dynamic_segments_list.jsx
index 1ffc2fde83..4867aa70e6 100644
--- a/assets/js/src/segments/dynamic_segments_list.jsx
+++ b/assets/js/src/segments/dynamic_segments_list.jsx
@@ -3,9 +3,10 @@ import { Link } from 'react-router-dom';
import MailPoet from 'mailpoet';
import Listing from 'listing/listing.jsx';
import PropTypes from 'prop-types';
-import HelpTooltip from 'help-tooltip.jsx';
import Tabs from './tabs';
+import SubscribersLimit from '../common/subscribers_limit';
+
const columns = [
{
name: 'name',
@@ -125,17 +126,7 @@ function DynamicSegmentList(props) {
{MailPoet.I18n.t('newSegment')}
- {window.mailpoet_subscribers_limit && (
-
- {MailPoet.I18n.t('subscribersInPlan')
- .replace('%$1d', window.mailpoet_subscribers_limit.toLocaleString())}
- {' '}
-
-
- )}
+
diff --git a/assets/js/src/segments/list.jsx b/assets/js/src/segments/list.jsx
index be679c426d..9a2fa8832f 100644
--- a/assets/js/src/segments/list.jsx
+++ b/assets/js/src/segments/list.jsx
@@ -4,11 +4,11 @@ import MailPoet from 'mailpoet';
import classNames from 'classnames';
import PropTypes from 'prop-types';
-import HelpTooltip from 'help-tooltip.jsx';
import Listing from 'listing/listing.jsx';
import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
import InvalidMssKeyNotice from '../notices/invalid_mss_key_notice';
import Tabs from './tabs';
+import SubscribersLimit from '../common/subscribers_limit';
const isWPUsersSegment = (segment) => segment.type === 'wp_users';
const isWooCommerceCustomersSegment = (segment) => segment.type === 'woocommerce_users';
@@ -309,17 +309,7 @@ class SegmentList extends React.Component {
subscribersCount={window.mailpoet_subscribers_count}
/>
- {window.mailpoet_subscribers_limit && (
-
- {MailPoet.I18n.t('subscribersInPlan')
- .replace('%$1d', window.mailpoet_subscribers_limit.toLocaleString())}
- {' '}
-
-
- )}
+
diff --git a/assets/js/src/subscribers/list.jsx b/assets/js/src/subscribers/list.jsx
index bac02ea59d..8559ed7b18 100644
--- a/assets/js/src/subscribers/list.jsx
+++ b/assets/js/src/subscribers/list.jsx
@@ -1,6 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import HelpTooltip from 'help-tooltip.jsx';
import jQuery from 'jquery';
import MailPoet from 'mailpoet';
@@ -11,6 +10,7 @@ import Listing from 'listing/listing.jsx';
import Selection from 'form/fields/selection.jsx';
import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
+import SubscribersLimit from '../common/subscribers_limit';
const columns = [
{
@@ -376,17 +376,8 @@ class SubscriberList extends React.Component {
{MailPoet.I18n.t('export')}
- {window.mailpoet_subscribers_limit && (
-
- {MailPoet.I18n.t('subscribersInPlan')
- .replace('%$1d', window.mailpoet_subscribers_limit.toLocaleString())}
- {' '}
-
-
- )}
+
+