From 03bc8cee0310a9baf196e141fc1489a3891f0d58 Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Thu, 7 Jul 2022 12:59:45 +0200
Subject: [PATCH] Add basic email content sidebar section

[MAILPOET-4420]
---
 .../mailpoet.scss                             |  1 +
 .../mailpoet/_edit.scss                       | 14 ++++++++++++++
 .../css/src/mailpoet-automation-editor.scss   |  4 ++++
 .../mailpoet/steps/send_email/edit.tsx        | 19 +++++++++++++++++--
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 mailpoet/assets/css/src/components-automation-integrations/mailpoet.scss
 create mode 100644 mailpoet/assets/css/src/components-automation-integrations/mailpoet/_edit.scss

diff --git a/mailpoet/assets/css/src/components-automation-integrations/mailpoet.scss b/mailpoet/assets/css/src/components-automation-integrations/mailpoet.scss
new file mode 100644
index 0000000000..7a42f2bcda
--- /dev/null
+++ b/mailpoet/assets/css/src/components-automation-integrations/mailpoet.scss
@@ -0,0 +1 @@
+@import './mailpoet/edit';
diff --git a/mailpoet/assets/css/src/components-automation-integrations/mailpoet/_edit.scss b/mailpoet/assets/css/src/components-automation-integrations/mailpoet/_edit.scss
new file mode 100644
index 0000000000..7e24832dd7
--- /dev/null
+++ b/mailpoet/assets/css/src/components-automation-integrations/mailpoet/_edit.scss
@@ -0,0 +1,14 @@
+.mailpoet-automation-email-content-separator {
+  height: 16px;
+}
+
+.components-button.mailpoet-automation-design-email-button,
+.components-button.mailpoet-automation-design-email-button.has-icon {
+  background: #1d2327;
+  justify-content: center;
+  width: 100%;
+
+  svg {
+    margin-right: 0;
+  }
+}
diff --git a/mailpoet/assets/css/src/mailpoet-automation-editor.scss b/mailpoet/assets/css/src/mailpoet-automation-editor.scss
index d3052f60a4..5e5e5d8ca5 100644
--- a/mailpoet/assets/css/src/mailpoet-automation-editor.scss
+++ b/mailpoet/assets/css/src/mailpoet-automation-editor.scss
@@ -13,3 +13,7 @@
 @import './components-automation-editor/step';
 @import './components-automation-editor/step-card';
 @import './components-automation-editor/workflow';
+
+// integrations
+
+@import './components-automation-integrations/mailpoet';
diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/edit.tsx b/mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/edit.tsx
index 32185f58d4..0d4f7a9b1e 100644
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/edit.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/edit.tsx
@@ -1,5 +1,10 @@
-import { PanelBody, TextareaControl, TextControl } from '@wordpress/components';
-import { edit, Icon } from '@wordpress/icons';
+import {
+  Button,
+  PanelBody,
+  TextareaControl,
+  TextControl,
+} from '@wordpress/components';
+import { plus, edit, Icon } from '@wordpress/icons';
 import {
   PlainBodyTitle,
   TitleActionButton,
@@ -37,6 +42,16 @@ export function Edit(): JSX.Element {
         value=""
         onChange={() => {}}
       />
+
+      <div className="mailpoet-automation-email-content-separator" />
+      <PlainBodyTitle title="Email content" />
+      <Button
+        className="mailpoet-automation-design-email-button"
+        variant="primary"
+        icon={plus}
+      >
+        Design email
+      </Button>
     </PanelBody>
   );
 }