@bigbinary/neeto-rules-frontend 2.5.24 → 2.5.25

package/dist/NeetoRulesForm.js

@@ -11,7 +11,7 @@ import Delete from '@bigbinary/neeto-icons/Delete';
 import Refresh from '@bigbinary/neeto-icons/Refresh';
 import Button from '@bigbinary/neetoui/Button';
 import { useTranslation, Trans } from 'react-i18next';
-import { u as useUtilityStore, g as getSeparator } from './useUtilityStore-BcSUEW_u.js';
+import { u as useUtilityStore, g as getSeparator, d as dotPath$1, b as getDateTimeValue, a as getDateTimeFormattedValue, D as DATE_TIME_TYPES, e as DATE_TIME_FORMAT, f as DATE_FORMAT, T as TIME_FORMAT } from './useUtilityStore-C0O0N3Aq.js';
 import classNames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
 import { assocPath, pluck, identity, isEmpty, mergeDeepLeft, isNotNil, whereAny, reject, equals, unless, path, omit, useWith, split, when, is, trim, eqBy, F, values, isNil, without, append, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test } from 'ramda';
@@ -47,8 +47,10 @@ import _toArray from '@babel/runtime/helpers/toArray';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import Tag from '@bigbinary/neetoui/Tag';
 import { components } from 'react-select';
-import { O as OPERATORS$1, V as VERB_LABELS, I as INPUT_FIELD_TYPES, C as CONDITION_VALUE_TYPES, F as FIELDS_WITH_OPTIONS$1 } from './constants-DghBXpIM.js';
+import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
+import { O as OPERATORS$1, V as VERB_LABELS, I as INPUT_FIELD_TYPES, C as CONDITION_VALUE_TYPES, F as FIELDS_WITH_OPTIONS$1 } from './constants-DvCsjJGj.js';
 import Radio$1 from '@bigbinary/neetoui/Radio';
+import TimePicker from '@bigbinary/neetoui/TimePicker';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
@@ -521,7 +523,7 @@ function flatten (target, opts) {
 
 var DEFAULT_LONG_TEXT_ROWS = 8;
 
-var Target$j = function Target(_ref) {
+var Target$k = function Target(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var index = _ref.index,
     name = _ref.name,
@@ -585,7 +587,7 @@ var LongTextField = function LongTextField(_ref2) {
     onFocus: setFieldActive
   });
 };
-LongTextField.Target = Target$j;
+LongTextField.Target = Target$k;
 
 var CUSTOM_HEADERS_INITIAL_VALUE = {
   key: "",
@@ -1034,7 +1036,7 @@ var useResetSaveAsTemplateOnHide = function useResetSaveAsTemplateOnHide(name, s
   return isVisible;
 };
 
-var Target$i = function Target(_ref) {
+var Target$j = function Target(_ref) {
   var _selectedField$separa;
   var selectedField = _ref.selectedField,
     name = _ref.name,
@@ -1157,9 +1159,9 @@ var ApiFields = function ApiFields(_ref2) {
     })]
   });
 };
-ApiFields.Target = Target$i;
+ApiFields.Target = Target$j;
 
-var Target$h = function Target(_ref) {
+var Target$i = function Target(_ref) {
   var _selectedField$separa;
   var selectedField = _ref.selectedField,
     name = _ref.name,
@@ -1216,9 +1218,9 @@ var CustomAction = function CustomAction(_ref2) {
     setFieldActive: setFieldActive
   });
 };
-CustomAction.Target = Target$h;
+CustomAction.Target = Target$i;
 
-var Target$g = function Target(_ref) {
+var Target$h = function Target(_ref) {
   var _field$value, _selectedField$separa;
   var name = _ref.name,
     selectedField = _ref.selectedField,
@@ -1298,7 +1300,7 @@ var DateField$1 = function DateField(_ref2) {
     }
   });
 };
