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 60be5b47d7..75b1c4ebca 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 @@ -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); - // eslint-disable-next-line no-console - console.log(fieldSettings); + console.log(data); }} > {'Create'} diff --git a/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx b/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx index 6b6358622c..812949d67f 100644 --- a/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx +++ b/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: { - required: params.mandatory ? '1' : undefined, - values: [{ - is_checked: params.isChecked ? '1' : undefined, - value: params.checkboxLabel, - }], - }, + params: mapCustomFieldFormData('checkbox', params), }, onFinish: () => setAttributes({ mandatory: params.mandatory, diff --git a/assets/js/src/form_editor/blocks/custom_date/edit.jsx b/assets/js/src/form_editor/blocks/custom_date/edit.jsx index ce792cdb17..b487e0415e 100644 --- a/assets/js/src/form_editor/blocks/custom_date/edit.jsx +++ b/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: { - required: params.mandatory ? '1' : undefined, - date_type: params.dateType, - date_format: params.dateFormat, - is_default_today: params.defaultToday ? '1' : undefined, - }, + params: mapCustomFieldFormData('date', params), }, onFinish: () => setAttributes({ mandatory: params.mandatory, diff --git a/assets/js/src/form_editor/blocks/custom_radio/edit.jsx b/assets/js/src/form_editor/blocks/custom_radio/edit.jsx index f867af123c..e389689e92 100644 --- a/assets/js/src/form_editor/blocks/custom_radio/edit.jsx +++ b/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: { - required: params.mandatory ? '1' : undefined, - values: params.values.map((value) => ({ value: value.name })), - }, + params: mapCustomFieldFormData('radio', params), }, onFinish: () => setAttributes({ mandatory: params.mandatory, diff --git a/assets/js/src/form_editor/blocks/custom_select/edit.jsx b/assets/js/src/form_editor/blocks/custom_select/edit.jsx index ddd521a778..a2fac5e549 100644 --- a/assets/js/src/form_editor/blocks/custom_select/edit.jsx +++ b/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: { - required: params.mandatory ? '1' : undefined, - values: params.values.map((value) => ({ - value: value.name, - is_checked: value.isChecked ? '1' : undefined, - })), - }, + params: mapCustomFieldFormData('select', params), }, onFinish: () => setAttributes({ mandatory: params.mandatory, diff --git a/assets/js/src/form_editor/blocks/custom_text/edit.jsx b/assets/js/src/form_editor/blocks/custom_text/edit.jsx index 17206f93cd..8a4067d044 100644 --- a/assets/js/src/form_editor/blocks/custom_text/edit.jsx +++ b/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: { - required: params.mandatory ? '1' : undefined, - validate: params.validate, - }, + params: mapCustomFieldFormData('text', params), }, onFinish: () => setAttributes({ mandatory: params.mandatory, diff --git a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx index 7cf4d701d0..cc744c380b 100644 --- a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx +++ b/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: { - required: params.mandatory ? '1' : undefined, - validate: params.validate, - lines: params.lines, - }, + params: mapCustomFieldFormData('textarea', params), }, onFinish: () => setAttributes({ mandatory: params.mandatory, diff --git a/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx b/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx new file mode 100644 index 0000000000..005d8adefc --- /dev/null +++ b/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;