diff --git a/assets/js/src/form_editor/blocks/blocks.jsx b/assets/js/src/form_editor/blocks/blocks.jsx index 1c85a8768b..22f514dd11 100644 --- a/assets/js/src/form_editor/blocks/blocks.jsx +++ b/assets/js/src/form_editor/blocks/blocks.jsx @@ -11,6 +11,7 @@ import * as lastName from './last_name/last_name.jsx'; import * as segmentSelect from './segment_select/segment_select.jsx'; import * as html from './html/html.jsx'; +import * as customDate from './custom_date/custom_date.jsx'; import * as customText from './custom_text/custom_text.jsx'; import * as customTextArea from './custom_textarea/custom_textarea.jsx'; import * as customRadio from './custom_radio/custom_radio.jsx'; @@ -19,6 +20,10 @@ import * as customSelect from './custom_select/custom_select.jsx'; const registerCustomFieldBlock = (customField) => { const namesMap = { + date: { + name: customDate.name, + settings: customDate.getSettings(customField), + }, text: { name: customText.name, settings: customText.getSettings(customField), 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 ea720f4e51..a5eda78302 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 @@ -8,6 +8,9 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => { id: block.attributes.customFieldId.toString(), name: customField.name, }; + if (block.name.startsWith('mailpoet-form/custom-date')) { + mapped.type = 'date'; + } if (block.name.startsWith('mailpoet-form/custom-text')) { mapped.type = 'text'; } @@ -29,6 +32,15 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => { if (has(block.attributes, 'hideLabel') && block.attributes.hideLabel) { mapped.params.hide_label = '1'; } + if (has(block.attributes, 'defaultToday') && block.attributes.defaultToday) { + mapped.params.is_default_today = '1'; + } + if (has(block.attributes, 'dateType')) { + mapped.params.date_type = block.attributes.dateType; + } + if (has(block.attributes, 'dateFormat')) { + mapped.params.date_format = block.attributes.dateFormat; + } if (has(block.attributes, 'values')) { mapped.params.values = block.attributes.values.map((value) => { const mappedValue = { 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 d272999473..4c0297d10e 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 @@ -11,6 +11,7 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => { radio: 'mailpoet-form/custom-radio', checkbox: 'mailpoet-form/custom-checkbox', select: 'mailpoet-form/custom-select', + date: 'mailpoet-form/custom-date', }; const mapped = { ...mappedCommonProperties, @@ -24,6 +25,15 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => { if (has(item.params, 'hide_label')) { mapped.attributes.hideLabel = !!item.params.hide_label; } + if (has(item.params, 'date_type')) { + mapped.attributes.dateType = item.params.date_type; + } + if (has(item.params, 'date_format')) { + mapped.attributes.dateFormat = item.params.date_format; + } + if (has(item.params, 'is_default_today')) { + mapped.attributes.defaultToday = !!item.params.is_default_today; + } if (has(item.params, 'values') && Array.isArray(item.params.values)) { mapped.attributes.values = item.params.values.map((value) => { const mappedValue = { 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 95d7821bfa..dd89aad606 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 @@ -130,6 +130,21 @@ const customSelectBlock = { }, }; +const customDateBlock = { + clientId: '5', + isValid: true, + innerBlocks: [], + name: 'mailpoet-form/custom-date', + attributes: { + label: 'Date', + mandatory: false, + customFieldId: 6, + dateType: 'month_year', + dateFormat: 'MM/YYYY', + defaultToday: true, + }, +}; + const dividerBlock = { clientId: 'some_random_123', isValid: true, @@ -404,6 +419,33 @@ describe('Blocks to Form Body', () => { expect(input.params.values[0]).to.have.property('is_checked', '1'); }); + it('Should map custom date field', () => { + const customField = { + created_at: '2019-12-13T15:22:07+00:00', + id: 6, + name: 'Custom Date', + params: { + required: '1', + is_default_today: '1', + date_type: 'month_year', + date_format: 'YYYY/MM', + }, + type: 'date', + updated_at: '2019-12-13T15:22:07+00:00', + }; + const [input] = formBlocksToBody([customDateBlock], [customField]); + checkBodyInputBasics(input); + expect(input.id).to.be.equal('6'); + expect(input.name).to.be.equal('Custom Date'); + expect(input.type).to.be.equal('date'); + expect(input.position).to.be.equal('1'); + expect(input.params.label).to.be.equal('Date'); + expect(input.params.required).to.be.undefined; + expect(input.params.date_type).to.be.equal('month_year'); + expect(input.params.date_format).to.be.equal('MM/YYYY'); + expect(input.params.is_default_today).to.be.equal('1'); + }); + 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 e0e1da646c..33516000ee 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 @@ -140,6 +140,21 @@ const customCheckboxInput = { }, position: null, }; +const customDateInput = { + type: 'date', + name: 'Custom date', + id: '6', + unique: '1', + static: '0', + params: { + required: '1', + label: 'Date', + date_type: 'month_year', + date_format: 'MM/YYYY', + is_default_today: true, + }, + position: null, +}; const divider = { type: 'divider', name: 'Divider', @@ -410,6 +425,31 @@ describe('Form Body To Blocks', () => { expect(block.attributes.values[0]).to.have.property('name', 'option 1'); }); + it('Should map custom date input to block', () => { + const customField = { + created_at: '2019-12-13T15:22:07+00:00', + id: 6, + name: 'Custom Date', + params: { + required: '1', + is_default_today: '1', + date_type: 'month_year', + date_format: 'YYYY/MM', + }, + type: 'date', + updated_at: '2019-12-13T15:22:07+00:00', + }; + const [block] = formBodyToBlocks([{ ...customDateInput, position: '1' }], [customField]); + checkBlockBasics(block); + expect(block.clientId).to.be.equal('6_0'); + expect(block.name).to.be.equal('mailpoet-form/custom-date-customdate'); + expect(block.attributes.label).to.be.equal('Date'); + expect(block.attributes.mandatory).to.be.true; + expect(block.attributes.dateFormat).to.be.equal('MM/YYYY'); + expect(block.attributes.dateType).to.be.equal('month_year'); + expect(block.attributes.defaultToday).to.be.true; + }); + it('Should ignore unknown input type', () => { const blocks = formBodyToBlocks([{ ...submitInput, id: 'some-nonsense' }]); expect(blocks).to.be.empty;