-DateField$1.Target = Target$g;
+DateField$1.Target = Target$h;
 
 var EmailIdFields = function EmailIdFields(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
@@ -1375,7 +1377,7 @@ var EditorAction = function EditorAction(_ref) {
 var _excluded$d = ["dropdownOptions", "name", "selectedField", "shouldAutoFocus", "className", "required"];
 function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Target$f = function Target(_ref) {
+var Target$g = function Target(_ref) {
   var _selectedOption$label;
   var dropdownOptions = _ref.dropdownOptions,
     name = _ref.name,
@@ -1480,11 +1482,11 @@ var SelectField$2 = function SelectField(_ref2) {
     onFocus: setFieldActive
   }));
 };
-SelectField$2.Target = Target$f;
+SelectField$2.Target = Target$g;
 
 function ownKeys$o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Target$e = function Target(_ref) {
+var Target$f = function Target(_ref) {
   var selectedField = _ref.selectedField,
     _ref$separatorIndex = _ref.separatorIndex,
     separatorIndex = _ref$separatorIndex === void 0 ? 0 : _ref$separatorIndex,
@@ -1638,9 +1640,9 @@ var EmailFields = function EmailFields(_ref2) {
     })]
   });
 };
-EmailFields.Target = Target$e;
+EmailFields.Target = Target$f;
 
-var Target$d = function Target(_ref) {
+var Target$e = function Target(_ref) {
   var _field$value, _selectedField$separa;
   var name = _ref.name,
     selectedField = _ref.selectedField,
@@ -1705,7 +1707,7 @@ var Input = function Input(_ref2) {
     onFocus: setFieldActive
   });
 };
-Input.Target = Target$d;
+Input.Target = Target$e;
 
 var useOnClickOutside = function useOnClickOutside(ref, handler) {
   useEffect(function () {
@@ -1812,7 +1814,7 @@ var InlineInput = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 InlineInput.displayName = "InlineInput";
 
-var Target$c = function Target(_ref) {
+var Target$d = function Target(_ref) {
   var _selectedField$separa;
   var name = _ref.name,
     selectedField = _ref.selectedField,
@@ -1931,9 +1933,9 @@ var ListField = function ListField(_ref2) {
     })
   });
 };
-ListField.Target = Target$c;
+ListField.Target = Target$d;
 
-var Target$b = function Target(_ref) {
+var Target$c = function Target(_ref) {
   var _selectedField$separa, _selectedField$placeh;
   var _ref$dropdownOptions = _ref.dropdownOptions,
     dropdownOptions = _ref$dropdownOptions === void 0 ? [] : _ref$dropdownOptions,
@@ -2060,9 +2062,9 @@ var MultiSelect$1 = function MultiSelect(_ref2) {
     })
   });
 };
-MultiSelect$1.Target = Target$b;
+MultiSelect$1.Target = Target$c;
 
-var Target$a = function Target(_ref) {
+var Target$b = function Target(_ref) {
   var _selectedField$separa, _selectedField$placeh;
   var _ref$dropdownOptions = _ref.dropdownOptions,
     dropdownOptions = _ref$dropdownOptions === void 0 ? [] : _ref$dropdownOptions,
@@ -2196,9 +2198,9 @@ var MultiSelectCheckbox$1 = function MultiSelectCheckbox(_ref2) {
     })]
   });
 };
-MultiSelectCheckbox$1.Target = Target$a;
+MultiSelectCheckbox$1.Target = Target$b;
 
-var Target$9 = function Target(_ref) {
+var Target$a = function Target(_ref) {
   var _selectedField$placeh, _selectedField$separa;
   var name = _ref.name,
     selectedField = _ref.selectedField,
@@ -2265,9 +2267,9 @@ var NoteField = function NoteField(_ref2) {
     onFocus: setFieldActive
   });
 };
-NoteField.Target = Target$9;
+NoteField.Target = Target$a;
 
-var Target$8 = function Target(_ref) {
+var Target$9 = function Target(_ref) {
   var _selectedOption$label;
   var options = _ref.options,
     name = _ref.name,
@@ -2387,7 +2389,7 @@ var RadioField$2 = function RadioField(_ref2) {
     onFocus: setFieldActive
   });
 };
