Save and load radio custom field

[MAILPOET-2453]

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: {
+    type: typesMap[block.name],
-      ...mappedCommonProperties.params,
-      validate: block.attributes.validate,
-    },
   };
+  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;
 };
 
 /**

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 (
+  if (item.params) {
-    item.params
+    if (Object.prototype.hasOwnProperty.call(item.params, 'validate') && !!item.params.validate) {
-    && Object.prototype.hasOwnProperty.call(item.params, 'validate')
+      mapped.attributes.validate = item.params.validate;
-    && !!item.params.validate
+    }
-  ) {
+    if (Object.prototype.hasOwnProperty.call(item.params, 'display_label')) {
-    mapped.attributes.validate = item.params.validate;
+      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;
 };

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

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;