Cancel custom field deletion

[MAILPOET-2463]

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

@@ -8,6 +8,7 @@ import MailPoet from 'mailpoet';
 const CustomFieldDelete = ({
   isBusy,
   displayConfirm,
+  onDeleteCancel,
   onDeleteClick,
   onDeleteConfirm,
 }) => {
@@ -16,6 +17,8 @@ const CustomFieldDelete = ({
       const result = window.confirm(MailPoet.I18n.t('customFieldDeleteConfirm'));// eslint-disable-line no-alert
       if (result) {
         onDeleteConfirm();
+      } else {
+        onDeleteCancel();
       }
     }
   });
@@ -37,12 +40,14 @@ CustomFieldDelete.propTypes = {
   isBusy: PropTypes.bool,
   displayConfirm: PropTypes.bool,
   onDeleteClick: PropTypes.func,
+  onDeleteCancel: PropTypes.func,
   onDeleteConfirm: PropTypes.func,
 };
 
 CustomFieldDelete.defaultProps = {
   isBusy: false,
   displayConfirm: false,
+  onDeleteCancel: () => {},
   onDeleteClick: () => {},
   onDeleteConfirm: () => {},
 };

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

@@ -16,6 +16,7 @@ const CustomFieldSettings = ({
   onSave,
   displayCustomFieldDeleteConfirm,
   onCustomFieldDeleteClick,
+  onCustomFieldDeleteCancel,
   onCustomFieldDeleteConfirm,
 }) => {
   const [localMandatory, setLocalMandatory] = useState(mandatory);
@@ -41,6 +42,7 @@ const CustomFieldSettings = ({
         displayConfirm={displayCustomFieldDeleteConfirm}
         onDeleteClick={onCustomFieldDeleteClick}
         onDeleteConfirm={onCustomFieldDeleteConfirm}
+        onDeleteCancel={onCustomFieldDeleteCancel}
       />
       <ToggleControl
         label={MailPoet.I18n.t('blockMandatory')}
@@ -82,6 +84,7 @@ CustomFieldSettings.propTypes = {
   displayCustomFieldDeleteConfirm: PropTypes.bool,
   onCustomFieldDeleteClick: PropTypes.func,
   onCustomFieldDeleteConfirm: PropTypes.func,
+  onCustomFieldDeleteCancel: PropTypes.func,
 };
 
 CustomFieldSettings.defaultProps = {
@@ -91,6 +94,7 @@ CustomFieldSettings.defaultProps = {
   displayCustomFieldDeleteConfirm: false,
   onCustomFieldDeleteClick: () => {},
   onCustomFieldDeleteConfirm: () => {},
+  onCustomFieldDeleteCancel: () => {},
 };
 
 export default CustomFieldSettings;

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

@@ -22,7 +22,12 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
     (sel) => sel('mailpoet-form-editor').getDisplayCustomFieldDeleteConfirm(),
     []
   );
-  const { saveCustomField, onCustomFieldDeleteClick, onCustomFieldDeleteConfirm } = useDispatch('mailpoet-form-editor');
+  const {
+    saveCustomField,
+    onCustomFieldDeleteClick,
+    onCustomFieldDeleteConfirm,
+    onCustomFieldDeleteCancel,
+  } = useDispatch('mailpoet-form-editor');
 
   const inspectorControls = (
     <InspectorControls>
@@ -52,6 +57,7 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
             displayCustomFieldDeleteConfirm={displayCustomFieldDeleteConfirm}
             onCustomFieldDeleteClick={onCustomFieldDeleteClick}
             onCustomFieldDeleteConfirm={onCustomFieldDeleteConfirm}
+            onCustomFieldDeleteCancel={onCustomFieldDeleteCancel}
           />
         </PanelBody>
       </Panel>

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

@@ -26,6 +26,12 @@ export function onCustomFieldDeleteClick() {
   };
 }
 
+export function onCustomFieldDeleteCancel() {
+  return {
+    type: 'CUSTOM_FIELD_DELETE_CANCEL',
+  };
+}
+
 export function changeFormStyles(styles) {
   return {
     type: 'CHANGE_FORM_STYLES',

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

@@ -13,7 +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';
+import { customFieldDeleteClick, customFieldDeleteCancel } from './reducers/custom_field_delete.jsx';
 
 const saveFormStarted = saveFormStartedFactory(MailPoet);
 
@@ -34,6 +34,7 @@ export default (defaultState) => (state = defaultState, 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);
+    case 'CUSTOM_FIELD_DELETE_CANCEL': return customFieldDeleteCancel(state, action);
     default:
       return state;
   }

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

@@ -0,0 +1,9 @@
+export const customFieldDeleteCancel = (state) => ({
+  ...state,
+  displayCustomFieldDeleteConfirm: false,
+});
+
+export const customFieldDeleteClick = (state) => ({
+  ...state,
+  displayCustomFieldDeleteConfirm: true,
+});

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

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