Add statistics to editor

[MAILPOET-4673]

mailpoet/assets/js/src/automation/editor/components/workflow/index.tsx

@@ -14,6 +14,7 @@ import { Step as StepData } from './types';
 import { InserterPopover } from '../inserter-popover';
 import { storeName } from '../../store';
 import { AddTrigger } from './add-trigger';
+import { Statistics } from './statistics';
 
 export function Workflow(): JSX.Element {
   const { workflowData, selectedStep } = useSelect(
@@ -88,7 +89,7 @@ export function Workflow(): JSX.Element {
         className="mailpoet-automation-editor-workflow"
       >
         <div className="mailpoet-automation-editor-workflow-wrapper">
-          <div />
+          <Statistics />
           {stepMap.root.next_steps.length === 0 ? (
             <>
               {renderStep(stepMap.root)}

mailpoet/assets/js/src/automation/editor/components/workflow/statistics.tsx

@@ -0,0 +1,34 @@
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { storeName } from '../../store';
+
+export function Statistics(): JSX.Element {
+  const { workflow } = useSelect(
+    (select) => ({
+      workflow: select(storeName).getWorkflowData(),
+    }),
+    [],
+  );
+  if (!workflow.stats.has_values) {
+    return <div />;
+  }
+
+  return (
+    <div>
+      <ul className="mailpoet-automation-stats">
+        <li className="mailpoet-automation-stats-entered">
+          <span>{__('Total Entered', 'mailpoet')}</span>
+          {new Intl.NumberFormat().format(workflow.stats.totals.entered)}
+        </li>
+        <li className="mailpoet-automation-stats-in-process">
+          <span>{__('Total Processing', 'mailpoet')}</span>
+          {new Intl.NumberFormat().format(workflow.stats.totals.in_progress)}
+        </li>
+        <li className="mailpoet-automation-stats-exited">
+          <span>{__('Total Exited', 'mailpoet')}</span>
+          {new Intl.NumberFormat().format(workflow.stats.totals.exited)}
+        </li>
+      </ul>
+    </div>
+  );
+}