Add custom field form data mapper

[MAILPOET-2463]

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

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
 import MailPoet from 'mailpoet';
 
 import icon from './icon.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 import TextFieldSettings from '../custom_text/custom_field_settings.jsx';
 import CheckboxFieldSettings from '../custom_checkbox/custom_field_settings.jsx';
 import DateFieldSettings from '../custom_date/custom_field_settings.jsx';
@@ -131,11 +132,14 @@ const AddCustomField = ({ clientId }) => {
           disabled={!canSubmit()}
           onClick={() => {
             // eslint-disable-next-line no-console
-            console.log(fieldType);
+            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(fieldName);
+            console.log(data);
-            // eslint-disable-next-line no-console
-            console.log(fieldSettings);
           }}
         >
           {'Create'}

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

@@ -11,6 +11,7 @@ import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 import CustomFieldSettings from './custom_field_settings.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -59,13 +60,7 @@ const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
             onSave={(params) => saveCustomField({
               customFieldId: attributes.customFieldId,
               data: {
-                params: {
+                params: mapCustomFieldFormData('checkbox', params),
-                  required: params.mandatory ? '1' : undefined,
-                  values: [{
-                    is_checked: params.isChecked ? '1' : undefined,
-                    value: params.checkboxLabel,
-                  }],
-                },
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,

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

@@ -13,6 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import CustomFieldSettings from './custom_field_settings.jsx';
 import FormFieldDate from '../../../form/fields/date.jsx';
 import formatLabel from '../label_formatter.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -46,12 +47,7 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
             onSave={(params) => saveCustomField({
               customFieldId: attributes.customFieldId,
               data: {
-                params: {
+                params: mapCustomFieldFormData('date', params),
-                  required: params.mandatory ? '1' : undefined,
-                  date_type: params.dateType,
-                  date_format: params.dateFormat,
-                  is_default_today: params.defaultToday ? '1' : undefined,
-                },
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,

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

@@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 import CustomFieldSettings from './custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomRadioEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -38,10 +39,7 @@ const CustomRadioEdit = ({ attributes, setAttributes, clientId }) => {
             onSave={(params) => saveCustomField({
               customFieldId: attributes.customFieldId,
               data: {
-                params: {
+                params: mapCustomFieldFormData('radio', params),
-                  required: params.mandatory ? '1' : undefined,
-                  values: params.values.map((value) => ({ value: value.name })),
-                },
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,

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

@@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import formatLabel from '../label_formatter.jsx';
 
 import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -38,13 +39,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
             onSave={(params) => saveCustomField({
               customFieldId: attributes.customFieldId,
               data: {
-                params: {
+                params: mapCustomFieldFormData('select', params),
-                  required: params.mandatory ? '1' : undefined,
-                  values: params.values.map((value) => ({
-                    value: value.name,
-                    is_checked: value.isChecked ? '1' : undefined,
-                  })),
-                },
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,

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

@@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 import CustomFieldSettings from './custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -42,10 +43,7 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
               saveCustomField({
                 customFieldId: attributes.customFieldId,
                 data: {
-                  params: {
+                  params: mapCustomFieldFormData('text', params),
-                    required: params.mandatory ? '1' : undefined,
-                    validate: params.validate,
-                  },
                 },
                 onFinish: () => setAttributes({
                   mandatory: params.mandatory,

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

@@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
+import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -37,11 +38,7 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
             onSave={(params) => saveCustomField({
               customFieldId: attributes.customFieldId,
               data: {
-                params: {
+                params: mapCustomFieldFormData('textarea', params),
-                  required: params.mandatory ? '1' : undefined,
-                  validate: params.validate,
-                  lines: params.lines,
-                },
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,

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

@@ -0,0 +1,40 @@
+function mapFormDataToParams(fieldType, data) {
+  switch (fieldType) {
+    case 'checkbox':
+      return {
+        required: data.mandatory ? '1' : undefined,
+        values: [{
+          is_checked: data.isChecked ? '1' : undefined,
+          value: data.checkboxLabel,
+        }],
+      };
+    case 'date':
+      return {
+        required: data.mandatory ? '1' : undefined,
+        date_type: data.dateType,
+        date_format: data.dateFormat,
+        is_default_today: data.defaultToday ? '1' : undefined,
+      };
+    case 'radio':
+    case 'select':
+      return {
+        required: data.mandatory ? '1' : undefined,
+        values: data.values.map((value) => ({ value: value.name })),
+      };
+    case 'text':
+      return {
+        required: data.mandatory ? '1' : undefined,
+        validate: data.validate,
+      };
+    case 'textarea':
+      return {
+        required: data.mandatory ? '1' : undefined,
+        validate: data.validate,
+        lines: data.lines ? data.lines : '1',
+      };
+    default:
+      throw new Error(`Invalid custom field type ${fieldType}!`);
+  }
+}
+
+export default mapFormDataToParams;