Dispay woocommerce revenue

[MAILPOET-3069]

assets/js/src/subscribers/stats.tsx

@@ -8,12 +8,20 @@ import { useGlobalContextValue } from 'context';
 
 import Heading from './stats/heading';
 import Summary from './stats/summary';
+import WoocommerceRevenues from './stats/woocommerce_revenues';
 
 export type StatsType = {
   email: string
   total_sent: number
   open: number
   click: number
+  woocommerce: {
+    currency: string
+    value: number
+    count: number
+    formatted: string
+    formatted_average: string
+  }
 }
 
 export const SubscriberStats = () => {
@@ -58,6 +66,13 @@ export const SubscriberStats = () => {
           open={stats.open}
           totalSent={stats.total_sent}
         />
+        {stats.woocommerce && (
+          <WoocommerceRevenues
+            averageRevenueValue={stats.woocommerce.formatted_average}
+            count={stats.woocommerce.count}
+            revenueValue={stats.woocommerce.formatted}
+          />
+        )}
       </div>
     </div>
   );

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

@@ -25,14 +25,14 @@ export default ({ totalSent, open, click }: PropTypes) => {
           <tbody>
             <tr>
               <td>{MailPoet.I18n.t('statsSentEmail')}</td>
-              <td><b>{totalSent}</b></td>
+              <td><b>{totalSent.toLocaleString()}</b></td>
               <td />
             </tr>
             <tr>
               <td>
                 <Tag>{MailPoet.I18n.t('statsOpened')}</Tag>
               </td>
-              <td><b>{open}</b></td>
+              <td><b>{open.toLocaleString()}</b></td>
               <td>
                 {displayPercentages
                   && (
@@ -47,7 +47,7 @@ export default ({ totalSent, open, click }: PropTypes) => {
               <td>
                 <Tag isInverted>{MailPoet.I18n.t('statsClicked')}</Tag>
               </td>
-              <td><b>{click}</b></td>
+              <td><b>{click.toLocaleString()}</b></td>
               <td>
                 {displayPercentages
                 && (
@@ -60,7 +60,7 @@ export default ({ totalSent, open, click }: PropTypes) => {
             </tr>
             <tr>
               <td>{MailPoet.I18n.t('statsNotClicked')}</td>
-              <td><b>{totalSent - open}</b></td>
+              <td><b>{(totalSent - open).toLocaleString()}</b></td>
               <td>
                 {displayPercentages
                 && (

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import Tag from 'common/tag/tag';
+
+export type PropTypes = {
+  count: number
+  revenueValue: string
+  averageRevenueValue: string
+}
+
+export default ({ revenueValue, count, averageRevenueValue }: PropTypes) => (
+  <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>Orders created</td>
+            <td><b>{count.toLocaleString()}</b></td>
+          </tr>
+          <tr>
+            <td>Total revenue</td>
+            <td><b>{revenueValue}</b></td>
+          </tr>
+          <tr>
+            <td>Average revenue</td>
+            <td><b>{averageRevenueValue}</b></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+);