diff --git a/assets/css/src/newsletterEditor.scss b/assets/css/src/newsletterEditor.scss index f2f9349bc6..8f6c012f60 100644 --- a/assets/css/src/newsletterEditor.scss +++ b/assets/css/src/newsletterEditor.scss @@ -1,13 +1,9 @@ @import '../../../node_modules/select2/dist/css/select2'; @import '../../../node_modules/spectrum-colorpicker/spectrum'; - @import 'components/newsletterEditor/mixins/transitions'; - @import 'components/newsletterEditor/variables'; @import 'components/newsletterEditor/common'; @import 'components/newsletterEditor/layout'; - - @import 'components/newsletterEditor/components/forms'; @import 'components/newsletterEditor/components/heading'; @import 'components/newsletterEditor/components/history'; @@ -18,8 +14,6 @@ @import 'components/newsletterEditor/components/layers'; @import 'components/newsletterEditor/components/dragAndDrop'; @import 'components/newsletterEditor/components/resize'; - - @import 'components/newsletterEditor/contentBlocks/base'; @import 'components/newsletterEditor/contentBlocks/container'; @import 'components/newsletterEditor/contentBlocks/automatedLatestContent'; @@ -35,5 +29,4 @@ @import 'components/newsletterEditor/contentBlocks/footer'; @import 'components/newsletterEditor/contentBlocks/woocommerceHeading'; @import 'components/newsletterEditor/contentBlocks/woocommerceContent'; - @import 'components/newsletterEditor/libraryOverrides'; 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 36ed09431c..6ba26db177 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 @@ -1,11 +1,43 @@ +import slugify from 'slugify'; + +export function getCustomFieldName(blockName, customField) { + // TODO move this function elsewhere, it is also used in the blocks.jsx + const name = slugify(customField.name, { lower: true }) + .replace(/[^a-z0-9]+/g, '') + .replace(/-$/, ''); + return `mailpoet-form/custom-text-${name}`; +} + +const mapCustomField = (item, customFields, mappedCommonProperties) => { + const customField = customFields.find((cf) => cf.id === parseInt(item.id, 10)); + if (!customField) return null; + if (customField.type !== 'text') return null; // TODO debug, for now, remove later + const mapped = { + ...mappedCommonProperties, + name: getCustomFieldName('mailpoet-form/custom-text', customField), + }; + if ( + item.params + && Object.prototype.hasOwnProperty.call(item.params, 'validate') + && !!item.params.validate + ) { + mapped.attributes.validate = item.params.validate; + } + return mapped; +}; + /** * Transforms form body items to array of blocks which can be passed to block editor. - * @param data - from form.body property + * @param {array} data - from form.body property + * @param {array} customFields - list of all custom fields */ -export default (data) => { +export default (data, customFields = []) => { if (!Array.isArray(data)) { throw new Error('Mapper expects form body to be an array.'); } + if (!Array.isArray(customFields)) { + throw new Error('Mapper expects customFields to be an array.'); + } return data.map((item, index) => { const mapped = { clientId: `${item.id}_${index}`, @@ -79,6 +111,9 @@ export default (data) => { }, }; default: + if (Number.isInteger(parseInt(item.id, 10))) { + return mapCustomField(item, customFields, mapped); + } return null; } }).filter(Boolean); diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx index c65beb9893..666f3b174f 100644 --- a/assets/js/src/form_editor/store/store.jsx +++ b/assets/js/src/form_editor/store/store.jsx @@ -12,7 +12,7 @@ import formBodyToBlocks from './form_body_to_blocks.jsx'; export default () => { const formData = { ...window.mailpoet_form_data }; - const formBlocks = formBodyToBlocks(formData.body); + const formBlocks = formBodyToBlocks(formData.body, window.mailpoet_custom_fields); delete formData.body; formData.settings.segments = formData.settings.segments ? formData.settings.segments : []; const defaultState = { 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 f7315fe1ee..f39066d524 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 @@ -71,6 +71,20 @@ const submitInput = { }, position: null, }; +const customTextInput = { + type: 'text', + name: 'Street name', + id: '1', + unique: '1', + static: '0', + params: { + required: '', + validate: 'alphanum', + label: 'Name of the street', + label_within: '1', + }, + position: null, +}; const divider = { type: 'divider', @@ -112,6 +126,14 @@ describe('Form Body To Blocks', () => { expect(() => formBodyToBlocks(1)).to.throw(error); }); + it('Should throw an error for wrong custom fields input', () => { + const error = 'Mapper expects customFields to be an array.'; + expect(() => formBodyToBlocks([], null)).to.throw(error); + expect(() => formBodyToBlocks([], 'hello')).to.throw(error); + expect(() => formBodyToBlocks([], () => {})).to.throw(error); + expect(() => formBodyToBlocks([], 1)).to.throw(error); + }); + it('Should map email input to block', () => { const [block] = formBodyToBlocks([{ ...emailInput, position: '1' }]); checkBlockBasics(block); @@ -196,6 +218,7 @@ describe('Form Body To Blocks', () => { expect(block.attributes.label).to.be.equal('Subscribe!'); }); +<<<<<<< HEAD it('Should map dividers to blocks', () => { const [block1, block2] = formBodyToBlocks([ { ...divider, position: '1' }, @@ -224,6 +247,29 @@ describe('Form Body To Blocks', () => { expect(block2.name).to.be.equal('mailpoet-form/custom-html'); expect(block2.attributes.content).to.be.equal('nice one'); expect(block2.attributes.nl2br).to.be.false; +======= + it.only('Should map custom text input to block', () => { + const customField = { + created_at: '2019-12-10T15:05:06+00:00', + id: 1, + name: 'Custom Field ^name', + params: { + label: 'Street name', + required: '1', + validate: '', + }, + type: 'text', + updated_at: '2019-12-10T15:05:06+00:00', + }; + const [block] = formBodyToBlocks([{ ...customTextInput, position: '1' }], [customField]); + checkBlockBasics(block); + expect(block.clientId).to.be.equal('1'); + expect(block.name).to.be.equal('mailpoet-form/custom-text-customfieldname'); + expect(block.attributes.label).to.be.equal('Name of the street'); + expect(block.attributes.mandatory).to.be.equal(false); + expect(block.attributes.labelWithinInput).to.be.equal(true); + expect(block.attributes.validate).to.be.equal('alphanum'); +>>>>>>> Map custom fields to blocks }); it('Should ignore unknown input type', () => {