Make custom fields settings more reusable

[MAILPOET-2453]

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

@@ -6,39 +6,24 @@ import {
 } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
-import { useDispatch, useSelect } from '@wordpress/data';
 
 const CustomFieldSettings = ({
   mandatory,
   validate,
-  customFieldId,
-  updateAttributes,
+  isSaving,
+  onSave,
 }) => {
   const [localMandatory, setLocalMandatory] = useState(mandatory);
   const [localValidate, setLocalValidate] = useState(validate);
-  const { saveCustomField } = useDispatch('mailpoet-form-editor');
-  const isSaving = useSelect(
-    (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
-    []
-  );
 
   return (
     <>
       <Button
         isPrimary
         isDefault
-        onClick={() => saveCustomField({
-          customFieldId,
-          data: {
-            params: {
-              required: localMandatory ? '1' : undefined,
-              validate: localValidate,
-            },
-          },
-          onFinish: () => updateAttributes({
-            mandatory: localMandatory,
-            validate: localValidate,
-          }),
+        onClick={() => onSave({
+          mandatory: localMandatory,
+          validate: localValidate,
         })}
         isBusy={isSaving}
         disabled={isSaving}
@@ -81,12 +66,13 @@ const CustomFieldSettings = ({
 CustomFieldSettings.propTypes = {
   mandatory: PropTypes.bool,
   validate: PropTypes.string,
-  customFieldId: PropTypes.number.isRequired,
-  updateAttributes: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool,
 };
 
 CustomFieldSettings.defaultProps = {
   mandatory: false,
+  isSaving: false,
   validate: '',
 };
 

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

@@ -8,10 +8,17 @@ import {
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 import CustomFieldSettings from './custom_field_settings.jsx';
 
 const CustomTextEdit = ({ attributes, setAttributes }) => {
+  const isSaving = useSelect(
+    (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
+    []
+  );
+  const { saveCustomField } = useDispatch('mailpoet-form-editor');
+
   const inspectorControls = (
     <InspectorControls>
       <Panel>
@@ -21,6 +28,22 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
             customFieldId={attributes.customFieldId}
             mandatory={attributes.mandatory}
             validate={attributes.validate}
+            isSaving={isSaving}
+            onSave={(params) => {
+              saveCustomField({
+                customFieldId: attributes.customFieldId,
+                data: {
+                  params: {
+                    required: params.mandatory ? '1' : undefined,
+                    validate: params.validate,
+                  },
+                },
+                onFinish: () => setAttributes({
+                  mandatory: params.mandatory,
+                  validate: params.validate,
+                }),
+              });
+            }}
           />
         </PanelBody>
       </Panel>

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

@@ -1,84 +1,34 @@
 import React, { useState } from 'react';
 import {
-  Button,
   SelectControl,
-  ToggleControl,
 } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
-import { useDispatch, useSelect } from '@wordpress/data';
+
+import CustomTextSettings from '../custom_text/custom_field_settings.jsx';
 
 const CustomFieldSettings = ({
   mandatory,
   validate,
   lines,
-  customFieldId,
-  updateAttributes,
+  isSaving,
+  onSave,
 }) => {
-  const [localMandatory, setLocalMandatory] = useState(mandatory);
-  const [localValidate, setLocalValidate] = useState(validate);
   const [localLines, setLocalLines] = useState(lines);
-  const { saveCustomField } = useDispatch('mailpoet-form-editor');
-  const isSaving = useSelect(
-    (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
-    []
-  );
 
   return (
     <>
-      <Button
-        isPrimary
-        isDefault
-        onClick={() => saveCustomField({
-          customFieldId,
-          data: {
-            params: {
-              required: localMandatory ? '1' : undefined,
-              validate: localValidate,
-              lines: localLines,
-            },
-          },
-          onFinish: () => updateAttributes({
-            mandatory: localMandatory,
-            validate: localValidate,
+      <CustomTextSettings
+        validate={validate}
+        mandatory={mandatory}
+        isSaving={isSaving}
+        onSave={(customTextParams) => {
+          onSave({
+            ...customTextParams,
             lines: localLines,
-          }),
-        })}
-        isBusy={isSaving}
-        disabled={isSaving}
-        className="button-on-top"
-      >
-        {MailPoet.I18n.t('customFieldSaveCTA')}
-      </Button>
-      <ToggleControl
-        label={MailPoet.I18n.t('blockMandatory')}
-        checked={localMandatory}
-        onChange={setLocalMandatory}
+          });
+        }}
       />
-      <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',
-          },
-        ]}
-        value={localValidate}
-        onChange={setLocalValidate}
-      />
-
       <SelectControl
         label={`${MailPoet.I18n.t('customFieldNumberOfLines')}:`}
         value={localLines}
@@ -114,14 +64,15 @@ CustomFieldSettings.propTypes = {
   mandatory: PropTypes.bool,
   validate: PropTypes.string,
   lines: PropTypes.string,
-  customFieldId: PropTypes.number.isRequired,
-  updateAttributes: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool,
 };
 
 CustomFieldSettings.defaultProps = {
   mandatory: false,
   validate: '',
   lines: '1',
+  isSaving: false,
 };
 
 export default CustomFieldSettings;

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

@@ -8,19 +8,39 @@ import {
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 import CustomFieldSettings from './custom_field_settings.jsx';
 
 const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
+  const isSaving = useSelect(
+    (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
+    []
+  );
+  const { saveCustomField } = useDispatch('mailpoet-form-editor');
   const inspectorControls = (
     <InspectorControls>
       <Panel>
         <PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
           <CustomFieldSettings
-            updateAttributes={(attrs) => (setAttributes(attrs))}
-            customFieldId={attributes.customFieldId}
             mandatory={attributes.mandatory}
             validate={attributes.validate}
+            isSaving={isSaving}
+            onSave={(params) => saveCustomField({
+              customFieldId: attributes.customFieldId,
+              data: {
+                params: {
+                  required: params.mandatory ? '1' : undefined,
+                  validate: params.validate,
+                  lines: params.lines,
+                },
+              },
+              onFinish: () => setAttributes({
+                mandatory: params.mandatory,
+                validate: params.validate,
+                lines: params.lines,
+              }),
+            })}
           />
         </PanelBody>
       </Panel>
@@ -39,7 +59,6 @@ const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
           />
         </PanelBody>
       </Panel>
-
     </InspectorControls>
   );