Add create custom field handling to store

[MAILPOET-2463]

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={<BlockIcon icon={icon} showColors />}
       label="New Custom Field"
     >
-      <p id={clientId}>Create a new custom field for your subscribers.</p>
+      <p>Create a new custom field for your subscribers.</p>
       <div className="mailpoet_custom_field_add_form">
         <hr />
         <SelectControl
@@ -131,15 +133,12 @@ const AddCustomField = ({ clientId }) => {
           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'}

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 = [

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 = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>

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',

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();

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);

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,
+  };
+};

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,
+  };
+};

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,
+  };
+};