@bigbinary/neeto-rules-frontend 2.7.23 → 2.7.24

package/dist/v2/NeetoRulesBuilder.js

@@ -11,7 +11,7 @@ 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 { r as ApiFields, E as EditorAction, L as ListField, o as Panel, s as ErrorCallout, t as SmsFields, M as MIN_DELAY_VALUE, v as MAX_DELAY_VALUE, w 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-CvpoP63h.js';
+import { r as ApiFields, E as EditorAction, L as ListField, o as Panel, s as ErrorCallout, t as SmsFields, M as MIN_DELAY_VALUE, v as MAX_DELAY_VALUE, w 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-Br0dDuGK.js';
 import { u as useCustomDataStore } from '../useCustomDataStore-CEbhXugO.js';
 import { u as useUtilityStore } from '../useUtilityStore-BVCulMEC.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -159,6 +159,7 @@ var BUILDER_PANEL_TYPES = {
   CONDITION_VALUE: "builder-condition-value",
   ACTION_CHANNEL: "builder-action-channel",
   ACTION_CONFIG: "builder-action-config",
+  ACTION_STEP: "builder-action-step",
   RECIPIENT: "builder-recipient",
   DELAY: "builder-delay",
   LEAD_TIME: "builder-lead-time",
@@ -179,15 +180,16 @@ var BUILDER_ANCHORS = {
   ACTION_CHANNEL: "action-channel",
   ACTION_CONFIG: "action-config",
   ACTION_RECIPIENT: "action-recipient",
+  ACTION_STEP: "action-step",
   RULE_DELAY: "rule-delay",
   META_NAME: "meta-name",
   SCOPE: "scope",
   SCOPE_PHONE_FIELD: "scope-phone-field"
 };
-var TOKEN_TO_PANEL_TYPE = (_TOKEN_TO_PANEL_TYPE = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOKEN_TO_PANEL_TYPE, BUILDER_ANCHORS.TRIGGER_ADD, BUILDER_PANEL_TYPES.TRIGGER), BUILDER_ANCHORS.TRIGGER_REPLACE, BUILDER_PANEL_TYPES.TRIGGER), BUILDER_ANCHORS.TRIGGER_ACTOR, BUILDER_PANEL_TYPES.ACTOR), BUILDER_ANCHORS.COND_FIELD, BUILDER_PANEL_TYPES.CONDITION_FIELD), BUILDER_ANCHORS.COND_OP_TOGGLE, BUILDER_PANEL_TYPES.OPERATOR), BUILDER_ANCHORS.COND_CONNECTOR, BUILDER_PANEL_TYPES.CONNECTOR), BUILDER_ANCHORS.COND_VALUES, BUILDER_PANEL_TYPES.CONDITION_VALUE), BUILDER_ANCHORS.ACTION_ADD, BUILDER_PANEL_TYPES.ACTION_CHANNEL), BUILDER_ANCHORS.ACTION_CHANNEL, BUILDER_PANEL_TYPES.ACTION_CHANNEL), BUILDER_ANCHORS.ACTION_CONFIG, BUILDER_PANEL_TYPES.ACTION_CONFIG), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOKEN_TO_PANEL_TYPE, BUILDER_ANCHORS.ACTION_RECIPIENT, BUILDER_PANEL_TYPES.RECIPIENT), BUILDER_ANCHORS.RULE_DELAY, BUILDER_PANEL_TYPES.DELAY), BUILDER_ANCHORS.TRIGGER_LEAD_TIME, BUILDER_PANEL_TYPES.LEAD_TIME), BUILDER_ANCHORS.META_NAME, BUILDER_PANEL_TYPES.NAME), BUILDER_ANCHORS.SCOPE, BUILDER_PANEL_TYPES.SCOPE), BUILDER_ANCHORS.SCOPE_PHONE_FIELD, BUILDER_PANEL_TYPES.SCOPE_PHONE_FIELD));
+var TOKEN_TO_PANEL_TYPE = (_TOKEN_TO_PANEL_TYPE = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOKEN_TO_PANEL_TYPE, BUILDER_ANCHORS.TRIGGER_ADD, BUILDER_PANEL_TYPES.TRIGGER), BUILDER_ANCHORS.TRIGGER_REPLACE, BUILDER_PANEL_TYPES.TRIGGER), BUILDER_ANCHORS.TRIGGER_ACTOR, BUILDER_PANEL_TYPES.ACTOR), BUILDER_ANCHORS.COND_FIELD, BUILDER_PANEL_TYPES.CONDITION_FIELD), BUILDER_ANCHORS.COND_OP_TOGGLE, BUILDER_PANEL_TYPES.OPERATOR), BUILDER_ANCHORS.COND_CONNECTOR, BUILDER_PANEL_TYPES.CONNECTOR), BUILDER_ANCHORS.COND_VALUES, BUILDER_PANEL_TYPES.CONDITION_VALUE), BUILDER_ANCHORS.ACTION_ADD, BUILDER_PANEL_TYPES.ACTION_CHANNEL), BUILDER_ANCHORS.ACTION_CHANNEL, BUILDER_PANEL_TYPES.ACTION_CHANNEL), BUILDER_ANCHORS.ACTION_CONFIG, BUILDER_PANEL_TYPES.ACTION_CONFIG), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOKEN_TO_PANEL_TYPE, BUILDER_ANCHORS.ACTION_RECIPIENT, BUILDER_PANEL_TYPES.RECIPIENT), BUILDER_ANCHORS.ACTION_STEP, BUILDER_PANEL_TYPES.ACTION_STEP), BUILDER_ANCHORS.RULE_DELAY, BUILDER_PANEL_TYPES.DELAY), BUILDER_ANCHORS.TRIGGER_LEAD_TIME, BUILDER_PANEL_TYPES.LEAD_TIME), BUILDER_ANCHORS.META_NAME, BUILDER_PANEL_TYPES.NAME), BUILDER_ANCHORS.SCOPE, BUILDER_PANEL_TYPES.SCOPE), BUILDER_ANCHORS.SCOPE_PHONE_FIELD, BUILDER_PANEL_TYPES.SCOPE_PHONE_FIELD));
 var LARGE_PANEL_TYPES = [BUILDER_PANEL_TYPES.ACTION_CONFIG, BUILDER_PANEL_TYPES.SCOPE, BUILDER_PANEL_TYPES.NAME];
 var CONDITION_ANCHORS = [BUILDER_ANCHORS.COND_FIELD, BUILDER_ANCHORS.COND_OP_TOGGLE, BUILDER_ANCHORS.COND_VALUES, BUILDER_ANCHORS.COND_CONNECTOR];
-var ACTION_ANCHORS = [BUILDER_ANCHORS.ACTION_CHANNEL, BUILDER_ANCHORS.ACTION_CONFIG, BUILDER_ANCHORS.ACTION_RECIPIENT];
+var ACTION_ANCHORS = [BUILDER_ANCHORS.ACTION_CHANNEL, BUILDER_ANCHORS.ACTION_CONFIG, BUILDER_ANCHORS.ACTION_RECIPIENT, BUILDER_ANCHORS.ACTION_STEP];
 var PANE_SEARCH_THRESHOLD = 8;
 var CONFIG_FOCUSABLE_SELECTOR = 'input:not([type="radio"]):not([type="checkbox"]), textarea, [contenteditable="true"]';
 var SMS_TYPES = ["sms", "smsToNumbers"];
