@bigbinary/neeto-rules-frontend 0.5.0 → 0.6.1

package/README.md

@@ -496,7 +496,7 @@ const initialProps = {
       {
         value: "add_tags",
         label: "Add Tags",
-        type: "multiSelect", // Types : emailToIds, emailTo, email, dropdown, list, multiSelect, note, date, text, textarea, decimal, number, regex, longText, sms, smsToNumbers, smsTo
+        type: "multiSelect", // Types : emailToIds, emailTo, email, dropdown, list, multiSelect, note, date, text, textarea, decimal, number, regex, longText, sms, smsToNumbers, smsTo, sendToApi
         hideSeparator: true,
         placeholder: "Select tags",
         dropdownOptions: [
@@ -562,7 +562,7 @@ neetoRulesFrontend allows to pass custom action components from host application
 
 #### 2.10 Custom message templates
 
-neetoRulesFrontend allows to pass predefined email and SMS templates from host application. This enables to use templates created using neeto-message-templates-nano. Below is an example for custom message template which is being sent by neeto-form in action options.
+neetoRulesFrontend allows to pass predefined email, SMS and API templates from host application. This enables to use templates created using neeto-message-templates-nano. Below is an example for custom message template which is being sent by neeto-form in action options.
 
 ```jsx
 {

package/app/javascript/src/translations/en.json

@@ -31,7 +31,8 @@
       "viewLess": "View less",
       "sms": "SMS",
       "phoneNumber": "Phone number",
-      "phoneNumbers": "Phone numbers"
+      "phoneNumbers": "Phone numbers",
+      "data": "Data"
     },
     "form": {
       "noEvents": "A rule without events will run hourly.",
@@ -135,7 +136,12 @@
       "text": "Text",
       "ruleSummary": "Automation rule summary",
       "template": "Template",
-      "remainingItemsCount": "{{count}} more"
+      "remainingItemsCount": "{{count}} more",
+      "endpoint": "Endpoint",
+      "key": "Key",
+      "value": "Value",
+      "addKeyValuePair": "Add new key value pair",
+      "additionalData": "Additional data"
     },
     "placeholders": {
       "if": "If",
@@ -189,7 +195,8 @@
         "invalidChannel": "Could not connect to the channel, please select other options.",
         "errorInIntegration": "Could not connect to Slack! Please check the integration or remove this action otherwise the automation rule will not be able to function as intended."
       },
-      "inValidPhoneNumber": "Phone number is invalid"
+      "invalidPhoneNumber": "Phone number is invalid",
+      "invalidUrlEntity": "{{entity}} must be a valid URL"
     },
     "conditionVerbs": {
       "is": "Is",

package/dist/index.cjs.js

@@ -270,7 +270,8 @@ var ACTION_TYPES = {
   longText: "longText",
   sms: "sms",
   smsToNumbers: "smsToNumbers",
-  smsTo: "smsTo"
+  smsTo: "smsTo",
+  sendToApi: "sendToApi"
 };
 var LIST_FIELD_TOOLTIP_PROPS = {
   save: {
@@ -483,7 +484,7 @@ var getActionsSchema = function getActionsSchema(element, customData) {
           return yup__namespace.object({
             phoneNumbers: selectedAction.type === ACTION_TYPES.smsToNumbers ? yup__namespace.array().required(i18next.t("neetoRules.validations.required.entity", {
               entity: i18next.t("neetoRules.common.phoneNumber")
-            })).of(yup__namespace.string().test("testPhoneNumber", i18next.t("neetoRules.validations.inValidPhoneNumber"), function (value) {
+            })).of(yup__namespace.string().test("testPhoneNumber", i18next.t("neetoRules.validations.invalidPhoneNumber"), function (value) {
               return PhoneNumber.isPhoneNumberValid(value);
             })) : schema,
             body: yup__namespace.string().test("body", i18next.t("neetoRules.validations.required.body"), function (value) {
@@ -491,6 +492,14 @@ var getActionsSchema = function getActionsSchema(element, customData) {
             }),
             value: selectedAction.type === ACTION_TYPES.smsTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema
           });
+        } else if (ACTION_TYPES.sendToApi === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
+          return yup__namespace.object({
+            endpoint: yup__namespace.string().url(i18next.t("neetoRules.validations.invalidUrlEntity", {
+              entity: i18next.t("neetoRules.labels.endpoint")
+            })).required(i18next.t("neetoRules.validations.required.entity", {
+              entity: i18next.t("neetoRules.labels.endpoint")
+            }))
+          });
         } else if (ACTION_TYPES.multiSelect === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup__namespace.object({
             value: yup__namespace.array().min(1, i18next.t("neetoRules.validations.atLeastOneValue")).required(i18next.t("neetoRules.validations.atLeastOneValue"))
@@ -731,7 +740,8 @@ var NeetoRules$2 = function NeetoRules(_ref) {
         className: "mr-2",
         htmlType: "submit",
         disabled: isSubmitting || !dirty,
-        onClick: function onClick() {}
+        onClick: function onClick() {},
+        "data-cy": "form-submit-button"
       }
     })));
   });
@@ -1218,6 +1228,247 @@ var LongTextField = function LongTextField(_ref) {
   }))));
 };
 
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+var _excluded$f = ["initialFocusRef", "name", "label"];
+var InputField$2 = function InputField(_ref) {
+  var initialFocusRef = _ref.initialFocusRef,
+    name = _ref.name,
+    label = _ref.label,
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$f);
+  var _useField = formik.useField(name),
+    _useField2 = _slicedToArray$1(_useField, 2),
+    field = _useField2[0],
+    meta = _useField2[1];
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends$1({
+    label: label,
+    type: "text"
+  }, field, {
+    error: meta.touched ? meta.error : "",
+    ref: initialFocusRef
+  }, otherProps));
+};
+
+var ADDITIONAL_DATA_INITIAL_VALUE = {
+  key: "",
+  value: ""
+};
+var SAMPLE_ENDPOINT = "https://example.com";
+
+var addOption = function addOption(arrayHelpers) {
+  return arrayHelpers.push(ADDITIONAL_DATA_INITIAL_VALUE);
+};
+var removeOption = function removeOption(_ref) {
+  var arrayHelpers = _ref.arrayHelpers,
+    index = _ref.index,
+    data = _ref.data;
+  arrayHelpers.remove(index);
+  if (data.length === 1) {
+    addOption(arrayHelpers);
+  }
+};
+var hasKeyOrValue = ramda.whereAny({
+  key: neetoCist.isNotEmpty,
+  value: neetoCist.isNotEmpty
+});
+
+var setEditorContent = function setEditorContent(ref, content) {
+  if (!ref.current) return;
+  ref.current.editor.commands.setContent(content);
+};
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+var dotPath = ramda.useWith(ramda.path, [ramda.split(".")]);
+
+var KeyValuePairsField = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    name = _ref.name,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label;
+  return /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
+    name: name
+  }, function (arrayHelpers) {
+    var data = dotPath(name, arrayHelpers.form.values);
+    var showDeleteButton = data.length > 1 || hasKeyOrValue(data[0]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "space-y-3"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, label), data.map(function (_, index) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex h-8 space-x-3",
+        key: index
+      }, /*#__PURE__*/React__default["default"].createElement(InputField$2, {
+        className: "w-2/5",
+        name: "".concat(name, ".").concat(index, ".key"),
+        placeholder: t("neetoRules.labels.key")
+      }), /*#__PURE__*/React__default["default"].createElement(InputField$2, {
+        className: "w-3/5",
+        name: "".concat(name, ".").concat(index, ".value"),
+        placeholder: t("neetoRules.labels.value"),
+        suffix: showDeleteButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+          icon: neetoIcons.Delete,
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            return removeOption({
+              arrayHelpers: arrayHelpers,
+              index: index,
+              data: data
+            });
+          }
+        })
+      }));
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      label: t("neetoRules.labels.addKeyValuePair"),
+      style: "secondary",
+      onClick: function onClick() {
+        return addOption(arrayHelpers);
+      }
+    }));
+  });
+});
+
+var SelectTemplateField = function SelectTemplateField(_ref) {
+  var selectedField = _ref.selectedField,
+    templates = _ref.templates,
+    onChange = _ref.onChange,
+    initialFocusRef = _ref.initialFocusRef;
+  var _useStateWithDependen = reactUtils.useStateWithDependency(null, [selectedField]),
+    _useStateWithDependen2 = _slicedToArray$1(_useStateWithDependen, 2),
+    selectedTemplate = _useStateWithDependen2[0],
+    setSelectedTemplate = _useStateWithDependen2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleTemplateChange = function handleTemplateChange(option) {
+    setSelectedTemplate(option);
+    if (!option) return;
+    var template = neetoCist.findBy({
+      id: option.value
+    }, templates);
+    onChange === null || onChange === void 0 || onChange(template);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+    isClearable: true,
+    isSearchable: true,
+    className: "mb-4",
+    innerRef: initialFocusRef,
+    label: t("neetoRules.labels.template"),
+    options: neetoCist.renameKeys({
+      name: "label",
+      id: "value"
+    }, templates),
+    placeholder: t("neetoRules.placeholders.selectTemplate"),
+    value: selectedTemplate,
+    onChange: handleTemplateChange
+  });
+};
+
+var ApiFields = function ApiFields(_ref) {
+  var _errors$actions, _touched$actions, _selectedField$separa;
+  var name = _ref.name,
+    selectedField = _ref.selectedField,
+    index = _ref.index;
+  var _useFormikContext = formik.useFormikContext(),
+    errors = _useFormikContext.errors,
+    touched = _useFormikContext.touched,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    showPane = _useState2[0],
+    setShowPane = _useState2[1];
+  var initialFocusRef = React.useRef(null);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  useOnButtonPressed(initialFocusRef, function () {
+    return setShowPane(false);
+  });
+  var isValid = errors.actions && ramda.isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && ramda.isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
+  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || t("neetoRules.common.as");
+  var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.dataPlaceholder) || t("neetoRules.common.data");
+  var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
+  var isTemplateSelectionEnabled = neetoCist.isPresent(templates);
+  var handleTemplateChange = function handleTemplateChange(template) {
+    setFieldValue("".concat(name, ".endpoint"), template.endpoint);
+    setFieldValue("".concat(name, ".additionalData"), template.additionalData);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700 mt-1",
+    "data-cy": "api-action-separator-text",
+    style: "h5",
+    weight: "normal"
+  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "api-action-button",
+    style: "h5",
+    weight: "semibold",
+    className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
+      "neeto-ui-text-primary-800": showPane,
+      "neeto-ui-text-error-500": isValid
+    }),
+    onClick: function onClick() {
+      return setShowPane(function (prevState) {
+        return !prevState;
+      });
+    }
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    initialFocusRef: initialFocusRef,
+    isOpen: showPane,
+    size: "large",
+    onClose: function onClose() {
+      return setShowPane(false);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-800 cursor-pointer",
+    "data-cy": "api-action-pane-header-title",
+    style: "h3",
+    weight: "semibold"
+  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full"
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(SelectTemplateField, {
+    initialFocusRef: initialFocusRef,
+    selectedField: selectedField,
+    templates: templates,
+    onChange: handleTemplateChange
+  }), /*#__PURE__*/React__default["default"].createElement(InputField$2, {
+    required: true,
+    className: "mb-4",
+    "data-cy": "api-action-endpoint-text-field",
+    label: t("neetoRules.labels.endpoint"),
+    name: "".concat(name, ".endpoint"),
+    placeholder: SAMPLE_ENDPOINT,
+    initialFocusRef: isTemplateSelectionEnabled ? null : initialFocusRef
+  }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairsField, {
+    label: t("neetoRules.labels.additionalData"),
+    name: "".concat(name, ".additionalData")
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "save-changes-button",
+    label: t("neetoRules.common.saveChange"),
+    onClick: function onClick() {
+      return setShowPane(false);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "cancel-button",
+    label: t("neetoRules.buttons.cancel"),
+    style: "text",
+    onClick: function onClick() {
+      return setShowPane(false);
+    }
+  }))));
+};
+
 var CustomAction = function CustomAction(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var ActionComponent = _ref.ActionComponent,
@@ -1541,22 +1792,7 @@ var DropdownField$1 = function DropdownField(_ref) {
   }, i18next.t("neetoRules.common.noOptions")))));
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
-var _excluded$f = ["autoFocus", "name", "value", "label", "variables", "addons", "editorRef", "defaults"];
+var _excluded$e = ["autoFocus", "name", "value", "label", "variables", "addons", "editorRef", "defaults"];
 var EditorAction = function EditorAction(_ref) {
   var autoFocus = _ref.autoFocus,
     name = _ref.name,
@@ -1570,7 +1806,7 @@ var EditorAction = function EditorAction(_ref) {
     _ref$editorRef = _ref.editorRef,
     editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef,
     defaults = _ref.defaults,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$f);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$e);
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var _useState = React.useState(value),
@@ -1621,30 +1857,6 @@ var EmailIdFields = function EmailIdFields(_ref) {
   }));
 };
 
-var _excluded$e = ["initialFocusRef", "name", "label"];
-var InputField$2 = function InputField(_ref) {
-  var initialFocusRef = _ref.initialFocusRef,
-    name = _ref.name,
-    label = _ref.label,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$e);
-  var _useField = formik.useField(name),
-    _useField2 = _slicedToArray$1(_useField, 2),
-    field = _useField2[0],
-    meta = _useField2[1];
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends$1({
-    label: label,
-    type: "text"
-  }, field, {
-    error: meta.touched ? meta.error : "",
-    ref: initialFocusRef
-  }, otherProps));
-};
-
-var setEditorContent = function setEditorContent(ref, content) {
-  if (!ref.current) return;
-  ref.current.editor.commands.setContent(content);
-};
-
 var EmailFields = function EmailFields(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa, _action$metadata;
   var _ref$isEmailIdField = _ref.isEmailIdField,
@@ -1663,10 +1875,6 @@ var EmailFields = function EmailFields(_ref) {
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
     setShowPane = _useState2[1];
-  var _useStateWithDependen = reactUtils.useStateWithDependency(null, [selectedField]),
-    _useStateWithDependen2 = _slicedToArray$1(_useStateWithDependen, 2),
-    selectedTemplate = _useStateWithDependen2[0],
-    setSelectedTemplate = _useStateWithDependen2[1];
   var initialFocusRef = React.useRef(null);
   var editorRef = React.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
@@ -1679,12 +1887,7 @@ var EmailFields = function EmailFields(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.emailPlaceholder) || t("neetoRules.common.email");
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
   var isTemplateSelectionEnabled = neetoCist.isPresent(templates);
-  var handleTemplateChange = function handleTemplateChange(option) {
-    setSelectedTemplate(option);
-    if (!option) return;
-    var template = neetoCist.findBy({
-      id: option.value
-    }, templates);
+  var handleTemplateChange = function handleTemplateChange(template) {
     setFieldValue("".concat(name, ".body"), template.body);
     setEditorContent(editorRef, template.body);
     if (selectedField.hideSubject) return;
@@ -1735,18 +1938,10 @@ var EmailFields = function EmailFields(_ref) {
     weight: "semibold"
   }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
-  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
-    isClearable: true,
-    isSearchable: true,
-    className: "mb-4",
-    innerRef: initialFocusRef,
-    label: t("neetoRules.labels.template"),
-    options: neetoCist.renameKeys({
-      name: "label",
-      id: "value"
-    }, templates),
-    placeholder: t("neetoRules.placeholders.selectTemplate"),
-    value: selectedTemplate,
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(SelectTemplateField, {
+    initialFocusRef: initialFocusRef,
+    selectedField: selectedField,
+    templates: templates,
     onChange: handleTemplateChange
   }), isEmailIdField && /*#__PURE__*/React__default["default"].createElement(EmailIdFields, {
     emails: emails,
@@ -1768,7 +1963,7 @@ var EmailFields = function EmailFields(_ref) {
   }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
     className: "flex items-center space-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
+    "data-cy": "email-action-save-changes-button",
     label: t("neetoRules.common.saveChange"),
     onClick: function onClick() {
       return setShowPane(false);
@@ -10125,7 +10320,7 @@ var PHONE_NUMBER_SEPARATION_REGEX = /[^\s,]+/g;
 var FLEXIBLE_PHONE_NUMBER_REGEX = /[0-9+, ]+/g;
 var PHONE_NUMBER_VALIDATION_SCHEMA = yup__namespace.string().required(i18next.t("neetoRules.validations.required.entity", {
   entity: i18next.t("neetoRules.common.phoneNumber")
-})).test("testPhoneNumber", i18next.t("neetoRules.validations.inValidPhoneNumber"), PhoneNumber.isPhoneNumberValid);
+})).test("testPhoneNumber", i18next.t("neetoRules.validations.invalidPhoneNumber"), PhoneNumber.isPhoneNumberValid);
 var CUSTOM_STYLES = {
   input: ramda.assoc("overflow", "hidden"),
   multiValue: function multiValue(styles, _ref2) {
@@ -10296,10 +10491,6 @@ var SmsFields = function SmsFields(_ref) {
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
     setShowPane = _useState2[1];
-  var _useStateWithDependen = reactUtils.useStateWithDependency(null, [selectedField]),
-    _useStateWithDependen2 = _slicedToArray$1(_useStateWithDependen, 2),
-    selectedTemplate = _useStateWithDependen2[0],
-    setSelectedTemplate = _useStateWithDependen2[1];
   var initialFocusRef = React.useRef(null);
   var editorRef = React.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
@@ -10312,12 +10503,7 @@ var SmsFields = function SmsFields(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.smsPlaceholder) || t("neetoRules.common.sms");
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
   var isTemplateSelectionEnabled = neetoCist.isPresent(templates);
-  var handleTemplateChange = function handleTemplateChange(option) {
-    setSelectedTemplate(option);
-    if (!option) return;
-    var template = neetoCist.findBy({
-      id: option.value
-    }, templates);
+  var handleTemplateChange = function handleTemplateChange(template) {
     setFieldValue("".concat(name, ".body"), template.body);
     setEditorContent(editorRef, template.body);
   };
@@ -10359,18 +10545,10 @@ var SmsFields = function SmsFields(_ref) {
     weight: "semibold"
   }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
-  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
-    isClearable: true,
-    isSearchable: true,
-    className: "mb-4",
-    innerRef: initialFocusRef,
-    label: t("neetoRules.labels.template"),
-    options: neetoCist.renameKeys({
-      name: "label",
-      id: "value"
-    }, templates),
-    placeholder: t("neetoRules.placeholders.selectTemplate"),
-    value: selectedTemplate,
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(SelectTemplateField, {
+    initialFocusRef: initialFocusRef,
+    selectedField: selectedField,
+    templates: templates,
     onChange: handleTemplateChange
   }), showPhoneNumberInput && /*#__PURE__*/React__default["default"].createElement(PhoneNumberField, {
     phoneNumbers: phoneNumbers,
@@ -10484,6 +10662,14 @@ var ActionSubItems = function ActionSubItems(_ref) {
       key: name
     }));
   }
+  if ((selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.sendToApi) {
+    return /*#__PURE__*/React__default["default"].createElement(ApiFields, {
+      index: index,
+      name: name,
+      selectedField: selectedField,
+      key: name
+    });
+  }
   if ((selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.dropdown) {
     return /*#__PURE__*/React__default["default"].createElement(DropdownField$1, {
       index: index,
@@ -10815,7 +11001,7 @@ var Actions = function Actions(_ref) {
           return arrayHelpers.push(DEFAULT_RULE_ACTION);
         }
       }), actions.length > 1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        "data-cy": "delete-action-button",
+        "data-cy": "delete-action-button-".concat(index),
         icon: neetoIcons.Delete,
         size: 24,
         style: "icon",
@@ -11963,6 +12149,8 @@ var Conditions = function Conditions(_ref) {
     setValue = _useField2[2].setValue;
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var elementProps = data[name] || {};
   var conditions = ((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.value) || [];
   var handleAddCondition = function handleAddCondition(arrayHelpers, logicOperation) {
@@ -12022,19 +12210,19 @@ var Conditions = function Conditions(_ref) {
         size: 24,
         style: "icon",
         tooltipProps: {
-          content: i18next.t("neetoRules.form.addCondition"),
+          content: t("neetoRules.form.addCondition"),
           position: "top"
         },
         onClick: function onClick() {
           return handleAddCondition(arrayHelpers, condition.joinType);
         }
       }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        "data-cy": "delete-condition-button",
+        "data-cy": "delete-condition-button-".concat(index),
         icon: neetoIcons.Delete,
         size: 24,
         style: "icon",
         tooltipProps: {
-          content: i18next.t("neetoRules.common.delete"),
+          content: t("neetoRules.common.delete"),
           position: "top"
         },
         onClick: function onClick() {
@@ -12044,7 +12232,7 @@ var Conditions = function Conditions(_ref) {
     }), ramda.isEmpty(conditions) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       className: "neeto-ui-text-gray-600 mr-auto",
       "data-cy": "add-condition-button",
-      label: i18next.t("neetoRules.form.addCondition"),
+      label: t("neetoRules.form.addCondition"),
       style: "text",
       onClick: function onClick() {
         return handleAddCondition(arrayHelpers, OPERATORS$1.or);
@@ -12053,7 +12241,7 @@ var Conditions = function Conditions(_ref) {
       className: "mt-2",
       "data-cy": "preview-callback-button",
       icon: neetoIcons.Eye,
-      label: i18next.t("neetoRules.common.preview"),
+      label: t("neetoRules.common.preview"),
       style: "secondary",
       onClick: function onClick() {
         return previewCallback(conditions);