@bigbinary/neeto-rules-frontend 2.7.20 → 2.7.22

package/dist/v2/NeetoRulesBuilder.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { f as flatten, S as SHORTCUTS } from '../keyboardShortcuts-DXP5YgeG.js';
+import { f as flatten, S as SHORTCUTS } from '../keyboardShortcuts-_OrtgF0A.js';
 import { useShallow } from 'zustand/shallow';
 import { useState, useRef, useEffect, createElement, Fragment as Fragment$1, useCallback, useMemo } from 'react';
 import { Button, Input, Checkbox, Typography, RadioGroup, Textarea, DatePicker, Select as Select$1, Tooltip, MultiEmailInput, Spinner } from '@bigbinary/neeto-atoms';
@@ -11,9 +11,9 @@ import { isNotEmpty, toLabelAndValue, removeBy, isNot, noop } from '@bigbinary/n
 import Container from '@bigbinary/neeto-molecules/v2/Container';
 import Header from '@bigbinary/neeto-molecules/v2/Header';
 import { useTranslation } from 'react-i18next';
-import { E as EditorAction, m as Panel, p as ErrorCallout, q as SmsFields, r as PhoneNumberField, j as formatData, u as usePollRuleName, T as TouchErrors, l as ScrollToErrorField, n as getValidationSchema, o as DEFAULT_INITIAL_VALUE, k as buildPayload } from '../index-BXLCiV70.js';
-import { u as useCustomDataStore } from '../useCustomDataStore-CU3KpyD4.js';
-import { u as useUtilityStore } from '../useUtilityStore-BBb39TOj.js';
+import { E as EditorAction, L as ListField, o as Panel, r as ErrorCallout, s as SmsFields, M as MIN_DELAY_VALUE, t as MAX_DELAY_VALUE, v as PhoneNumberField, l as formatData, u as usePollRuleName, T as TouchErrors, n as ScrollToErrorField, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE, m as buildPayload } from '../index-CcbW7H2S.js';
+import { u as useCustomDataStore } from '../useCustomDataStore-CEbhXugO.js';
+import { u as useUtilityStore } from '../useUtilityStore-BVCulMEC.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import Plus from '@bigbinary/neeto-icons/Plus';
@@ -22,6 +22,7 @@ import Delete from '@bigbinary/neeto-icons/Delete';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { t } from 'i18next';
+import * as yup from 'yup';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
 import Search from '@bigbinary/neeto-icons/Search';
@@ -35,7 +36,6 @@ import '@tanstack/react-query';
 import '@bigbinary/neeto-commons-frontend/react-utils';
 import 'axios';
 import '../index-9h4B7JZZ.js';
-import 'yup';
 import 'lucide-react';
 import '@bigbinary/neeto-commons-frontend/v2/react-utils';
 import '@monaco-editor/react';
@@ -79,6 +79,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",
@@ -176,7 +192,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() {
@@ -443,6 +463,18 @@ var actionParts = function actionParts(_ref11) {
     recipientSubtitle: channelMeta.recipientSubtitle || (option === null || option === void 0 ? void 0 : option.recipientSubtitle)
   };
 };
+
+// Which condition fields a host offers can depend on the rule — a trigger may
+// only support a subset. Lookups deliberately keep using the full list so a
+// field already on the rule still resolves after the offer narrows.
+var offeredConditionFields = function offeredConditionFields(_ref12) {
+  var _ref13, _schema$conditions$fi, _schema$conditions3, _schema$conditions3$f, _schema$conditions4;
+  var schema = _ref12.schema,
+    rule = _ref12.rule;
+  return (_ref13 = (_schema$conditions$fi = schema === null || schema === void 0 || (_schema$conditions3 = schema.conditions) === null || _schema$conditions3 === void 0 || (_schema$conditions3$f = _schema$conditions3.fieldsFor) === null || _schema$conditions3$f === void 0 ? void 0 : _schema$conditions3$f.call(_schema$conditions3, {
+    rule: rule
+  })) !== null && _schema$conditions$fi !== void 0 ? _schema$conditions$fi : schema === null || schema === void 0 || (_schema$conditions4 = schema.conditions) === null || _schema$conditions4 === void 0 ? void 0 : _schema$conditions4.fields) !== null && _ref13 !== void 0 ? _ref13 : [];
+};
 var hasTrigger = function hasTrigger(rule) {
   return !isEmpty((rule === null || rule === void 0 ? void 0 : rule.triggers) || []);
 };
