diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx index 57c3c3ae5a..cc195910fa 100644 --- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx +++ b/assets/js/src/form_editor/store/blocks_to_form_body.jsx @@ -2,15 +2,29 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => { const customField = customFields.find((cf) => cf.id === block.attributes.customFieldId); if (!customField) return null; - return { + const typesMap = { + 'mailpoet-form/custom-text': 'text', + 'mailpoet-form/custom-textarea': 'textarea', + 'mailpoet-form/custom-radio': 'radio', + }; + const mapped = { ...mappedCommonProperties, id: block.attributes.customFieldId.toString(), name: customField.name, - params: { - ...mappedCommonProperties.params, - validate: block.attributes.validate, - }, + type: typesMap[block.name], }; + if (Object.prototype.hasOwnProperty.call(block.attributes, 'validate')) { + mapped.params.validate = block.attributes.validate; + } + if (Object.prototype.hasOwnProperty.call(block.attributes, 'displayLabel') && block.attributes.displayLabel) { + mapped.params.display_label = '1'; + } + if (Object.prototype.hasOwnProperty.call(block.attributes, 'values')) { + mapped.params.values = block.attributes.values.map((value) => ({ + value: value.name, + })); + } + return mapped; }; /** diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx index ba36465cec..ba3a3795a5 100644 --- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx +++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx @@ -7,18 +7,23 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => { const namesMap = { text: 'mailpoet-form/custom-text', textarea: 'mailpoet-form/custom-textarea', + radio: 'mailpoet-form/custom-radio', }; const mapped = { ...mappedCommonProperties, name: formatCustomFieldBlockName(namesMap[customField.type], customField), }; mapped.attributes.customFieldId = customField.id; - if ( - item.params - && Object.prototype.hasOwnProperty.call(item.params, 'validate') - && !!item.params.validate - ) { - mapped.attributes.validate = item.params.validate; + if (item.params) { + if (Object.prototype.hasOwnProperty.call(item.params, 'validate') && !!item.params.validate) { + mapped.attributes.validate = item.params.validate; + } + if (Object.prototype.hasOwnProperty.call(item.params, 'display_label')) { + mapped.attributes.displayLabel = !!item.params.display_label; + } + if (Object.prototype.hasOwnProperty.call(item.params, 'values') && Array.isArray(item.params.values)) { + mapped.attributes.values = item.params.values.map((value) => ({ name: value.value })); + } } return mapped; }; diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js index a12d12d981..4e1300a4ff 100644 --- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js +++ b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js @@ -71,6 +71,22 @@ const customTextBlock = { customFieldId: 1, }, }; +const customRadioBlock = { + clientId: '4', + isValid: true, + innerBlocks: [], + name: 'mailpoet-form/custom-radio', + attributes: { + label: 'Options', + displayLabel: true, + mandatory: true, + customFieldId: 2, + values: [ + { name: 'option 1' }, + { name: 'option 2' }, + ], + }, +}; const dividerBlock = { clientId: 'some_random_123', @@ -261,6 +277,35 @@ describe('Blocks to Form Body', () => { expect(input.params.validate).to.eq('alphanum'); }); + it('Should map custom radio field', () => { + const customField = { + created_at: '2019-12-10T15:05:06+00:00', + id: 2, + name: 'Custom Field name', + params: { + label: 'Options', + required: '1', + values: [ + { value: 'option 1' }, + ], + }, + type: 'radio', + updated_at: '2019-12-10T15:05:06+00:00', + }; + const [input] = formBlocksToBody([customRadioBlock], [customField]); + checkBodyInputBasics(input); + expect(input.id).to.be.equal('2'); + expect(input.name).to.be.equal('Custom Field name'); + expect(input.type).to.be.equal('radio'); + expect(input.position).to.be.equal('1'); + expect(input.params.label).to.be.equal('Options'); + expect(input.params.required).to.be.eq('1'); + expect(input.params.display_label).to.eq('1'); + expect(input.params.values).to.be.an('Array').that.has.length(2); + expect(input.params.values[0]).to.have.property('value', 'option 1'); + expect(input.params.values[1]).to.have.property('value', 'option 2'); + }); + it('Should map multiple blocks at once', () => { const unknownBlock = { name: 'unknown', diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js index bf0027fd65..19abaeab3d 100644 --- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js +++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js @@ -85,7 +85,24 @@ const customTextInput = { }, position: null, }; - +const customRadioInput = { + type: 'radio', + name: 'Options', + id: '3', + unique: '1', + static: '0', + params: { + required: '', + label: 'Options', + display_label: '1', + values: [ + { + value: 'option 1', + }, + ], + }, + position: null, +}; const divider = { type: 'divider', name: 'Divider', @@ -271,6 +288,34 @@ describe('Form Body To Blocks', () => { expect(block.attributes.validate).to.be.equal('alphanum'); }); + it('Should map custom radio input to block', () => { + const customField = { + created_at: '2019-12-10T15:05:06+00:00', + id: 3, + name: 'Name', + params: { + required: '1', + label: 'Options 123', + display_label: '', + values: [ + { value: 'option 1' }, + { value: 'option 2' }, + ], + }, + type: 'radio', + updated_at: '2019-12-10T15:05:06+00:00', + }; + const [block] = formBodyToBlocks([{ ...customRadioInput, position: '1' }], [customField]); + checkBlockBasics(block); + expect(block.clientId).to.be.equal('3_0'); + expect(block.name).to.be.equal('mailpoet-form/custom-radio-name'); + expect(block.attributes.label).to.be.equal('Options'); + expect(block.attributes.mandatory).to.be.equal(false); + expect(block.attributes.displayLabel).to.be.equal(true); + expect(block.attributes.values).to.be.an('Array').that.has.length(1); + expect(block.attributes.values[0]).to.have.property('name', 'option 1'); + }); + it('Should ignore unknown input type', () => { const blocks = formBodyToBlocks([{ ...submitInput, id: 'some-nonsense' }]); expect(blocks).to.be.empty;