@@ -248,7 +250,7 @@ var useReplayFlash = function useReplayFlash(flashSeq) {
   return ref;
 };
 
-var _excluded = ["children", "state", "active", "invalid", "onClick", "className", "dataTestid"];
+var _excluded$1 = ["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; }
 var Token = function Token(_ref) {
@@ -262,7 +264,7 @@ var Token = function Token(_ref) {
     onClick = _ref.onClick,
     className = _ref.className,
     dataTestid = _ref.dataTestid,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   var isInteractive = typeof onClick === "function" && state !== TOKEN_STATE.DISABLED;
   var tokenRef = useReplayFlash(invalid);
   return /*#__PURE__*/jsx("span", _objectSpread$c(_objectSpread$c({
@@ -306,8 +308,13 @@ var isExcludeVerb = function isExcludeVerb(verb) {
 var isMultiValueVerb = function isMultiValueVerb(verb) {
   return String(verb).includes(VERB_TOKENS.MULTI_VALUE);
 };
+
+// Lowers a label so it reads mid-sentence, but never an acronym: "API" and
+// "SMS" are already how they should appear.
 var sentencify = function sentencify(label) {
-  return label ? label.charAt(0).toLowerCase() + label.slice(1) : label;
+  if (!label) return label;
+  if (label.charAt(1) === label.charAt(1).toUpperCase()) return label;
+  return label.charAt(0).toLowerCase() + label.slice(1);
 };
 var copyFor = function copyFor(value, args) {
   return typeof value === "function" ? value(args) : value;
@@ -416,10 +423,43 @@ var channelOption = function channelOption(_ref10) {
     return ((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : option.id) === channel;
   });
 };
-var actionParts = function actionParts(_ref11) {
-  var _actions$actionForNam, _action$recipient, _actions$channelMeta, _find, _find2, _channelMeta$needsRec, _actions$configValueL;
+
+// A step is an extra sentence token a host hangs off an action — its own
+// separator, its own pane — for settings that do not belong in the config pane.
+// Its key shares the action's metadata namespace, so declaring one is how a
+// host hands a field to the step: whoever declares it owns it, and the config
+// pane stops validating it.
+var actionStepsOf = function actionStepsOf(_ref11) {
   var schema = _ref11.schema,
     action = _ref11.action;
+  return actionParts({
+    schema: schema,
+    action: action
+  }).steps || [];
+};
+var stepValueOf = function stepValueOf(_ref12) {
+  var _action$metadata;
+  var action = _ref12.action,
+    step = _ref12.step;
+  return action === null || action === void 0 || (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata[step.key];
+};
+var stepLabelOf = function stepLabelOf(_ref13) {
+  var _find;
+  var action = _ref13.action,
+    step = _ref13.step;
+  var value = stepValueOf({
+    action: action,
+    step: step
+  });
+  return ((_find = (step.options || []).find(function (option) {
+    var _option$value2;
+    return ((_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : option.id) === value;
+  })) === null || _find === void 0 ? void 0 : _find.label) || "";
+};
+var actionParts = function actionParts(_ref14) {
+  var _actions$actionForNam, _action$recipient, _actions$channelMeta, _find2, _find3, _channelMeta$needsRec, _actions$configValueL;
+  var schema = _ref14.schema,
+    action = _ref14.action;
   var actions = (schema === null || schema === void 0 ? void 0 : schema.actions) || {};
   var resolved = action !== null && action !== void 0 && action.channel ? {
     channel: action.channel,
@@ -441,7 +481,7 @@ var actionParts = function actionParts(_ref11) {
     var _recipient$value;
     return ((_recipient$value = recipient.value) !== null && _recipient$value !== void 0 ? _recipient$value : recipient.id) === recipientValue;
   };
-  var recipientLabel = ((_find = (actions.recipients || []).find(matchesRecipient)) === null || _find === void 0 ? void 0 : _find.label) || ((_find2 = ((option === null || option === void 0 ? void 0 : option.recipients) || []).find(matchesRecipient)) === null || _find2 === void 0 ? void 0 : _find2.label) || recipientValue;
+  var recipientLabel = ((_find2 = (actions.recipients || []).find(matchesRecipient)) === null || _find2 === void 0 ? void 0 : _find2.label) || ((_find3 = ((option === null || option === void 0 ? void 0 : option.recipients) || []).find(matchesRecipient)) === null || _find3 === void 0 ? void 0 : _find3.label) || recipientValue;
   return {
     option: option,
     channel: channel,
@@ -460,6 +500,7 @@ var actionParts = function actionParts(_ref11) {
     recipientLabel: recipientLabel,
     configTitle: channelMeta.configTitle || (option === null || option === void 0 ? void 0 : option.configTitle),
     configSubtitle: channelMeta.configSubtitle || (option === null || option === void 0 ? void 0 : option.configSubtitle),
+    steps: channelMeta.steps || (option === null || option === void 0 ? void 0 : option.steps) || [],
     recipientTitle: channelMeta.recipientTitle || (option === null || option === void 0 ? void 0 : option.recipientTitle),
     recipientSubtitle: channelMeta.recipientSubtitle || (option === null || option === void 0 ? void 0 : option.recipientSubtitle)
   };
@@ -468,13 +509,13 @@ var actionParts = function actionParts(_ref11) {
 // 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, {
+var offeredConditionFields = function offeredConditionFields(_ref15) {
+  var _ref16, _schema$conditions$fi, _schema$conditions3, _schema$conditions3$f, _schema$conditions4;
+  var schema = _ref15.schema,
+    rule = _ref15.rule;
+  return (_ref16 = (_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 : [];
+  })) !== 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 && _ref16 !== void 0 ? _ref16 : [];
 };
 var hasTrigger = function hasTrigger(rule) {
   return !isEmpty((rule === null || rule === void 0 ? void 0 : rule.triggers) || []);
@@ -488,50 +529,68 @@ var isTriggerEnabled = function isTriggerEnabled(schema) {
   var _schema$triggers2;
   return (schema === null || schema === void 0 || (_schema$triggers2 = schema.triggers) === null || _schema$triggers2 === void 0 ? void 0 : _schema$triggers2.enabled) !== false;
 };
-var isTriggerSatisfied = function isTriggerSatisfied(_ref14) {
-  var rule = _ref14.rule,
-    schema = _ref14.schema;
+var isTriggerSatisfied = function isTriggerSatisfied(_ref17) {
+  var rule = _ref17.rule,
+    schema = _ref17.schema;
   return !isTriggerEnabled(schema) || hasTrigger(rule);
 };
-var hasRequiredConditions = function hasRequiredConditions(_ref15) {
+var hasRequiredConditions = function hasRequiredConditions(_ref18) {
   var _schema$conditions5;
-  var rule = _ref15.rule,
-    schema = _ref15.schema;
+  var rule = _ref18.rule,
+    schema = _ref18.schema;
   return (schema === null || schema === void 0 || (_schema$conditions5 = schema.conditions) === null || _schema$conditions5 === void 0 ? void 0 : _schema$conditions5.allowEmpty) === false ? isNotEmpty((rule === null || rule === void 0 ? void 0 : rule.conditions) || []) : true;
 };
-var isRuleComplete = function isRuleComplete(_ref16) {
-  var rule = _ref16.rule,
-    schema = _ref16.schema;
+var hasUnansweredStep = function hasUnansweredStep(_ref19) {
+  var rule = _ref19.rule,
+    schema = _ref19.schema;
+  return ((rule === null || rule === void 0 ? void 0 : rule.actions) || []).some(function (action) {
+    return actionStepsOf({
+      schema: schema,
+      action: action
+    }).some(function (step) {
+      return step.required && !stepValueOf({
+        action: action,
+        step: step
+      });
+    });
+  });
+};
+var isRuleComplete = function isRuleComplete(_ref20) {
+  var rule = _ref20.rule,
+    schema = _ref20.schema;
   return isTriggerSatisfied({
     rule: rule,
     schema: schema
   }) && hasRequiredConditions({
     rule: rule,
     schema: schema
-  }) && hasAction(rule);
+  }) && hasAction(rule) && !hasUnansweredStep({
+    rule: rule,
+    schema: schema
+  });
 };
-var scopeOptionFor = function scopeOptionFor(_ref17) {
+var scopeOptionFor = function scopeOptionFor(_ref21) {
   var _item$value, _schema$scope;
-  var schema = _ref17.schema,
-    item = _ref17.item;
+  var schema = _ref21.schema,
+    item = _ref21.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(_ref18) {
-  var _ref19, _item$phoneFields, _scopeOptionFor;
-  var schema = _ref18.schema,
-    item = _ref18.item;
-  return (_ref19 = (_item$phoneFields = item === null || item === void 0 ? void 0 : item.phoneFields) !== null && _item$phoneFields !== void 0 ? _item$phoneFields : (_scopeOptionFor = scopeOptionFor({
+var scopePhoneFields = function scopePhoneFields(_ref22) {
+  var _ref23, _item$phoneFields, _scopeOptionFor;
+  var schema = _ref22.schema,
+    item = _ref22.item;
+  return (_ref23 = (_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 && _ref19 !== void 0 ? _ref19 : null;
+  })) === null || _scopeOptionFor === void 0 ? void 0 : _scopeOptionFor.phoneFields) !== null && _ref23 !== void 0 ? _ref23 : null;
 };
-var effectiveScopePhoneField = function effectiveScopePhoneField(_ref20) {
-  var schema = _ref20.schema,
-    item = _ref20.item;
+var effectiveScopePhoneField = function effectiveScopePhoneField(_ref24) {
+  var schema = _ref24.schema,
+    item = _ref24.item;
   if (item !== null && item !== void 0 && item.phoneField) return item.phoneField;
   var phoneFields = scopePhoneFields({
     schema: schema,
@@ -539,14 +598,14 @@ var effectiveScopePhoneField = function effectiveScopePhoneField(_ref20) {
   });
   return (phoneFields === null || phoneFields === void 0 ? void 0 : phoneFields.length) === 1 ? phoneFields[0].value : undefined;
 };
-var invalidScopeIndexes = function invalidScopeIndexes(_ref21) {
+var invalidScopeIndexes = function invalidScopeIndexes(_ref25) {
   var _scope$requiresPhone;
-  var rule = _ref21.rule,
-    schema = _ref21.schema;
+  var rule = _ref25.rule,
+    schema = _ref25.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 _ref22, _item$hasPhoneField;
+    var _ref26, _item$hasPhoneField;
     var option = scopeOptionFor({
       schema: schema,
       item: item
@@ -555,15 +614,15 @@ var invalidScopeIndexes = function invalidScopeIndexes(_ref21) {
       schema: schema,
       item: item
     });
-    var hasPhoneField = (_ref22 = (_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 && _ref22 !== void 0 ? _ref22 : phoneFields ? phoneFields.length > 0 : undefined;
+    var hasPhoneField = (_ref26 = (_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 && _ref26 !== void 0 ? _ref26 : phoneFields ? phoneFields.length > 0 : undefined;
     if (hasPhoneField === false) indexes.push(index);
     return indexes;
   }, []);
 };
-var invalidScopePhoneFieldIndexes = function invalidScopePhoneFieldIndexes(_ref23) {
+var invalidScopePhoneFieldIndexes = function invalidScopePhoneFieldIndexes(_ref27) {
   var _scope$requiresPhone2;
-  var rule = _ref23.rule,
-    schema = _ref23.schema;
+  var rule = _ref27.rule,
+    schema = _ref27.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) {
@@ -600,9 +659,9 @@ var minutesToParts = function minutesToParts(minutes) {
     unit: "minutes"
   };
 };
-var partsToMinutes = function partsToMinutes(_ref24) {
-  var value = _ref24.value,
-    unit = _ref24.unit;
+var partsToMinutes = function partsToMinutes(_ref28) {
+  var value = _ref28.value,
+    unit = _ref28.unit;
   return (
     // eslint-disable-next-line security/detect-object-injection
     (Number(value) || 0) * (UNIT_MINUTES[unit] || 1)
@@ -652,15 +711,49 @@ var joinTypeFor = function joinTypeFor(mode) {
 var recipientStorageField = function recipientStorageField(field) {
   return field === RECIPIENT_STORAGE_FIELDS.emails ? RECIPIENT_STORAGE_FIELDS.emails : RECIPIENT_STORAGE_FIELDS.value;
 };
+
+// Which metadata fields the recipient pane renders, and therefore owns: no
+// other pane may block Continue on them. Canvas and ConfigPane both ask here
+// so the two lists cannot drift apart.
+var recipientOwnedFields = function recipientOwnedFields(_ref29) {
+  var _actions$actionForNam2, _action$recipient2, _actions$renderRecipi, _actions$renderRecipi2, _actions$optionForNam, _actions$optionForCha;
+  var schema = _ref29.schema,
+    action = _ref29.action,
+    name = _ref29.name;
+  var actions = (schema === null || schema === void 0 ? void 0 : schema.actions) || {};
+  var resolved = ((_actions$actionForNam2 = actions.actionForName) === null || _actions$actionForNam2 === void 0 ? void 0 : _actions$actionForNam2.call(actions, action === null || action === void 0 ? void 0 : action.name)) || {};
+  var channel = (action === null || action === void 0 ? void 0 : action.channel) || resolved.channel;
+  // A recipient the host implies from the action name counts just as much as
+  // one the user picked, or the pane it owns cannot be excluded.
+  var recipient = (_action$recipient2 = action === null || action === void 0 ? void 0 : action.recipient) !== null && _action$recipient2 !== void 0 ? _action$recipient2 : resolved.recipient;
+  var rendersEmails = !!((_actions$renderRecipi = actions.renderRecipientEditor) !== null && _actions$renderRecipi !== void 0 && _actions$renderRecipi.call(actions, {
+    channel: channel,
+    name: name,
+    action: action
+  })) || !!((_actions$renderRecipi2 = actions.renderRecipientField) !== null && _actions$renderRecipi2 !== void 0 && _actions$renderRecipi2.call(actions, {
+    channel: channel,
+    name: name,
+    action: action,
+    recipient: recipient
+  }));
+  var recipientConfig = (actions.options || []).flatMap(function (option) {
+    return option.recipients || [];
+  }).concat(actions.recipients || []).find(function (item) {
+    var _item$value2;
+    return ((_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : item.id) === recipient;
+  });
+  var flatOption = ((_actions$optionForNam = actions.optionForName) === null || _actions$optionForNam === void 0 ? void 0 : _actions$optionForNam.call(actions, action === null || action === void 0 ? void 0 : action.name)) || ((_actions$optionForCha = actions.optionForChannel) === null || _actions$optionForCha === void 0 ? void 0 : _actions$optionForCha.call(actions, channel));
+  return [].concat(_toConsumableArray(rendersEmails ? [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] : []));
+};
 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(_ref25) {
+var valueAt = function valueAt(_ref30) {
   var _values$key;
-  var values = _ref25.values,
-    key = _ref25.key;
+  var values = _ref30.values,
+    key = _ref30.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) {
@@ -683,11 +776,11 @@ var fieldKeysFromSchema = function fieldKeysFromSchema() {
 };
 var valuesToRuleModel = function valuesToRuleModel() {
   var _valueAt, _conditions$;
-  var _ref26 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref26$values = _ref26.values,
-    values = _ref26$values === void 0 ? {} : _ref26$values,
-    _ref26$schema = _ref26.schema,
-    schema = _ref26$schema === void 0 ? {} : _ref26$schema;
+  var _ref31 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref31$values = _ref31.values,
+    values = _ref31$values === void 0 ? {} : _ref31$values,
+    _ref31$schema = _ref31.schema,
+    schema = _ref31$schema === void 0 ? {} : _ref31$schema;
   var keys = fieldKeysFromSchema(schema);
   var conditions = asArray(valueAt({
     values: values,
@@ -731,42 +824,42 @@ var valuesToRuleModel = function valuesToRuleModel() {
     }))
   };
 };
-var setTriggers = function setTriggers(_ref27) {
-  var schema = _ref27.schema,
-    triggers = _ref27.triggers;
+var setTriggers = function setTriggers(_ref32) {
+  var schema = _ref32.schema,
+    triggers = _ref32.triggers;
   return {
     path: "".concat(fieldKeysFromSchema(schema).triggers, ".value"),
     value: triggers
   };
 };
-var setPerformer = function setPerformer(_ref28) {
-  var schema = _ref28.schema,
-    performer = _ref28.performer;
+var setPerformer = function setPerformer(_ref33) {
+  var schema = _ref33.schema,
+    performer = _ref33.performer;
   return {
     path: "".concat(fieldKeysFromSchema(schema).performer, ".value"),
     value: performer
   };
 };
-var setActions = function setActions(_ref29) {
-  var schema = _ref29.schema,
-    actions = _ref29.actions;
+var setActions = function setActions(_ref34) {
+  var schema = _ref34.schema,
+    actions = _ref34.actions;
   return {
     path: "".concat(fieldKeysFromSchema(schema).actions, ".value"),
     value: actions
   };
 };
-var setConditions = function setConditions(_ref30) {
-  var schema = _ref30.schema,
-    conditions = _ref30.conditions;
+var setConditions = function setConditions(_ref35) {
+  var schema = _ref35.schema,
+    conditions = _ref35.conditions;
   return {
     path: "".concat(fieldKeysFromSchema(schema).conditions, ".value"),
     value: conditions
   };
 };
-var setConditionMode = function setConditionMode(_ref31) {
-  var schema = _ref31.schema,
-    conditions = _ref31.conditions,
-    joinType = _ref31.joinType;
+var setConditionMode = function setConditionMode(_ref36) {
+  var schema = _ref36.schema,
+    conditions = _ref36.conditions,
+    joinType = _ref36.joinType;
   return setConditions({
     schema: schema,
     conditions: conditions.map(function (condition) {
@@ -774,34 +867,34 @@ var setConditionMode = function setConditionMode(_ref31) {
     })
   });
 };
-var setDelay = function setDelay(_ref32) {
-  var schema = _ref32.schema,
-    delay = _ref32.delay;
+var setDelay = function setDelay(_ref37) {
+  var schema = _ref37.schema,
+    delay = _ref37.delay;
   return {
     path: "".concat(fieldKeysFromSchema(schema).delay, ".value"),
     value: delay !== null && delay !== void 0 ? delay : {}
   };
 };
-var setActive = function setActive(_ref33) {
-  var schema = _ref33.schema,
-    active = _ref33.active;
+var setActive = function setActive(_ref38) {
+  var schema = _ref38.schema,
+    active = _ref38.active;
   return {
     path: "".concat(fieldKeysFromSchema(schema).status, ".value"),
     value: active ? STATUS_KEYS.ENABLED : STATUS_KEYS.DISABLED
   };
 };
-var setScope = function setScope(_ref34) {
-  var schema = _ref34.schema,
-    scope = _ref34.scope;
+var setScope = function setScope(_ref39) {
+  var schema = _ref39.schema,
+    scope = _ref39.scope;
   return {
     path: "".concat(fieldKeysFromSchema(schema).scope, ".value"),
     value: scope
   };
 };
-var removeArrayItem = function removeArrayItem(_ref35) {
-  var values = _ref35.values,
-    fieldKey = _ref35.fieldKey,
-    index = _ref35.index;
+var removeArrayItem = function removeArrayItem(_ref40) {
+  var values = _ref40.values,
+    fieldKey = _ref40.fieldKey,
+    index = _ref40.index;
   var list = asArray(valueAt({
     values: values,
     key: fieldKey
@@ -828,9 +921,9 @@ var removeArrayItem = function removeArrayItem(_ref35) {
   }
   return result;
 };
-var clearArrayItems = function clearArrayItems(_ref36) {
-  var values = _ref36.values,
-    fieldKey = _ref36.fieldKey;
+var clearArrayItems = function clearArrayItems(_ref41) {
+  var values = _ref41.values,
+    fieldKey = _ref41.fieldKey;
   var list = asArray(valueAt({
     values: values,
     key: fieldKey
@@ -1408,7 +1501,8 @@ var ActionRow = function ActionRow(_ref) {
     configValuePlaceholder = _actionParts.configValuePlaceholder,
     paramKind = _actionParts.paramKind,
     valueNoun = _actionParts.valueNoun,
-    valueNounPlural = _actionParts.valueNounPlural;
+    valueNounPlural = _actionParts.valueNounPlural,
+    steps = _actionParts.steps;
 
   // A separator-less action still needs a value slot when the host declares a
   // placeholder for it, otherwise its chosen value never reaches the canvas.
@@ -1490,6 +1584,32 @@ var ActionRow = function ActionRow(_ref) {
       children: recipient ? String(recipientLabel).toLowerCase() : t("neetoRules.builder.selectRecipient")
     })]
   }, "recipient") : null;
+  var stepTokens = steps.map(function (step) {
+    var stepLabel = stepLabelOf({
+      action: action,
+      step: step
+    });
+    var token = {
+      type: BUILDER_ANCHORS.ACTION_STEP,
+      index: index,
+      stepKey: step.key
+    };
+    return /*#__PURE__*/jsxs(Fragment$1, {
+      children: [step.separator && /*#__PURE__*/jsx("span", {
+        className: "mb-fixed",
+        children: step.separator
+      }), /*#__PURE__*/jsx(Token, {
+        active: isActive(token),
+        dataTestid: "action-step-".concat(step.key, "-").concat(index),
+        invalid: isInvalid(token),
+        state: stepLabel ? TOKEN_STATE.FILLED : TOKEN_STATE.MUTED,
+        onClick: handleToken && function () {
+          return handleToken(token);
+        },
+        children: (step.preserveCase ? stepLabel : sentencify(stepLabel)) || sentencify(step.placeholder)
+      })]
+    }, "step-".concat(step.key));
+  });
   return /*#__PURE__*/jsxs("div", {
     className: classNames("mb-row mb-row-draggable", {
       clearing: clearing
@@ -1563,7 +1683,7 @@ var ActionRow = function ActionRow(_ref) {
             size: 14
           }), configLabel]
         })]
-      }), recipientSeparator ? [recipientToken, configToken] : [configToken, recipientToken]]
+      }), recipientSeparator ? [recipientToken, configToken] : [configToken, recipientToken], stepTokens]
     }), /*#__PURE__*/jsxs("div", {
       className: "mb-row-actions",
       children: [handleAddAction && /*#__PURE__*/jsx(Button, {
@@ -1857,6 +1977,7 @@ var WhenBlock = function WhenBlock(_ref) {
   });
 };
 
+var _excluded = ["type"];
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var usePaneCascade = function usePaneCascade(schema) {
@@ -1884,12 +2005,13 @@ var usePaneCascade = function usePaneCascade(schema) {
   var openPane = useCallback(function (token) {
     var type = TOKEN_TO_PANEL_TYPE[token === null || token === void 0 ? void 0 : token.type];
     if (!type) return;
+    var anchor = token.type,
+      rest = _objectWithoutProperties(token, _excluded);
     openType({
       type: type,
-      data: {
-        anchor: token.type,
-        index: token.index
-      }
+      data: _objectSpread$5({
+        anchor: anchor
+      }, rest)
     });
   }, [openType]);
   return {
@@ -2010,6 +2132,52 @@ var triggerValue = function triggerValue(option) {
   var _ref, _option$eventValue;
   return (_ref = (_option$eventValue = option.eventValue) !== null && _option$eventValue !== void 0 ? _option$eventValue : option.value) !== null && _ref !== void 0 ? _ref : option.id;
 };
+var stepAt = function stepAt(_ref2) {
+  var schema = _ref2.schema,
+    rule = _ref2.rule,
+    index = _ref2.index,
+    stepKey = _ref2.stepKey;
+  return actionStepsOf({
+    schema: schema,
+    action: actionAt({
+      rule: rule,
+      index: index
+    })
+  }).find(function (step) {
+    return step.key === stepKey;
+  });
+};
+
+// Panes hand off in sentence order — config, recipient, then each host step —
+// so every "what comes next" question resolves through this one list.
+var stepTargetAfter = function stepTargetAfter(_ref3) {
+  var schema = _ref3.schema,
+    rule = _ref3.rule,
+    index = _ref3.index,
+    stepKey = _ref3.stepKey;
+  var steps = actionStepsOf({
+    schema: schema,
+    action: actionAt({
+      rule: rule,
+      index: index
+    })
+  });
+  var at = stepKey ? steps.findIndex(function (step) {
+    return step.key === stepKey;
+  }) : -1;
+  // An unknown key means the step is gone from under the pane; restarting the
+  // cascade at the first step would be worse than ending it.
+  if (stepKey && at === -1) return null;
+  var next = steps[at + 1];
+  return next ? {
+    type: BUILDER_PANEL_TYPES.ACTION_STEP,
+    data: {
+      index: index,
+      stepKey: next.key,
+      anchor: BUILDER_ANCHORS.ACTION_STEP
+    }
+  } : null;
+};
 var optionValue = function optionValue(option) {
   var _option$value;
   return (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : option.id;
@@ -2035,9 +2203,9 @@ var groupByCategory = function groupByCategory(options) {
   });
   return groups;
 };
-var conditionAt = function conditionAt(_ref2) {
-  var rule = _ref2.rule,
-    index = _ref2.index;
+var conditionAt = function conditionAt(_ref4) {
+  var rule = _ref4.rule,
+    index = _ref4.index;
   return (
     // eslint-disable-next-line security/detect-object-injection
     rule.conditions[index] || {}
@@ -2045,63 +2213,63 @@ var conditionAt = function conditionAt(_ref2) {
 };
 
 // eslint-disable-next-line security/detect-object-injection
-var actionAt = function actionAt(_ref3) {
-  var rule = _ref3.rule,
-    index = _ref3.index;
+var actionAt = function actionAt(_ref5) {
+  var rule = _ref5.rule,
+    index = _ref5.index;
   return rule.actions[index] || {};
 };
 
 // eslint-disable-next-line security/detect-object-injection
-var scopeItemAt = function scopeItemAt(_ref4) {
+var scopeItemAt = function scopeItemAt(_ref6) {
   var _rule$scope;
-  var rule = _ref4.rule,
-    index = _ref4.index;
+  var rule = _ref6.rule,
+    index = _ref6.index;
   return ((_rule$scope = rule.scope) === null || _rule$scope === void 0 ? void 0 : _rule$scope[index]) || {};
 };
 var scopeItemLabel = function scopeItemLabel(item) {
   return (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || String(item !== null && item !== void 0 ? item : "");
 };
-var findField = function findField(_ref5) {
+var findField = function findField(_ref7) {
   var _schema$conditions;
-  var schema = _ref5.schema,
-    value = _ref5.value;
+  var schema = _ref7.schema,
+    value = _ref7.value;
   return (((_schema$conditions = schema.conditions) === null || _schema$conditions === void 0 ? void 0 : _schema$conditions.fields) || []).find(function (field) {
     return optionValue(field) === value;
   });
 };
-var findActionOption = function findActionOption(_ref6) {
+var findActionOption = function findActionOption(_ref8) {
   var _schema$actions;
-  var schema = _ref6.schema,
-    name = _ref6.name;
+  var schema = _ref8.schema,
+    name = _ref8.name;
   return (((_schema$actions = schema.actions) === null || _schema$actions === void 0 ? void 0 : _schema$actions.options) || []).find(function (option) {
     return optionValue(option) === name;
   });
 };
-var channelOf = function channelOf(_ref7) {
+var channelOf = function channelOf(_ref9) {
   var _schema$actions2, _schema$actions2$acti;
-  var schema = _ref7.schema,
-    action = _ref7.action;
+  var schema = _ref9.schema,
+    action = _ref9.action;
   return (action === null || action === void 0 ? void 0 : action.channel) || ((_schema$actions2 = schema.actions) === null || _schema$actions2 === void 0 || (_schema$actions2$acti = _schema$actions2.actionForName) === null || _schema$actions2$acti === void 0 || (_schema$actions2$acti = _schema$actions2$acti.call(_schema$actions2, action === null || action === void 0 ? void 0 : action.name)) === null || _schema$actions2$acti === void 0 ? void 0 : _schema$actions2$acti.channel);
 };
-var recipientOf = function recipientOf(_ref8) {
+var recipientOf = function recipientOf(_ref0) {
   var _action$recipient, _schema$actions3, _schema$actions3$acti;
-  var schema = _ref8.schema,
-    action = _ref8.action;
+  var schema = _ref0.schema,
+    action = _ref0.action;
   return (_action$recipient = action === null || action === void 0 ? void 0 : action.recipient) !== null && _action$recipient !== void 0 ? _action$recipient : (_schema$actions3 = schema.actions) === null || _schema$actions3 === void 0 || (_schema$actions3$acti = _schema$actions3.actionForName) === null || _schema$actions3$acti === void 0 || (_schema$actions3$acti = _schema$actions3$acti.call(_schema$actions3, action === null || action === void 0 ? void 0 : action.name)) === null || _schema$actions3$acti === void 0 ? void 0 : _schema$actions3$acti.recipient;
 };
-var channelMetaOf = function channelMetaOf(_ref9) {
+var channelMetaOf = function channelMetaOf(_ref1) {
   var _schema$actions4;
-  var schema = _ref9.schema,
-    action = _ref9.action;
+  var schema = _ref1.schema,
+    action = _ref1.action;
   return ((_schema$actions4 = schema.actions) === null || _schema$actions4 === void 0 || (_schema$actions4 = _schema$actions4.channelMeta) === null || _schema$actions4 === void 0 ? void 0 : _schema$actions4[channelOf({
     schema: schema,
     action: action
   })]) || {};
 };
-var actionHasConfig = function actionHasConfig(_ref0) {
+var actionHasConfig = function actionHasConfig(_ref10) {
   var _schema$actions5, _schema$actions6;
-  var schema = _ref0.schema,
-    action = _ref0.action;
+  var schema = _ref10.schema,
+    action = _ref10.action;
   var meta = channelMetaOf({
     schema: schema,
     action: action
@@ -2115,10 +2283,10 @@ var actionHasConfig = function actionHasConfig(_ref0) {
   if ((_schema$actions5 = schema.actions) !== null && _schema$actions5 !== void 0 && _schema$actions5.hasConfig) return schema.actions.hasConfig(action);
   return !!((_schema$actions6 = schema.actions) !== null && _schema$actions6 !== void 0 && _schema$actions6.renderConfig);
 };
-var recipientsFor = function recipientsFor(_ref1) {
+var recipientsFor = function recipientsFor(_ref11) {
   var _schema$actions7, _schema$actions8;
-  var schema = _ref1.schema,
-    action = _ref1.action;
+  var schema = _ref11.schema,
+    action = _ref11.action;
   var channel = channelOf({
     schema: schema,
     action: action
@@ -2133,11 +2301,11 @@ var recipientsFor = function recipientsFor(_ref1) {
   if (option !== null && option !== void 0 && option.recipients) return option.recipients;
   return ((_schema$actions8 = schema.actions) === null || _schema$actions8 === void 0 ? void 0 : _schema$actions8.recipients) || [];
 };
-var nextTriggers = function nextTriggers(_ref10) {
+var nextTriggers = function nextTriggers(_ref12) {
   var _schema$triggers;
-  var schema = _ref10.schema,
-    rule = _ref10.rule,
-    value = _ref10.value;
+  var schema = _ref12.schema,
+    rule = _ref12.rule,
+    value = _ref12.value;
   if ((_schema$triggers = schema.triggers) !== null && _schema$triggers !== void 0 && _schema$triggers.multi) {
     var names = pluck("name", rule.triggers);
     return names.includes(value) ? removeBy({
@@ -2150,12 +2318,12 @@ var nextTriggers = function nextTriggers(_ref10) {
     name: value
   })];
 };
-var nextConditionAt = function nextConditionAt(_ref11) {
+var nextConditionAt = function nextConditionAt(_ref13) {
   var _field$allowMatching;
-  var schema = _ref11.schema,
-    rule = _ref11.rule,
-    index = _ref11.index,
-    value = _ref11.value;
+  var schema = _ref13.schema,
+    rule = _ref13.rule,
+    index = _ref13.index,
+    value = _ref13.value;
   var field = findField({
     schema: schema,
     value: value
@@ -2174,12 +2342,12 @@ var nextConditionAt = function nextConditionAt(_ref11) {
     metadata: {}
   });
 };
-var nextActionAt = function nextActionAt(_ref12) {
+var nextActionAt = function nextActionAt(_ref14) {
   var _schema$actions9;
-  var schema = _ref12.schema,
-    rule = _ref12.rule,
-    index = _ref12.index,
-    value = _ref12.value;
+  var schema = _ref14.schema,
+    rule = _ref14.rule,
+    index = _ref14.index,
+    value = _ref14.value;
   if (!((_schema$actions9 = schema.actions) !== null && _schema$actions9 !== void 0 && _schema$actions9.resolveName)) {
     var option = findActionOption({
       schema: schema,
@@ -2237,11 +2405,11 @@ var nextActionAt = function nextActionAt(_ref12) {
     metadata: channelChanged ? {} : prev.metadata
   });
 };
-var appendScopeItem = function appendScopeItem(_ref13) {
+var appendScopeItem = function appendScopeItem(_ref15) {
   var _sc$requiresPhone;
-  var schema = _ref13.schema,
-    rule = _ref13.rule,
-    value = _ref13.value;
+  var schema = _ref15.schema,
+    rule = _ref15.rule,
+    value = _ref15.value;
   var sc = schema.scope || {};
   var option = (sc.options || []).find(function (candidate) {
     return optionValue(candidate) === value;
@@ -2258,12 +2426,12 @@ var appendScopeItem = function appendScopeItem(_ref13) {
     phoneField: phoneFields[0].value
   }) : option;
 };
-var nextActionRecipientAt = function nextActionRecipientAt(_ref14) {
+var nextActionRecipientAt = function nextActionRecipientAt(_ref16) {
   var _schema$actions1;
-  var schema = _ref14.schema,
-    rule = _ref14.rule,
-    index = _ref14.index,
-    value = _ref14.value;
+  var schema = _ref16.schema,
+    rule = _ref16.rule,
+    index = _ref16.index,
+    value = _ref16.value;
   var prev = actionAt({
     rule: rule,
     index: index
@@ -2280,12 +2448,13 @@ var nextActionRecipientAt = function nextActionRecipientAt(_ref14) {
     }) : value
   });
 };
-var descriptorFor = function descriptorFor(_ref15) {
+var descriptorFor = function descriptorFor(_ref17) {
   var _schema$actor2;
-  var anchor = _ref15.anchor,
-    schema = _ref15.schema,
-    rule = _ref15.rule,
-    index = _ref15.index;
+  var anchor = _ref17.anchor,
+    schema = _ref17.schema,
+    rule = _ref17.rule,
+    index = _ref17.index,
+    stepKey = _ref17.stepKey;
   switch (anchor) {
     case BUILDER_ANCHORS.TRIGGER_ADD:
     case BUILDER_ANCHORS.TRIGGER_REPLACE:
@@ -2481,6 +2650,29 @@ var descriptorFor = function descriptorFor(_ref15) {
           cascade: true
         };
       }
+    case BUILDER_ANCHORS.ACTION_STEP:
+      {
+        var _action = actionAt({
+          rule: rule,
+          index: index
+        });
+        var step = stepAt({
+          schema: schema,
+          rule: rule,
+          index: index,
+          stepKey: stepKey
+        }) || {};
+        return {
+          title: step.title || t("neetoRules.builder.panes.stepTitle"),
+          subtitle: step.subtitle,
+          options: normalizeOptions(step.options),
+          selectedValues: [stepValueOf({
+            action: _action,
+            step: step
+          })],
+          cascade: true
+        };
+      }
     case BUILDER_ANCHORS.SCOPE:
       {
         var _sc$requiresPhone2;
@@ -2550,13 +2742,14 @@ var descriptorFor = function descriptorFor(_ref15) {
       };
   }
 };
-var commitFor = function commitFor(_ref16) {
-  var anchor = _ref16.anchor,
-    schema = _ref16.schema,
-    rule = _ref16.rule,
-    index = _ref16.index,
-    value = _ref16.value,
-    helpers = _ref16.helpers;
+var commitFor = function commitFor(_ref18) {
+  var anchor = _ref18.anchor,
+    schema = _ref18.schema,
+    rule = _ref18.rule,
+    index = _ref18.index,
+    stepKey = _ref18.stepKey,
+    value = _ref18.value,
+    helpers = _ref18.helpers;
   var setTriggers = helpers.setTriggers,
     setPerformer = helpers.setPerformer,
     setConditionMode = helpers.setConditionMode,
@@ -2627,6 +2820,11 @@ var commitFor = function commitFor(_ref16) {
         }));
         return "stay";
       }
+    case BUILDER_ANCHORS.ACTION_STEP:
+      {
+        setFieldValue("".concat(fieldKeys.actions, ".value.").concat(index, ".metadata.").concat(stepKey), value);
+        return "stay";
+      }
     case BUILDER_ANCHORS.SCOPE:
       {
         var key = fieldKeys.scope;
@@ -2656,13 +2854,14 @@ var commitFor = function commitFor(_ref16) {
       return "close";
   }
 };
-var continueTargetFor = function continueTargetFor(_ref17) {
+var continueTargetFor = function continueTargetFor(_ref19) {
   var _schema$actor3;
-  var anchor = _ref17.anchor,
-    schema = _ref17.schema,
-    rule = _ref17.rule,
-    index = _ref17.index,
-    configPending = _ref17.configPending;
+  var anchor = _ref19.anchor,
+    schema = _ref19.schema,
+    rule = _ref19.rule,
+    index = _ref19.index,
+    stepKey = _ref19.stepKey,
+    configPending = _ref19.configPending;
   switch (anchor) {
     case BUILDER_ANCHORS.TRIGGER_ADD:
     case BUILDER_ANCHORS.TRIGGER_REPLACE:
@@ -2721,56 +2920,74 @@ var continueTargetFor = function continueTargetFor(_ref17) {
 
         // Reached here only because the action has no config yet — its name is
         // still unresolved — so the recipient pane owes us that step afterwards.
-        return channelMetaOf({
+        if (channelMetaOf({
           schema: schema,
           action: action
-        }).needsRecipient ? {
-          type: BUILDER_PANEL_TYPES.RECIPIENT,
-          data: {
-            index: index,
-            anchor: BUILDER_ANCHORS.ACTION_RECIPIENT,
-            configPending: true
-          }
-        } : null;
+        }).needsRecipient) {
+          return {
+            type: BUILDER_PANEL_TYPES.RECIPIENT,
+            data: {
+              index: index,
+              anchor: BUILDER_ANCHORS.ACTION_RECIPIENT,
+              configPending: true
+            }
+          };
+        }
+        return stepTargetAfter({
+          schema: schema,
+          rule: rule,
+          index: index
+        });
       }
     case BUILDER_ANCHORS.ACTION_RECIPIENT:
       {
-        // Only chain onward when config was skipped on the way in; arriving from
-        // the config pane or from the token means this is the last step.
-        var _action = actionAt({
+        // Only chain back to config when it was skipped on the way in; arriving
+        // from the config pane or from the token means config is already done.
+        var _action2 = actionAt({
           rule: rule,
           index: index
         });
         return configPending && actionHasConfig({
           schema: schema,
-          action: _action
+          action: _action2
         }) ? {
           type: BUILDER_PANEL_TYPES.ACTION_CONFIG,
           data: {
             index: index,
             anchor: BUILDER_ANCHORS.ACTION_CONFIG
           }
-        } : null;
+        } : stepTargetAfter({
+          schema: schema,
+          rule: rule,
+          index: index
+        });
       }
+    case BUILDER_ANCHORS.ACTION_STEP:
+      return stepTargetAfter({
+        schema: schema,
+        rule: rule,
+        index: index,
+        stepKey: stepKey
+      });
     default:
       return null;
   }
 };
-var replaceAt = function replaceAt(_ref18) {
-  var list = _ref18.list,
-    index = _ref18.index,
-    item = _ref18.item;
+var replaceAt = function replaceAt(_ref20) {
+  var list = _ref20.list,
+    index = _ref20.index,
+    item = _ref20.item;
   var next = _toConsumableArray(list);
   // eslint-disable-next-line security/detect-object-injection
   next[index] = item;
   return next;
 };
-var applyPreview = function applyPreview(_ref19) {
-  var rule = _ref19.rule,
-    schema = _ref19.schema,
-    anchor = _ref19.anchor,
-    index = _ref19.index,
-    value = _ref19.value;
+var applyPreview = function applyPreview(_ref21) {
+  var rule = _ref21.rule,
+    schema = _ref21.schema,
+    anchor = _ref21.anchor,
+    index = _ref21.index,
+    value = _ref21.value;
   switch (anchor) {
     case BUILDER_ANCHORS.TRIGGER_ADD:
     case BUILDER_ANCHORS.TRIGGER_REPLACE:
@@ -2954,33 +3171,25 @@ 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, _schema$actions6, _schema$actions7;
     var type = _ref4.type,
-      index = _ref4.index;
+      index = _ref4.index,
+      stepKey = _ref4.stepKey;
     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
     var actionItem = rule.actions[index] || {};
-    var channel = actionItem.channel || ((_schema$actions = schema.actions) === null || _schema$actions === void 0 || (_schema$actions$actio = _schema$actions.actionForName) === null || _schema$actions$actio === void 0 || (_schema$actions$actio = _schema$actions$actio.call(_schema$actions, actionItem.name)) === null || _schema$actions$actio === void 0 ? void 0 : _schema$actions$actio.channel);
-    var hasRecipientEditor = !!((_schema$actions2 = schema.actions) !== null && _schema$actions2 !== void 0 && (_schema$actions2$rend = _schema$actions2.renderRecipientEditor) !== null && _schema$actions2$rend !== void 0 && _schema$actions2$rend.call(_schema$actions2, {
-      channel: channel,
-      name: actionMeta,
-      action: actionItem
-    }));
-    var hasRecipientField = !!((_schema$actions3 = schema.actions) !== null && _schema$actions3 !== void 0 && (_schema$actions3$rend = _schema$actions3.renderRecipientField) !== null && _schema$actions3$rend !== void 0 && _schema$actions3$rend.call(_schema$actions3, {
-      channel: channel,
-      recipient: actionItem.recipient,
-      name: actionMeta,
+    var steps = actionStepsOf({
+      schema: schema,
       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 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] : []));
+    var stepKeys = steps.map(function (step) {
+      return step.key;
+    });
+    var recipientFields = recipientOwnedFields({
+      schema: schema,
+      action: actionItem,
+      name: actionMeta
+    });
     switch (type) {
       case BUILDER_ANCHORS.TRIGGER_ACTOR:
         {
@@ -3011,8 +3220,20 @@ var Canvas = function Canvas(_ref) {
       case BUILDER_ANCHORS.ACTION_CONFIG:
         return hasErrorAt({
           prefix: actionMeta,
-          exclude: recipientFields
+          exclude: [].concat(_toConsumableArray(recipientFields), _toConsumableArray(stepKeys))
         });
+      case BUILDER_ANCHORS.ACTION_STEP:
+        {
+          var step = steps.find(function (item) {
+            return item.key === stepKey;
+          });
+          return hasErrorAt({
+            prefix: "".concat(actionMeta, ".").concat(stepKey)
+          }) || !!(step !== null && step !== void 0 && step.required) && !stepValueOf({
+            action: actionItem,
+            step: step
+          });
+        }
       case BUILDER_ANCHORS.ACTION_RECIPIENT:
         return hasErrorAt({
           prefix: "".concat(fieldKeys.actions, ".value.").concat(index, ".name")
@@ -3644,7 +3865,8 @@ var ConfigPane = function ConfigPane(_ref) {
     mediumLabel = _actionParts.mediumLabel,
     needsRecipient = _actionParts.needsRecipient,
     configTitle = _actionParts.configTitle,
-    configSubtitle = _actionParts.configSubtitle;
+    configSubtitle = _actionParts.configSubtitle,
+    steps = _actionParts.steps;
   var name = "".concat(base, ".metadata");
   var flatOption = ((_schema$actions = schema.actions) === null || _schema$actions === void 0 || (_schema$actions$optio = _schema$actions.optionForName) === null || _schema$actions$optio === void 0 ? void 0 : _schema$actions$optio.call(_schema$actions, action.name)) || ((_schema$actions2 = schema.actions) === null || _schema$actions2 === void 0 || (_schema$actions2$opti = _schema$actions2.optionForChannel) === null || _schema$actions2$opti === void 0 ? void 0 : _schema$actions2$opti.call(_schema$actions2, channel)) || option;
 
@@ -3698,11 +3920,21 @@ var ConfigPane = function ConfigPane(_ref) {
   }) || (option === null || option === void 0 ? void 0 : option.label) || t("neetoRules.builder.setUpAction");
   var handleContinue = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var owned, next;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.n) {
           case 0:
+            // A pane only answers for what it renders: the recipient pane owns its
+            // storage fields and each step owns its key, so neither blocks Continue.
+            owned = [].concat(_toConsumableArray(recipientOwnedFields({
+              schema: schema,
+              action: action,
+              name: name
+            })), _toConsumableArray(steps.map(function (step) {
+              return step.key;
+            })));
             _context.n = 1;
-            return validate([RECIPIENT_STORAGE_FIELDS.emails]);
+            return validate(owned);
           case 1:
             if (_context.v) {
               _context.n = 2;
@@ -3710,17 +3942,18 @@ var ConfigPane = function ConfigPane(_ref) {
             }
             return _context.a(2);
           case 2:
-            if (shouldAdvanceToRecipient) {
-              openType({
-                type: BUILDER_PANEL_TYPES.RECIPIENT,
-                data: {
-                  index: index,
-                  anchor: BUILDER_ANCHORS.ACTION_RECIPIENT
-                }
-              });
-            } else {
-              closePane();
-            }
+            next = shouldAdvanceToRecipient ? {
+              type: BUILDER_PANEL_TYPES.RECIPIENT,
+              data: {
+                index: index,
+                anchor: BUILDER_ANCHORS.ACTION_RECIPIENT
+              }
+            } : stepTargetAfter({
+              schema: schema,
+              rule: rule,
+              index: index
+            });
+            if (next) openType(next);else closePane();
           case 3:
             return _context.a(2);
         }
@@ -4121,6 +4354,7 @@ var OptionsPane = function OptionsPane(_ref) {
   var schema = _ref.schema,
     anchor = _ref.anchor,
     index = _ref.index,
+    stepKey = _ref.stepKey,
     _ref$belowContent = _ref.belowContent,
     belowContent = _ref$belowContent === void 0 ? null : _ref$belowContent,
     _ref$configPending = _ref.configPending,
@@ -4165,9 +4399,10 @@ var OptionsPane = function OptionsPane(_ref) {
         anchor: anchor,
         schema: schema,
         rule: rule,
-        index: index
+        index: index,
+        stepKey: stepKey
       });
-    }, [anchor, schema, rule, index]),
+    }, [anchor, schema, rule, index, stepKey]),
     title = _useMemo.title,
     subtitle = _useMemo.subtitle,
     multi = _useMemo.multi,
@@ -4202,6 +4437,7 @@ var OptionsPane = function OptionsPane(_ref) {
       schema: schema,
       rule: rule,
       index: index,
+      stepKey: stepKey,
       value: value,
       helpers: helpers
     });
@@ -4231,6 +4467,7 @@ var OptionsPane = function OptionsPane(_ref) {
       schema: schema,
       rule: rule,
       index: index,
+      stepKey: stepKey,
       configPending: configPending
     });
     if (target) openType({
@@ -4804,9 +5041,11 @@ var BUILDER_PANEL_TYPE_CONFIG_MAP = (_BUILDER_PANEL_TYPE_C = {}, _defineProperty
   component: ValuePane
 }), BUILDER_PANEL_TYPES.ACTION_CONFIG, {
   component: ConfigPane
-}), BUILDER_PANEL_TYPES.DELAY, {
+}), BUILDER_PANEL_TYPES.ACTION_STEP, {
+  component: OptionsPane
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_BUILDER_PANEL_TYPE_C, BUILDER_PANEL_TYPES.DELAY, {
   component: DelayPane
-}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_BUILDER_PANEL_TYPE_C, BUILDER_PANEL_TYPES.LEAD_TIME, {
+}), BUILDER_PANEL_TYPES.LEAD_TIME, {
   component: LeadTimePane
 }), BUILDER_PANEL_TYPES.NAME, {
   component: NamePane