@bigbinary/neeto-rules-frontend 2.7.19 → 2.7.21

package/dist/cjs/v2/NeetoRulesBuilder.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var keyboardShortcuts = require('../../keyboardShortcuts-SAk712q8.js');
+var keyboardShortcuts = require('../../keyboardShortcuts-DtnjcivY.js');
 var shallow = require('zustand/shallow');
 var react = require('react');
 var neetoAtoms = require('@bigbinary/neeto-atoms');
@@ -13,9 +13,9 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var Container = require('@bigbinary/neeto-molecules/v2/Container');
 var Header = require('@bigbinary/neeto-molecules/v2/Header');
 var reactI18next = require('react-i18next');
-var index = require('../../index-Vt6GY_o0.js');
-var useCustomDataStore = require('../../useCustomDataStore-D9k8F5g-.js');
-var useUtilityStore = require('../../useUtilityStore-DkxAexDw.js');
+var index = require('../../index-Fukq1VSN.js');
+var useCustomDataStore = require('../../useCustomDataStore-DPmWkEhs.js');
+var useUtilityStore = require('../../useUtilityStore-gtPhFvpI.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var Plus = require('@bigbinary/neeto-icons/Plus');
@@ -24,8 +24,9 @@ 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 reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
+var yup = require('yup');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var Search = require('@bigbinary/neeto-icons/Search');
 var utils = require('@bigbinary/neeto-commons-frontend/v2/utils');
 var utils$1 = require('../../utils-B3roKiff.js');
@@ -37,12 +38,11 @@ require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
 require('../../index-DFwPrb81.js');
-require('yup');
 require('lucide-react');
+require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 require('@monaco-editor/react');
 require('@bigbinary/neeto-molecules/v2/DynamicVariables');
 require('@bigbinary/neeto-editor/v2/FormikEditor');
-require('@bigbinary/neeto-hotkeys');
 require('react-select/creatable');
 require('@babel/runtime/helpers/toArray');
 require('@bigbinary/neeto-molecules/v2/PhoneNumber');
@@ -54,6 +54,25 @@ require('zustand');
 require('@bigbinary/neeto-commons-frontend/initializers');
 require('@bigbinary/neeto-commons-frontend/utils');
 
+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",
@@ -81,6 +100,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",
@@ -178,7 +213,11 @@ var CONFIG_FOCUSABLE_SELECTOR = 'input:not([type="radio"]):not([type="checkbox"]
 var SMS_TYPES = ["sms", "smsToNumbers"];
 var RECIPIENT_FOCUSABLE_SELECTOR = 'input, textarea, [contenteditable="true"]';
 var SMS_TO_NUMBERS = "smsToNumbers";
-var SWAP_CHANNEL_ORDER = ["email", "sms", "slack", "webhook", "calendar_invite"];
+var RECIPIENT_STORAGE_FIELDS = {
+  emails: "emails",
+  value: "value",
+  phoneNumbers: "phoneNumbers"
+};
 var DEFAULT_DELAY_UNITS = TIME_UNITS;
 
 var useClearingHover = function useClearingHover() {
@@ -214,6 +253,21 @@ var TOKEN_STATE = {
 };
 var STATE_CLASS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TOKEN_STATE.PLACEHOLDER, "mb-placeholder"), TOKEN_STATE.PLACEHOLDER_NEXT, "mb-placeholder mb-placeholder-next"), TOKEN_STATE.DISABLED, "mb-placeholder mb-placeholder-disabled"), TOKEN_STATE.FILLED, "mb-tok"), TOKEN_STATE.MUTED, "mb-tok mb-tok-muted");
 
