Create a delete custom field component

[MAILPOET-2463]

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

@@ -0,0 +1,50 @@
+import React, { useLayoutEffect } from 'react';
+import {
+  Button,
+} from '@wordpress/components';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+const CustomFieldDelete = ({
+  isBusy,
+  displayConfirm,
+  onDeleteClick,
+  onDeleteConfirm,
+}) => {
+  useLayoutEffect(() => {
+    if (displayConfirm) {
+      const result = window.confirm(MailPoet.I18n.t('customFieldDeleteConfirm'));// eslint-disable-line no-alert
+      if (result) {
+        onDeleteConfirm();
+      }
+    }
+  });
+
+  return (
+    <Button
+      isDestructive
+      isLink
+      isBusy={isBusy}
+      onClick={onDeleteClick}
+      className="button-on-top"
+    >
+      {MailPoet.I18n.t('customFieldDeleteCTA')}
+    </Button>
+  );
+};
+
+CustomFieldDelete.propTypes = {
+  isBusy: PropTypes.bool,
+  displayConfirm: PropTypes.bool,
+  onDeleteClick: PropTypes.func,
+  onDeleteConfirm: PropTypes.func,
+};
+
+CustomFieldDelete.defaultProps = {
+  isBusy: false,
+  displayConfirm: false,
+  onDeleteClick: () => {},
+  onDeleteConfirm: () => {},
+};
+
+export default CustomFieldDelete;

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

@@ -7,11 +7,16 @@ import {
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
+import CustomFieldDelete from '../custom_field_delete.jsx';
+
 const CustomFieldSettings = ({
   mandatory,
   validate,
   isSaving,
   onSave,
+  displayCustomFieldDeleteConfirm,
+  onCustomFieldDeleteClick,
+  onCustomFieldDeleteConfirm,
 }) => {
   const [localMandatory, setLocalMandatory] = useState(mandatory);
   const [localValidate, setLocalValidate] = useState(validate);
@@ -31,6 +36,12 @@ const CustomFieldSettings = ({
       >
         {MailPoet.I18n.t('customFieldSaveCTA')}
       </Button>
+      <CustomFieldDelete
+        isBusy={isSaving}
+        displayConfirm={displayCustomFieldDeleteConfirm}
+        onDeleteClick={onCustomFieldDeleteClick}
+        onDeleteConfirm={onCustomFieldDeleteConfirm}
+      />
       <ToggleControl
         label={MailPoet.I18n.t('blockMandatory')}
         checked={localMandatory}
@@ -68,12 +79,18 @@ CustomFieldSettings.propTypes = {
   validate: PropTypes.string,
   onSave: PropTypes.func.isRequired,
   isSaving: PropTypes.bool,
+  displayCustomFieldDeleteConfirm: PropTypes.bool,
+  onCustomFieldDeleteClick: PropTypes.func,
+  onCustomFieldDeleteConfirm: PropTypes.func,
 };
 
 CustomFieldSettings.defaultProps = {
   mandatory: false,
   isSaving: false,
   validate: '',
+  displayCustomFieldDeleteConfirm: false,
+  onCustomFieldDeleteClick: () => {},
+  onCustomFieldDeleteConfirm: () => {},
 };
 
 export default CustomFieldSettings;

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

@@ -18,7 +18,11 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
   );
-  const { saveCustomField } = useDispatch('mailpoet-form-editor');
+  const displayCustomFieldDeleteConfirm = useSelect(
+    (sel) => sel('mailpoet-form-editor').getDisplayCustomFieldDeleteConfirm(),
+    []
+  );
+  const { saveCustomField, onCustomFieldDeleteClick, onCustomFieldDeleteConfirm } = useDispatch('mailpoet-form-editor');
 
   const inspectorControls = (
     <InspectorControls>
@@ -45,6 +49,9 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
                 }),
               });
             }}
+            displayCustomFieldDeleteConfirm={displayCustomFieldDeleteConfirm}
+            onCustomFieldDeleteClick={onCustomFieldDeleteClick}
+            onCustomFieldDeleteConfirm={onCustomFieldDeleteConfirm}
           />
         </PanelBody>
       </Panel>

assets/js/src/form_editor/store/actions.jsx

@@ -20,6 +20,12 @@ export function changeFormName(name) {
   };
 }
 
+export function onCustomFieldDeleteClick() {
+  return {
+    type: 'CUSTOM_FIELD_DELETE_CLICK',
+  };
+}
+
 export function changeFormStyles(styles) {
   return {
     type: 'CHANGE_FORM_STYLES',

assets/js/src/form_editor/store/reducer.jsx

@@ -13,6 +13,7 @@ import changeFormBlocks from './reducers/change_form_blocks.jsx';
 import saveCustomFieldDone from './reducers/save_custom_field_done.jsx';
 import saveCustomFieldFailed from './reducers/save_custom_field_failed.jsx';
 import saveCustomFieldStarted from './reducers/save_custom_field_started.jsx';
+import customFieldDeleteClick from './reducers/custom_field_delete_click.jsx';
 
 const saveFormStarted = saveFormStartedFactory(MailPoet);
 
@@ -32,6 +33,7 @@ export default (defaultState) => (state = defaultState, action) => {
     case 'SWITCH_SIDEBAR_TAB': return switchSidebarTab(state, action);
     case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);
     case 'TOGGLE_SIDEBAR_PANEL': return toggleSidebarPanel(state, action);
+    case 'CUSTOM_FIELD_DELETE_CLICK': return customFieldDeleteClick(state, action);
     default:
       return state;
   }

assets/js/src/form_editor/store/reducers/custom_field_delete_click.jsx

@@ -0,0 +1,4 @@
+export default (state) => ({
+  ...state,
+  displayCustomFieldDeleteConfirm: true,
+});

assets/js/src/form_editor/store/selectors.jsx

@@ -32,6 +32,9 @@ export default {
   getIsCustomFieldSaving(state) {
     return state.isCustomFieldSaving;
   },
+  getDisplayCustomFieldDeleteConfirm(state) {
+    return state.displayCustomFieldDeleteConfirm;
+  },
   getDismissibleNotices(state) {
     return state.notices.filter((notice) => notice.isDismissible === true);
   },

views/form/editor.html

@@ -51,6 +51,8 @@
   'customFieldsBlocksCategory': __('Custom Fields'),
   'customFieldNumberOfLines': __('Number of lines'),
   'customFieldSaveCTA': _x('Update custom field', 'Text on the save button'),
+  'customFieldDeleteCTA': _x('Delete this custom field', 'Text on the delete button'),
+  'customFieldDeleteConfirm': __('This field will be deleted for all your subscribers. Are you sure?'),
   'customFieldDateType': __('Type of date'),
   'customFieldDateFormat': __('Order'),
   'customFieldDefaultToday': __('Preselect today’s date'),