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 (
{MailPoet.I18n.t('statsSentEmail')} | +{totalSent} | ++ |
+ |
+ {open} | ++ {displayPercentages + && ( + <> + {openPercent} + % + > + )} + | +
+ |
+ {click} | ++ {displayPercentages + && ( + <> + {clickPercent} + % + > + )} + | +
{MailPoet.I18n.t('statsNotClicked')} | +{totalSent - open} | ++ {displayPercentages + && ( + <> + {notOpenPercent} + % + > + )} + | +