@bigbinary/neeto-rules-frontend 2.7.6 → 2.7.8

package/dist/NeetoRulesForm.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import './keyboardShortcuts-BvIE6AHg.js';
+import './keyboardShortcuts-DcvmDX_K.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useShallow } from 'zustand/shallow';
@@ -15,7 +15,7 @@ import { u as useUtilityStore } from './useUtilityStore-CCUYS1mS.js';
 import classNames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
 import { isNotNil, isEmpty, pluck } from 'ramda';
-import { g as getActionOptions, a as getFieldDetails, b as getSlackChannelErrors, c as getOptionsKey, d as getActionLabel, A as ActionSubItem, F as FIELDS_WITH_OPTIONS, P as PANEL_TYPES, D as DEFAULT_RULE_ACTION, e as getLogicalOperatorOptions, f as getFieldDetails$1, h as getVerbOptions, R as RadioField$1, S as SelectField$1, V as ValueField, i as DEFAULT_DELAY, j as getAllEvents, O as OPERATORS$1, k as STATUS_KEYS, l as formatData, u as usePollRuleName, T as TouchErrors, m as buildPayload, n as ScrollToErrorField, o as Panel, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE } from './index-qw90tLi9.js';
+import { g as getActionOptions, a as getFieldDetails, b as getSlackChannelErrors, c as getOptionsKey, d as getActionLabel, A as ActionSubItem, F as FIELDS_WITH_OPTIONS, P as PANEL_TYPES, D as DEFAULT_RULE_ACTION, e as getLogicalOperatorOptions, f as getFieldDetails$1, h as getVerbOptions, R as RadioField$1, S as SelectField$1, V as ValueField, i as DEFAULT_DELAY, j as getAllEvents, O as OPERATORS$1, k as STATUS_KEYS, l as formatData, u as usePollRuleName, T as TouchErrors, m as buildPayload, n as ScrollToErrorField, o as Panel, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE } from './index-C9u2JDEa.js';
 import { a as useActiveField, u as useCustomDataStore } from './useCustomDataStore-BtKYtLVc.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';

package/dist/cjs/NeetoRulesBuilder.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var keyboardShortcuts = require('../keyboardShortcuts-NxcrOxzv.js');
+var keyboardShortcuts = require('../keyboardShortcuts-Dg7lUOmj.js');
 var shallow = require('zustand/shallow');
 var react = require('react');
 var classNames = require('classnames');
