Add textarea settings

[MAILPOET-2453]

assets/js/src/form_editor/blocks/blocks.jsx

@@ -12,6 +12,7 @@ import * as segmentSelect from './segment_select/segment_select.jsx';
 import * as customHtml from './custom_html/custom_html.jsx';
 
 import * as customText from './custom_text/custom_text.jsx';
+import * as customTextArea from './custom_textarea/custom_textarea.jsx';
 
 const registerCustomFieldBlock = (customField) => {
   console.log('custom Field', customField);
@@ -23,6 +24,12 @@ const registerCustomFieldBlock = (customField) => {
         customText.getSettings(customField)
       );
       break;
+    case 'textarea':
+      registerBlockType(
+        formatCustomFieldBlockName(customTextArea.name, customField),
+        customTextArea.getSettings(customField)
+      );
+      break;
   }
 };
 

assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx

@@ -26,6 +26,10 @@ export function getSettings(customField) {
         type: 'string',
         default: '',
       },
+      lines: {
+        type: 'string',
+        default: '1',
+      },
       customFieldId: {
         type: 'string',
         default: customField.id,

assets/js/src/form_editor/blocks/custom_textarea/edit.jsx

@@ -11,8 +11,112 @@ import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
 const CustomTextAreaEdit = ({ 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 }))}
+          />
+          <SelectControl
+            label={`${MailPoet.I18n.t('customFieldValidateFor')}:`}
+            options={[
+              {
+                label: MailPoet.I18n.t('customFieldValidateNothing'),
+                value: '',
+              },
+              {
+                label: MailPoet.I18n.t('customFieldValidateNumbersOnly'),
+                value: 'alphanum',
+              },
+              {
+                label: MailPoet.I18n.t('customFieldValidateAlphanumerical'),
+                value: 'number',
+              },
+              {
+                label: MailPoet.I18n.t('customFieldValidatePhoneNumber'),
+                value: 'phone',
+              },
+            ]}
+            onChange={(validate) => (setAttributes({ validate }))}
+          />
+          <SelectControl
+            label={`${MailPoet.I18n.t('customFieldNumberOfLines')}:`}
+            value={attributes.lines}
+            options={[
+              {
+                label: MailPoet.I18n.t('customField1Line'),
+                value: '1',
+              },
+              {
+                label: MailPoet.I18n.t('customField2Lines'),
+                value: '2',
+              },
+              {
+                label: MailPoet.I18n.t('customField3Lines'),
+                value: '3',
+              },
+              {
+                label: MailPoet.I18n.t('customField4Lines'),
+                value: '4',
+              },
+              {
+                label: MailPoet.I18n.t('customField5Lines'),
+                value: '5',
+              },
+            ]}
+            onChange={(lines) => (setAttributes({ lines }))}
+          />
+        </PanelBody>
+      </Panel>
+
+    </InspectorControls>
+  );
+
+  const getTextArea = (placeholder) => (
+    <textarea
+      id="custom_text"
+      className="mailpoet_text"
+      name="custom_text"
+      disabled
+      data-automation-id="editor_custom_text_input"
+      defaultValue={placeholder}
+      rows={attributes.lines}
+    />
+  );
+
+  const getLabel = () => {
+    if (attributes.mandatory) {
+      return `${attributes.label} *`;
+    }
+    return attributes.label;
+  };
+
   return (
-    <div />
+    <>
+      {inspectorControls}
+      {attributes.labelWithinInput ? (getTextArea(getLabel())
+      ) : (
+        <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
+          {getLabel()}
+          <br />
+          {getTextArea('')}
+        </label>
+      )}
+    </>
   );
 };