Extract note to a separate component

[MAILPOET-2832]

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 (
+    <h3>
+      {MailPoet.I18n.t('subscribersInPlan')
+        .replace('%$1d', subscribersLimit.toLocaleString())}
+      {' '}
+      <HelpTooltip
+        tooltip={MailPoet.I18n.t('subscribersInPlanTooltip')}
+        place="right"
+      />
+    </h3>
+  );
+};
+
+export default SubscribersLimit;

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) {
         <Link className="page-title-action" to="/new-segment" data-automation-id="new-segment">{MailPoet.I18n.t('newSegment')}</Link>
       </h1>
 
-      {window.mailpoet_subscribers_limit && (
+      <SubscribersLimit subscribersLimit={window.mailpoet_subscribers_limit} />
-        <h3>
-          {MailPoet.I18n.t('subscribersInPlan')
-            .replace('%$1d', window.mailpoet_subscribers_limit.toLocaleString())}
-          {' '}
-          <HelpTooltip
-            tooltip={MailPoet.I18n.t('subscribersInPlanTooltip')}
-            place="right"
-          />
-        </h3>
-      )}
 
       <Tabs />
 

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 && (
+        <SubscribersLimit subscribersLimit={window.mailpoet_subscribers_limit} />
-          <h3>
-            {MailPoet.I18n.t('subscribersInPlan')
-              .replace('%$1d', window.mailpoet_subscribers_limit.toLocaleString())}
-            {' '}
-            <HelpTooltip
-              tooltip={MailPoet.I18n.t('subscribersInPlanTooltip')}
-              place="right"
-            />
-          </h3>
-        )}
 
         <Tabs />
 

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')}
           </a>
         </h1>
-        {window.mailpoet_subscribers_limit && (
+
-          <h3>
+        <SubscribersLimit subscribersLimit={window.mailpoet_subscribers_limit} />
-            {MailPoet.I18n.t('subscribersInPlan')
-              .replace('%$1d', window.mailpoet_subscribers_limit.toLocaleString())}
-            {' '}
-            <HelpTooltip
-              tooltip={MailPoet.I18n.t('subscribersInPlanTooltip')}
-              place="right"
-            />
-          </h3>
-        )}
 
         <SubscribersLimitNotice />
         <InvalidMssKeyNotice