@@ -13,7 +13,7 @@ var Header = require('@bigbinary/neeto-molecules/Header');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var reactI18next = require('react-i18next');
-var index = require('../index-Df_k2p4V.js');
+var index = require('../index-Co-qUEtS.js');
 var useCustomDataStore = require('../useCustomDataStore-DxFx8aCf.js');
 var useUtilityStore = require('../useUtilityStore-C_U20IMX.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -25,6 +25,7 @@ var Delete = require('@bigbinary/neeto-icons/Delete');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
 var i18next = require('i18next');
+var yup = require('yup');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var Search = require('@bigbinary/neeto-icons/Search');
@@ -48,7 +49,6 @@ require('../useAutomationRulesApi-C1T2E1AN.js');
 require('@tanstack/react-query');
 require('axios');
 require('../index-DFwPrb81.js');
-require('yup');
 require('@bigbinary/neetoui/formik/Radio');
 require('@bigbinary/neetoui/managers');
 require('@bigbinary/neeto-icons/Close');
@@ -77,6 +77,25 @@ require('@bigbinary/neetoui/TimePicker');
 require('@bigbinary/neeto-editor/utils');
 require('zustand');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+
 var _TOKEN_TO_PANEL_TYPE;
 var PARAM_KIND = {
   ENUM_SINGLE: "enum-single",
@@ -104,6 +123,22 @@ var TIME_UNITS = [{
 /* eslint-enable @bigbinary/neeto/neetocommons-tips */
 
 var LEAD_TIME_UNITS = TIME_UNITS;
+
+// Mirrors the classic form's three-digit input cap; 999 days equals the
+// backend's maximum lead time.
+var MAX_LEAD_TIME_VALUE = 999;
+var STEPPER_DELTA = {
+  INCREMENT: 1,
+  DECREMENT: -1
+};
+var STEPPER_MIN_VALUE = 1;
+var DEFAULT_DELAY_VALUE = 10;
+
+// Matches the token flash animation duration in sentence-builder.css.
+var FLASH_DURATION_MS = 2200;
+
+// Keeps an element out of the keyboard tab order (HTML tabindex sentinel).
+var SKIP_TAB_INDEX = -1;
 var CONDITION_VERBS = {
   IS: "is",
   IS_NOT: "is_not",
@@ -565,6 +600,25 @@ var partsToMinutes = function partsToMinutes(_ref19) {
     (Number(value) || 0) * (UNIT_MINUTES[unit] || 1)
   );
 };
+var leadTimeExceedsMax = function leadTimeExceedsMax(minutes) {
+  return minutesToParts(minutes).value > MAX_LEAD_TIME_VALUE;
+};
+var leadTimeValidationSchema = function leadTimeValidationSchema(schema) {
+  var _schema$triggers2;
+  var fieldKey = schema === null || schema === void 0 || (_schema$triggers2 = schema.triggers) === null || _schema$triggers2 === void 0 || (_schema$triggers2 = _schema$triggers2.leadTime) === null || _schema$triggers2 === void 0 ? void 0 : _schema$triggers2.fieldKey;
+  if (!fieldKey) return yup__namespace.object();
+  return yup__namespace.object().shape(_defineProperty({}, fieldKey, yup__namespace.object().shape({
+    // yup 0.32 can only concat schemas of the same type, and the host's
+    // generic field schema for the lead time key is a string schema.
+    value: yup__namespace.string().test("max-lead-time", function () {
+      return i18next.t("neetoRules.validations.maxLeadTime", {
+        max: MAX_LEAD_TIME_VALUE
+      });
+    }, function (minutes) {
+      return !leadTimeExceedsMax(minutes);
+    })
+  })));
+};
 var leadTimeLabel = function leadTimeLabel(minutes) {
   var _minutesToParts = minutesToParts(minutes),
     value = _minutesToParts.value,
@@ -605,15 +659,15 @@ var asArray = function asArray(maybeArray) {
   return Array.isArray(maybeArray) ? maybeArray : [];
 };
 var fieldKeysFromSchema = function fieldKeysFromSchema() {
-  var _schema$triggers2, _schema$actor2, _schema$conditions3, _schema$actions3, _schema$delay, _schema$triggers3, _schema$scope2;
+  var _schema$triggers3, _schema$actor2, _schema$conditions3, _schema$actions3, _schema$delay, _schema$triggers4, _schema$scope2;
   var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
-    triggers: ((_schema$triggers2 = schema.triggers) === null || _schema$triggers2 === void 0 ? void 0 : _schema$triggers2.fieldKey) || "events",
+    triggers: ((_schema$triggers3 = schema.triggers) === null || _schema$triggers3 === void 0 ? void 0 : _schema$triggers3.fieldKey) || "events",
     performer: ((_schema$actor2 = schema.actor) === null || _schema$actor2 === void 0 ? void 0 : _schema$actor2.fieldKey) || "performer",
     conditions: ((_schema$conditions3 = schema.conditions) === null || _schema$conditions3 === void 0 ? void 0 : _schema$conditions3.fieldKey) || "conditions",
     actions: ((_schema$actions3 = schema.actions) === null || _schema$actions3 === void 0 ? void 0 : _schema$actions3.fieldKey) || "actions",
     delay: ((_schema$delay = schema.delay) === null || _schema$delay === void 0 ? void 0 : _schema$delay.fieldKey) || "execution_delay",
-    leadTime: (_schema$triggers3 = schema.triggers) === null || _schema$triggers3 === void 0 || (_schema$triggers3 = _schema$triggers3.leadTime) === null || _schema$triggers3 === void 0 ? void 0 : _schema$triggers3.fieldKey,
+    leadTime: (_schema$triggers4 = schema.triggers) === null || _schema$triggers4 === void 0 || (_schema$triggers4 = _schema$triggers4.leadTime) === null || _schema$triggers4 === void 0 ? void 0 : _schema$triggers4.fieldKey,
     scope: ((_schema$scope2 = schema.scope) === null || _schema$scope2 === void 0 ? void 0 : _schema$scope2.fieldKey) || "meetingIds",
     status: "status",
     name: "name"
@@ -1639,6 +1693,10 @@ var WhenBlock = function WhenBlock(_ref) {
               type: BUILDER_ANCHORS.TRIGGER_LEAD_TIME,
               index: index
             }),
+            invalid: isInvalid({
+              type: BUILDER_ANCHORS.TRIGGER_LEAD_TIME,
+              index: index
+            }),
             onClick: handleToken && function () {
               return handleToken({
                 type: BUILDER_ANCHORS.TRIGGER_LEAD_TIME,
@@ -2684,7 +2742,7 @@ var applyPreview = function applyPreview(_ref19) {
 function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Canvas = function Canvas(_ref) {
-  var _schema$scope, _schema$scope2, _schema$conditions, _schema$triggers, _schema$delay, _schema$meta$showName, _schema$meta;
+  var _schema$scope, _schema$conditions, _schema$triggers, _schema$delay, _schema$meta$showName, _schema$meta;
   var schema = _ref.schema;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -2750,7 +2808,7 @@ var Canvas = function Canvas(_ref) {
     setFlashing(true);
     var timer = setTimeout(function () {
       return setFlashing(false);
-    }, 2200);
+    }, FLASH_DURATION_MS);
     return function () {
       return clearTimeout(timer);
     };
@@ -2804,6 +2862,10 @@ var Canvas = function Canvas(_ref) {
             prefix: "".concat(actorKey, ".value")
           });
         }
+      case BUILDER_ANCHORS.TRIGGER_LEAD_TIME:
+        return hasErrorAt({
+          prefix: "".concat(fieldKeys.leadTime, ".value")
+        });
       case BUILDER_ANCHORS.COND_FIELD:
         return hasErrorAt({
           prefix: "".concat(fieldKeys.conditions, ".value.").concat(index, ".field")
@@ -2898,8 +2960,6 @@ var Canvas = function Canvas(_ref) {
     return (action === null || action === void 0 ? void 0 : action.channel) || (action === null || action === void 0 ? void 0 : action.name);
   });
   var isScopeEnabled = (schema === null || schema === void 0 || (_schema$scope = schema.scope) === null || _schema$scope === void 0 ? void 0 : _schema$scope.enabled) && isTriggerSet && hasAction;
-  var isScopeComplete = !(schema !== null && schema !== void 0 && (_schema$scope2 = schema.scope) !== null && _schema$scope2 !== void 0 && _schema$scope2.enabled) || neetoCist.isNotEmpty(rule.scope || []);
-  var isComplete = isRuleComplete(rule) && isScopeComplete;
   var handleRemoveScope = function handleRemoveScope(index) {
     closePaneIfTargeting({
       anchors: [BUILDER_ANCHORS.SCOPE_PHONE_FIELD],
@@ -3031,24 +3091,22 @@ var Canvas = function Canvas(_ref) {
           onRemoveScope: handleRemoveScope,
           onToken: openPane
         })]
-      }), isComplete && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Connector, {
-          active: true
-        }), /*#__PURE__*/jsxRuntime.jsx(MetaBlock, {
-          rule: rule,
-          isInvalid: isInvalid({
+      }), /*#__PURE__*/jsxRuntime.jsx(Connector, {
+        active: true
+      }), /*#__PURE__*/jsxRuntime.jsx(MetaBlock, {
+        rule: rule,
+        isInvalid: isInvalid({
+          type: BUILDER_ANCHORS.META_NAME
+        }),
+        showName: (_schema$meta$showName = schema === null || schema === void 0 || (_schema$meta = schema.meta) === null || _schema$meta === void 0 ? void 0 : _schema$meta.showName) !== null && _schema$meta$showName !== void 0 ? _schema$meta$showName : true,
+        onEditName: function onEditName() {
+          return openPane({
             type: BUILDER_ANCHORS.META_NAME
-          }),
-          showName: (_schema$meta$showName = schema === null || schema === void 0 || (_schema$meta = schema.meta) === null || _schema$meta === void 0 ? void 0 : _schema$meta.showName) !== null && _schema$meta$showName !== void 0 ? _schema$meta$showName : true,
-          onEditName: function onEditName() {
-            return openPane({
-              type: BUILDER_ANCHORS.META_NAME
-            });
-          },
-          onToggleActive: function onToggleActive(event) {
-            return setActive(event.target.checked);
-          }
-        })]
+          });
+        },
+        onToggleActive: function onToggleActive(event) {
+          return setActive(event.target.checked);
+        }
       })]
     })
   });