+// The flash is a run-once CSS animation, so a repeat submit while it is still
+// applied would not replay it on its own.
+var useReplayFlash = function useReplayFlash(flashSeq) {
+  var ref = react.useRef(null);
+  react.useEffect(function () {
+    var _ref$current, _ref$current$getAnima;
+    if (!flashSeq) return;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current$getAnima = _ref$current.getAnimations) === null || _ref$current$getAnima === void 0 || _ref$current$getAnima.call(_ref$current).forEach(function (animation) {
+      animation.cancel();
+      animation.play();
+    });
+  }, [flashSeq]);
+  return ref;
+};
+
 var _excluded = ["children", "state", "active", "invalid", "onClick", "className", "dataTestid"];
 function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -230,8 +284,10 @@ var Token = function Token(_ref) {
     dataTestid = _ref.dataTestid,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isInteractive = typeof onClick === "function" && state !== TOKEN_STATE.DISABLED;
+  var tokenRef = useReplayFlash(invalid);
   return /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread$c(_objectSpread$c({
     "data-testid": dataTestid,
+    ref: tokenRef,
     role: isInteractive ? "button" : undefined,
     tabIndex: isInteractive ? 0 : undefined,
     className: classNames(
@@ -537,6 +593,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,
@@ -559,6 +634,9 @@ var normalizeSchema = function normalizeSchema() {
 var joinTypeFor = function joinTypeFor(mode) {
   return mode === CONDITION_MODE.OR ? JOIN_TYPE.or : JOIN_TYPE.and;
 };
+var recipientStorageField = function recipientStorageField(field) {
+  return field === RECIPIENT_STORAGE_FIELDS.emails ? RECIPIENT_STORAGE_FIELDS.emails : RECIPIENT_STORAGE_FIELDS.value;
+};
 var modeFromJoinType = function modeFromJoinType(joinType) {
   return joinType === JOIN_TYPE.or ? CONDITION_MODE.OR : CONDITION_MODE.AND;
 };
@@ -574,15 +652,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"
@@ -735,6 +813,35 @@ var removeArrayItem = function removeArrayItem(_ref30) {
   }
   return result;
 };
+var clearArrayItems = function clearArrayItems(_ref31) {
+  var values = _ref31.values,
+    fieldKey = _ref31.fieldKey;
+  var list = asArray(valueAt({
+    values: values,
+    key: fieldKey
+  }));
+  var removed = list.filter(function (item) {
+    return item === null || item === void 0 ? void 0 : item.id;
+  }).map(function (item) {
+    return _objectSpread$b(_objectSpread$b({}, item), {}, {
+      _destroy: true
+    });
+  });
+  var result = [{
+    path: "".concat(fieldKey, ".value"),
+    value: []
+  }];
+  if (removed.length) {
+    var _values$fieldKey2;
+    // eslint-disable-next-line security/detect-object-injection
+    var deleted = asArray(values === null || values === void 0 || (_values$fieldKey2 = values[fieldKey]) === null || _values$fieldKey2 === void 0 ? void 0 : _values$fieldKey2.deleted);
+    result.push({
+      path: "".concat(fieldKey, ".deleted"),
+      value: [].concat(_toConsumableArray(deleted), _toConsumableArray(removed))
+    });
+  }
+  return result;
+};
 
 function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -994,15 +1101,17 @@ var DelayRow = function DelayRow(_ref) {
   });
 };
 
-var MetaBlock = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    rule = _ref.rule,
+var MetaBlock = function MetaBlock(_ref) {
+  var rule = _ref.rule,
     _ref$showName = _ref.showName,
     showName = _ref$showName === void 0 ? true : _ref$showName,
     _ref$isInvalid = _ref.isInvalid,
     isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
     handleEditName = _ref.onEditName,
     handleToggleActive = _ref.onToggleActive;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var nameRef = useReplayFlash(isInvalid);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "mb-meta",
     children: [showName && /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1011,6 +1120,8 @@ var MetaBlock = reactUtils.withT(function (_ref) {
         className: "mb-meta-label",
         children: t("neetoRules.builder.automationName")
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        ref: nameRef,
+        "data-testid": "rule-name-edit",
         role: handleEditName ? "button" : undefined,
         tabIndex: handleEditName ? 0 : undefined,
         className: classNames("mb-meta-input-wrap", {
@@ -1019,6 +1130,7 @@ var MetaBlock = reactUtils.withT(function (_ref) {
         onClick: handleEditName,
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           className: "mb-meta-name-display",
+          "data-testid": "rule-name",
           children: rule.name
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
           "aria-hidden": true,
@@ -1040,8 +1152,10 @@ var MetaBlock = reactUtils.withT(function (_ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("label", {
       className: "mb-meta-active",
+      "data-testid": "rule-active-label",
       children: [/*#__PURE__*/jsxRuntime.jsx("input", {
         checked: rule.active,
+        "data-testid": "rule-active-checkbox",
         readOnly: !handleToggleActive,
         type: "checkbox",
         onChange: handleToggleActive || undefined
@@ -1060,7 +1174,7 @@ var MetaBlock = reactUtils.withT(function (_ref) {
       }), t("neetoRules.builder.activateThisAutomation")]
     })]
   });
-});
+};
 
 function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1299,6 +1413,8 @@ var ActionRow = function ActionRow(_ref) {
   });
   var configLabel = mediumLabel || sentencify(option === null || option === void 0 ? void 0 : option.placeholder);
   var isConfigured = neetoCist.isNotEmpty(action === null || action === void 0 ? void 0 : action.metadata);
+  // A host that shows no value label still needs the token to read as filled.
+  var configState = configValue || isConfigured ? TOKEN_STATE.FILLED : TOKEN_STATE.MUTED;
   var _useClearingHover = useClearingHover(),
     clearing = _useClearingHover.clearing,
     clearingHoverProps = _useClearingHover.clearingHoverProps;
@@ -1337,7 +1453,7 @@ var ActionRow = function ActionRow(_ref) {
           children: verbLabel
         }), hasParamTail ? /*#__PURE__*/jsxRuntime.jsx(Token, {
           dataTestid: "action-config-value-".concat(index),
-          state: configValue ? TOKEN_STATE.FILLED : TOKEN_STATE.MUTED,
+          state: configState,
           active: isActive({
             type: BUILDER_ANCHORS.ACTION_CONFIG,
             index: index
@@ -1385,7 +1501,7 @@ var ActionRow = function ActionRow(_ref) {
             index: index
           }),
           dataTestid: "action-config-value-".concat(index),
-          state: configValue ? TOKEN_STATE.FILLED : TOKEN_STATE.MUTED,
+          state: configState,
           invalid: isInvalid({
             type: BUILDER_ANCHORS.ACTION_CONFIG,
             index: index
@@ -1608,6 +1724,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,
@@ -1818,6 +1938,24 @@ var useRuleModel = function useRuleModel(schema) {
         fieldKey: fieldKeysFromSchema(schema).actions,
         index: index
       }));
+    },
+    clearTriggers: function clearTriggers() {
+      return applyAll(clearArrayItems({
+        values: values,
+        fieldKey: fieldKeysFromSchema(schema).triggers
+      }));
+    },
+    clearConditions: function clearConditions() {
+      return applyAll(clearArrayItems({
+        values: values,
+        fieldKey: fieldKeysFromSchema(schema).conditions
+      }));
+    },
+    clearActions: function clearActions() {
+      return applyAll(clearArrayItems({
+        values: values,
+        fieldKey: fieldKeysFromSchema(schema).actions
+      }));
     }
   };
 };
@@ -1964,9 +2102,9 @@ var nextTriggers = function nextTriggers(_ref10) {
       name: value
     }]);
   }
-  return [{
+  return [_objectSpread$4(_objectSpread$4({}, rule.triggers[0]), {}, {
     name: value
-  }];
+  })];
 };
 var nextConditionAt = function nextConditionAt(_ref11) {
   var _field$allowMatching;
@@ -2213,7 +2351,7 @@ var descriptorFor = function descriptorFor(_ref15) {
     case BUILDER_ANCHORS.ACTION_ADD:
     case BUILDER_ANCHORS.ACTION_CHANNEL:
       {
-        var _schema$actions11, _schema$actions12, _channelOf;
+        var _schema$actions11, _channelOf;
         var isSwap = anchor === BUILDER_ANCHORS.ACTION_CHANNEL;
         var channelMetaFor = function channelMetaFor(value) {
           var _schema$actions10;
@@ -2222,13 +2360,10 @@ var descriptorFor = function descriptorFor(_ref15) {
             ((_schema$actions10 = schema.actions) === null || _schema$actions10 === void 0 || (_schema$actions10 = _schema$actions10.channelMeta) === null || _schema$actions10 === void 0 ? void 0 : _schema$actions10[value]) || {}
           );
         };
-        var rank = function rank(value) {
-          var idx = SWAP_CHANNEL_ORDER.indexOf(value);
-          return idx === -1 ? SWAP_CHANNEL_ORDER.length : idx;
-        };
-        var sourceOptions = isSwap ? _toConsumableArray(((_schema$actions11 = schema.actions) === null || _schema$actions11 === void 0 ? void 0 : _schema$actions11.options) || []).sort(function (optionA, optionB) {
-          return rank(optionValue(optionA)) - rank(optionValue(optionB));
-        }) : ((_schema$actions12 = schema.actions) === null || _schema$actions12 === void 0 ? void 0 : _schema$actions12.options) || [];
+
+        // Both panes list the host's actions in the order it declared them;
+        // re-ranking only the swap pane made the two disagree.
+        var sourceOptions = ((_schema$actions11 = schema.actions) === null || _schema$actions11 === void 0 ? void 0 : _schema$actions11.options) || [];
         return {
           title: isSwap ? i18next.t("neetoRules.builder.panes.actionSwapTitle") : i18next.t("neetoRules.builder.panes.actionAddTitle"),
           subtitle: isSwap ? i18next.t("neetoRules.builder.panes.actionSwapSubtitle") : i18next.t("neetoRules.builder.panes.actionAddSubtitle"),
@@ -2258,7 +2393,7 @@ var descriptorFor = function descriptorFor(_ref15) {
       }
     case BUILDER_ANCHORS.ACTION_RECIPIENT:
       {
-        var _schema$actions13;
+        var _schema$actions12;
         var action = actionAt({
           rule: rule,
           index: index
@@ -2268,7 +2403,7 @@ var descriptorFor = function descriptorFor(_ref15) {
           action: action
         });
         // eslint-disable-next-line security/detect-object-injection
-        var meta = ((_schema$actions13 = schema.actions) === null || _schema$actions13 === void 0 || (_schema$actions13 = _schema$actions13.channelMeta) === null || _schema$actions13 === void 0 ? void 0 : _schema$actions13[channel]) || {};
+        var meta = ((_schema$actions12 = schema.actions) === null || _schema$actions12 === void 0 || (_schema$actions12 = _schema$actions12.channelMeta) === null || _schema$actions12 === void 0 ? void 0 : _schema$actions12[channel]) || {};
         var option = findActionOption({
           schema: schema,
           name: channel
@@ -2384,9 +2519,9 @@ var commitFor = function commitFor(_ref16) {
           }]));
           return "stay";
         }
-        setTriggers([{
+        setTriggers([_objectSpread$4(_objectSpread$4({}, rule.triggers[0]), {}, {
           name: value
-        }]);
+        })]);
         var leadTime = (_schema$triggers5 = schema.triggers) === null || _schema$triggers5 === void 0 ? void 0 : _schema$triggers5.leadTime;
         if (leadTime !== null && leadTime !== void 0 && leadTime.fieldKey && (leadTime.appliesTo || []).includes(value) && !rule.leadTime) {
           var _leadTime$default;
@@ -2653,7 +2788,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;
@@ -2666,15 +2801,16 @@ var Canvas = function Canvas(_ref) {
   var _useRuleModel = useRuleModel(schema),
     rule = _useRuleModel.rule,
     fieldKeys = _useRuleModel.fieldKeys,
-    setTriggers = _useRuleModel.setTriggers,
     setPerformer = _useRuleModel.setPerformer,
     setConditions = _useRuleModel.setConditions,
-    setActions = _useRuleModel.setActions,
     setDelay = _useRuleModel.setDelay,
     removeCondition = _useRuleModel.removeCondition,
     removeAction = _useRuleModel.removeAction,
     setActive = _useRuleModel.setActive,
-    setScope = _useRuleModel.setScope;
+    setScope = _useRuleModel.setScope,
+    clearTriggers = _useRuleModel.clearTriggers,
+    clearConditions = _useRuleModel.clearConditions,
+    clearActions = _useRuleModel.clearActions;
   var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         builderPreview: store["builderPreview"],
@@ -2699,10 +2835,10 @@ var Canvas = function Canvas(_ref) {
   var flatErrors = react.useMemo(function () {
     return keyboardShortcuts.flatten(errors || {});
   }, [errors]);
-  var _useState = react.useState(false),
+  var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    flashing = _useState2[0],
-    setFlashing = _useState2[1];
+    flashSeq = _useState2[0],
+    setFlashSeq = _useState2[1];
   var lastSubmitCount = react.useRef(submitCount);
   react.useEffect(function () {
     if (submitCount <= lastSubmitCount.current) return undefined;
@@ -2716,10 +2852,10 @@ var Canvas = function Canvas(_ref) {
     }))) {
       return undefined;
     }
-    setFlashing(true);
+    setFlashSeq(submitCount);
     var timer = setTimeout(function () {
-      return setFlashing(false);
-    }, 2200);
+      return setFlashSeq(0);
+    }, FLASH_DURATION_MS);
     return function () {
       return clearTimeout(timer);
     };
@@ -2735,11 +2871,10 @@ var Canvas = function Canvas(_ref) {
       });
     });
   };
-  var isInvalid = function isInvalid(_ref4) {
-    var _schema$actions, _schema$actions$actio, _schema$actions2, _schema$actions2$rend, _schema$actions3, _schema$actions3$rend, _schema$actions4, _schema$actions4$opti, _schema$actions5, _schema$actions5$opti;
+  var matchesInvalid = function matchesInvalid(_ref4) {
+    var _schema$actions, _schema$actions$actio, _schema$actions2, _schema$actions2$rend, _schema$actions3, _schema$actions3$rend, _schema$actions4, _schema$actions4$opti, _schema$actions5, _schema$actions5$opti, _schema$actions6, _schema$actions7;
     var type = _ref4.type,
       index = _ref4.index;
-    if (!flashing) return false;
     var conditionMeta = "".concat(fieldKeys.conditions, ".value.").concat(index, ".metadata");
     var actionMeta = "".concat(fieldKeys.actions, ".value.").concat(index, ".metadata");
     // eslint-disable-next-line security/detect-object-injection
@@ -2757,7 +2892,13 @@ var Canvas = function Canvas(_ref) {
       action: actionItem
     }));
     var flatOption = ((_schema$actions4 = schema.actions) === null || _schema$actions4 === void 0 || (_schema$actions4$opti = _schema$actions4.optionForName) === null || _schema$actions4$opti === void 0 ? void 0 : _schema$actions4$opti.call(_schema$actions4, actionItem.name)) || ((_schema$actions5 = schema.actions) === null || _schema$actions5 === void 0 || (_schema$actions5$opti = _schema$actions5.optionForChannel) === null || _schema$actions5$opti === void 0 ? void 0 : _schema$actions5$opti.call(_schema$actions5, channel));
-    var recipientFields = [].concat(_toConsumableArray(hasRecipientEditor || hasRecipientField ? ["emails"] : []), _toConsumableArray((flatOption === null || flatOption === void 0 ? void 0 : flatOption.type) === "smsToNumbers" ? ["phoneNumbers"] : []));
+    var recipientConfig = [].concat(_toConsumableArray((((_schema$actions6 = schema.actions) === null || _schema$actions6 === void 0 ? void 0 : _schema$actions6.options) || []).flatMap(function (option) {
+      return option.recipients || [];
+    })), _toConsumableArray(((_schema$actions7 = schema.actions) === null || _schema$actions7 === void 0 ? void 0 : _schema$actions7.recipients) || [])).find(function (item) {
+      var _item$value;
+      return ((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item.id) === actionItem.recipient;
+    });
+    var recipientFields = [].concat(_toConsumableArray(hasRecipientEditor || hasRecipientField ? [RECIPIENT_STORAGE_FIELDS.emails] : []), _toConsumableArray(recipientConfig !== null && recipientConfig !== void 0 && recipientConfig.field ? [recipientStorageField(recipientConfig.field)] : []), _toConsumableArray((flatOption === null || flatOption === void 0 ? void 0 : flatOption.type) === SMS_TO_NUMBERS ? [RECIPIENT_STORAGE_FIELDS.phoneNumbers] : []));
     switch (type) {
       case BUILDER_ANCHORS.TRIGGER_ACTOR:
         {
@@ -2767,6 +2908,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")
@@ -2787,7 +2932,9 @@ var Canvas = function Canvas(_ref) {
           exclude: recipientFields
         });
       case BUILDER_ANCHORS.ACTION_RECIPIENT:
-        return recipientFields.some(function (field) {
+        return hasErrorAt({
+          prefix: "".concat(fieldKeys.actions, ".value.").concat(index, ".name")
+        }) || recipientFields.some(function (field) {
           return hasErrorAt({
             prefix: "".concat(actionMeta, ".").concat(field)
           });
@@ -2818,6 +2965,12 @@ var Canvas = function Canvas(_ref) {
         return false;
     }
   };
+
+  // Returns the submit generation, not a boolean, so consumers can replay the
+  // flash animation when the same token is still invalid on a repeat submit.
+  var isInvalid = function isInvalid(args) {
+    return flashSeq && matchesInvalid(args) ? flashSeq : 0;
+  };
   var closePaneIfTargeting = function closePaneIfTargeting(_ref5) {
     var anchors = _ref5.anchors,
       index = _ref5.index;
@@ -2859,8 +3012,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],
@@ -2894,12 +3045,12 @@ var Canvas = function Canvas(_ref) {
   };
   var handleClearTrigger = function handleClearTrigger() {
     var _schema$actor2;
-    setTriggers([]);
+    clearTriggers();
     // Hosts without an actor pane can never re-set it, and null fails its validation.
     if ((_schema$actor2 = schema.actor) !== null && _schema$actor2 !== void 0 && _schema$actor2.enabled) setPerformer(null);
-    setConditions([]);
+    clearConditions();
     setDelay(null);
-    setActions([]);
+    clearActions();
     setScope([]);
     closePane();
   };
@@ -2921,7 +3072,7 @@ var Canvas = function Canvas(_ref) {
     );
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-rules-builder",
+    className: "neeto-rules-builder nrb-atoms",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-canvas neeto-rules-main-card",
       children: [/*#__PURE__*/jsxRuntime.jsx(WhenBlock, {
@@ -2963,6 +3114,7 @@ var Canvas = function Canvas(_ref) {
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "mb-add-row",
         children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          "data-testid": "rule-delay-add",
           icon: Plus,
           iconPosition: "left",
           label: t("neetoRules.common.addDelay"),
@@ -2994,24 +3146,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);
+        }
       })]
     })
   });
@@ -3022,6 +3172,7 @@ var ACTION_CONFIG_TYPES = {
   multiSelect: "multiSelect",
   dropdown: "dropdown",
   note: "note",
+  list: "list",
   textarea: "textarea",
   number: "number",
   text: "text",
@@ -3083,6 +3234,7 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
   };
   var noMatches = /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "mb-pane-empty",
+    "data-testid": "pane-no-matches",
     children: t("neetoRules.builder.noMatches")
   });
   if (type === ACTION_CONFIG_TYPES.emailChannel) {
@@ -3091,7 +3243,7 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
     var bodyPath = "".concat(name, ".body");
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-4",
-      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+      children: [!(option !== null && option !== void 0 && option.hideSubject) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
         required: true,
         error: fieldError(subjectPath),
         label: t("neetoRules.builder.config.subject"),
@@ -3124,7 +3276,7 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
       setFieldValue(valuePath, current.includes(value) ? current.filter(neetoCist.isNot(value)) : [].concat(_toConsumableArray(current), [value]));
     };
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-y-1",
+      className: "mb-pane-list flex flex-col",
       children: [filtered.map(function (item) {
         return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Checkbox, {
           checked: current.includes(item.value),
@@ -3166,6 +3318,14 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
       })
     });
   }
+  if (type === ACTION_CONFIG_TYPES.list) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(index.ListField, {
+        name: valuePath
+      }), hintBlock]
+    });
+  }
   if (type === ACTION_CONFIG_TYPES.note) {
     var _action$metadata2;
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -3411,7 +3571,7 @@ var ConfigPane = function ConfigPane(_ref) {
         while (1) switch (_context.n) {
           case 0:
             _context.n = 1;
-            return validate(["emails"]);
+            return validate([RECIPIENT_STORAGE_FIELDS.emails]);
           case 1:
             if (_context.v) {
               _context.n = 2;
@@ -3439,11 +3599,15 @@ var ConfigPane = function ConfigPane(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  useHotkeys(keyboardShortcuts.SHORTCUTS["continue"].sequence, handleContinue, {
+    mode: "global"
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(index.Panel.Header, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: title
         }), configSubtitle && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
@@ -3453,6 +3617,7 @@ var ConfigPane = function ConfigPane(_ref) {
         }), showSearch && /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "mb-pane-search",
           children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+            dataTestid: "pane-search",
             placeholder: t("neetoRules.builder.searchPlaceholder"),
             prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
             size: "large",
@@ -3472,20 +3637,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(neetoAtoms.Typography, {
-            className: "mt-2",
-            color: "muted",
-            variant: "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,
@@ -3498,8 +3657,9 @@ var ConfigPane = function ConfigPane(_ref) {
           option: flatOption
         })]
       })
-    }), shouldAdvanceToRecipient && /*#__PURE__*/jsxRuntime.jsx(index.Panel.Footer, {
+    }), /*#__PURE__*/jsxRuntime.jsx(index.Panel.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "continue-button",
         label: t("neetoRules.buttons.continue"),
         size: "lg",
         onClick: handleContinue
@@ -3516,7 +3676,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")),
@@ -3525,12 +3687,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
@@ -3548,6 +3716,7 @@ var DelayPane = function DelayPane(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.common.addDelay")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
@@ -3568,13 +3737,15 @@ var DelayPane = function DelayPane(_ref) {
           className: "flex items-start gap-x-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(formik$1.Input, {
             className: "w-44",
-            max: 999,
-            min: 1,
+            dataTestid: "delay-value",
+            max: index.MAX_DELAY_VALUE,
+            min: index.MIN_DELAY_VALUE,
             name: "".concat(name, ".value.value"),
             placeholder: t("neetoRules.placeholders.enterDelay"),
             size: "large",
             type: "number"
           }), /*#__PURE__*/jsxRuntime.jsx(formik$1.Select, {
+            dataTestid: "delay-unit",
             defaultValue: value === null || value === void 0 ? void 0 : value.unit,
             name: "".concat(name, ".value.unit"),
             options: unitOptions,
@@ -3608,11 +3779,13 @@ var asText = function asText(value) {
 var NumberStepper = function NumberStepper(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
+    dataTestid = _ref.dataTestid,
     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),
@@ -3637,15 +3810,41 @@ var NumberStepper = function NumberStepper(_ref) {
       max: max
     }));
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "mb-stepper",
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+      dataTestid: dataTestid,
+      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",
+          "data-testid": "stepper-increase",
+          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",
+          "data-testid": "stepper-decrease",
+          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);
       },
@@ -3655,28 +3854,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, {})
-      })]
-    })]
+    })
   });
 };
 
