@bigbinary/neeto-rules-frontend 2.7.19 → 2.7.21

package/dist/NeetoRulesBuilder.js

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { f as flatten } from './keyboardShortcuts-DNOhEY8h.js';
+import { f as flatten, S as SHORTCUTS } from './keyboardShortcuts-_OrtgF0A.js';
 import { useShallow } from 'zustand/shallow';
-import { useState, createElement, Fragment as Fragment$1, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, createElement, Fragment as Fragment$1, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { useFormikContext, getIn, useField, Formik, Form as Form$1 } from 'formik';
 import { isNotEmpty, toLabelAndValue, removeBy, isNot, findBy, noop } from '@bigbinary/neeto-cist';
@@ -11,7 +11,7 @@ import Header from '@bigbinary/neeto-molecules/Header';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { useTranslation } from 'react-i18next';
-import { E as EditorAction, 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-ogJeZ752.js';
+import { E as EditorAction, 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-BZYwFjcS.js';
 import { u as useCustomDataStore } from './useCustomDataStore-BtKYtLVc.js';
 import { u as useUtilityStore } from './useUtilityStore-CCUYS1mS.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -24,8 +24,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { t } from 'i18next';
 import * as yup from 'yup';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
 import Search from '@bigbinary/neeto-icons/Search';
 import Input from '@bigbinary/neetoui/Input';
 import Typography from '@bigbinary/neetoui/Typography';
@@ -45,6 +45,7 @@ import MultiEmailInput from '@bigbinary/neetoui/MultiEmailInput';
 import '@babel/runtime/helpers/typeof';
 import './useAutomationRulesApi-C9I3wUZ8.js';
 import '@tanstack/react-query';
+import '@bigbinary/neeto-commons-frontend/react-utils';
 import 'axios';
 import './index-9h4B7JZZ.js';
 import '@bigbinary/neetoui/formik/Radio';
@@ -62,7 +63,6 @@ import '@bigbinary/neetoui/Label';
 import '@bigbinary/neetoui/formik/MultiEmailInput';
 import '@bigbinary/neeto-editor/FormikEditor';
 import '@bigbinary/neeto-icons/Refresh';
-import '@bigbinary/neeto-hotkeys';
 import '@bigbinary/neeto-icons/Check';
 import 'react-select/creatable';
 import '@babel/runtime/helpers/toArray';
@@ -256,6 +256,21 @@ var TOKEN_STATE = {
 };
 var STATE_CLASS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TOKEN_STATE.PLACEHOLDER, "mb-placeholder"), TOKEN_STATE.PLACEHOLDER_NEXT, "mb-placeholder mb-placeholder-next"), TOKEN_STATE.DISABLED, "mb-placeholder mb-placeholder-disabled"), TOKEN_STATE.FILLED, "mb-tok"), TOKEN_STATE.MUTED, "mb-tok mb-tok-muted");
 
