From 958a282f70dba994df95b4cfd24f730241cbb2cd Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Wed, 11 Dec 2019 10:16:28 +0100
Subject: [PATCH] Add basic edit for custom text field

[MAILPOET-2453]
---
 assets/js/src/form_editor/blocks/blocks.jsx   | 13 ++-
 .../blocks/custom_text/custom_text.jsx        |  8 +-
 .../form_editor/blocks/custom_text/edit.jsx   | 82 +++++++++++++++++++
 3 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 assets/js/src/form_editor/blocks/custom_text/edit.jsx

diff --git a/assets/js/src/form_editor/blocks/blocks.jsx b/assets/js/src/form_editor/blocks/blocks.jsx
index 3ef15fbee2..de4af4b331 100644
--- a/assets/js/src/form_editor/blocks/blocks.jsx
+++ b/assets/js/src/form_editor/blocks/blocks.jsx
@@ -1,3 +1,4 @@
+import slugify from 'slugify';
 import { registerBlockType, setCategories } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
 import MailPoet from 'mailpoet';
@@ -12,12 +13,22 @@ import * as customHtml from './custom_html/custom_html.jsx';
 
 import * as customText from './custom_text/custom_text.jsx';
 
+export function getCustomFieldName(blockName, customField) {
+  const name = slugify(customField.name, { lower: true })
+    .replace(/[^a-z0-9]+/g, '')
+    .replace(/-$/, '');
+  return `${blockName}-${name}`;
+}
+
 const registerCustomFieldBlock = (customField) => {
   console.log('custom Field', customField);
   // eslint-disable-next-line default-case
   switch (customField.type) {
     case 'text':
-      registerBlockType(customText.name, customText.getSettings(customField));
+      registerBlockType(
+        getCustomFieldName(customText.name, customField),
+        customText.getSettings(customField)
+      );
       break;
   }
 };
diff --git a/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx b/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
index 2ae95f3c15..a5d9bc0715 100644
--- a/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
+++ b/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
@@ -1,5 +1,5 @@
-import MailPoet from 'mailpoet';
 import Icon from './icon.jsx';
+import Edit from './edit.jsx';
 
 export const name = 'mailpoet-form/custom-text';
 
@@ -12,7 +12,7 @@ export function getSettings(customField) {
     attributes: {
       label: {
         type: 'string',
-        default: MailPoet.I18n.t('blockFirstName'),
+        default: customField.name,
       },
       labelWithinInput: {
         type: 'boolean',
@@ -28,9 +28,7 @@ export function getSettings(customField) {
       customClassName: false,
       multiple: false,
     },
-    edit() {
-      return null;
-    }, // TODO
+    edit: Edit,
     save() {
       return null;
     },
diff --git a/assets/js/src/form_editor/blocks/custom_text/edit.jsx b/assets/js/src/form_editor/blocks/custom_text/edit.jsx
new file mode 100644
index 0000000000..430b806242
--- /dev/null
+++ b/assets/js/src/form_editor/blocks/custom_text/edit.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Panel,
+  PanelBody,
+  TextControl,
+  ToggleControl,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+const FirstNameEdit = ({ attributes, setAttributes }) => {
+  const inspectorControls = (
+    <InspectorControls>
+      <Panel>
+        <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
+          <TextControl
+            label={MailPoet.I18n.t('label')}
+            value={attributes.label}
+            data-automation-id="settings_custom_text_label_input"
+            onChange={(label) => (setAttributes({ label }))}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('displayLabelWithinInput')}
+            checked={attributes.labelWithinInput}
+            onChange={(labelWithinInput) => (setAttributes({ labelWithinInput }))}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('blockMandatory')}
+            checked={attributes.mandatory}
+            onChange={(mandatory) => (setAttributes({ mandatory }))}
+          />
+        </PanelBody>
+      </Panel>
+
+    </InspectorControls>
+  );
+
+  const getTextInput = (placeholder) => (
+    <input
+      id="custom_text"
+      className="mailpoet_text"
+      type="text"
+      name="custom_text"
+      disabled
+      placeholder={placeholder}
+      data-automation-id="editor_custom_text_input"
+    />
+  );
+
+  const getLabel = () => {
+    if (attributes.mandatory) {
+      return `${attributes.label} *`;
+    }
+    return attributes.label;
+  };
+
+  return (
+    <>
+      {inspectorControls}
+      {attributes.labelWithinInput ? (getTextInput(getLabel())
+      ) : (
+        <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
+          {getLabel()}
+          <br />
+          {getTextInput('')}
+        </label>
+      )}
+    </>
+  );
+};
+
+FirstNameEdit.propTypes = {
+  attributes: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    labelWithinInput: PropTypes.bool.isRequired,
+    mandatory: PropTypes.bool.isRequired,
+  }).isRequired,
+  setAttributes: PropTypes.func.isRequired,
+};
+
+export default FirstNameEdit;