Register custom date blocks and add mappings

[MAILPOET-2453]

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

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

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

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

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;