Display subscribers score on the listings page

[MAILPOET-3525]

assets/js/src/subscribers/list.jsx

@@ -15,6 +15,9 @@ import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
 import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
 import SubscribersInPlan from '../common/subscribers_in_plan';
 import SubscribersHeading from './heading';
+import { ListingsEngagementScore } from './listings_engagement_score';
+
+const mailpoetTrackingEnabled = (!!(window.mailpoet_tracking_enabled));
 
 const columns = [
   {
@@ -31,7 +34,11 @@ const columns = [
     name: 'segments',
     label: MailPoet.I18n.t('lists'),
   },
-
+  {
+    name: 'statistics',
+    label: MailPoet.I18n.t('statisticsColumn'),
+    display: mailpoetTrackingEnabled,
+  },
   {
     name: 'created_at',
     label: MailPoet.I18n.t('subscribedOn'),
@@ -412,6 +419,11 @@ const SubscriberList = ({ match }) => {
         <td className="column" data-colname={MailPoet.I18n.t('lists')}>
           <Tags segments={subscribedSegments} dimension="large" />
         </td>
+        { (mailpoetTrackingEnabled === true) ? (
+          <td className="column mailpoet-listing-stats-column" data-colname={MailPoet.I18n.t('statisticsColumn')}>
+            <ListingsEngagementScore subscriber={subscriber} />
+          </td>
+        ) : null }
         <td className="column-date mailpoet-hide-on-mobile" data-colname={MailPoet.I18n.t('subscribedOn')}>
           { MailPoet.Date.short(subscriber.created_at) }
           <br />

assets/js/src/subscribers/listings_engagement_score.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface Props {
+  subscriber: {
+    engagement_score?: number;
+  };
+}
+
+export const ListingsEngagementScore: React.FunctionComponent<Props> = ({ subscriber }) => (
+  <div className="mailpoet-listing-stats-opened-clicked">
+    {subscriber.engagement_score != null && (
+      <div className="mailpoet-listing-stats-percentages">
+        {subscriber.engagement_score}
+        %
+      </div>
+    )}
+  </div>
+);