Extract workflow stats to atomation root component level

[MAILPOET-4540]

mailpoet/assets/css/src/mailpoet-automation-editor.scss

@@ -2,6 +2,13 @@
 @import '../../../node_modules/@wordpress/edit-site/build-style/style';
 @import '../../../node_modules/@wordpress/block-editor/build-style/style'; // for inserter styles
 @import 'settings/colors';
+
+// automation components
+
+@import './components-automation/statistics';
+
+// automation editor
+
 @import './components-automation-editor/add-step-button';
 @import './components-automation-editor/add-trigger';
 @import './components-automation-editor/block-icon';
@@ -20,4 +27,3 @@
 // integrations
 
 @import './components-automation-integrations/mailpoet';
-@import './components/automation_statistics';

mailpoet/assets/css/src/mailpoet-automation.scss

@@ -1,8 +1,14 @@
 @import '../../../node_modules/@woocommerce/components/build-style/style';
 @import 'settings/colors';
+
+// automation components
+
+@import './components-automation/statistics';
+
+// automation listing
+
 @import './components-automation-listing/listing';
 @import './components-automation-listing/header';
 @import './components-automation-listing/search';
 @import './components-automation-listing/cells/actions';
 @import './components-automation-listing/cells/status';
-@import './components/automation_statistics';

mailpoet/assets/js/src/automation/components/statistics/index.tsx

@@ -0,0 +1,23 @@
+type Item = {
+  key: string;
+  label: string;
+  value: number;
+};
+
+type Props = {
+  items: Item[];
+};
+
+export function Statistics({ items }: Props): JSX.Element {
+  const intl = new Intl.NumberFormat();
+  return (
+    <ul className="mailpoet-automation-stats">
+      {items.map((item) => (
+        <li key={item.key} className="mailpoet-automation-stats-item">
+          <span className="mailpoet-automation-stats-label">{item.label}</span>
+          {intl.format(item.value)}
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { storeName } from '../../store';
+import { Statistics as BaseStatistics } from '../../../components/statistics';
 
 export function Statistics(): JSX.Element {
   const { workflow } = useSelect(
@@ -11,27 +12,24 @@ export function Statistics(): JSX.Element {
   );
 
   return (
-    <div>
-      <ul className="mailpoet-automation-stats">
-        <li className="mailpoet-automation-stats-item">
-          <span className="mailpoet-automation-stats-label">
-            {__('Total Entered', 'mailpoet')}
-          </span>
-          {new Intl.NumberFormat().format(workflow.stats.totals.entered)}
-        </li>
-        <li className="mailpoet-automation-stats-item">
-          <span className="mailpoet-automation-stats-label">
-            {__('Total Processing', 'mailpoet')}
-          </span>
-          {new Intl.NumberFormat().format(workflow.stats.totals.in_progress)}
-        </li>
-        <li className="mailpoet-automation-stats-item">
-          <span className="mailpoet-automation-stats-label">
-            {__('Total Exited', 'mailpoet')}
-          </span>
-          {new Intl.NumberFormat().format(workflow.stats.totals.exited)}
-        </li>
-      </ul>
-    </div>
+    <BaseStatistics
+      items={[
+        {
+          key: 'entered',
+          label: __('Total Entered', 'mailpoet'),
+          value: workflow.stats.totals.entered,
+        },
+        {
+          key: 'processing',
+          label: __('Total Processing', 'mailpoet'),
+          value: workflow.stats.totals.in_progress,
+        },
+        {
+          key: 'exited',
+          label: __('Total Exited', 'mailpoet'),
+          value: workflow.stats.totals.exited,
+        },
+      ]}
+    />
   );
 }