-RadioField$2.Target = Target$8;
+RadioField$2.Target = Target$9;
 
 var removeDuplicateErrorMessages = pipe(filter(isNotNil), uniq, join(ERROR_MESSAGE_DELIMITER));
 var dasherize = function dasherize(input) {
@@ -2648,7 +2650,7 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
 
 function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Target$7 = function Target(_ref) {
+var Target$8 = function Target(_ref) {
   var name = _ref.name,
     _ref$separatorIndex = _ref.separatorIndex,
     separatorIndex = _ref$separatorIndex === void 0 ? 0 : _ref$separatorIndex,
@@ -2788,7 +2790,7 @@ var SmsFields = function SmsFields(_ref2) {
     })]
   });
 };
-SmsFields.Target = Target$7;
+SmsFields.Target = Target$8;
 
 var ActionSubItem = function ActionSubItem(_ref) {
   var name = _ref.name,
@@ -3256,20 +3258,31 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
   });
 };
 
-var Target$6 = function Target(_ref) {
+var Target$7 = function Target(_ref) {
   var name = _ref.name,
     _ref$onClick = _ref.onClick,
     _onClick = _ref$onClick === void 0 ? noop : _ref$onClick;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useField = useField(name),
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var _useField = useField("".concat(name, ".value")),
     _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  var _useActiveField = useActiveField(name),
+  var _useActiveField = useActiveField("".concat(name, ".value")),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
-  var label = field.value || t("neetoRules.form.selectDate");
+  var format = dotPath$1("".concat(name, ".format"), values);
+  var type = dotPath$1("".concat(name, ".type"), values);
+  var timezone = dotPath$1("".concat(name, ".timezone"), values);
+  var defaultLabel = t("neetoRules.form.selectDate");
+  var label = field.value ? getDateTimeFormattedValue({
+    date: field.value,
+    format: format,
+    type: type,
+    timezone: timezone
+  }) : defaultLabel.toLowerCase();
   var isFieldInvalid = meta.touched && meta.error;
   return /*#__PURE__*/jsx(Button, {
     label: label,
@@ -3293,35 +3306,53 @@ var DateField = function DateField(_ref2) {
     required = _ref2$required === void 0 ? false : _ref2$required;
   var _useTranslation2 = useTranslation(),
     t = _useTranslation2.t;
-  var _useField3 = useField(name),
+  var _useFormikContext2 = useFormikContext(),
+    values = _useFormikContext2.values,
+    setFieldValue = _useFormikContext2.setFieldValue;
+  var _useField3 = useField("".concat(name, ".value")),
     _useField4 = _slicedToArray(_useField3, 3),
     field = _useField4[0],
     meta = _useField4[1],
     _useField4$ = _useField4[2],
     setValue = _useField4$.setValue,
     setTouched = _useField4$.setTouched;
-  var _useActiveField2 = useActiveField(name, {
+  var _useActiveField2 = useActiveField("".concat(name, ".value"), {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
+  var format = dotPath$1("".concat(name, ".format"), values);
+  var type = dotPath$1("".concat(name, ".type"), values);
+  var timezone = dotPath$1("".concat(name, ".timezone"), values);
+  var value = getDateTimeValue({
+    date: field.value,
+    format: format,
+    type: type,
+    timezone: timezone
+  });
   var handleOnChange = function handleOnChange(date) {
-    var format = selectedField.showTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+    var _globalProps$user;
+    var type = selectedField.showTime ? DATE_TIME_TYPES.datetime : DATE_TIME_TYPES.date;
+    var format = selectedField.showTime ? DATE_TIME_FORMAT : DATE_FORMAT;
 
     // This is the format being stored in database as of now, standard doesn't include this format
     // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
     setValue(date ? dayjs(date).format(format) : "");
+    setFieldValue("".concat(name, ".type"), type);
+    setFieldValue("".concat(name, ".format"), format);
+    setFieldValue("".concat(name, ".timezone"), globalProps === null || globalProps === void 0 || (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.timeZone);
   };
   return /*#__PURE__*/jsx(DatePicker, {
     ref: ref,
     required: required,
-    defaultValue: field.value,
+    defaultValue: value,
     error: meta.touched && meta.error,
     label: t("neetoRules.form.selectDate"),
     name: "".concat(name, ".value"),
     showTime: selectedField.showTime,
+    timeFormat: "HH:mm",
     type: "date",
-    value: field.value || "",
+    value: value || "",
     onBlur: function onBlur() {
       return setTouched(true);
     },
@@ -3329,9 +3360,9 @@ var DateField = function DateField(_ref2) {
     onFocus: setFieldActive
   });
 };
-DateField.Target = Target$6;
+DateField.Target = Target$7;
 
-var Target$5 = function Target(_ref) {
+var Target$6 = function Target(_ref) {
   var _field$value;
   var name = _ref.name,
     _ref$onClick = _ref.onClick,
@@ -3391,12 +3422,12 @@ var InputField$1 = function InputField(_ref2) {
     }
   });
 };
-InputField$1.Target = Target$5;
+InputField$1.Target = Target$6;
 
 var _excluded$9 = ["name", "dropdownOptions", "shouldAutoFocus", "required"];
 function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Target$4 = function Target(_ref) {
+var Target$5 = function Target(_ref) {
   var name = _ref.name,
     dropdownOptions = _ref.dropdownOptions,
     _ref$onClick = _ref.onClick,
@@ -3499,12 +3530,12 @@ var MultiSelect = function MultiSelect(_ref2) {
     }, otherProps))
   });
 };
-MultiSelect.Target = Target$4;
+MultiSelect.Target = Target$5;
 
 var _excluded$8 = ["name", "dropdownOptions", "shouldAutoFocus", "required"];
 function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Target$3 = function Target(_ref) {
+var Target$4 = function Target(_ref) {
   var name = _ref.name,
     dropdownOptions = _ref.dropdownOptions,
     _ref$onClick = _ref.onClick,
@@ -3621,7 +3652,7 @@ var MultiSelectCheckbox = function MultiSelectCheckbox(_ref2) {
     })]
   });
 };
-MultiSelectCheckbox.Target = Target$3;
+MultiSelectCheckbox.Target = Target$4;
 
 var getFieldDetails = function getFieldDetails(fieldValue) {
   var conditionOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -3656,7 +3687,7 @@ var getLogicalOperatorOptions = function getLogicalOperatorOptions(isWithEvents)
   }];
 };
 
-var Target$2 = function Target(_ref) {
+var Target$3 = function Target(_ref) {
   var name = _ref.name,
     _ref$onClick = _ref.onClick,
     _onClick = _ref$onClick === void 0 ? noop : _ref$onClick;
@@ -3752,13 +3783,13 @@ var MultiSelectCreate = function MultiSelectCreate(_ref2) {
     onFocus: setFieldActive
   });
 };
-MultiSelectCreate.Target = Target$2;
+MultiSelectCreate.Target = Target$3;
 
 var _excluded$7 = ["name", "options", "placeholder", "onClick"],
   _excluded2 = ["name", "options", "handleOnChange", "shouldAutoFocus", "showLabel", "required"];
 function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Target$1 = function Target(_ref) {
+var Target$2 = function Target(_ref) {
   var _selectedOption$label;
   var name = _ref.name,
     options = _ref.options,
@@ -3855,9 +3886,9 @@ var RadioField$1 = function RadioField(_ref2) {
     })
   }));
 };