@@ -3685,7 +3863,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;
@@ -3693,6 +3873,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;
@@ -3701,11 +3886,19 @@ 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", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.builder.leadTimeTitle")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
@@ -3716,32 +3909,41 @@ 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(neetoAtoms.Select, {
-            isSearchable: false,
-            options: LEAD_TIME_UNITS,
-            value: unit,
-            onChange: function onChange(nextUnit) {
-              return update({
-                value: amount,
-                unit: nextUnit
-              });
-            }
-          })
+        className: "flex flex-col gap-y-1.5",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          variant: "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, {
+              dataTestid: "lead-time",
+              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(neetoAtoms.Select, {
+              dataTestid: "lead-time-unit",
+              isSearchable: false,
+              options: LEAD_TIME_UNITS,
+              value: unit,
+              onChange: function onChange(nextUnit) {
+                return update({
+                  value: amount,
+                  unit: nextUnit
+                });
+              }
+            })
+          })]
         })]
       })
     })]
@@ -3759,6 +3961,7 @@ var NamePane = function NamePane(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.builder.automationName")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
@@ -3900,6 +4103,11 @@ var OptionsPane = function OptionsPane(_ref) {
       data: target.data
     });else closePane();
   };
+  var canContinue = cascade && selectedValues.some(Boolean);
+  useHotkeys(keyboardShortcuts.SHORTCUTS["continue"].sequence, handleContinue, {
+    enabled: canContinue,
+    mode: "global"
+  });
   var optionLabel = function optionLabel(option) {
     var Icon = option.icon;
     if (!Icon && !option.disabledReason) return option.label;
@@ -3931,12 +4139,13 @@ var OptionsPane = function OptionsPane(_ref) {
     if (ramda.isEmpty(filtered)) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "mb-pane-empty",
+        "data-testid": "pane-no-matches",
         children: t("neetoRules.builder.noMatches")
       });
     }
     if (multi) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex flex-col",
