diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx index 3eebd4b440..2db25edc20 100644 --- a/assets/js/src/form_editor/store/actions.jsx +++ b/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', diff --git a/assets/js/src/form_editor/store/controls.jsx b/assets/js/src/form_editor/store/controls.jsx index de6708cd63..5aae09d70e 100644 --- a/assets/js/src/form_editor/store/controls.jsx +++ b/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()); - 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); + 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); + }) + .fail((response) => { + let errorMessage = null; + if (response.errors.length > 0) { + errorMessage = response.errors.map((error) => (error.message)); + } + dispatch('mailpoet-form-editor').deleteCustomFieldFailed(errorMessage); + }); }, }; diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx index de4944e315..f506a7fcf1 100644 --- a/assets/js/src/form_editor/store/reducer.jsx +++ b/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; } diff --git a/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx b/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx index 4d4e04c792..0f65c64890 100644 --- a/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx +++ b/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) => ({ - ...state, - displayCustomFieldDeleteConfirm: false, - isCustomFieldDeleting: true, -}); +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,