@@ -3508,19 +3566,14 @@ var ConfigPane = function ConfigPane(_ref) {
             message: disabledReason,
             selectedField: flatOption
           })
-        }), isSms ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(index.SmsFields, {
-            action: action,
-            index: index$1,
-            name: name,
-            shouldAutoFocus: true,
-            selectedField: flatOption,
-            showPhoneNumberInput: false
-          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-            className: "neeto-ui-text-gray-500 mt-2",
-            style: "body3",
-            children: t("neetoRules.builder.config.smsSegmentHint")
-          })]
+        }), isSms ? /*#__PURE__*/jsxRuntime.jsx(index.SmsFields, {
+          action: action,
+          index: index$1,
+          name: name,
+          shouldAutoFocus: true,
+          hint: t("neetoRules.builder.config.smsSegmentHint"),
+          selectedField: flatOption,
+          showPhoneNumberInput: false
         }) : (_hostRenderConfig = hostRenderConfig === null || hostRenderConfig === void 0 ? void 0 : hostRenderConfig({
           name: name,
           action: action,
@@ -3551,7 +3604,9 @@ var DelayPane = function DelayPane(_ref) {
   var _useRuleModel = useRuleModel(schema),
     fieldKeys = _useRuleModel.fieldKeys;
   var _useFormikContext = formik.useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    setFieldTouched = _useFormikContext.setFieldTouched,
+    getFieldMeta = _useFormikContext.getFieldMeta;
   var bodyRef = react.useRef(null);
   var name = fieldKeys.delay;
   var _useField = formik.useField("".concat(name, ".value")),
@@ -3560,12 +3615,18 @@ var DelayPane = function DelayPane(_ref) {
   var units = normalizeOptions((_schema$delay = schema.delay) === null || _schema$delay === void 0 ? void 0 : _schema$delay.units);
   var unitOptions = neetoCist.isNotEmpty(units) ? units : DEFAULT_DELAY_UNITS;
   usePaneValidation("".concat(name, ".value"));
+  react.useEffect(function () {
+    if ((value === null || value === void 0 ? void 0 : value.value) === undefined) return;
+    if (getFieldMeta("".concat(name, ".value.value")).touched) return;
+    setFieldTouched("".concat(name, ".value.value"), true, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value === null || value === void 0 ? void 0 : value.value]);
   react.useEffect(function () {
     if (ramda.isEmpty(value || {})) {
       var _unitOptions$0$value, _unitOptions$;
       setFieldValue("".concat(name, ".value"), {
-        value: 10,
-        unit: (_unitOptions$0$value = (_unitOptions$ = unitOptions[0]) === null || _unitOptions$ === void 0 ? void 0 : _unitOptions$.value) !== null && _unitOptions$0$value !== void 0 ? _unitOptions$0$value : "minutes"
+        value: DEFAULT_DELAY_VALUE,
+        unit: (_unitOptions$0$value = (_unitOptions$ = unitOptions[0]) === null || _unitOptions$ === void 0 ? void 0 : _unitOptions$.value) !== null && _unitOptions$0$value !== void 0 ? _unitOptions$0$value : DEFAULT_DELAY_UNITS[0].value
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3604,8 +3665,8 @@ var DelayPane = function DelayPane(_ref) {
           className: "flex items-start gap-x-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(Input$1, {
             className: "w-44",
-            max: 999,
-            min: 1,
+            max: index.MAX_DELAY_VALUE,
+            min: index.MIN_DELAY_VALUE,
             name: "".concat(name, ".value.value"),
             placeholder: t("neetoRules.placeholders.enterDelay"),
             size: "large",
@@ -3649,9 +3710,10 @@ var NumberStepper = function NumberStepper(_ref) {
     onChange = _ref.onChange,
     label = _ref.label,
     _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 1 : _ref$min,
+    min = _ref$min === void 0 ? STEPPER_MIN_VALUE : _ref$min,
     max = _ref.max,
-    required = _ref.required;
+    required = _ref.required,
+    error = _ref.error;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = react.useState(null),
@@ -3676,15 +3738,38 @@ var NumberStepper = function NumberStepper(_ref) {
       max: max
     }));
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "mb-stepper",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+      error: error,
       label: label,
       min: min,
       required: required,
       autoFocus: true,
       type: "number",
       value: display,
+      suffix: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mb-stepper-controls",
+        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+          "aria-label": t("neetoRules.builder.aria.increase"),
+          className: "mb-stepper-btn",
+          tabIndex: SKIP_TAB_INDEX,
+          type: "button",
+          onClick: function onClick() {
+            return step(STEPPER_DELTA.INCREMENT);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Up, {})
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          "aria-label": t("neetoRules.builder.aria.decrease"),
+          className: "mb-stepper-btn",
+          tabIndex: SKIP_TAB_INDEX,
+          type: "button",
+          onClick: function onClick() {
+            return step(STEPPER_DELTA.DECREMENT);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Down, {})
+        })]
+      }),
       onBlur: function onBlur() {
         return setDraft(null);
       },
@@ -3694,28 +3779,7 @@ var NumberStepper = function NumberStepper(_ref) {
       onFocus: function onFocus(event) {
         return event.target.select();
       }
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "mb-stepper-controls",
-      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-        "aria-label": t("neetoRules.builder.aria.increase"),
-        className: "mb-stepper-btn",
-        tabIndex: -1,
-        type: "button",
-        onClick: function onClick() {
-          return step(1);
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(Up, {})
-      }), /*#__PURE__*/jsxRuntime.jsx("button", {
-        "aria-label": t("neetoRules.builder.aria.decrease"),
-        className: "mb-stepper-btn",
-        tabIndex: -1,
-        type: "button",
-        onClick: function onClick() {
-          return step(-1);
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(Down, {})
-      })]
-    })]
+    })
   });
 };
 