@@ -454,28 +486,28 @@ var hasAction = function hasAction(rule) {
 var isRuleComplete = function isRuleComplete(rule) {
   return hasTrigger(rule) && hasAction(rule);
 };
-var scopeOptionFor = function scopeOptionFor(_ref12) {
+var scopeOptionFor = function scopeOptionFor(_ref14) {
   var _item$value, _schema$scope;
-  var schema = _ref12.schema,
-    item = _ref12.item;
+  var schema = _ref14.schema,
+    item = _ref14.item;
   var value = (_item$value = item === null || item === void 0 ? void 0 : item.value) !== null && _item$value !== void 0 ? _item$value : item;
   return ((schema === null || schema === void 0 || (_schema$scope = schema.scope) === null || _schema$scope === void 0 ? void 0 : _schema$scope.options) || []).find(function (candidate) {
     var _candidate$value2;
     return ((_candidate$value2 = candidate.value) !== null && _candidate$value2 !== void 0 ? _candidate$value2 : candidate.id) === value;
   });
 };
-var scopePhoneFields = function scopePhoneFields(_ref13) {
-  var _ref14, _item$phoneFields, _scopeOptionFor;
-  var schema = _ref13.schema,
-    item = _ref13.item;
-  return (_ref14 = (_item$phoneFields = item === null || item === void 0 ? void 0 : item.phoneFields) !== null && _item$phoneFields !== void 0 ? _item$phoneFields : (_scopeOptionFor = scopeOptionFor({
+var scopePhoneFields = function scopePhoneFields(_ref15) {
+  var _ref16, _item$phoneFields, _scopeOptionFor;
+  var schema = _ref15.schema,
+    item = _ref15.item;
+  return (_ref16 = (_item$phoneFields = item === null || item === void 0 ? void 0 : item.phoneFields) !== null && _item$phoneFields !== void 0 ? _item$phoneFields : (_scopeOptionFor = scopeOptionFor({
     schema: schema,
     item: item
-  })) === null || _scopeOptionFor === void 0 ? void 0 : _scopeOptionFor.phoneFields) !== null && _ref14 !== void 0 ? _ref14 : null;
+  })) === null || _scopeOptionFor === void 0 ? void 0 : _scopeOptionFor.phoneFields) !== null && _ref16 !== void 0 ? _ref16 : null;
 };
-var effectiveScopePhoneField = function effectiveScopePhoneField(_ref15) {
-  var schema = _ref15.schema,
-    item = _ref15.item;
+var effectiveScopePhoneField = function effectiveScopePhoneField(_ref17) {
+  var schema = _ref17.schema,
+    item = _ref17.item;
   if (item !== null && item !== void 0 && item.phoneField) return item.phoneField;
   var phoneFields = scopePhoneFields({
     schema: schema,
@@ -483,14 +515,14 @@ var effectiveScopePhoneField = function effectiveScopePhoneField(_ref15) {
   });
   return (phoneFields === null || phoneFields === void 0 ? void 0 : phoneFields.length) === 1 ? phoneFields[0].value : undefined;
 };
-var invalidScopeIndexes = function invalidScopeIndexes(_ref16) {
+var invalidScopeIndexes = function invalidScopeIndexes(_ref18) {
   var _scope$requiresPhone;
-  var rule = _ref16.rule,
-    schema = _ref16.schema;
+  var rule = _ref18.rule,
+    schema = _ref18.schema;
   var scope = schema === null || schema === void 0 ? void 0 : schema.scope;
   if (!(scope !== null && scope !== void 0 && scope.enabled) || !((_scope$requiresPhone = scope.requiresPhone) !== null && _scope$requiresPhone !== void 0 && _scope$requiresPhone.call(scope, (rule === null || rule === void 0 ? void 0 : rule.actions) || []))) return [];
   return ((rule === null || rule === void 0 ? void 0 : rule.scope) || []).reduce(function (indexes, item, index) {
-    var _ref17, _item$hasPhoneField;
+    var _ref19, _item$hasPhoneField;
     var option = scopeOptionFor({
       schema: schema,
       item: item
@@ -499,15 +531,15 @@ var invalidScopeIndexes = function invalidScopeIndexes(_ref16) {
       schema: schema,
       item: item
     });
-    var hasPhoneField = (_ref17 = (_item$hasPhoneField = item === null || item === void 0 ? void 0 : item.hasPhoneField) !== null && _item$hasPhoneField !== void 0 ? _item$hasPhoneField : option === null || option === void 0 ? void 0 : option.hasPhoneField) !== null && _ref17 !== void 0 ? _ref17 : phoneFields ? phoneFields.length > 0 : undefined;
+    var hasPhoneField = (_ref19 = (_item$hasPhoneField = item === null || item === void 0 ? void 0 : item.hasPhoneField) !== null && _item$hasPhoneField !== void 0 ? _item$hasPhoneField : option === null || option === void 0 ? void 0 : option.hasPhoneField) !== null && _ref19 !== void 0 ? _ref19 : phoneFields ? phoneFields.length > 0 : undefined;
     if (hasPhoneField === false) indexes.push(index);
     return indexes;
   }, []);
 };
-var invalidScopePhoneFieldIndexes = function invalidScopePhoneFieldIndexes(_ref18) {
+var invalidScopePhoneFieldIndexes = function invalidScopePhoneFieldIndexes(_ref20) {
   var _scope$requiresPhone2;
-  var rule = _ref18.rule,
-    schema = _ref18.schema;
+  var rule = _ref20.rule,
+    schema = _ref20.schema;
   var scope = schema === null || schema === void 0 ? void 0 : schema.scope;
   if (!(scope !== null && scope !== void 0 && scope.enabled) || !((_scope$requiresPhone2 = scope.requiresPhone) !== null && _scope$requiresPhone2 !== void 0 && _scope$requiresPhone2.call(scope, (rule === null || rule === void 0 ? void 0 : rule.actions) || []))) return [];
   return ((rule === null || rule === void 0 ? void 0 : rule.scope) || []).reduce(function (indexes, item, index) {
@@ -544,14 +576,33 @@ var minutesToParts = function minutesToParts(minutes) {
     unit: "minutes"
   };
 };
-var partsToMinutes = function partsToMinutes(_ref19) {
-  var value = _ref19.value,
-    unit = _ref19.unit;
+var partsToMinutes = function partsToMinutes(_ref21) {
+  var value = _ref21.value,
+    unit = _ref21.unit;
   return (
     // eslint-disable-next-line security/detect-object-injection
     (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.object();
+  return yup.object().shape(_defineProperty({}, fieldKey, yup.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.string().test("max-lead-time", function () {
+      return 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,
@@ -574,30 +625,33 @@ 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;
 };
 
 // eslint-disable-next-line security/detect-object-injection
-var valueAt = function valueAt(_ref20) {
+var valueAt = function valueAt(_ref22) {
   var _values$key;
-  var values = _ref20.values,
-    key = _ref20.key;
+  var values = _ref22.values,
+    key = _ref22.key;
   return values === null || values === void 0 || (_values$key = values[key]) === null || _values$key === void 0 ? void 0 : _values$key.value;
 };
 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$conditions5, _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",
+    conditions: ((_schema$conditions5 = schema.conditions) === null || _schema$conditions5 === void 0 ? void 0 : _schema$conditions5.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"
@@ -605,11 +659,11 @@ var fieldKeysFromSchema = function fieldKeysFromSchema() {
 };
 var valuesToRuleModel = function valuesToRuleModel() {
   var _valueAt, _conditions$;
-  var _ref21 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref21$values = _ref21.values,
-    values = _ref21$values === void 0 ? {} : _ref21$values,
-    _ref21$schema = _ref21.schema,
-    schema = _ref21$schema === void 0 ? {} : _ref21$schema;
+  var _ref23 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref23$values = _ref23.values,
+    values = _ref23$values === void 0 ? {} : _ref23$values,
+    _ref23$schema = _ref23.schema,
+    schema = _ref23$schema === void 0 ? {} : _ref23$schema;
   var keys = fieldKeysFromSchema(schema);
   var conditions = asArray(valueAt({
     values: values,
@@ -653,42 +707,42 @@ var valuesToRuleModel = function valuesToRuleModel() {
     }))
   };
 };
-var setTriggers = function setTriggers(_ref22) {
-  var schema = _ref22.schema,
-    triggers = _ref22.triggers;
+var setTriggers = function setTriggers(_ref24) {
+  var schema = _ref24.schema,
+    triggers = _ref24.triggers;
   return {
     path: "".concat(fieldKeysFromSchema(schema).triggers, ".value"),
     value: triggers
   };
 };
-var setPerformer = function setPerformer(_ref23) {
-  var schema = _ref23.schema,
-    performer = _ref23.performer;
+var setPerformer = function setPerformer(_ref25) {
+  var schema = _ref25.schema,
+    performer = _ref25.performer;
   return {
     path: "".concat(fieldKeysFromSchema(schema).performer, ".value"),
     value: performer
   };
 };
-var setActions = function setActions(_ref24) {
-  var schema = _ref24.schema,
-    actions = _ref24.actions;
+var setActions = function setActions(_ref26) {
+  var schema = _ref26.schema,
+    actions = _ref26.actions;
   return {
     path: "".concat(fieldKeysFromSchema(schema).actions, ".value"),
     value: actions
   };
 };
-var setConditions = function setConditions(_ref25) {
-  var schema = _ref25.schema,
-    conditions = _ref25.conditions;
+var setConditions = function setConditions(_ref27) {
+  var schema = _ref27.schema,
+    conditions = _ref27.conditions;
   return {
     path: "".concat(fieldKeysFromSchema(schema).conditions, ".value"),
     value: conditions
   };
 };
-var setConditionMode = function setConditionMode(_ref26) {
-  var schema = _ref26.schema,
-    conditions = _ref26.conditions,
-    joinType = _ref26.joinType;
+var setConditionMode = function setConditionMode(_ref28) {
+  var schema = _ref28.schema,
+    conditions = _ref28.conditions,
+    joinType = _ref28.joinType;
   return setConditions({
     schema: schema,
     conditions: conditions.map(function (condition) {
@@ -696,34 +750,34 @@ var setConditionMode = function setConditionMode(_ref26) {
     })
   });
 };
-var setDelay = function setDelay(_ref27) {
-  var schema = _ref27.schema,
-    delay = _ref27.delay;
+var setDelay = function setDelay(_ref29) {
+  var schema = _ref29.schema,
+    delay = _ref29.delay;
   return {
     path: "".concat(fieldKeysFromSchema(schema).delay, ".value"),
     value: delay !== null && delay !== void 0 ? delay : {}
   };
 };
-var setActive = function setActive(_ref28) {
-  var schema = _ref28.schema,
-    active = _ref28.active;
+var setActive = function setActive(_ref30) {
+  var schema = _ref30.schema,
+    active = _ref30.active;
   return {
     path: "".concat(fieldKeysFromSchema(schema).status, ".value"),
     value: active ? STATUS_KEYS.ENABLED : STATUS_KEYS.DISABLED
   };
 };
-var setScope = function setScope(_ref29) {
-  var schema = _ref29.schema,
-    scope = _ref29.scope;
+var setScope = function setScope(_ref31) {
+  var schema = _ref31.schema,
+    scope = _ref31.scope;
   return {
     path: "".concat(fieldKeysFromSchema(schema).scope, ".value"),
     value: scope
   };
 };
-var removeArrayItem = function removeArrayItem(_ref30) {
-  var values = _ref30.values,
-    fieldKey = _ref30.fieldKey,
-    index = _ref30.index;
+var removeArrayItem = function removeArrayItem(_ref32) {
+  var values = _ref32.values,
+    fieldKey = _ref32.fieldKey,
+    index = _ref32.index;
   var list = asArray(valueAt({
     values: values,
     key: fieldKey
@@ -750,6 +804,35 @@ var removeArrayItem = function removeArrayItem(_ref30) {
   }
   return result;
 };
+var clearArrayItems = function clearArrayItems(_ref33) {
+  var values = _ref33.values,
+    fieldKey = _ref33.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; }
@@ -1029,6 +1112,7 @@ var MetaBlock = function MetaBlock(_ref) {
         children: t("neetoRules.builder.automationName")
       }), /*#__PURE__*/jsxs("div", {
         ref: nameRef,
+        "data-testid": "rule-name-edit",
         role: handleEditName ? "button" : undefined,
         tabIndex: handleEditName ? 0 : undefined,
         className: classNames("mb-meta-input-wrap", {
@@ -1037,6 +1121,7 @@ var MetaBlock = function MetaBlock(_ref) {
         onClick: handleEditName,
         children: [/*#__PURE__*/jsx("span", {
           className: "mb-meta-name-display",
+          "data-testid": "rule-name",
           children: rule.name
         }), /*#__PURE__*/jsx("span", {
           "aria-hidden": true,
@@ -1058,8 +1143,10 @@ var MetaBlock = function MetaBlock(_ref) {
       })]
     }), /*#__PURE__*/jsxs("label", {
       className: "mb-meta-active",
+      "data-testid": "rule-active-label",
       children: [/*#__PURE__*/jsx("input", {
         checked: rule.active,
+        "data-testid": "rule-active-checkbox",
         readOnly: !handleToggleActive,
         type: "checkbox",
         onChange: handleToggleActive || undefined
@@ -1317,6 +1404,8 @@ var ActionRow = function ActionRow(_ref) {
   });
   var configLabel = mediumLabel || sentencify(option === null || option === void 0 ? void 0 : option.placeholder);
   var isConfigured = 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;
@@ -1355,7 +1444,7 @@ var ActionRow = function ActionRow(_ref) {
           children: verbLabel
         }), hasParamTail ? /*#__PURE__*/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
@@ -1403,7 +1492,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
@@ -1626,6 +1715,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,
@@ -1836,6 +1929,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
+      }));
     }
   };
 };
@@ -1982,9 +2093,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;
@@ -2117,7 +2228,7 @@ var nextActionRecipientAt = function nextActionRecipientAt(_ref14) {
   });
 };
 var descriptorFor = function descriptorFor(_ref15) {
-  var _schema$actor2, _schema$conditions2;
+  var _schema$actor2;
   var anchor = _ref15.anchor,
     schema = _ref15.schema,
     rule = _ref15.rule,
@@ -2163,7 +2274,10 @@ var descriptorFor = function descriptorFor(_ref15) {
         title: t("neetoRules.builder.panes.addCondition"),
         subtitle: t("neetoRules.builder.panes.condFieldSubtitle"),
         cascade: true,
-        options: (((_schema$conditions2 = schema.conditions) === null || _schema$conditions2 === void 0 ? void 0 : _schema$conditions2.fields) || []).map(function (field) {
+        options: offeredConditionFields({
+          schema: schema,
+          rule: rule
+        }).map(function (field) {
           return {
             label: field.paneLabel || field.label,
             value: optionValue(field),
@@ -2177,7 +2291,7 @@ var descriptorFor = function descriptorFor(_ref15) {
       };
     case BUILDER_ANCHORS.COND_OP_TOGGLE:
       {
-        var _schema$conditions3;
+        var _schema$conditions2;
         var field = findField({
           schema: schema,
           value: conditionAt({
@@ -2185,7 +2299,7 @@ var descriptorFor = function descriptorFor(_ref15) {
             index: index
           }).field
         });
-        var labels = ((_schema$conditions3 = schema.conditions) === null || _schema$conditions3 === void 0 ? void 0 : _schema$conditions3.operatorLabels) || {};
+        var labels = ((_schema$conditions2 = schema.conditions) === null || _schema$conditions2 === void 0 ? void 0 : _schema$conditions2.operatorLabels) || {};
         var verbs = (field === null || field === void 0 ? void 0 : field.allowMatching) || [];
         var fieldLabel = (field === null || field === void 0 ? void 0 : field.paneLabel) || (field === null || field === void 0 ? void 0 : field.label) || "";
         var isContains = isNotEmpty(verbs) && verbs.every(isContainsVerb);
@@ -2231,7 +2345,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;
@@ -2240,13 +2354,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 ? t("neetoRules.builder.panes.actionSwapTitle") : t("neetoRules.builder.panes.actionAddTitle"),
           subtitle: isSwap ? t("neetoRules.builder.panes.actionSwapSubtitle") : t("neetoRules.builder.panes.actionAddSubtitle"),
@@ -2276,7 +2387,7 @@ var descriptorFor = function descriptorFor(_ref15) {
       }
     case BUILDER_ANCHORS.ACTION_RECIPIENT:
       {
-        var _schema$actions13;
+        var _schema$actions12;
         var action = actionAt({
           rule: rule,
           index: index
@@ -2286,7 +2397,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
@@ -2402,9 +2513,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;
@@ -2671,7 +2782,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$triggers, _schema$delay, _schema$meta$showName, _schema$meta;
   var schema = _ref.schema;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -2684,15 +2795,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(useShallow(function (store) {
       return {
         builderPreview: store["builderPreview"],
@@ -2737,7 +2849,7 @@ var Canvas = function Canvas(_ref) {
     setFlashSeq(submitCount);
     var timer = setTimeout(function () {
       return setFlashSeq(0);
-    }, 2200);
+    }, FLASH_DURATION_MS);
     return function () {
       return clearTimeout(timer);
     };
@@ -2754,7 +2866,7 @@ var Canvas = function Canvas(_ref) {
     });
   };
   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;
+    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;
     var conditionMeta = "".concat(fieldKeys.conditions, ".value.").concat(index, ".metadata");
@@ -2774,7 +2886,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:
         {
@@ -2784,6 +2902,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")
@@ -2804,7 +2926,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)
           });
@@ -2882,8 +3006,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) || isNotEmpty(rule.scope || []);
-  var isComplete = isRuleComplete(rule) && isScopeComplete;
   var handleRemoveScope = function handleRemoveScope(index) {
     closePaneIfTargeting({
       anchors: [BUILDER_ANCHORS.SCOPE_PHONE_FIELD],
@@ -2893,7 +3015,10 @@ var Canvas = function Canvas(_ref) {
       return i !== index;
     }));
   };
-  var conditionFields = (schema === null || schema === void 0 || (_schema$conditions = schema.conditions) === null || _schema$conditions === void 0 ? void 0 : _schema$conditions.fields) || [];
+  var conditionFields = offeredConditionFields({
+    schema: schema,
+    rule: rule
+  });
   var canAddCondition = isNotEmpty(conditionFields);
   var leadTimeAppliesTo = (schema === null || schema === void 0 || (_schema$triggers = schema.triggers) === null || _schema$triggers === void 0 || (_schema$triggers = _schema$triggers.leadTime) === null || _schema$triggers === void 0 ? void 0 : _schema$triggers.appliesTo) || [];
   var hasLeadTimeTrigger = rule.triggers.some(function (trigger) {
@@ -2917,12 +3042,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();
   };
@@ -2944,7 +3069,7 @@ var Canvas = function Canvas(_ref) {
     );
   };
   return /*#__PURE__*/jsx("div", {
-    className: "neeto-rules-builder",
+    className: "neeto-rules-builder nrb-atoms",
     children: /*#__PURE__*/jsxs("div", {
       className: "mb-canvas neeto-rules-main-card",
       children: [/*#__PURE__*/jsx(WhenBlock, {
@@ -2986,6 +3111,7 @@ var Canvas = function Canvas(_ref) {
       }) : /*#__PURE__*/jsx("div", {
         className: "mb-add-row",
         children: /*#__PURE__*/jsx(Button, {
+          "data-testid": "rule-delay-add",
           icon: Plus,
           iconPosition: "left",
           label: t("neetoRules.common.addDelay"),
@@ -3017,24 +3143,22 @@ var Canvas = function Canvas(_ref) {
           onRemoveScope: handleRemoveScope,
           onToken: openPane
         })]
-      }), isComplete && /*#__PURE__*/jsxs(Fragment$1, {
-        children: [/*#__PURE__*/jsx(Connector, {
-          active: true
-        }), /*#__PURE__*/jsx(MetaBlock, {
-          rule: rule,
-          isInvalid: isInvalid({
+      }), /*#__PURE__*/jsx(Connector, {
+        active: true
+      }), /*#__PURE__*/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);
+        }
       })]
     })
   });
@@ -3045,6 +3169,7 @@ var ACTION_CONFIG_TYPES = {
   multiSelect: "multiSelect",
   dropdown: "dropdown",
   note: "note",
+  list: "list",
   textarea: "textarea",
   number: "number",
   text: "text",
@@ -3106,6 +3231,7 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
   };
   var noMatches = /*#__PURE__*/jsx("div", {
     className: "mb-pane-empty",
+    "data-testid": "pane-no-matches",
     children: t("neetoRules.builder.noMatches")
   });
   if (type === ACTION_CONFIG_TYPES.emailChannel) {
@@ -3114,7 +3240,7 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
     var bodyPath = "".concat(name, ".body");
     return /*#__PURE__*/jsxs("div", {
       className: "flex flex-col gap-4",
-      children: [/*#__PURE__*/jsx(Input, {
+      children: [!(option !== null && option !== void 0 && option.hideSubject) && /*#__PURE__*/jsx(Input, {
         required: true,
         error: fieldError(subjectPath),
         label: t("neetoRules.builder.config.subject"),
@@ -3147,7 +3273,7 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
       setFieldValue(valuePath, current.includes(value) ? current.filter(isNot(value)) : [].concat(_toConsumableArray(current), [value]));
     };
     return /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col gap-y-1",
+      className: "mb-pane-list flex flex-col",
       children: [filtered.map(function (item) {
         return /*#__PURE__*/jsx(Checkbox, {
           checked: current.includes(item.value),
@@ -3189,6 +3315,14 @@ var ActionConfigFields = function ActionConfigFields(_ref) {
       })
     });
   }
+  if (type === ACTION_CONFIG_TYPES.list) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx(ListField, {
+        name: valuePath
+      }), hintBlock]
+    });
+  }
   if (type === ACTION_CONFIG_TYPES.note) {
     var _action$metadata2;
     return /*#__PURE__*/jsxs("div", {
@@ -3434,7 +3568,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;
@@ -3463,7 +3597,6 @@ var ConfigPane = function ConfigPane(_ref) {
     };
   }();
   useHotkeys(SHORTCUTS["continue"].sequence, handleContinue, {
-    enabled: shouldAdvanceToRecipient,
     mode: "global"
   });
   return /*#__PURE__*/jsxs(Fragment, {
@@ -3471,6 +3604,7 @@ var ConfigPane = function ConfigPane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: title
         }), configSubtitle && /*#__PURE__*/jsx(Typography, {
@@ -3480,6 +3614,7 @@ var ConfigPane = function ConfigPane(_ref) {
         }), showSearch && /*#__PURE__*/jsx("div", {
           className: "mb-pane-search",
           children: /*#__PURE__*/jsx(Input, {
+            dataTestid: "pane-search",
             placeholder: t("neetoRules.builder.searchPlaceholder"),
             prefix: /*#__PURE__*/jsx(Search, {}),
             size: "large",
@@ -3499,20 +3634,14 @@ var ConfigPane = function ConfigPane(_ref) {
             message: disabledReason,
             selectedField: flatOption
           })
-        }), isSms ? /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(SmsFields, {
-            action: action,
-            index: index,
-            name: name,
-            shouldAutoFocus: true,
-            selectedField: flatOption,
-            showPhoneNumberInput: false
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "mt-2",
-            color: "muted",
-            variant: "body3",
-            children: t("neetoRules.builder.config.smsSegmentHint")
-          })]
+        }), isSms ? /*#__PURE__*/jsx(SmsFields, {
+          action: action,
+          index: index,
+          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,
@@ -3525,8 +3654,9 @@ var ConfigPane = function ConfigPane(_ref) {
           option: flatOption
         })]
       })
-    }), shouldAdvanceToRecipient && /*#__PURE__*/jsx(Panel.Footer, {
+    }), /*#__PURE__*/jsx(Panel.Footer, {
       children: /*#__PURE__*/jsx(Button, {
+        "data-testid": "continue-button",
         label: t("neetoRules.buttons.continue"),
         size: "lg",
         onClick: handleContinue
@@ -3543,7 +3673,9 @@ var DelayPane = function DelayPane(_ref) {
   var _useRuleModel = useRuleModel(schema),
     fieldKeys = _useRuleModel.fieldKeys;
   var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    setFieldTouched = _useFormikContext.setFieldTouched,
+    getFieldMeta = _useFormikContext.getFieldMeta;
   var bodyRef = useRef(null);
   var name = fieldKeys.delay;
   var _useField = useField("".concat(name, ".value")),
@@ -3552,12 +3684,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 = isNotEmpty(units) ? units : DEFAULT_DELAY_UNITS;
   usePaneValidation("".concat(name, ".value"));
+  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]);
   useEffect(function () {
     if (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
@@ -3575,6 +3713,7 @@ var DelayPane = function DelayPane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.common.addDelay")
         }), /*#__PURE__*/jsx(Typography, {
@@ -3595,13 +3734,15 @@ var DelayPane = function DelayPane(_ref) {
           className: "flex items-start gap-x-2",
           children: [/*#__PURE__*/jsx(Input$1, {
             className: "w-44",
-            max: 999,
-            min: 1,
+            dataTestid: "delay-value",
+            max: MAX_DELAY_VALUE,
+            min: MIN_DELAY_VALUE,
             name: "".concat(name, ".value.value"),
             placeholder: t("neetoRules.placeholders.enterDelay"),
             size: "large",
             type: "number"
           }), /*#__PURE__*/jsx(Select, {
+            dataTestid: "delay-unit",
             defaultValue: value === null || value === void 0 ? void 0 : value.unit,
             name: "".concat(name, ".value.unit"),
             options: unitOptions,
@@ -3635,11 +3776,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 = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(null),
@@ -3664,15 +3807,41 @@ var NumberStepper = function NumberStepper(_ref) {
       max: max
     }));
   };
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "mb-stepper",
-    children: [/*#__PURE__*/jsx(Input, {
+    children: /*#__PURE__*/jsx(Input, {
+      dataTestid: dataTestid,
+      error: error,
       label: label,
       min: min,
       required: required,
       autoFocus: true,
       type: "number",
       value: display,
+      suffix: /*#__PURE__*/jsxs("div", {
+        className: "mb-stepper-controls",
+        children: [/*#__PURE__*/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__*/jsx(Up, {})
+        }), /*#__PURE__*/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__*/jsx(Down, {})
+        })]
+      }),
       onBlur: function onBlur() {
         return setDraft(null);
       },
@@ -3682,28 +3851,7 @@ var NumberStepper = function NumberStepper(_ref) {
       onFocus: function onFocus(event) {
         return event.target.select();
       }
-    }), /*#__PURE__*/jsxs("div", {
-      className: "mb-stepper-controls",
-      children: [/*#__PURE__*/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__*/jsx(Up, {})
-      }), /*#__PURE__*/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__*/jsx(Down, {})
-      })]
-    })]
+    })
   });
 };
 
@@ -3712,7 +3860,9 @@ var LeadTimePane = function LeadTimePane(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    setFieldTouched = _useFormikContext.setFieldTouched,
+    getFieldMeta = _useFormikContext.getFieldMeta;
   var _useRuleModel = useRuleModel(schema),
     rule = _useRuleModel.rule,
     fieldKeys = _useRuleModel.fieldKeys;
@@ -3720,6 +3870,11 @@ var LeadTimePane = function LeadTimePane(_ref) {
     amount = _minutesToParts.value,
     unit = _minutesToParts.unit;
   var path = "".concat(fieldKeys.leadTime, ".value");
+  var _useField = 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;
@@ -3728,11 +3883,19 @@ var LeadTimePane = function LeadTimePane(_ref) {
       unit: nextUnit
     }));
   };
+  usePaneValidation(path);
+  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__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.builder.leadTimeTitle")
         }), /*#__PURE__*/jsx(Typography, {
@@ -3743,32 +3906,41 @@ var LeadTimePane = function LeadTimePane(_ref) {
       })
     }), /*#__PURE__*/jsx(Panel.Body, {
       children: /*#__PURE__*/jsxs("div", {
-        className: "flex items-end gap-x-3",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "flex-1",
-          children: /*#__PURE__*/jsx(NumberStepper, {
-            label: t("neetoRules.builder.before"),
-            value: amount,
-            onChange: function onChange(value) {
-              return update({
-                value: value === "" ? 0 : value,
-                unit: unit
-              });
-            }
-          })
-        }), /*#__PURE__*/jsx("div", {
-          className: "w-32 shrink-0",
-          children: /*#__PURE__*/jsx(Select$1, {
-            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__*/jsx(Typography, {
+          variant: "body2",
+          weight: "medium",
+          children: t("neetoRules.builder.before")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex items-start gap-x-3",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "flex-1",
+            children: /*#__PURE__*/jsx(NumberStepper, {
+              dataTestid: "lead-time",
+              error: touched ? error : "",
+              value: amount,
+              onChange: function onChange(value) {
+                return update({
+                  value: value === "" ? 0 : value,
+                  unit: unit
+                });
+              }
+            })
+          }), /*#__PURE__*/jsx("div", {
+            className: "w-32 shrink-0",
+            children: /*#__PURE__*/jsx(Select$1, {
+              dataTestid: "lead-time-unit",
+              isSearchable: false,
+              options: LEAD_TIME_UNITS,
+              value: unit,
+              onChange: function onChange(nextUnit) {
+                return update({
+                  value: amount,
+                  unit: nextUnit
+                });
+              }
+            })
+          })]
         })]
       })
     })]
@@ -3786,6 +3958,7 @@ var NamePane = function NamePane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: t("neetoRules.builder.automationName")
         }), /*#__PURE__*/jsx(Typography, {
@@ -3963,12 +4136,13 @@ var OptionsPane = function OptionsPane(_ref) {
     if (isEmpty(filtered)) {
       return /*#__PURE__*/jsx("div", {
         className: "mb-pane-empty",
+        "data-testid": "pane-no-matches",
         children: t("neetoRules.builder.noMatches")
       });
     }
     if (multi) {
       return /*#__PURE__*/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],
@@ -4020,6 +4194,7 @@ var OptionsPane = function OptionsPane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: title
         }), /*#__PURE__*/jsx(Typography, {
@@ -4030,6 +4205,7 @@ var OptionsPane = function OptionsPane(_ref) {
           className: "mb-pane-search",
           ref: searchRef,
           children: /*#__PURE__*/jsx(Input, {
+            dataTestid: "pane-search",
             placeholder: t("neetoRules.builder.searchPlaceholder"),
             prefix: /*#__PURE__*/jsx(Search, {}),
             size: "large",
@@ -4044,6 +4220,7 @@ var OptionsPane = function OptionsPane(_ref) {
       children: [renderBody(), belowContent]
     }), cascade && /*#__PURE__*/jsx(Panel.Footer, {
       children: /*#__PURE__*/jsx(Button, {
+        "data-testid": "continue-button",
         disabled: !canContinue,
         label: t("neetoRules.buttons.continue"),
         size: "lg",
@@ -4069,8 +4246,8 @@ var RecipientField = function RecipientField(_ref) {
   var fieldError = function fieldError(path) {
     return getIn(touched, path) && 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 = getIn(values, _path) || [];
     return /*#__PURE__*/jsx(MultiEmailInput, {
       required: true,
@@ -4092,7 +4269,7 @@ var RecipientField = function RecipientField(_ref) {
       }
     });
   }
-  var path = "".concat(name, ".value");
+  var path = "".concat(name, ".").concat(RECIPIENT_STORAGE_FIELDS.value);
   var current = getIn(values, path);
   var options = normalizeOptions(dropdownOptions);
   return /*#__PURE__*/jsx(Select$1, {
@@ -4136,7 +4313,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);
   useEffect(function () {
     var _bodyRef$current;
@@ -4167,7 +4344,7 @@ var RecipientPane = function RecipientPane(_ref) {
     action: action
   })) !== null && _schema$actions$rende !== void 0 ? _schema$actions$rende : builtInRecipientField;
   var phoneField = isSmsToNumbers ? /*#__PURE__*/jsx(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;
@@ -4203,6 +4380,7 @@ var RecipientPane = function RecipientPane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           variant: "h5",
           children: meta.recipientTitle || t("neetoRules.builder.panes.recipientTitle")
         }), /*#__PURE__*/jsx(Typography, {
@@ -4249,6 +4427,7 @@ var ConditionValueFields = function ConditionValueFields(_ref) {
   };
   var noMatches = /*#__PURE__*/jsx("div", {
     className: "mb-pane-empty",
+    "data-testid": "pane-no-matches",
     children: t("neetoRules.builder.noMatches")
   });
   if (type === CONDITION_VALUE_TYPES.multiSelect && isNotEmpty(enumOptions)) {
@@ -4260,7 +4439,7 @@ var ConditionValueFields = function ConditionValueFields(_ref) {
       setFieldValue(valuesPath, current.includes(value) ? current.filter(isNot(value)) : [].concat(_toConsumableArray(current), [value]));
     };
     return /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col gap-y-1",
+      className: "mb-pane-list flex flex-col",
       children: [filtered.map(function (option) {
         return /*#__PURE__*/jsx(Checkbox, {
           checked: current.includes(option.value),
@@ -4404,6 +4583,7 @@ var ValuePane = function ValuePane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsx(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")
@@ -4418,6 +4598,7 @@ var ValuePane = function ValuePane(_ref) {
           className: "mb-pane-search",
           ref: searchRef,
           children: /*#__PURE__*/jsx(Input, {
+            dataTestid: "pane-search",
             placeholder: t("neetoRules.builder.searchPlaceholder"),
             prefix: /*#__PURE__*/jsx(Search, {}),
             size: "large",
@@ -4564,7 +4745,7 @@ var Form = function Form(_ref) {
       data: data,
       customData: customData,
       isNameGenerationDisabled: isNameRequired
-    }),
+    }).concat(leadTimeValidationSchema(schema)),
     onSubmit: submitForm,
     children: function children() {
       return /*#__PURE__*/jsxs("div", {