From f5ba818cf24e3c973f1be8f4d9dd7fa2ff02e096 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 12 May 2020 11:42:57 +0200
Subject: [PATCH] Add component for image upload

[MAILPOET-2880]
---
 .../_sidebar-style-settings.scss              | 21 ++++++++++
 .../src/components-form-editor/_sidebar.scss  |  1 -
 .../form_settings/styles_settings_panel.jsx   |  6 +++
 .../form_editor/components/image_settings.tsx | 41 +++++++++++++++++++
 views/form/editor.html                        |  2 +
 5 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/assets/css/src/components-form-editor/_sidebar-style-settings.scss b/assets/css/src/components-form-editor/_sidebar-style-settings.scss
index 850265ae2b..0956faee74 100644
--- a/assets/css/src/components-form-editor/_sidebar-style-settings.scss
+++ b/assets/css/src/components-form-editor/_sidebar-style-settings.scss
@@ -15,3 +15,24 @@
     vertical-align: text-bottom;
   }
 }
+
+.mailpoet-styles-settings-image-url {
+  overflow: auto;
+
+  .mailpoet-styles-settings-image-url-body {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    input {
+      flex-grow: 1;
+      flex-shrink: 1;
+      margin-right: 4px;
+      min-width: 100px;
+    }
+
+    button {
+      flex-shrink: 0;
+    }
+  }
+}
diff --git a/assets/css/src/components-form-editor/_sidebar.scss b/assets/css/src/components-form-editor/_sidebar.scss
index f1fe6b0d31..7ab60087ff 100644
--- a/assets/css/src/components-form-editor/_sidebar.scss
+++ b/assets/css/src/components-form-editor/_sidebar.scss
@@ -101,7 +101,6 @@
   }
 }
 
-
 .mailpoet-toggle-list {
   display: grid;
   grid-row-gap: 20px;
diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
index ebbfb585fb..8b4094ccd7 100644
--- a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
+++ b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
@@ -13,6 +13,7 @@ import HorizontalAlignment from 'common/styles';
 
 import ColorSettings from 'form_editor/components/color_settings';
 import FontSizeSettings from 'form_editor/components/font_size_settings';
+import ImageSettings from 'form_editor/components/image_settings';
 
 const BasicSettingsPanel = ({ onToggle, isOpened }) => {
   const { changeFormSettings } = useDispatch('mailpoet-form-editor');
@@ -41,6 +42,11 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
             value={settings.backgroundColor}
             onChange={partial(updateStyles, 'backgroundColor')}
           />
+          <ImageSettings
+            name={MailPoet.I18n.t('formSettingsStylesBackgroundImage')}
+            value={settings.backgroundImageUrl}
+            onChange={partial(updateStyles, 'backgroundImageUrl')}
+          />
           <ColorSettings
             name={MailPoet.I18n.t('formSettingsStylesFontColor')}
             value={settings.fontColor}
diff --git a/assets/js/src/form_editor/components/image_settings.tsx b/assets/js/src/form_editor/components/image_settings.tsx
index e69de29bb2..e43f8e66cf 100644
--- a/assets/js/src/form_editor/components/image_settings.tsx
+++ b/assets/js/src/form_editor/components/image_settings.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { MediaUpload } from '@wordpress/block-editor';
+import MailPoet from 'mailpoet';
+import { Button } from '@wordpress/components';
+
+type Props = {
+  name: string,
+  value?: string,
+  onChange: (value: string) => any,
+}
+
+const ImageSettings = ({
+  name,
+  value,
+  onChange,
+}: Props) => (
+  <div className="mailpoet-styles-settings-image-url">
+    <h3 className="mailpoet-styles-settings-heading">
+      {name}
+    </h3>
+    <div className="mailpoet-styles-settings-image-url-body">
+      <input type="text" value={value ?? ''} onChange={(event) => onChange(event.target.value)} />
+      <MediaUpload
+        value={value}
+        onSelect={(image) => onChange(image.url)}
+        allowedTypes={['image']}
+        render={({ open }) => (
+          <Button
+            isSecondary
+            isSmall
+            onClick={open}
+          >
+            {MailPoet.I18n.t('formSettingsStylesSelectImage')}
+          </Button>
+        )}
+      />
+    </div>
+  </div>
+);
+
+export default ImageSettings;
diff --git a/views/form/editor.html b/views/form/editor.html
index dc6511a5c2..e17bc67bfd 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -44,6 +44,8 @@
   'formSettings': _x('Settings', 'A settings section heading'),
   'formSettingsStyles': __('Styles'),
   'formSettingsStylesBackgroundColor': __('Background Color'),
+  'formSettingsStylesBackgroundImage': __('Background Image'),
+  'formSettingsStylesSelectImage': __('Select Image…'),
   'formSettingsStylesFontSize': __('Font Size'),
   'formSettingsStylesFontColor': __('Font Color'),
   'formSettingsStylesFontColorInherit': __('Inherit from theme'),