Use a colour to display stats values

[MAILPOET-2791]

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

@@ -79,6 +79,18 @@
   }
 }
 
+.mailpoet-statistics-value-number-average {
+  color: $color-stats-average;
+}
+
+.mailpoet-statistics-value-number-excellent {
+  color: $color-stats-excellent;
+}
+
+.mailpoet-statistics-value-number-good {
+  color: $color-stats-good;
+}
+
 .mailpoet-statistics-with-left-separator {
   border-left: solid 1px $color-tertiary-light;
   padding-left: $grid-gap;

assets/js/src/common/listings/newsletter_stats.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import StatsBadge from './newsletter_stats/stats';
+import { StatsBadge } from './newsletter_stats/stats';
 import Tooltip from '../tooltip/tooltip';
 import Tag from '../tag/tag';
 

assets/js/src/common/listings/newsletter_stats/stats.tsx

@@ -8,7 +8,55 @@ type StatsBadgeProps = {
   tooltipId?: string,
 }
 
-function StatsBadge(props: StatsBadgeProps) {
+const stats = {
+  opened: {
+    badgeRanges: [30, 10, 0],
+    badgeTypes: [
+      'excellent',
+      'good',
+      'average',
+    ],
+    tooltipText: [
+      MailPoet.I18n.t('openedStatTooltipExcellent'),
+      MailPoet.I18n.t('openedStatTooltipGood'),
+      MailPoet.I18n.t('openedStatTooltipAverage'),
+    ],
+  },
+  clicked: {
+    badgeRanges: [3, 1, 0],
+    badgeTypes: [
+      'excellent',
+      'good',
+      'average',
+    ],
+    tooltipText: [
+      MailPoet.I18n.t('clickedStatTooltipExcellent'),
+      MailPoet.I18n.t('clickedStatTooltipGood'),
+      MailPoet.I18n.t('clickedStatTooltipAverage'),
+    ],
+  },
+};
+
+export const getBadgeType = (statName, rate) => {
+  const stat = stats[statName] || null;
+  if (!stat) {
+    return null;
+  }
+
+  if (rate < 0 || rate > 100) {
+    return null;
+  }
+  const len = stat.badgeRanges.length;
+  for (let i = 0; i < len; i += 1) {
+    if (rate > stat.badgeRanges[i]) {
+      return stat.badgeTypes[i];
+    }
+  }
+  // rate must be zero at this point
+  return stat.badgeTypes[len - 1];
+};
+
+export const StatsBadge = (props: StatsBadgeProps) => {
   const badges = {
     excellent: {
       name: MailPoet.I18n.t('excellentBadgeName'),
@@ -24,62 +72,17 @@ function StatsBadge(props: StatsBadgeProps) {
     },
   };
 
-  const stats = {
+  const badgeType = getBadgeType(props.stat, props.rate);
-    opened: {
+  const badge = badges[badgeType] || null;
-      badgeRanges: [30, 10, 0],
+  if (!badge) {
-      badgeTypes: [
+    return null;
-        'excellent',
+  }
-        'good',
-        'average',
-      ],
-      tooltipText: [
-        MailPoet.I18n.t('openedStatTooltipExcellent'),
-        MailPoet.I18n.t('openedStatTooltipGood'),
-        MailPoet.I18n.t('openedStatTooltipAverage'),
-      ],
-    },
-    clicked: {
-      badgeRanges: [3, 1, 0],
-      badgeTypes: [
-        'excellent',
-        'good',
-        'average',
-      ],
-      tooltipText: [
-        MailPoet.I18n.t('clickedStatTooltipExcellent'),
-        MailPoet.I18n.t('clickedStatTooltipGood'),
-        MailPoet.I18n.t('clickedStatTooltipAverage'),
-      ],
-    },
-  };
-
-  const getBadgeType = (stat, rate) => {
-    const len = stat.badgeRanges.length;
-    for (let i = 0; i < len; i += 1) {
-      if (rate > stat.badgeRanges[i]) {
-        return stat.badgeTypes[i];
-      }
-    }
-    // rate must be zero at this point
-    return stat.badgeTypes[len - 1];
-  };
 
   const stat = stats[props.stat] || null;
   if (!stat) {
     return null;
   }
 
-  const rate = props.rate;
-  if (rate < 0 || rate > 100) {
-    return null;
-  }
-
-  const badgeType = getBadgeType(stat, rate);
-  const badge = badges[badgeType] || null;
-  if (!badge) {
-    return null;
-  }
-
   const tooltipId = props.tooltipId || null;
   const tooltipText = (
     <div key={`tooltip-${tooltipId}`}>
@@ -121,6 +124,4 @@ function StatsBadge(props: StatsBadgeProps) {
   );
 
   return content;
-}
+};
-
-export default StatsBadge;

assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 import Hooks from 'wp-js-hooks';
 import Grid from 'common/grid';
-import StatsBadge from 'common/listings/newsletter_stats/stats';
+import { StatsBadge, getBadgeType } from 'common/listings/newsletter_stats/stats';
 
 import { NewsletterType } from './newsletter_type';
 
@@ -39,10 +39,11 @@ export const NewsletterGeneralStats = ({
     && (newsletter.statistics.opened >= minNewslettersOpened)
   );
 
+  const badgeTypeOpened = getBadgeType('opened', percentageOpened);
   const opened = (
     <>
       <div className="mailpoet-statistics-value">
-        <span className="mailpoet-statistics-value-number">
+        <span className={`mailpoet-statistics-value-number mailpoet-statistics-value-number-${badgeTypeOpened}`}>
           {percentageOpenedDisplay}
           {'% '}
         </span>
@@ -77,10 +78,11 @@ export const NewsletterGeneralStats = ({
     </>
   );
 
+  const badgeTypeClicked = getBadgeType('clicked', percentageClicked);
   const clicked = (
     <>
       <div className="mailpoet-statistics-value">
-        <span className="mailpoet-statistics-value-number">
+        <span className={`mailpoet-statistics-value-number mailpoet-statistics-value-number-${badgeTypeClicked}`}>
           {percentageClickedDisplay}
           {'% '}
         </span>