From e87d72b5c6ada93e44bc39d111e03b66bc1aeac2 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Mon, 13 Jan 2020 16:17:49 +0100 Subject: [PATCH] Add create custom field handling to store [MAILPOET-2463] --- .../blocks/add_custom_field/edit.jsx | 11 ++++---- assets/js/src/form_editor/blocks/blocks.jsx | 13 ++++----- assets/js/src/form_editor/form_editor.jsx | 2 +- assets/js/src/form_editor/store/actions.jsx | 28 +++++++++++++++++++ assets/js/src/form_editor/store/controls.jsx | 27 +++++++++++++++++- assets/js/src/form_editor/store/reducer.jsx | 6 ++++ .../reducers/create_custom_field_done.jsx | 21 ++++++++++++++ .../reducers/create_custom_field_failed.jsx | 14 ++++++++++ .../reducers/create_custom_field_started.jsx | 8 ++++++ 9 files changed, 115 insertions(+), 15 deletions(-) create mode 100644 assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx create mode 100644 assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx create mode 100644 assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx diff --git a/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx b/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx index 75b1c4ebca..e7b6d322a2 100644 --- a/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx +++ b/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx @@ -7,7 +7,7 @@ import { TextControl, } from '@wordpress/components'; import { BlockIcon } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import MailPoet from 'mailpoet'; import icon from './icon.jsx'; @@ -51,6 +51,8 @@ const AddCustomField = ({ clientId }) => { const canSubmit = () => fieldName && fieldSettings; + const { createCustomField } = useDispatch('mailpoet-form-editor'); + const dateSettings = useSelect( (sel) => sel('mailpoet-form-editor').getDateSettingsData(), [] @@ -109,7 +111,7 @@ const AddCustomField = ({ clientId }) => { icon={} label="New Custom Field" > -

Create a new custom field for your subscribers.

+

Create a new custom field for your subscribers.

{ isDefault disabled={!canSubmit()} onClick={() => { - // eslint-disable-next-line no-console - console.log('Custom field data to store'); const data = { name: fieldName, type: fieldType, params: mapCustomFieldFormData(fieldType, fieldSettings), }; - // eslint-disable-next-line no-console - console.log(data); + createCustomField(data, clientId); }} > {'Create'} diff --git a/assets/js/src/form_editor/blocks/blocks.jsx b/assets/js/src/form_editor/blocks/blocks.jsx index aa72aa93d9..73377d9785 100644 --- a/assets/js/src/form_editor/blocks/blocks.jsx +++ b/assets/js/src/form_editor/blocks/blocks.jsx @@ -13,18 +13,17 @@ import * as segmentSelect from './segment_select/segment_select.jsx'; import * as html from './html/html.jsx'; import * as addCustomField from './add_custom_field/add_custom_field.jsx'; -const registerCustomFieldBlock = (customField) => { +export const registerCustomFieldBlock = (customField) => { const namesMap = getCustomFieldBlocksSettings(customField); - if (!namesMap[customField.type]) return; + if (!namesMap[customField.type]) return null; - registerBlockType( - formatCustomFieldBlockName(namesMap[customField.type].name, customField), - namesMap[customField.type].settings - ); + const blockName = formatCustomFieldBlockName(namesMap[customField.type].name, customField); + registerBlockType(blockName, namesMap[customField.type].settings); + return blockName; }; -export default () => { +export const initBlocks = () => { const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields(); const categories = [ diff --git a/assets/js/src/form_editor/form_editor.jsx b/assets/js/src/form_editor/form_editor.jsx index d32d7289f9..19f946079b 100644 --- a/assets/js/src/form_editor/form_editor.jsx +++ b/assets/js/src/form_editor/form_editor.jsx @@ -4,7 +4,7 @@ import { GlobalContext, useGlobalContextValue } from 'context/index.jsx'; import Notices from 'notices/notices.jsx'; import Editor from './components/editor.jsx'; import initStore from './store/store.jsx'; -import initBlocks from './blocks/blocks.jsx'; +import { initBlocks } from './blocks/blocks.jsx'; const App = () => ( diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx index 68f2c377ae..e07efc9fe8 100644 --- a/assets/js/src/form_editor/store/actions.jsx +++ b/assets/js/src/form_editor/store/actions.jsx @@ -68,6 +68,26 @@ export function saveCustomFieldFailed(message = undefined) { }; } +export function createCustomFieldDone(response) { + return { + type: 'CREATE_CUSTOM_FIELD_DONE', + response, + }; +} + +export function createCustomFieldStarted() { + return { + type: 'CREATE_CUSTOM_FIELD_STARTED', + }; +} + +export function createCustomFieldFailed(message = undefined) { + return { + type: 'CREATE_CUSTOM_FIELD_FAILED', + message, + }; +} + export function changeFormSettings(settings) { return { type: 'CHANGE_FORM_SETTINGS', @@ -136,6 +156,14 @@ export function* saveCustomField(data) { }; } +export function* createCustomField(data, clientId) { + yield { + type: 'CREATE_CUSTOM_FIELD', + clientId, + data, + }; +} + export function* deleteCustomField(customFieldId, clientId) { yield { type: 'DELETE_CUSTOM_FIELD', diff --git a/assets/js/src/form_editor/store/controls.jsx b/assets/js/src/form_editor/store/controls.jsx index 66d7872099..552cc0130b 100644 --- a/assets/js/src/form_editor/store/controls.jsx +++ b/assets/js/src/form_editor/store/controls.jsx @@ -1,10 +1,11 @@ import { select, dispatch } from '@wordpress/data'; import MailPoet from 'mailpoet'; import { merge } from 'lodash'; -import { unregisterBlockType, createBlock } from '@wordpress/blocks'; +import { createBlock, unregisterBlockType } from '@wordpress/blocks'; import blocksToFormBody from './blocks_to_form_body.jsx'; import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx'; import getCustomFieldBlockSettings from '../blocks/custom_fields_blocks.jsx'; +import { registerCustomFieldBlock } from '../blocks/blocks.jsx'; export default { SAVE_FORM() { @@ -65,6 +66,30 @@ export default { }); }, + CREATE_CUSTOM_FIELD(action) { + dispatch('mailpoet-form-editor').createCustomFieldStarted(); + MailPoet.Ajax.post({ + api_version: window.mailpoet_api_version, + endpoint: 'customFields', + action: 'save', + data: action.data, + }) + .then((response) => { + const customField = response.data; + const blockName = registerCustomFieldBlock(customField); + const customFieldBlock = createBlock(blockName); + dispatch('core/block-editor').replaceBlock(action.clientId, customFieldBlock); + dispatch('mailpoet-form-editor').createCustomFieldDone(response.data); + }) + .fail((response) => { + let errorMessage = null; + if (response.errors.length > 0) { + errorMessage = response.errors.map((error) => (error.message)); + } + dispatch('mailpoet-form-editor').createCustomFieldFailed(errorMessage); + }); + }, + DELETE_CUSTOM_FIELD(actionData) { dispatch('mailpoet-form-editor').deleteCustomFieldStarted(); const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields(); diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx index 2e389814d6..46f7b2d0ea 100644 --- a/assets/js/src/form_editor/store/reducer.jsx +++ b/assets/js/src/form_editor/store/reducer.jsx @@ -1,4 +1,7 @@ import MailPoet from 'mailpoet'; +import createCustomFieldDone from './reducers/create_custom_field_done.jsx'; +import createCustomFieldFailed from './reducers/create_custom_field_failed.jsx'; +import createCustomFieldStarted from './reducers/create_custom_field_started.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'; @@ -23,6 +26,9 @@ const saveFormStarted = saveFormStartedFactory(MailPoet); export default (defaultState) => (state = defaultState, action) => { switch (action.type) { + case 'CREATE_CUSTOM_FIELD_DONE': return createCustomFieldDone(state, action); + case 'CREATE_CUSTOM_FIELD_FAILED': return createCustomFieldFailed(state, action); + case 'CREATE_CUSTOM_FIELD_STARTED': return createCustomFieldStarted(state, action); case 'CHANGE_FORM_BLOCKS': return changeFormBlocks(state, action); case 'CHANGE_FORM_NAME': return changeFormName(state, action); case 'CHANGE_FORM_SETTINGS': return changeFormSettings(state, action); diff --git a/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx b/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx new file mode 100644 index 0000000000..9a282e35aa --- /dev/null +++ b/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx @@ -0,0 +1,21 @@ +import MailPoet from 'mailpoet'; + +export default (state, action) => { + const notices = state.notices.filter((notice) => notice.id !== 'custom-field'); + notices.push({ + id: 'custom-field', + content: MailPoet.I18n.t('customFieldSaved'), + isDismissible: true, + status: 'success', + }); + + const customFields = [...state.customFields]; + customFields.push(action.response); + + return { + ...state, + isCustomFieldCreating: false, + notices, + customFields, + }; +}; diff --git a/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx b/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx new file mode 100644 index 0000000000..2383411181 --- /dev/null +++ b/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx @@ -0,0 +1,14 @@ +export default (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, + isCustomFieldCreating: false, + notices, + }; +}; diff --git a/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx b/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx new file mode 100644 index 0000000000..25b7323c3a --- /dev/null +++ b/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx @@ -0,0 +1,8 @@ +export default (state) => { + const notices = state.notices.filter((notice) => notice.id !== 'custom-field'); + return { + ...state, + isCustomFieldCreating: true, + notices, + }; +};