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())} - {' '} - -

- )} + +