+// The flash is a run-once CSS animation, so a repeat submit while it is still
+// applied would not replay it on its own.
+var useReplayFlash = function useReplayFlash(flashSeq) {
+  var ref = useRef(null);
+  useEffect(function () {
+    var _ref$current, _ref$current$getAnima;
+    if (!flashSeq) return;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current$getAnima = _ref$current.getAnimations) === null || _ref$current$getAnima === void 0 || _ref$current$getAnima.call(_ref$current).forEach(function (animation) {
+      animation.cancel();
+      animation.play();
+    });
+  }, [flashSeq]);
+  return ref;
+};
+
 var _excluded = ["children", "state", "active", "invalid", "onClick", "className", "dataTestid"];
 function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -272,8 +287,10 @@ var Token = function Token(_ref) {
     dataTestid = _ref.dataTestid,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isInteractive = typeof onClick === "function" && state !== TOKEN_STATE.DISABLED;
+  var tokenRef = useReplayFlash(invalid);
   return /*#__PURE__*/jsx("span", _objectSpread$c(_objectSpread$c({
     "data-testid": dataTestid,
+    ref: tokenRef,
     role: isInteractive ? "button" : undefined,
     tabIndex: isInteractive ? 0 : undefined,
     className: classNames(
@@ -1087,15 +1104,17 @@ var DelayRow = function DelayRow(_ref) {
   });
 };
 
-var MetaBlock = withT(function (_ref) {
-  var t = _ref.t,
-    rule = _ref.rule,
+var MetaBlock = function MetaBlock(_ref) {
+  var rule = _ref.rule,
     _ref$showName = _ref.showName,
     showName = _ref$showName === void 0 ? true : _ref$showName,
     _ref$isInvalid = _ref.isInvalid,
     isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
     handleEditName = _ref.onEditName,
     handleToggleActive = _ref.onToggleActive;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var nameRef = useReplayFlash(isInvalid);
   return /*#__PURE__*/jsxs("div", {
     className: "mb-meta",
     children: [showName && /*#__PURE__*/jsxs("div", {
@@ -1104,6 +1123,8 @@ var MetaBlock = withT(function (_ref) {
         className: "mb-meta-label",
         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", {
@@ -1112,6 +1133,7 @@ var MetaBlock = withT(function (_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,
@@ -1133,8 +1155,10 @@ var MetaBlock = withT(function (_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
@@ -1153,7 +1177,7 @@ var MetaBlock = withT(function (_ref) {
       }), t("neetoRules.builder.activateThisAutomation")]
     })]
   });
-});
+};
 
 function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2815,10 +2839,10 @@ var Canvas = function Canvas(_ref) {
   var flatErrors = useMemo(function () {
     return flatten(errors || {});
   }, [errors]);
-  var _useState = useState(false),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    flashing = _useState2[0],
-    setFlashing = _useState2[1];
+    flashSeq = _useState2[0],
+    setFlashSeq = _useState2[1];
   var lastSubmitCount = useRef(submitCount);
   useEffect(function () {
     if (submitCount <= lastSubmitCount.current) return undefined;
@@ -2832,9 +2856,9 @@ var Canvas = function Canvas(_ref) {
     }))) {
       return undefined;
     }
-    setFlashing(true);
+    setFlashSeq(submitCount);
     var timer = setTimeout(function () {
-      return setFlashing(false);
+      return setFlashSeq(0);
     }, FLASH_DURATION_MS);
     return function () {
       return clearTimeout(timer);
@@ -2851,11 +2875,10 @@ var Canvas = function Canvas(_ref) {
       });
     });
   };
-  var isInvalid = function isInvalid(_ref4) {
+  var matchesInvalid = function matchesInvalid(_ref4) {
     var _schema$actions, _schema$actions$actio, _schema$actions2, _schema$actions2$rend, _schema$actions3, _schema$actions3$rend, _schema$actions4, _schema$actions4$opti, _schema$actions5, _schema$actions5$opti, _schema$actions6, _schema$actions7;
     var type = _ref4.type,
       index = _ref4.index;
-    if (!flashing) return false;
     var conditionMeta = "".concat(fieldKeys.conditions, ".value.").concat(index, ".metadata");
     var actionMeta = "".concat(fieldKeys.actions, ".value.").concat(index, ".metadata");
     // eslint-disable-next-line security/detect-object-injection
@@ -2946,6 +2969,12 @@ var Canvas = function Canvas(_ref) {
         return false;
     }
   };
+
+  // Returns the submit generation, not a boolean, so consumers can replay the
+  // flash animation when the same token is still invalid on a repeat submit.
+  var isInvalid = function isInvalid(args) {
+    return flashSeq && matchesInvalid(args) ? flashSeq : 0;
+  };
   var closePaneIfTargeting = function closePaneIfTargeting(_ref5) {
     var anchors = _ref5.anchors,
       index = _ref5.index;
@@ -3089,6 +3118,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"),
@@ -3207,6 +3237,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) {
@@ -3562,11 +3593,16 @@ var ConfigPane = function ConfigPane(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  useHotkeys(SHORTCUTS["continue"].sequence, handleContinue, {
+    enabled: shouldAdvanceToRecipient,
+    mode: "global"
+  });
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           style: "h3",
           children: title
         }), configSubtitle && /*#__PURE__*/jsx(Typography, {
@@ -3576,6 +3612,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",
@@ -3617,6 +3654,7 @@ var ConfigPane = function ConfigPane(_ref) {
       })
     }), shouldAdvanceToRecipient && /*#__PURE__*/jsx(Panel.Footer, {
       children: /*#__PURE__*/jsx(Button, {
+        "data-testid": "continue-button",
         label: t("neetoRules.buttons.continue"),
         size: "large",
         onClick: handleContinue
@@ -3673,6 +3711,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",
           style: "h3",
           children: t("neetoRules.common.addDelay")
         }), /*#__PURE__*/jsx(Typography, {
@@ -3694,6 +3733,7 @@ var DelayPane = function DelayPane(_ref) {
           className: "flex items-start gap-x-2",
           children: [/*#__PURE__*/jsx(Input$1, {
             className: "w-44",
+            dataTestid: "delay-value",
             max: MAX_DELAY_VALUE,
             min: MIN_DELAY_VALUE,
             name: "".concat(name, ".value.value"),
@@ -3701,6 +3741,7 @@ var DelayPane = function DelayPane(_ref) {
             size: "large",
             type: "number"
           }), /*#__PURE__*/jsx(Select, {
+            dataTestid: "delay-unit",
             defaultValue: findBy({
               value: value === null || value === void 0 ? void 0 : value.unit
             }, unitOptions),
@@ -3737,6 +3778,7 @@ 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 ? STEPPER_MIN_VALUE : _ref$min,
@@ -3770,6 +3812,7 @@ var NumberStepper = function NumberStepper(_ref) {
   return /*#__PURE__*/jsx("div", {
     className: "mb-stepper",
     children: /*#__PURE__*/jsx(Input, {
+      dataTestid: dataTestid,
       error: error,
       label: label,
       min: min,
@@ -3782,6 +3825,7 @@ var NumberStepper = function NumberStepper(_ref) {
         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() {
@@ -3791,6 +3835,7 @@ var NumberStepper = function NumberStepper(_ref) {
         }), /*#__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() {
@@ -3852,6 +3897,7 @@ var LeadTimePane = function LeadTimePane(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "pane-title",
           style: "h3",
           children: t("neetoRules.builder.leadTimeTitle")
         }), /*#__PURE__*/jsx(Typography, {
@@ -3873,6 +3919,7 @@ var LeadTimePane = function LeadTimePane(_ref) {
           children: [/*#__PURE__*/jsx("div", {
             className: "flex-1",
             children: /*#__PURE__*/jsx(NumberStepper, {
+              dataTestid: "lead-time",
               error: touched ? error : "",
               value: amount,
               onChange: function onChange(value) {
@@ -3885,6 +3932,7 @@ var LeadTimePane = function LeadTimePane(_ref) {
           }), /*#__PURE__*/jsx("div", {
             className: "w-32 shrink-0",
             children: /*#__PURE__*/jsx(Select$1, {
+              dataTestid: "lead-time-unit",
               isSearchable: false,
               options: LEAD_TIME_UNITS,
               value: findBy({
@@ -3918,6 +3966,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",
           style: "h3",
           children: t("neetoRules.builder.automationName")
         }), /*#__PURE__*/jsx(Typography, {
@@ -4059,6 +4108,11 @@ var OptionsPane = function OptionsPane(_ref) {
       data: target.data
     });else closePane();
   };
+  var canContinue = cascade && selectedValues.some(Boolean);
+  useHotkeys(SHORTCUTS["continue"].sequence, handleContinue, {
+    enabled: canContinue,
+    mode: "global"
+  });
   var optionLabel = function optionLabel(option) {
     var Icon = option.icon;
     if (!Icon && !option.disabledReason) return option.label;
@@ -4090,6 +4144,7 @@ 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")
       });
     }
@@ -4149,6 +4204,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",
           style: "h3",
           children: title
         }), /*#__PURE__*/jsx(Typography, {
@@ -4159,6 +4215,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",
@@ -4173,7 +4230,8 @@ var OptionsPane = function OptionsPane(_ref) {
       children: [renderBody(), belowContent]
     }), cascade && /*#__PURE__*/jsx(Panel.Footer, {
       children: /*#__PURE__*/jsx(Button, {
-        disabled: !selectedValues.some(Boolean),
+        "data-testid": "continue-button",
+        disabled: !canContinue,
         label: t("neetoRules.buttons.continue"),
         size: "large",
         onClick: handleContinue
@@ -4335,6 +4393,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",
           style: "h3",
           children: meta.recipientTitle || t("neetoRules.builder.panes.recipientTitle")
         }), /*#__PURE__*/jsx(Typography, {
@@ -4381,6 +4440,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)) {
@@ -4535,6 +4595,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",
           style: "h3",
           children: t("neetoRules.builder.pickValue", {
             field: (field === null || field === void 0 ? void 0 : field.label) || t("neetoRules.builder.valueWord")
@@ -4549,6 +4610,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",