From 3c2d8266e4e336d5f7893bc10cffbfe7016e5843 Mon Sep 17 00:00:00 2001
From: David Remer <webmaster@websupporter.net>
Date: Fri, 30 Sep 2022 10:20:40 +0300
Subject: [PATCH] Add statistics to editor

[MAILPOET-4673]
---
 .../editor/components/workflow/index.tsx      |  3 +-
 .../editor/components/workflow/statistics.tsx | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 mailpoet/assets/js/src/automation/editor/components/workflow/statistics.tsx

diff --git a/mailpoet/assets/js/src/automation/editor/components/workflow/index.tsx b/mailpoet/assets/js/src/automation/editor/components/workflow/index.tsx
index 53404c91cf..6002ec5f26 100644
--- a/mailpoet/assets/js/src/automation/editor/components/workflow/index.tsx
+++ b/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)}
diff --git a/mailpoet/assets/js/src/automation/editor/components/workflow/statistics.tsx b/mailpoet/assets/js/src/automation/editor/components/workflow/statistics.tsx
new file mode 100644
index 0000000000..b538c5a878
--- /dev/null
+++ b/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>
+  );
+}