@bigbinary/neeto-rules-frontend 2.5.24 → 2.5.25

package/dist/cjs/NeetoRulesForm.js

@@ -13,7 +13,7 @@ var Delete = require('@bigbinary/neeto-icons/Delete');
 var Refresh = require('@bigbinary/neeto-icons/Refresh');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
-var useUtilityStore = require('../useUtilityStore-DhJI92iM.js');
+var useUtilityStore = require('../useUtilityStore-0xgAU9fw.js');
 var classNames = require('classnames');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
@@ -49,8 +49,10 @@ var _toArray = require('@babel/runtime/helpers/toArray');
 var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var Tag = require('@bigbinary/neetoui/Tag');
 var reactSelect = require('react-select');
-var constants = require('../constants-BkPVd-Gz.js');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
+var constants = require('../constants-CCwwHsAM.js');
 var Radio$1 = require('@bigbinary/neetoui/Radio');
+var TimePicker = require('@bigbinary/neetoui/TimePicker');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var utils$1 = require('@bigbinary/neeto-editor/utils');
@@ -542,7 +544,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,
@@ -606,7 +608,7 @@ var LongTextField = function LongTextField(_ref2) {
     onFocus: setFieldActive
   });
 };
-LongTextField.Target = Target$j;
+LongTextField.Target = Target$k;
 
 var CUSTOM_HEADERS_INITIAL_VALUE = {
   key: "",
@@ -1055,7 +1057,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,
@@ -1178,9 +1180,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,
@@ -1237,9 +1239,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,
@@ -1319,7 +1321,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,
@@ -1396,7 +1398,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,
@@ -1501,11 +1503,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,
@@ -1659,9 +1661,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,
@@ -1726,7 +1728,7 @@ var Input = function Input(_ref2) {
     onFocus: setFieldActive
   });
 };
-Input.Target = Target$d;
+Input.Target = Target$e;
 
 var useOnClickOutside = function useOnClickOutside(ref, handler) {
   react.useEffect(function () {
@@ -1833,7 +1835,7 @@ var InlineInput = /*#__PURE__*/react.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,
@@ -1952,9 +1954,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,
@@ -2081,9 +2083,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,
@@ -2217,9 +2219,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,
@@ -2286,9 +2288,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,
@@ -2408,7 +2410,7 @@ var RadioField$2 = function RadioField(_ref2) {
     onFocus: setFieldActive
   });
 };
-RadioField$2.Target = Target$8;
+RadioField$2.Target = Target$9;
 
 var removeDuplicateErrorMessages = ramda.pipe(ramda.filter(ramda.isNotNil), ramda.uniq, ramda.join(ERROR_MESSAGE_DELIMITER));
 var dasherize = function dasherize(input) {
@@ -2669,7 +2671,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,
@@ -2809,7 +2811,7 @@ var SmsFields = function SmsFields(_ref2) {
     })]
   });
 };
