Map custom fields to blocks

[MAILPOET-2453]

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';

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);

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 = {

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', () => {