Better select for date formats

[MAILPOET-2453]

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import {
   Button,
   ToggleControl,
-  TextControl,
+  SelectControl,
 } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
@@ -12,6 +12,7 @@ const CustomFieldSettings = ({
   dateType,
   dateFormat,
   defaultToday,
+  dateSettings,
   isSaving,
   onSave,
 }) => {
@@ -20,6 +21,24 @@ const CustomFieldSettings = ({
   const [localDateType, setLocalLocalDateType] = useState(dateType);
   const [localDateFormat, setLocalLocalDateFormat] = useState(dateFormat);
 
+  const createDateFormatsSelect = () => {
+    const dateFormats = dateSettings.dateFormats[localDateType];
+    if (Array.isArray(dateFormats) && dateFormats.length === 1) {
+      return null;
+    }
+    return (
+      <SelectControl
+        label={MailPoet.I18n.t('customFieldDateFormat')}
+        value={localDateFormat}
+        onChange={(value) => setLocalLocalDateFormat(value)}
+        options={dateFormats.map((format) => ({
+          value: format,
+          label: format,
+        }))}
+      />
+    );
+  };
+
   return (
     <div className="custom-field-settings">
       <Button
@@ -47,16 +66,19 @@ const CustomFieldSettings = ({
         checked={localDefaultToday}
         onChange={setLocalLocalDefaultToday}
       />
-      <TextControl
+      <SelectControl
         label={MailPoet.I18n.t('customFieldDateType')}
         value={localDateType}
-        onChange={setLocalLocalDateType}
-      />
-      <TextControl
-        label={MailPoet.I18n.t('customFieldDateFormat')}
-        value={localDateFormat}
-        onChange={setLocalLocalDateFormat}
+        onChange={(value) => {
+          setLocalLocalDateType(value);
+          const dateFormats = dateSettings.dateFormats[value];
+          if (dateFormats.length === 1) {
+            setLocalLocalDateFormat(dateFormats[0]);
+          }
+        }}
+        options={dateSettings.dateTypes}
       />
+      {createDateFormatsSelect()}
     </div>
   );
 };
@@ -68,6 +90,14 @@ CustomFieldSettings.propTypes = {
   defaultToday: PropTypes.bool,
   onSave: PropTypes.func.isRequired,
   isSaving: PropTypes.bool,
+  dateSettings: PropTypes.shape({
+    dateTypes: PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    })),
+    dateFormats: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
+    months: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
 };
 
 CustomFieldSettings.defaultProps = {

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

@@ -16,6 +16,11 @@ const CustomDateEdit = ({ attributes, setAttributes }) => {
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
   );
+  const dateSettings = useSelect(
+    (sel) => sel('mailpoet-form-editor').getDateSettingsData(),
+    []
+  );
+
   const { saveCustomField } = useDispatch('mailpoet-form-editor');
   const inspectorControls = (
     <InspectorControls>
@@ -23,6 +28,7 @@ const CustomDateEdit = ({ attributes, setAttributes }) => {
         <PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
           <CustomFieldSettings
             mandatory={attributes.mandatory}
+            dateSettings={dateSettings}
             defaultToday={attributes.defaultToday}
             dateFormat={attributes.dateFormat}
             dateType={attributes.dateType}