Add custom date block with simple text inputs settings

[MAILPOET-2453]

assets/js/src/form_editor/blocks/custom_date/custom_date.jsx

@@ -0,0 +1,48 @@
+import Icon from '../custom_text/icon.jsx';
+import Edit from './edit.jsx';
+
+export const name = 'mailpoet-form/custom-date';
+
+export function getSettings(customField) {
+  return {
+    title: customField.name,
+    description: '',
+    icon: Icon,
+    category: 'custom-fields',
+    attributes: {
+      label: {
+        type: 'string',
+        default: customField.name,
+      },
+      mandatory: {
+        type: 'boolean',
+        default: false,
+      },
+      defaultToday: {
+        type: 'boolean',
+        default: false,
+      },
+      dateType: {
+        type: 'string',
+        default: customField.params.date_type,
+      },
+      dateFormat: {
+        type: 'string',
+        default: customField.params.date_format,
+      },
+      customFieldId: {
+        type: 'string',
+        default: customField.id,
+      },
+    },
+    supports: {
+      html: false,
+      customClassName: false,
+      multiple: false,
+    },
+    edit: Edit,
+    save() {
+      return null;
+    },
+  };
+}

assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  ToggleControl,
+  TextControl,
+} from '@wordpress/components';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+const CustomFieldSettings = ({
+  mandatory,
+  dateType,
+  dateFormat,
+  defaultToday,
+  isSaving,
+  onSave,
+}) => {
+  const [localMandatory, setLocalMandatory] = useState(mandatory);
+  const [localDefaultToday, setLocalLocalDefaultToday] = useState(defaultToday);
+  const [localDateType, setLocalLocalDateType] = useState(dateType);
+  const [localDateFormat, setLocalLocalDateFormat] = useState(dateFormat);
+
+  return (
+    <div className="custom-field-settings">
+      <Button
+        isPrimary
+        isDefault
+        onClick={() => onSave({
+          mandatory: localMandatory,
+          dateType: localDateType,
+          dateFormat: localDateFormat,
+          defaultToday: localDefaultToday,
+        })}
+        isBusy={isSaving}
+        disabled={isSaving}
+        className="button-on-top"
+      >
+        {MailPoet.I18n.t('customFieldSaveCTA')}
+      </Button>
+      <ToggleControl
+        label={MailPoet.I18n.t('blockMandatory')}
+        checked={localMandatory}
+        onChange={setLocalMandatory}
+      />
+      <ToggleControl
+        label={MailPoet.I18n.t('customFieldDefaultToday')}
+        checked={localDefaultToday}
+        onChange={setLocalLocalDefaultToday}
+      />
+      <TextControl
+        label={MailPoet.I18n.t('customFieldDateType')}
+        value={localDateType}
+        onChange={setLocalLocalDateType}
+      />
+      <TextControl
+        label={MailPoet.I18n.t('customFieldDateFormat')}
+        value={localDateFormat}
+        onChange={setLocalLocalDateFormat}
+      />
+    </div>
+  );
+};
+
+CustomFieldSettings.propTypes = {
+  mandatory: PropTypes.bool,
+  dateType: PropTypes.string,
+  dateFormat: PropTypes.string,
+  defaultToday: PropTypes.bool,
+  onSave: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool,
+};
+
+CustomFieldSettings.defaultProps = {
+  mandatory: false,
+  isSaving: false,
+  dateType: null,
+  dateFormat: null,
+  defaultToday: false,
+};
+
+export default CustomFieldSettings;

assets/js/src/form_editor/blocks/custom_date/edit.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  Panel,
+  PanelBody,
+  TextControl,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+import CustomFieldSettings from './custom_field_settings.jsx';
+
+const CustomDateEdit = ({ attributes, setAttributes }) => {
+  const isSaving = useSelect(
+    (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
+    []
+  );
+  const { saveCustomField } = useDispatch('mailpoet-form-editor');
+  const inspectorControls = (
+    <InspectorControls>
+      <Panel>
+        <PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
+          <CustomFieldSettings
+            mandatory={attributes.mandatory}
+            defaultToday={attributes.defaultToday}
+            dateFormat={attributes.dateFormat}
+            dateType={attributes.dateType}
+            isSaving={isSaving}
+            onSave={(params) => saveCustomField({
+              customFieldId: attributes.customFieldId,
+              data: {
+                params: {
+                  required: params.mandatory ? '1' : undefined,
+                  date_type: params.dateType,
+                  date_format: params.dateFormat,
+                  is_default_today: params.defaultToday,
+                },
+              },
+              onFinish: () => setAttributes({
+                mandatory: params.mandatory,
+                dateType: params.dateType,
+                dateFormat: params.dateFormat,
+                dateDefaultToday: params.defaultToday,
+              }),
+            })}
+          />
+        </PanelBody>
+      </Panel>
+      <Panel>
+        <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
+          <TextControl
+            label={MailPoet.I18n.t('label')}
+            value={attributes.label}
+            data-automation-id="settings_custom_date_label_input"
+            onChange={(label) => (setAttributes({ label }))}
+          />
+        </PanelBody>
+      </Panel>
+    </InspectorControls>
+  );
+
+  const getLabel = () => {
+    if (attributes.mandatory) {
+      return `${attributes.label} *`;
+    }
+    return attributes.label;
+  };
+
+  return (
+    <>
+      {inspectorControls}
+      <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
+        {getLabel()}
+        <br />
+        <input
+          id="custom_date"
+          className="mailpoet_date"
+          type="text"
+          name="custom_date"
+          disabled
+          data-automation-id="editor_custom_date_input"
+        />
+      </label>
+    </>
+  );
+};
+
+CustomDateEdit.propTypes = {
+  attributes: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    dateFormat: PropTypes.string.isRequired,
+    dateType: PropTypes.string.isRequired,
+    defaultToday:  PropTypes.bool.isRequired,
+    mandatory: PropTypes.bool.isRequired,
+  }).isRequired,
+  setAttributes: PropTypes.func.isRequired,
+};
+
+export default CustomDateEdit;

views/form/editor.html

@@ -19,6 +19,9 @@
   var mailpoet_form_segments = <%= json_encode(segments) %>;
   var mailpoet_form_pages = <%= json_encode(pages) %>;
   var mailpoet_custom_fields = <%= json_encode(custom_fields) %>;
+  var mailpoet_date_types = <%= json_encode(date_types) %>;
+  var mailpoet_date_formats = <%= json_encode(date_formats) %>;
+  var mailpoet_date_months = <%= json_encode(months) %>;
   <% endautoescape %>
 </script>
 
@@ -48,7 +51,12 @@
   'customFieldsBlocksCategory': __('Custom Fields'),
   'customFieldNumberOfLines': __('Number of lines'),
   'customFieldSaveCTA': _x('Update custom field', 'Text on the save button'),
-  'customFieldSaveCTA': _x('Update custom field', 'Text on the save button'),
+  'customFieldDateType': __('Type of date'),
+  'customFieldDateFormat': __('Order'),
+  'customFieldDefaultToday': __('Preselect today’s date'),
+  'customFieldDay': __('Day'),
+  'customFieldMonth': __('Month'),
+  'customFieldYear': __('Year'),
   'customField1Line': _x('1 line', 'Number of rows in textarea'),
   'customField2Lines': _x('2 lines', 'Number of rows in textarea'),
   'customField3Lines': _x('3 lines', 'Number of rows in textarea'),