Save custom fields data

[MAILPOET-2453]

assets/js/src/form_editor/blocks/blocks.jsx

@@ -26,6 +26,8 @@ const registerCustomFieldBlock = (customField) => {
     },
   };
 
+  if (!namesMap[customField.type]) return;
+
   registerBlockType(
     formatCustomFieldBlockName(namesMap[customField.type].name, customField),
     namesMap[customField.type].settings

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

@@ -27,6 +27,27 @@ export function changeFormStyles(styles) {
   };
 }
 
+export function saveCustomFieldDone(customFieldId, response) {
+  return {
+    type: 'SAVE_CUSTOM_FIELD_DONE',
+    customFieldId,
+    response,
+  };
+}
+
+export function saveCustomFieldStarted() {
+  return {
+    type: 'SAVE_CUSTOM_FIELD_STARTED',
+  };
+}
+
+export function saveCustomFieldFailed(message = undefined) {
+  return {
+    type: 'SAVE_CUSTOM_FIELD_FAILED',
+    message,
+  };
+}
+
 export function changeFormSettings(settings) {
   return {
     type: 'CHANGE_FORM_SETTINGS',
@@ -87,3 +108,10 @@ export function* saveForm() {
     type: 'SAVE_FORM',
   };
 }
+
+export function* saveCustomField(data) {
+  yield {
+    type: 'SAVE_CUSTOM_FIELD',
+    ...data,
+  };
+}

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

@@ -1,5 +1,6 @@
 import { select, dispatch } from '@wordpress/data';
 import MailPoet from 'mailpoet';
+import { merge } from 'lodash';
 import blocksToFormBody from './blocks_to_form_body.jsx';
 
 export default {
@@ -34,4 +35,27 @@ export default {
       dispatch('mailpoet-form-editor').saveFormFailed(errorMessage);
     });
   },
+
+  SAVE_CUSTOM_FIELD(actionData) {
+    dispatch('mailpoet-form-editor').saveCustomFieldStarted();
+    const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields();
+    const customField = customFields.find((cf) => cf.id === actionData.customFieldId);
+    const requestData = {};
+    merge(requestData, customField, actionData.data);
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'customFields',
+      action: 'save',
+      data: requestData,
+    }).done((response) => {
+      dispatch('mailpoet-form-editor').saveCustomFieldDone(customField.id, response.data);
+      if (typeof actionData.onFinish === 'function') actionData.onFinish();
+    }).fail((response) => {
+      let errorMessage = null;
+      if (response.errors.length > 0) {
+        errorMessage = response.errors.map((error) => (error.message));
+      }
+      dispatch('mailpoet-form-editor').saveCustomFieldFailed(errorMessage);
+    });
+  },
 };

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

@@ -8,12 +8,11 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => {
     text: 'mailpoet-form/custom-text',
     textarea: 'mailpoet-form/custom-textarea',
   };
-
   const mapped = {
     ...mappedCommonProperties,
     name: formatCustomFieldBlockName(namesMap[customField.type], customField),
-    customFieldId: customField.id,
   };
+  mapped.attributes.customFieldId = customField.id;
   if (
     item.params
     && Object.prototype.hasOwnProperty.call(item.params, 'validate')

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

@@ -10,6 +10,9 @@ import switchSidebarTab from './reducers/switch_sidebar_tab.jsx';
 import toggleSidebar from './reducers/toggle_sidebar.jsx';
 import toggleSidebarPanel from './reducers/toggle_sidebar_panel.jsx';
 import changeFormBlocks from './reducers/change_form_blocks.jsx';
+import saveCustomFieldDone from './reducers/save_custom_field_done.jsx';
+import saveCustomFieldFailed from './reducers/save_custom_field_failed.jsx';
+import saveCustomFieldStarted from './reducers/save_custom_field_started.jsx';
 
 const saveFormStarted = saveFormStartedFactory(MailPoet);
 
@@ -23,6 +26,9 @@ export default (defaultState) => (state = defaultState, action) => {
     case 'SAVE_FORM_DONE': return saveFormDone(state);
     case 'SAVE_FORM_FAILED': return saveFormFailed(state, action);
     case 'SAVE_FORM_STARTED': return saveFormStarted(state);
+    case 'SAVE_CUSTOM_FIELD_DONE': return saveCustomFieldDone(state, action);
+    case 'SAVE_CUSTOM_FIELD_FAILED': return saveCustomFieldFailed(state, action);
+    case 'SAVE_CUSTOM_FIELD_STARTED': return saveCustomFieldStarted(state);
     case 'SWITCH_SIDEBAR_TAB': return switchSidebarTab(state, action);
     case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);
     case 'TOGGLE_SIDEBAR_PANEL': return toggleSidebarPanel(state, action);

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

@@ -0,0 +1,26 @@
+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.map((customField) => {
+    if (customField.id === action.customFieldId) {
+      return action.response;
+    }
+    return customField;
+  });
+
+  return {
+    ...state,
+    isCustomFieldSaving: false,
+    isFormSaving: false,
+    notices,
+    customFields,
+  };
+};

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

@@ -0,0 +1,15 @@
+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,
+    isFormSaving: false,
+    isCustomFieldSaving: false,
+    notices,
+  };
+};

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

@@ -0,0 +1,9 @@
+export default (state) => {
+  const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+  return {
+    ...state,
+    isFormSaving: true,
+    isCustomFieldSaving: true,
+    notices,
+  };
+};

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

@@ -29,6 +29,9 @@ export default {
   getIsFormSaving(state) {
     return state.isFormSaving;
   },
+  getIsCustomFieldSaving(state) {
+    return state.isCustomFieldSaving;
+  },
   getDismissibleNotices(state) {
     return state.notices.filter((notice) => notice.isDismissible === true);
   },

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

@@ -25,6 +25,7 @@ export default () => {
     pages: window.mailpoet_form_pages,
     customFields: window.mailpoet_custom_fields,
     isFormSaving: false,
+    isCustomFieldSaving: false,
     notices: [],
     sidebar: {
       activeTab: 'form',