Add mailpoet integration client setup with send email step

[MAILPOET-4420]

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

@@ -16,6 +16,7 @@ import { Sidebar } from './components/sidebar';
 import { Workflow } from './components/workflow';
 import { store, storeName } from './store';
 import { initializeApi } from '../api';
+import { initialize as initializeMailPoetIntegration } from '../integrations/mailpoet';
 
 // See:
 //   https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/layout/index.js
@@ -77,6 +78,7 @@ window.addEventListener('DOMContentLoaded', () => {
   const root = document.getElementById('mailpoet_automation_editor');
   if (root) {
     initializeApi();
+    initializeMailPoetIntegration();
     ReactDOM.render(<Editor />, root);
   }
 });

mailpoet/assets/js/src/automation/integrations/mailpoet/index.tsx

@@ -0,0 +1,6 @@
+import { registerStepType } from '../../editor/store';
+import { step as SendEmailStep } from './steps/send_email';
+
+export const initialize = (): void => {
+  registerStepType(SendEmailStep);
+};

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/edit.tsx

@@ -0,0 +1,5 @@
+import { PanelBody } from '@wordpress/components';
+
+export function Edit(): JSX.Element {
+  return <PanelBody opened>TODO</PanelBody>;
+}

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/icon.tsx

@@ -0,0 +1,12 @@
+export function Icon(): JSX.Element {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.73578 7.5L12 12.0122L17.2642 7.5H6.73578ZM18.5 8.41638L12.4881 13.5694L12 13.9878L11.5119 13.5694L5.5 8.41638V16C5.5 16.2761 5.72386 16.5 6 16.5H18C18.2761 16.5 18.5 16.2761 18.5 16V8.41638ZM4 8C4 6.89543 4.89543 6 6 6H18C19.1046 6 20 6.89543 20 8V16C20 17.1046 19.1046 18 18 18H6C4.89543 18 4 17.1046 4 16V8Z" />
+    </svg>
+  );
+}

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/index.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './icon';
+import { Edit } from './edit';
+
+export const step = {
+  key: 'mailpoet:send-email',
+  title: 'Send email',
+  description: 'An email will be sent to subscriber',
+  icon: Icon,
+  edit: Edit,
+} as const;