Persist segments selection

[MAILPOET-2452]

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -50,6 +50,23 @@ export default (blocks) => {
           static: '0',
           name: 'Last name',
         };
+      case 'mailpoet-form/segment-select':
+        return {
+          ...mapped,
+          id: 'segments',
+          type: 'segment',
+          unique: '1',
+          static: '0',
+          name: 'List selection',
+          params: {
+            ...mapped.params,
+            values: block.attributes.values.map((segment) => ({
+              id: segment.id,
+              is_checked: segment.isChecked ? '1' : undefined,
+              name: segment.name,
+            })),
+          },
+        };
       case 'mailpoet-form/submit-button':
         return {
           ...mapped,

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -41,6 +41,24 @@ export default (data) => {
           ...mapped,
           name: 'mailpoet-form/last-name-input',
         };
+      case 'segments':
+        if (
+          item.params
+          && Object.prototype.hasOwnProperty.call(item.params, 'values')
+          && Array.isArray(item.params.values)
+        ) {
+          mapped.attributes.values = item.params.values.map((value) => ({
+            id: value.id,
+            name: value.name,
+            isChecked: value.is_checked === '1' ? true : undefined,
+          }));
+        } else {
+          mapped.attributes.values = [];
+        }
+        return {
+          ...mapped,
+          name: 'mailpoet-form/segment-select',
+        };
       case 'submit':
         return {
           ...mapped,

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -20,6 +20,22 @@ const submitBlock = {
     label: 'Subscribe!',
   },
 };
+const segmentsBlock = {
+  clientId: 'segments',
+  isValid: true,
+  innerBlocks: [],
+  name: 'mailpoet-form/segment-select',
+  attributes: {
+    labelWithinInput: false,
+    mandatory: false,
+    label: 'Select list(s):',
+    values: [
+      { id: '6', name: 'Unicorn Truthers' },
+      { id: '24', name: 'Carrots are lit', isChecked: true },
+      { id: '29', name: 'Daily' },
+    ],
+  },
+};
 const firstNameBlock = {
   clientId: 'first_name',
   isValid: true,
@@ -130,6 +146,18 @@ describe('Blocks to Form Body', () => {
     expect(input.params.label_within).to.be.equal('1');
   });
 
+  it('Should map segments', () => {
+    const [input] = formBlocksToBody([segmentsBlock]);
+    checkBodyInputBasics(input);
+    expect(input.id).to.be.equal('segments');
+    expect(input.name).to.be.equal('List selection');
+    expect(input.type).to.be.equal('segment');
+    expect(input.params.values).to.be.an('Array');
+    expect(input.params.values[0]).to.have.property('name', 'Unicorn Truthers');
+    expect(input.params.values[0]).to.have.property('id', '6');
+    expect(input.params.values[1]).to.have.property('is_checked', '1');
+  });
+
   it('Should map submit block to input data', () => {
     const [input] = formBlocksToBody([submitBlock]);
     checkBodyInputBasics(input);

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -34,6 +34,32 @@ const lastNameInput = {
   },
   position: null,
 };
+const segmentsInput = {
+  type: 'segment',
+  name: 'List selection',
+  id: 'segments',
+  unique: '1',
+  static: '0',
+  params: {
+    label: 'Select list(s):',
+    values: [
+      {
+        id: '6',
+        name: 'Unicorn Truthers',
+      },
+      {
+        id: '24',
+        is_checked: '1',
+        name: 'Carrots are lit',
+      },
+      {
+        id: '29',
+        name: 'Daily',
+      },
+    ],
+  },
+  position: null,
+};
 const submitInput = {
   type: 'submit',
   name: 'Submit',
@@ -117,6 +143,28 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.mandatory).to.be.equal(true);
   });
 
+  it('Should map segments input to block', () => {
+    const [block] = formBodyToBlocks([{ ...segmentsInput, position: '1' }]);
+    checkBlockBasics(block);
+    expect(block.clientId).to.be.equal('segments');
+    expect(block.name).to.be.equal('mailpoet-form/segment-select');
+    expect(block.attributes.label).to.be.equal('Select list(s):');
+    expect(block.attributes.values).to.be.an('Array');
+    expect(block.attributes.values[0]).to.haveOwnProperty('id', '6');
+    expect(block.attributes.values[0]).to.haveOwnProperty('name', 'Unicorn Truthers');
+    expect(block.attributes.values[1]).to.haveOwnProperty('isChecked', true);
+  });
+
+  it('Should map segments input without values to block', () => {
+    const input = { ...segmentsInput, position: '1' };
+    input.params.values = undefined;
+    const [block] = formBodyToBlocks([input]);
+    checkBlockBasics(block);
+    expect(block.clientId).to.be.equal('segments');
+    expect(block.attributes.values).to.be.an('Array');
+    expect(block.attributes.values).to.have.length(0);
+  });
+
   it('Should map submit button to block', () => {
     const [block] = formBodyToBlocks([{ ...submitInput, position: '1' }]);
     checkBlockBasics(block);