Add stats summary

[MAILPOET-3069]

assets/css/src/components-plugin/_subscribers.scss

@@ -3,3 +3,44 @@
     color: lighten(#555, 33);
   }
 }
+
+.mailpoet-subscriber-stats-summary-grid {
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: auto auto 1fr;
+
+  .mailpoet-listing-pages {
+    margin-bottom: 0;
+  }
+
+  .mailpoet-listing .mailpoet-listing-table {
+    border: 0;
+    box-shadow: none;
+  }
+
+  .mailpoet-tab-content.mailpoet-subscriber-stats-summary {
+    display: inline-block;
+    margin-top: 16px;
+    min-width: 300px;
+    padding: 8px 16px;
+  }
+
+  .mailpoet-tab-content.mailpoet-subscriber-stats-summary table.mailpoet-listing-table {
+    margin: 0 -16px;
+  }
+
+  .mailpoet-tab-content.mailpoet-subscriber-stats-summary .mailpoet-listing-table td {
+    border-bottom: 1px solid #e5e9f8;
+    color: #071c6d;
+    font-size: 14px;
+  }
+
+  .mailpoet-tab-content.mailpoet-subscriber-stats-summary .mailpoet-listing-table tr:last-child td {
+    border-bottom: 0;
+  }
+
+  .mailpoet-tab-content.mailpoet-subscriber-stats-summary td a {
+    color: #071c6d;
+    text-decoration: underline;
+  }
+}

assets/js/src/subscribers/stats.tsx

@@ -7,6 +7,7 @@ import Loading from 'common/loading';
 import { useGlobalContextValue } from 'context';
 
 import Heading from './stats/heading';
+import Summary from './stats/summary';
 
 export type StatsType = {
   email: string
@@ -42,7 +43,7 @@ export const SubscriberStats = () => {
         );
       }
     });
-  }, [match.params.id]);
+  }, [match.params.id, showError]);
 
   if (loading) {
     return (<Loading />);
@@ -51,6 +52,13 @@ export const SubscriberStats = () => {
   return (
     <div>
       <Heading email={stats.email} />
+      <div className="mailpoet-subscriber-stats-summary-grid">
+        <Summary
+          click={stats.click}
+          open={stats.open}
+          totalSent={stats.total_sent}
+        />
+      </div>
     </div>
   );
 };

assets/js/src/subscribers/stats/summary.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import Tag from 'common/tag/tag';
+
+export type PropTypes = {
+  totalSent: number
+  open: number
+  click: number
+}
+
+export default ({ totalSent, open, click }: PropTypes) => {
+  let openPercent = 0;
+  let clickPercent = 0;
+  let notOpenPercent = 0;
+  const displayPercentages = (totalSent > 0);
+  if (displayPercentages) {
+    openPercent = Math.round((open / totalSent) * 100);
+    clickPercent = Math.round((click / totalSent) * 100);
+    notOpenPercent = Math.round(((totalSent - open) / totalSent) * 100);
+  }
+  return (
+    <div className="mailpoet-tab-content mailpoet-subscriber-stats-summary">
+      <div className="mailpoet-listing">
+        <table className="mailpoet-listing-table wp-list-table widefat">
+          <tbody>
+            <tr>
+              <td>{MailPoet.I18n.t('statsSentEmail')}</td>
+              <td><b>{totalSent}</b></td>
+              <td />
+            </tr>
+            <tr>
+              <td>
+                <Tag>{MailPoet.I18n.t('statsOpened')}</Tag>
+              </td>
+              <td><b>{open}</b></td>
+              <td>
+                {displayPercentages
+                  && (
+                    <>
+                      {openPercent}
+                      %
+                    </>
+                  )}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Tag isInverted>{MailPoet.I18n.t('statsClicked')}</Tag>
+              </td>
+              <td><b>{click}</b></td>
+              <td>
+                {displayPercentages
+                && (
+                  <>
+                    {clickPercent}
+                    %
+                  </>
+                )}
+              </td>
+            </tr>
+            <tr>
+              <td>{MailPoet.I18n.t('statsNotClicked')}</td>
+              <td><b>{totalSent - open}</b></td>
+              <td>
+                {displayPercentages
+                && (
+                  <>
+                    {notOpenPercent}
+                    %
+                  </>
+                )}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

views/subscribers/subscribers.html

@@ -122,6 +122,10 @@
     'allSendingPausedBody': __('Your key to send with MailPoet is invalid.'),
     'allSendingPausedLink': __('Purchase a key'),
     'statsHeading': _x('Stats: %s', 'This is a heading for the subscribers statistics page example: "Stats: mailpoet@example.com"'),
+    'statsSentEmail': __('Sent email'),
+    'statsOpened': __('Opened'),
+    'statsClicked': __('Clicked'),
+    'statsNotClicked': __('Not opened'),
     'tip': __('Tip:'),
     'customFieldsTip': __('Need to add new fields, like a telephone number or street address? You can add custom fields by editing the subscription form on the Forms page.'),
     'year': __('Year'),