-RadioField$1.Target = Target$1;
+RadioField$1.Target = Target$2;
 
-var Target = function Target(_ref) {
+var Target$1 = function Target(_ref) {
   var _selectedOption$label;
   var name = _ref.name,
     dropdownOptions = _ref.dropdownOptions,
@@ -3946,7 +3977,105 @@ var SelectField$1 = function SelectField(_ref2) {
     onFocus: setFieldActive
   });
 };
-SelectField$1.Target = Target;
+SelectField$1.Target = Target$1;
+
+var Target = function Target(_ref) {
+  var name = _ref.name,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? noop : _ref$onClick;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var _useField = useField("".concat(name, ".value")),
+    _useField2 = _slicedToArray(_useField, 2),
+    field = _useField2[0],
+    meta = _useField2[1];
+  var _useActiveField = useActiveField("".concat(name, ".value")),
+    isFieldActive = _useActiveField.isFieldActive,
+    setFieldActive = _useActiveField.setFieldActive;
+  var format = dotPath$1("".concat(name, ".format"), values);
+  var type = dotPath$1("".concat(name, ".type"), values);
+  var timezone = dotPath$1("".concat(name, ".timezone"), values);
+  var defaultLabel = t("neetoRules.form.selectTime");
+  var label = field.value ? getDateTimeFormattedValue({
+    date: field.value,
+    format: format,
+    type: type,
+    timezone: timezone
+  }) : defaultLabel.toLowerCase();
+  var isFieldInvalid = meta.touched && meta.error;
+  return /*#__PURE__*/jsx(Button, {
+    label: label,
+    style: "link",
+    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+      "neeto-ui-text-accent-800": isFieldActive,
+      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    }),
+    onClick: function onClick() {
+      _onClick();
+      setFieldActive();
+    }
+  });
+};
+var TimeField = function TimeField(_ref2) {
+  var name = _ref2.name,
+    _ref2$shouldAutoFocus = _ref2.shouldAutoFocus,
+    shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required;
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
+  var _useFormikContext2 = useFormikContext(),
+    values = _useFormikContext2.values,
+    setFieldValue = _useFormikContext2.setFieldValue;
+  var _useField3 = useField("".concat(name, ".value")),
+    _useField4 = _slicedToArray(_useField3, 3),
+    field = _useField4[0],
+    meta = _useField4[1],
+    _useField4$ = _useField4[2],
+    setValue = _useField4$.setValue,
+    setTouched = _useField4$.setTouched;
+  var _useActiveField2 = useActiveField("".concat(name, ".value"), {
+      shouldAutoFocus: shouldAutoFocus
+    }),
+    ref = _useActiveField2.ref,
+    setFieldActive = _useActiveField2.setFieldActive;
+  var format = dotPath$1("".concat(name, ".format"), values);
+  var type = dotPath$1("".concat(name, ".type"), values);
+  var timezone = dotPath$1("".concat(name, ".timezone"), values);
+  var value = getDateTimeValue({
+    date: field.value,
+    format: format,
+    type: type,
+    timezone: timezone
+  });
+  var handleOnChange = function handleOnChange(time) {
+    var _globalProps$user;
+    // This is the format being stored in database as of now, standard doesn't include this format
+    // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+    setValue(time ? dayjs(time).format(TIME_FORMAT) : "");
+    setFieldValue("".concat(name, ".type"), DATE_TIME_TYPES.time);
+    setFieldValue("".concat(name, ".format"), TIME_FORMAT);
+    setFieldValue("".concat(name, ".timezone"), globalProps === null || globalProps === void 0 || (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.timeZone);
+  };
+  return /*#__PURE__*/jsx(TimePicker, {
+    ref: ref,
+    required: required,
+    defaultValue: value,
+    error: meta.touched && meta.error,
+    format: "HH:mm",
+    label: t("neetoRules.form.selectTime"),
+    name: "".concat(name, ".value"),
+    value: value || "",
+    onBlur: function onBlur() {
+      return setTouched(true);
+    },
+    onChange: handleOnChange,
+    onFocus: setFieldActive
+  });
+};
+TimeField.Target = Target;
 
 var FieldPanel = function FieldPanel() {
   var _findBy;
@@ -4122,14 +4251,23 @@ var ValueField = function ValueField(_ref) {
   }
   if (fieldType === CONDITION_VALUE_TYPES.date) {
     return isTarget ? /*#__PURE__*/jsx(DateField.Target, {
-      onClick: onClick,
-      name: "".concat(name, ".value")
+      name: name,
+      onClick: onClick
     }) : /*#__PURE__*/jsx(DateField, {
+      name: name,
       required: true,
-      name: "".concat(name, ".value"),
       selectedField: field
     });
   }
+  if (fieldType === CONDITION_VALUE_TYPES.time) {
+    return isTarget ? /*#__PURE__*/jsx(TimeField.Target, {
+      name: name,
+      onClick: onClick
+    }) : /*#__PURE__*/jsx(TimeField, {
+      name: name,
+      required: true
+    });
+  }
   return null;
 };