diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx index e7b387e86e..cd03aee0d9 100644 --- a/assets/js/src/form_editor/store/actions.jsx +++ b/assets/js/src/form_editor/store/actions.jsx @@ -40,20 +40,11 @@ export function saveFormStarted() { }; } -const createAddNoticeAction = (content, status, isDismissible, id) => ({ - type: 'ADD_NOTICE', - content, - status, - isDismissible, - id, -}); - -export function addNonDismissibleNotice(content, status, id) { - return createAddNoticeAction(content, status, false, id); -} - -export function addDismissibleNotice(content, status, id) { - return createAddNoticeAction(content, status, true, id); +export function saveFormFailed(message = undefined) { + return { + type: 'SAVE_FORM_FAILED', + message, + }; } export function removeNotice(id) { diff --git a/assets/js/src/form_editor/store/controls.jsx b/assets/js/src/form_editor/store/controls.jsx index 0bd663fc4b..12dcd638b3 100644 --- a/assets/js/src/form_editor/store/controls.jsx +++ b/assets/js/src/form_editor/store/controls.jsx @@ -6,15 +6,12 @@ export default { if (select('mailpoet-form-editor').getIsFormSaving()) { return; } - dispatch('mailpoet-form-editor').removeNotice('save-form'); + dispatch('mailpoet-form-editor').saveFormStarted(); const formErrors = select('mailpoet-form-editor').getFormErrors(); - if (formErrors.includes('missing-lists')) { - dispatch('mailpoet-form-editor').addDismissibleNotice(MailPoet.I18n.t('settingsPleaseSelectList'), 'error', 'missing-lists'); + if (formErrors.length) { return; } const formData = select('mailpoet-form-editor').getFormData(); - dispatch('mailpoet-form-editor').saveFormStarted(); - dispatch('mailpoet-form-editor').removeNotice('missing-lists'); MailPoet.Ajax.post({ api_version: window.mailpoet_api_version, endpoint: 'forms', @@ -22,14 +19,12 @@ export default { data: formData, }).done(() => { dispatch('mailpoet-form-editor').saveFormDone(); - dispatch('mailpoet-form-editor').addDismissibleNotice(MailPoet.I18n.t('formSaved'), 'success', 'save-form'); }).fail((response) => { let errorMessage = null; if (response.errors.length > 0) { errorMessage = response.errors.map((error) => (error.message)); } - dispatch('mailpoet-form-editor').saveFormDone(); - dispatch('mailpoet-form-editor').addDismissibleNotice(errorMessage, 'error', 'save-form'); + dispatch('mailpoet-form-editor').saveFormFailed(errorMessage); }); }, }; diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx index 1dc582ae31..4df739744a 100644 --- a/assets/js/src/form_editor/store/reducer.jsx +++ b/assets/js/src/form_editor/store/reducer.jsx @@ -1,22 +1,22 @@ -import addNotice from './reducers/add_notice.jsx'; import changeFormName from './reducers/change_form_name.jsx'; import changeFormSettings from './reducers/change_form_settings.jsx'; import changeFormStyles from './reducers/change_form_styles.jsx'; import removeNotice from './reducers/remove_notice.jsx'; -import saveFormStarted from './reducers/save_form_started.jsx'; import saveFormDone from './reducers/save_form_done.jsx'; +import saveFormFailed from './reducers/save_form_failed.jsx'; +import saveFormStarted from './reducers/save_form_started.jsx'; import switchSidebarTab from './reducers/switch_sidebar_tab.jsx'; import toggleSidebar from './reducers/toggle_sidebar.jsx'; import toggleSidebarPanel from './reducers/toggle_sidebar_panel.jsx'; export default (defaultState) => (state = defaultState, action) => { switch (action.type) { - case 'ADD_NOTICE': return addNotice(state, action); case 'CHANGE_FORM_NAME': return changeFormName(state, action); case 'CHANGE_FORM_SETTINGS': return changeFormSettings(state, action); case 'CHANGE_FORM_STYLES': return changeFormStyles(state, action); case 'REMOVE_NOTICE': return removeNotice(state, action); case 'SAVE_FORM_DONE': return saveFormDone(state); + case 'SAVE_FORM_FAILED': return saveFormFailed(state, action); case 'SAVE_FORM_STARTED': return saveFormStarted(state); case 'SWITCH_SIDEBAR_TAB': return switchSidebarTab(state, action); case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action); diff --git a/assets/js/src/form_editor/store/reducers/add_notice.jsx b/assets/js/src/form_editor/store/reducers/add_notice.jsx deleted file mode 100644 index e8950f3b64..0000000000 --- a/assets/js/src/form_editor/store/reducers/add_notice.jsx +++ /dev/null @@ -1,13 +0,0 @@ -export default (state, action) => { - const notices = state.notices.filter((item) => item.id !== action.id); - const notice = { - id: action.id, - content: action.content, - isDismissible: action.isDismissible, - status: action.status, - }; - return { - ...state, - notices: [...notices, notice], - }; -}; diff --git a/assets/js/src/form_editor/store/reducers/save_form_done.jsx b/assets/js/src/form_editor/store/reducers/save_form_done.jsx index fed2ac60d6..4eb48f5e21 100644 --- a/assets/js/src/form_editor/store/reducers/save_form_done.jsx +++ b/assets/js/src/form_editor/store/reducers/save_form_done.jsx @@ -1,4 +1,16 @@ -export default (state) => ({ - ...state, - isFormSaving: false, -}); +import MailPoet from 'mailpoet'; + +export default (state) => { + const notices = state.notices.filter((notice) => notice.id !== 'save-form'); + notices.push({ + id: 'save-form', + content: MailPoet.I18n.t('formSaved'), + isDismissible: true, + status: 'success', + }); + return { + ...state, + isFormSaving: false, + notices, + }; +}; diff --git a/assets/js/src/form_editor/store/reducers/save_form_failed.jsx b/assets/js/src/form_editor/store/reducers/save_form_failed.jsx new file mode 100644 index 0000000000..30212dc644 --- /dev/null +++ b/assets/js/src/form_editor/store/reducers/save_form_failed.jsx @@ -0,0 +1,14 @@ +export default (state, action) => { + const notices = state.notices.filter((notice) => notice.id !== 'save-form'); + notices.push({ + id: 'save-form', + content: action.message, + isDismissible: true, + status: 'error', + }); + return { + ...state, + isFormSaving: false, + notices, + }; +}; diff --git a/assets/js/src/form_editor/store/reducers/save_form_started.jsx b/assets/js/src/form_editor/store/reducers/save_form_started.jsx index 2d63739e82..9f42b5499b 100644 --- a/assets/js/src/form_editor/store/reducers/save_form_started.jsx +++ b/assets/js/src/form_editor/store/reducers/save_form_started.jsx @@ -1,4 +1,20 @@ -export default (state) => ({ - ...state, - isFormSaving: true, -}); +import MailPoet from 'mailpoet'; + +export default (state) => { + // remove all form saving related notices + const notices = state.notices.filter((notice) => !['save-form', 'missing-lists'].includes(notice.id)); + const hasMissingLists = state.formErrors.includes('missing-lists'); + if (hasMissingLists) { + notices.push({ + id: 'missing-lists', + content: MailPoet.I18n.t('settingsPleaseSelectList'), + isDismissible: true, + status: 'error', + }); + } + return { + ...state, + isFormSaving: !hasMissingLists, + notices, + }; +};