@@ -3724,7 +3788,9 @@ var LeadTimePane = function LeadTimePane(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    setFieldTouched = _useFormikContext.setFieldTouched,
+    getFieldMeta = _useFormikContext.getFieldMeta;
   var _useRuleModel = useRuleModel(schema),
     rule = _useRuleModel.rule,
     fieldKeys = _useRuleModel.fieldKeys;
@@ -3732,6 +3798,11 @@ var LeadTimePane = function LeadTimePane(_ref) {
     amount = _minutesToParts.value,
     unit = _minutesToParts.unit;
   var path = "".concat(fieldKeys.leadTime, ".value");
+  var _useField = formik.useField(path),
+    _useField2 = _slicedToArray(_useField, 2),
+    _useField2$ = _useField2[1],
+    error = _useField2$.error,
+    touched = _useField2$.touched;
   var update = function update(_ref2) {
     var value = _ref2.value,
       nextUnit = _ref2.unit;
@@ -3740,6 +3811,13 @@ var LeadTimePane = function LeadTimePane(_ref) {
       unit: nextUnit
     }));
   };
+  usePaneValidation(path);
+  react.useEffect(function () {
+    if (rule.leadTime === undefined) return;
+    if (getFieldMeta(path).touched) return;
+    setFieldTouched(path, true, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rule.leadTime]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(index.Panel.Header, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -3755,34 +3833,42 @@ var LeadTimePane = function LeadTimePane(_ref) {
       })
     }), /*#__PURE__*/jsxRuntime.jsx(index.Panel.Body, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-end gap-x-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex-1",
-          children: /*#__PURE__*/jsxRuntime.jsx(NumberStepper, {
-            label: t("neetoRules.builder.before"),
-            value: amount,
-            onChange: function onChange(value) {
-              return update({
-                value: value === "" ? 0 : value,
-                unit: unit
-              });
-            }
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "w-32 shrink-0",
-          children: /*#__PURE__*/jsxRuntime.jsx(Select$1, {
-            isSearchable: false,
-            options: LEAD_TIME_UNITS,
-            value: neetoCist.findBy({
-              value: unit
-            }, LEAD_TIME_UNITS) || null,
-            onChange: function onChange(option) {
-              return update({
-                value: amount,
-                unit: option === null || option === void 0 ? void 0 : option.value
-              });
-            }
-          })
+        className: "flex flex-col gap-y-1.5",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "neeto-ui-text-gray-800",
+          style: "body2",
+          weight: "medium",
+          children: t("neetoRules.builder.before")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-start gap-x-3",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1",
+            children: /*#__PURE__*/jsxRuntime.jsx(NumberStepper, {
+              error: touched ? error : "",
+              value: amount,
+              onChange: function onChange(value) {
+                return update({
+                  value: value === "" ? 0 : value,
+                  unit: unit
+                });
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w-32 shrink-0",
+            children: /*#__PURE__*/jsxRuntime.jsx(Select$1, {
+              isSearchable: false,
+              options: LEAD_TIME_UNITS,
+              value: neetoCist.findBy({
+                value: unit
+              }, LEAD_TIME_UNITS) || null,
+              onChange: function onChange(option) {
+                return update({
+                  value: amount,
+                  unit: option === null || option === void 0 ? void 0 : option.value
+                });
+              }
+            })
+          })]
         })]
       })
     })]
@@ -4577,7 +4663,7 @@ var Form = function Form(_ref) {
       data: data,
       customData: customData,
       isNameGenerationDisabled: isNameRequired
-    }),
+    }).concat(leadTimeValidationSchema(schema)),
     onSubmit: submitForm,
     children: function children() {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {