Display notice on failure

[MAILPOET-2463]

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

@@ -46,6 +46,12 @@ export function deleteCustomFieldDone(customFieldId, clientId) {
   };
 }
 
+export function deleteCustomFieldFailed(message = undefined) {
+  return {
+    type: 'DELETE_CUSTOM_FIELD_FAILED',
+    message,
+  };
+}
 export function changeFormStyles(styles) {
   return {
     type: 'CHANGE_FORM_STYLES',

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

@@ -64,22 +64,24 @@ export default {
 
   DELETE_CUSTOM_FIELD(actionData) {
     dispatch('mailpoet-form-editor').deleteCustomFieldStarted();
-    // MailPoet.Ajax.post({
-    //   api_version: window.mailpoet_api_version,
-    //   endpoint: 'customFields',
-    //   action: 'delete',
-    //   data: {
-    //     id: actionData.customFieldId
-    //   }
-    // })
-    setTimeout(() => {
-      console.log('xxx', actionData);
-      console.log('before', select('core/block-editor').getBlocks());
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'customFields',
+      action: 'delete',
+      data: {
+        id: actionData.customFieldId,
+      },
+    })
+      .then(() => {
         dispatch('mailpoet-form-editor').deleteCustomFieldDone(actionData.customFieldId, actionData.clientId);
         dispatch('core/block-editor').removeBlock(actionData.clientId);
-    }, 1000);
-    setTimeout(() => {
-      console.log('after', select('core/block-editor').getBlocks());
-    }, 2000);
+      })
+      .fail((response) => {
+        let errorMessage = null;
+        if (response.errors.length > 0) {
+          errorMessage = response.errors.map((error) => (error.message));
+        }
+        dispatch('mailpoet-form-editor').deleteCustomFieldFailed(errorMessage);
+      });
   },
 };

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

@@ -18,6 +18,7 @@ import {
   customFieldDeleteCancel,
   customFieldDeleteStart,
   customFieldDeleteDone,
+  customFieldDeleteFailed,
 } from './reducers/custom_field_delete.jsx';
 
 const saveFormStarted = saveFormStartedFactory(MailPoet);
@@ -42,6 +43,7 @@ export default (defaultState) => (state = defaultState, action) => {
     case 'CUSTOM_FIELD_DELETE_CANCEL': return customFieldDeleteCancel(state, action);
     case 'DELETE_CUSTOM_FIELD_STARTED': return customFieldDeleteStart(state, action);
     case 'DELETE_CUSTOM_FIELD_DONE': return customFieldDeleteDone(state, action);
+    case 'DELETE_CUSTOM_FIELD_FAILED': return customFieldDeleteFailed(state, action);
     default:
       return state;
   }

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

@@ -8,12 +8,30 @@ export const customFieldDeleteClick = (state) => ({
   displayCustomFieldDeleteConfirm: true,
 });
 
-export const customFieldDeleteStart = (state) => ({
+export const customFieldDeleteStart = (state) => {
+  const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+  return ({
     ...state,
+    ...notices,
     displayCustomFieldDeleteConfirm: false,
     isCustomFieldDeleting: true,
   });
+};
 
+export const customFieldDeleteFailed = (state, action) => {
+  const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+  notices.push({
+    id: 'custom-field',
+    content: action.message,
+    isDismissible: true,
+    status: 'error',
+  });
+  return {
+    ...state,
+    isCustomFieldSaving: false,
+    notices,
+  };
+};
 
 export const customFieldDeleteDone = (state, action) => {
   const customFields = state
@@ -23,7 +41,7 @@ export const customFieldDeleteDone = (state, action) => {
   const formBlocks = state
     .formBlocks
     .filter((block) => block.clientId !== action.clientId);
-  console.log('blocks', formBlocks);
+
   return {
     ...state,
     formBlocks,