From 9593918a2cbde2d44fa71ae3decc8cde25bc2dfc Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Thu, 6 Aug 2020 10:23:45 +0200
Subject: [PATCH] Add stats summary

[MAILPOET-3069]
---
 .../src/components-plugin/_subscribers.scss   | 41 ++++++++++
 assets/js/src/subscribers/stats.tsx           | 10 ++-
 assets/js/src/subscribers/stats/summary.tsx   | 79 +++++++++++++++++++
 views/subscribers/subscribers.html            |  4 +
 4 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/src/subscribers/stats/summary.tsx

diff --git a/assets/css/src/components-plugin/_subscribers.scss b/assets/css/src/components-plugin/_subscribers.scss
index a613d0343f..92ffc076d2 100644
--- a/assets/css/src/components-plugin/_subscribers.scss
+++ b/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;
+  }
+}
diff --git a/assets/js/src/subscribers/stats.tsx b/assets/js/src/subscribers/stats.tsx
index 84670577eb..69992b5b7b 100644
--- a/assets/js/src/subscribers/stats.tsx
+++ b/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>
   );
 };
diff --git a/assets/js/src/subscribers/stats/summary.tsx b/assets/js/src/subscribers/stats/summary.tsx
new file mode 100644
index 0000000000..d79dec5078
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/views/subscribers/subscribers.html b/views/subscribers/subscribers.html
index 984f92ec4e..6705f5ff23 100644
--- a/views/subscribers/subscribers.html
+++ b/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'),