+        className: "mb-pane-list flex flex-col",
         children: groups.map(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
             category = _ref3[0],
@@ -3988,6 +4197,7 @@ var OptionsPane = function OptionsPane(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: title
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
@@ -3998,6 +4208,7 @@ var OptionsPane = function OptionsPane(_ref) {
           className: "mb-pane-search",
           ref: searchRef,
           children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+            dataTestid: "pane-search",
             placeholder: t("neetoRules.builder.searchPlaceholder"),
             prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
             size: "large",
@@ -4012,7 +4223,8 @@ var OptionsPane = function OptionsPane(_ref) {
       children: [renderBody(), belowContent]
     }), cascade && /*#__PURE__*/jsxRuntime.jsx(index.Panel.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-        disabled: !selectedValues.some(Boolean),
+        "data-testid": "continue-button",
+        disabled: !canContinue,
         label: t("neetoRules.buttons.continue"),
         size: "lg",
         onClick: handleContinue
@@ -4037,8 +4249,8 @@ var RecipientField = function RecipientField(_ref) {
   var fieldError = function fieldError(path) {
     return formik.getIn(touched, path) && formik.getIn(errors, path);
   };
-  if (field === "emails") {
-    var _path = "".concat(name, ".emails");
+  if (field === RECIPIENT_STORAGE_FIELDS.emails) {
+    var _path = "".concat(name, ".").concat(RECIPIENT_STORAGE_FIELDS.emails);
     var _current = formik.getIn(values, _path) || [];
     return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.MultiEmailInput, {
       required: true,
@@ -4060,7 +4272,7 @@ var RecipientField = function RecipientField(_ref) {
       }
     });
   }
-  var path = "".concat(name, ".value");
+  var path = "".concat(name, ".").concat(RECIPIENT_STORAGE_FIELDS.value);
   var current = formik.getIn(values, path);
   var options = normalizeOptions(dropdownOptions);
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
@@ -4104,7 +4316,7 @@ var RecipientPane = function RecipientPane(_ref) {
   });
   var flatOption = ((_schema$actions4 = schema.actions) === null || _schema$actions4 === void 0 || (_schema$actions4$opti = _schema$actions4.optionForName) === null || _schema$actions4$opti === void 0 ? void 0 : _schema$actions4$opti.call(_schema$actions4, action.name)) || ((_schema$actions5 = schema.actions) === null || _schema$actions5 === void 0 || (_schema$actions5$opti = _schema$actions5.optionForChannel) === null || _schema$actions5$opti === void 0 ? void 0 : _schema$actions5$opti.call(_schema$actions5, channel));
   var isSmsToNumbers = (flatOption === null || flatOption === void 0 ? void 0 : flatOption.type) === SMS_TO_NUMBERS;
-  var recipientFieldPath = isSmsToNumbers ? "".concat(name, ".phoneNumbers") : "".concat(name, ".emails");
+  var recipientFieldPath = isSmsToNumbers ? "".concat(name, ".").concat(RECIPIENT_STORAGE_FIELDS.phoneNumbers) : "".concat(name, ".").concat(RECIPIENT_STORAGE_FIELDS.emails);
   usePaneValidation(recipientFieldPath);
   react.useEffect(function () {
     var _bodyRef$current;
@@ -4135,7 +4347,7 @@ var RecipientPane = function RecipientPane(_ref) {
     action: action
   })) !== null && _schema$actions$rende !== void 0 ? _schema$actions$rende : builtInRecipientField;
   var phoneField = isSmsToNumbers ? /*#__PURE__*/jsxRuntime.jsx(index.PhoneNumberField, {
-    name: "".concat(name, ".phoneNumbers"),
+    name: "".concat(name, ".").concat(RECIPIENT_STORAGE_FIELDS.phoneNumbers),
     phoneNumbers: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.phoneNumbers
   }) : null;
   var belowField = phoneField || recipientField;
@@ -4171,6 +4383,7 @@ var RecipientPane = function RecipientPane(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: meta.recipientTitle || t("neetoRules.builder.panes.recipientTitle")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
@@ -4217,6 +4430,7 @@ var ConditionValueFields = function ConditionValueFields(_ref) {
   };
   var noMatches = /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "mb-pane-empty",
+    "data-testid": "pane-no-matches",
     children: t("neetoRules.builder.noMatches")
   });
   if (type === CONDITION_VALUE_TYPES.multiSelect && neetoCist.isNotEmpty(enumOptions)) {
@@ -4228,7 +4442,7 @@ var ConditionValueFields = function ConditionValueFields(_ref) {
       setFieldValue(valuesPath, current.includes(value) ? current.filter(neetoCist.isNot(value)) : [].concat(_toConsumableArray(current), [value]));
     };
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-y-1",
+      className: "mb-pane-list flex flex-col",
       children: [filtered.map(function (option) {
         return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Checkbox, {
           checked: current.includes(option.value),
@@ -4372,6 +4586,7 @@ var ValuePane = function ValuePane(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.builder.pickValue", {
             field: (field === null || field === void 0 ? void 0 : field.label) || t("neetoRules.builder.valueWord")
@@ -4386,6 +4601,7 @@ var ValuePane = function ValuePane(_ref) {
           className: "mb-pane-search",
           ref: searchRef,
           children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+            dataTestid: "pane-search",
             placeholder: t("neetoRules.builder.searchPlaceholder"),
             prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
             size: "large",
@@ -4532,7 +4748,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", {