Refactor text inputs in form editor body to a component

[MAILPOET-2599]

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

@@ -10,11 +10,10 @@ import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
 import CustomFieldSettings from './custom_field_settings.jsx';
-import formatLabel from '../label_formatter.jsx';
 import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
+import TextInputEdit from '../text_input_edit.jsx';
 
 const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -85,27 +84,16 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
     </InspectorControls>
   );
 
-  const getTextInput = (placeholder) => (
-    <input
-      id={clientId}
-      className="mailpoet_text"
-      type="text"
-      name="custom_text"
-      placeholder={placeholder}
-      data-automation-id="editor_custom_text_input"
-    />
-  );
-
   return (
-    <ParagraphEdit>
+    <>
       {inspectorControls}
-      {!attributes.labelWithinInput ? (
-        <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor={clientId}>
-          {formatLabel(attributes)}
-        </label>
-      ) : null}
-      {getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
-    </ParagraphEdit>
+      <TextInputEdit
+        name="custom_text"
+        mandatory={attributes.mandatory}
+        labelWithinInput={attributes.labelWithinInput}
+        label={attributes.label}
+      />
+    </>
   );
 };
 

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

@@ -126,7 +126,7 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
       ) : (
         <>
           <label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
-            {formatLabel(attributes)}
+            {formatLabel(attributes.label, attributes.mandatory)}
           </label>
           {getTextArea('')}
         </>

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

@@ -9,7 +9,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
+import TextInputEdit from '../text_input_edit.jsx';
 import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const EmailEdit = ({ attributes, setAttributes }) => {
@@ -37,27 +37,16 @@ const EmailEdit = ({ attributes, setAttributes }) => {
     </InspectorControls>
   );
 
-  const getTextInput = (placeholder) => (
-    <input
-      id="email"
-      className="mailpoet_text"
-      type="email"
-      name="email"
-      placeholder={placeholder}
-      data-automation-id="editor_email_input"
-    />
-  );
-
   return (
-    <ParagraphEdit>
+    <>
       {inspectorControls}
-      {!attributes.labelWithinInput ? (
-        <label className="mailpoet_text_label" data-automation-id="editor_email_label" htmlFor="email">
-          {`${attributes.label} *`}
-        </label>
-      ) : null}
-      {getTextInput(attributes.labelWithinInput ? `${attributes.label} *` : '')}
-    </ParagraphEdit>
+      <TextInputEdit
+        name="email"
+        label={attributes.label}
+        labelWithinInput={!!attributes.labelWithinInput}
+        mandatory
+      />
+    </>
   );
 };
 

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

@@ -9,8 +9,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import formatLabel from '../label_formatter.jsx';
+import TextInputEdit from '../text_input_edit.jsx';
 import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const FirstNameEdit = ({ attributes, setAttributes }) => {
@@ -43,27 +42,16 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
     </InspectorControls>
   );
 
-  const getTextInput = (placeholder) => (
-    <input
-      id="first_name"
-      className="mailpoet_text"
-      type="text"
-      name="first_name"
-      placeholder={placeholder}
-      data-automation-id="editor_first_name_input"
-    />
-  );
-
   return (
-    <ParagraphEdit>
+    <>
       {inspectorControls}
-      {!attributes.labelWithinInput ? (
-        <label className="mailpoet_text_label" data-automation-id="editor_first_name_label" htmlFor="first_name">
-          {formatLabel(attributes)}
-        </label>
-      ) : null}
-      {getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
-    </ParagraphEdit>
+      <TextInputEdit
+        name="first_name"
+        mandatory={attributes.mandatory}
+        labelWithinInput={attributes.labelWithinInput}
+        label={attributes.label}
+      />
+    </>
   );
 };
 

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

@@ -9,8 +9,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import formatLabel from '../label_formatter.jsx';
+import TextInputEdit from '../text_input_edit.jsx';
 import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const LastNameEdit = ({ attributes, setAttributes }) => {
@@ -43,27 +42,16 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
     </InspectorControls>
   );
 
-  const getTextInput = (placeholder) => (
-    <input
-      id="last_name"
-      className="mailpoet_text"
-      type="text"
-      name="last_name"
-      placeholder={placeholder}
-      data-automation-id="editor_last_name_input"
-    />
-  );
-
   return (
-    <ParagraphEdit>
+    <>
       {inspectorControls}
-      {!attributes.labelWithinInput ? (
-        <label className="mailpoet_text_label" data-automation-id="editor_last_name_label" htmlFor="last_name">
-          {formatLabel(attributes)}
-        </label>
-      ) : null}
-      {getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
-    </ParagraphEdit>
+      <TextInputEdit
+        name="last_name"
+        mandatory={attributes.mandatory}
+        labelWithinInput={attributes.labelWithinInput}
+        label={attributes.label}
+      />
+    </>
   );
 };
 

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ParagraphEdit from './paragraph_edit.jsx';
+import formatLabel from './label_formatter.jsx';
+
+const TextInputEdit = ({
+  label,
+  labelWithinInput,
+  name,
+  mandatory,
+}) => {
+  const id = `${name}_${Math.random().toString(36).substring(2, 15)}`;
+
+  const getTextInput = (placeholder) => (
+    <input
+      id={id}
+      className="mailpoet_text"
+      type={name === 'email' ? 'email' : 'text'}
+      name={name}
+      disabled
+      placeholder={placeholder}
+      data-automation-id={`editor_${name}_input`}
+    />
+  );
+
+  return (
+    <ParagraphEdit>
+      {!labelWithinInput ? (
+        <label className="mailpoet_text_label" data-automation-id={`editor_${name}_label`} htmlFor={id}>
+          {formatLabel({ label, mandatory })}
+        </label>
+      ) : null}
+      {getTextInput(labelWithinInput ? formatLabel({ label, mandatory }) : '')}
+    </ParagraphEdit>
+  );
+};
+
+TextInputEdit.propTypes = {
+  label: PropTypes.string.isRequired,
+  labelWithinInput: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  mandatory: PropTypes.bool.isRequired,
+};
+
+export default TextInputEdit;