-SmsFields.Target = Target$7;
+SmsFields.Target = Target$8;
 
 var ActionSubItem = function ActionSubItem(_ref) {
   var name = _ref.name,
@@ -3277,20 +3279,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 ? neetoCist.noop : _ref$onClick;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useField = formik.useField(name),
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values;
+  var _useField = formik.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 = useUtilityStore.dotPath("".concat(name, ".format"), values);
+  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
+  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
+  var defaultLabel = t("neetoRules.form.selectDate");
+  var label = field.value ? useUtilityStore.getDateTimeFormattedValue({
+    date: field.value,
+    format: format,
+    type: type,
+    timezone: timezone
+  }) : defaultLabel.toLowerCase();
   var isFieldInvalid = meta.touched && meta.error;
   return /*#__PURE__*/jsxRuntime.jsx(Button, {
     label: label,
@@ -3314,35 +3327,53 @@ var DateField = function DateField(_ref2) {
     required = _ref2$required === void 0 ? false : _ref2$required;
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
-  var _useField3 = formik.useField(name),
+  var _useFormikContext2 = formik.useFormikContext(),
+    values = _useFormikContext2.values,
+    setFieldValue = _useFormikContext2.setFieldValue;
+  var _useField3 = formik.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 = useUtilityStore.dotPath("".concat(name, ".format"), values);
+  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
+  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
+  var value = useUtilityStore.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 ? useUtilityStore.DATE_TIME_TYPES.datetime : useUtilityStore.DATE_TIME_TYPES.date;
+    var format = selectedField.showTime ? useUtilityStore.DATE_TIME_FORMAT : useUtilityStore.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 ? utils.dayjs(date).format(format) : "");
+    setFieldValue("".concat(name, ".type"), type);
+    setFieldValue("".concat(name, ".format"), format);
+    setFieldValue("".concat(name, ".timezone"), initializers.globalProps === null || initializers.globalProps === void 0 || (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.timeZone);
   };
   return /*#__PURE__*/jsxRuntime.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);
     },
@@ -3350,9 +3381,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,
@@ -3412,12 +3443,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,
@@ -3520,12 +3551,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,
@@ -3642,7 +3673,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] : [];
@@ -3677,7 +3708,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 ? neetoCist.noop : _ref$onClick;
@@ -3773,13 +3804,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,
@@ -3876,9 +3907,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,
@@ -3967,7 +3998,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 ? neetoCist.noop : _ref$onClick;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values;
+  var _useField = formik.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 = useUtilityStore.dotPath("".concat(name, ".format"), values);
+  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
+  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
+  var defaultLabel = t("neetoRules.form.selectTime");
+  var label = field.value ? useUtilityStore.getDateTimeFormattedValue({
+    date: field.value,
+    format: format,
+    type: type,
+    timezone: timezone
+  }) : defaultLabel.toLowerCase();
+  var isFieldInvalid = meta.touched && meta.error;
+  return /*#__PURE__*/jsxRuntime.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 = reactI18next.useTranslation(),
+    t = _useTranslation2.t;
+  var _useFormikContext2 = formik.useFormikContext(),
+    values = _useFormikContext2.values,
+    setFieldValue = _useFormikContext2.setFieldValue;
+  var _useField3 = formik.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 = useUtilityStore.dotPath("".concat(name, ".format"), values);
+  var type = useUtilityStore.dotPath("".concat(name, ".type"), values);
+  var timezone = useUtilityStore.dotPath("".concat(name, ".timezone"), values);
+  var value = useUtilityStore.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 ? utils.dayjs(time).format(useUtilityStore.TIME_FORMAT) : "");
+    setFieldValue("".concat(name, ".type"), useUtilityStore.DATE_TIME_TYPES.time);
+    setFieldValue("".concat(name, ".format"), useUtilityStore.TIME_FORMAT);
+    setFieldValue("".concat(name, ".timezone"), initializers.globalProps === null || initializers.globalProps === void 0 || (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.timeZone);
+  };
+  return /*#__PURE__*/jsxRuntime.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;
@@ -4143,14 +4272,23 @@ var ValueField = function ValueField(_ref) {
   }
   if (fieldType === constants.CONDITION_VALUE_TYPES.date) {
     return isTarget ? /*#__PURE__*/jsxRuntime.jsx(DateField.Target, {
-      onClick: onClick,
-      name: "".concat(name, ".value")
+      name: name,
+      onClick: onClick
     }) : /*#__PURE__*/jsxRuntime.jsx(DateField, {
+      name: name,
       required: true,
-      name: "".concat(name, ".value"),
       selectedField: field
     });
   }
+  if (fieldType === constants.CONDITION_VALUE_TYPES.time) {
+    return isTarget ? /*#__PURE__*/jsxRuntime.jsx(TimeField.Target, {
+      name: name,
+      onClick: onClick
+    }) : /*#__PURE__*/jsxRuntime.jsx(TimeField, {
+      name: name,
+      required: true
+    });
+  }
   return null;
 };