@bigbinary/neeto-rules-frontend 2.5.15-beta-4 → 2.5.15-beta-6

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

@@ -168,8 +168,6 @@
       "endpoint": "Endpoint",
       "key": "Key",
       "value": "Value",
-      "addKeyValuePair": "Add new key value pair",
-      "additionalData": "Additional data",
       "remove_tags": "Remove tags",
       "add_tags": "Add tags",
       "change_status": "Change status",
@@ -178,7 +176,10 @@
       "assign_group": "Assign {{taxonomies.group.singular}}",
       "assign_agent": "Assign {{taxonomies.agent.singular}}",
       "change_priority": "Change priority",
-      "selectCannedResponse": "Select a canned response"
+      "selectCannedResponse": "Select a canned response",
+      "headers": "Headers",
+      "includeHeaders": "Include headers",
+      "addEntity": "Add {{entity}}"
     },
     "placeholders": {
       "if": "If",
@@ -242,7 +243,8 @@
       "invalidUrlEntity": "{{entity}} must be a valid URL",
       "maximumEmails": "Only up to {{max}} email addresses are allowed",
       "maxDelay": "Delay can't be more than {{max}}",
-      "minDelay": "Delay can't be less than {{min}}"
+      "minDelay": "Delay can't be less than {{min}}",
+      "invalidJsonBody": "Body should be a valid JSON"
     },
     "conditionVerbs": {
       "is": "Is",
@@ -373,6 +375,9 @@
     "helpText": {
       "description": "Automation rules feature allows you to create rules to automate specific actions when certain events occur.",
       "addDelay": "Add a delay so the following actions execute after the specified time"
+    },
+    "apiFields": {
+      "insertPlaceholder": "Insert placeholder: {{label}}"
     }
   }
 }

package/dist/NeetoRulesForm.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { shallow } from 'zustand/shallow';
 import { useRef, useEffect, createElement, forwardRef, useState, useMemo, memo, Fragment as Fragment$1 } from 'react';
 import { useFormikContext, useField, FieldArray, ErrorMessage, Formik, Form as Form$1 } from 'formik';
-import { findBy, isNotEmpty, isPresent, renameKeys, nullSafe, noop, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
+import { findBy, noop, isNotEmpty, isPresent, hyphenate, renameKeys, nullSafe, toLabelAndValue, removeBy, isNotPresent } from '@bigbinary/neeto-cist';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Refresh from '@bigbinary/neeto-icons/Refresh';
@@ -24,7 +24,10 @@ import { t as t$1 } from 'i18next';
 import Left from '@bigbinary/neeto-icons/Left';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import Input$1 from '@bigbinary/neetoui/formik/Input';
+import Switch from '@bigbinary/neetoui/formik/Switch';
 import { withT, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Editor from '@monaco-editor/react';
+import DynamicVariables from '@bigbinary/neeto-molecules/DynamicVariables';
 import Label from '@bigbinary/neetoui/Label';
 import Select from '@bigbinary/neetoui/Select';
 import { dayjs, joinHyphenCase, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
@@ -56,14 +59,14 @@ import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Help from '@bigbinary/neeto-icons/Help';
-import Switch from '@bigbinary/neetoui/Switch';
+import Switch$1 from '@bigbinary/neetoui/Switch';
 import { u as useCustomDataStore } from './useCustomDataStore-B1qHMIGJ.js';
 import _typeof from '@babel/runtime/helpers/typeof';
 import 'zustand';
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-filters-error-boundary{align-items:center;background-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-sm);display:flex;gap:1rem;margin-bottom:.75rem;padding:.5rem 1.25rem}.neeto-filters-error-boundary p{color:rgb(var(--neeto-ui-gray-800))}.neeto-rules-main-content__container{height:100dvh!important}.neeto-rules-main-card .neeto-ui-btn.underline{text-align:left}.neeto-rules-side-panel{flex-grow:0;flex-shrink:0}.neeto-rules-side-panel--small{width:320px}@media (min-width:1024px){.neeto-rules-side-panel--small{width:380px}}.neeto-rules-side-panel--large{width:380px}@media (min-width:1024px){.neeto-rules-side-panel--large{width:480px}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lcnJvci1ib3VuZGFyeS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL21haW4uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19sYXlvdXQuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19wYW5lLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsOEJBSUUsa0JBQUEsQ0FHQSw4Q0FBQSxDQURBLHdDQUFBLENBSEEsWUFBQSxDQUVBLFFBQUEsQ0FIQSxvQkFBQSxDQURBLHFCQ09GLENEQ0UsZ0NBQ0UsbUNDQ0osQ0NYQSxxQ0FDRSx1QkRjRixDQ1hBLCtDQUNFLGVEY0YsQ0VuQkEsd0JBRUUsV0FBQSxDQURBLGFGdUJGLENFcEJFLCtCQUNFLFdGc0JKLENFcEJJLDBCQUhGLCtCQUlJLFdGdUJKLENBQ0YsQ0VwQkUsK0JBQ0UsV0ZzQkosQ0VwQkksMEJBSEYsK0JBSUksV0Z1QkosQ0FDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWx0ZXJzLWVycm9yLWJvdW5kYXJ5IHtcbiAgcGFkZGluZzogMC41cmVtIDEuMjVyZW07XG4gIG1hcmdpbi1ib3R0b206IDAuNzVyZW07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogMXJlbTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZC1zbSk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTEwMCkpO1xuXG4gIHAge1xuICAgIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS04MDApKTtcbiAgfVxufVxuIiwiLm5lZXRvLWZpbHRlcnMtZXJyb3ItYm91bmRhcnkge1xuICBwYWRkaW5nOiAwLjVyZW0gMS4yNXJlbTtcbiAgbWFyZ2luLWJvdHRvbTogMC43NXJlbTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAxcmVtO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLXNtKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSk7XG59XG4ubmVldG8tZmlsdGVycy1lcnJvci1ib3VuZGFyeSBwIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTgwMCkpO1xufVxuXG4ubmVldG8tcnVsZXMtbWFpbi1jb250ZW50X19jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMGR2aCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tcnVsZXMtbWFpbi1jYXJkIC5uZWV0by11aS1idG4udW5kZXJsaW5lIHtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbn1cblxuLm5lZXRvLXJ1bGVzLXNpZGUtcGFuZWwge1xuICBmbGV4LXNocmluazogMDtcbiAgZmxleC1ncm93OiAwO1xufVxuLm5lZXRvLXJ1bGVzLXNpZGUtcGFuZWwtLXNtYWxsIHtcbiAgd2lkdGg6IDMyMHB4O1xufVxuQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkge1xuICAubmVldG8tcnVsZXMtc2lkZS1wYW5lbC0tc21hbGwge1xuICAgIHdpZHRoOiAzODBweDtcbiAgfVxufVxuLm5lZXRvLXJ1bGVzLXNpZGUtcGFuZWwtLWxhcmdlIHtcbiAgd2lkdGg6IDM4MHB4O1xufVxuQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkge1xuICAubmVldG8tcnVsZXMtc2lkZS1wYW5lbC0tbGFyZ2Uge1xuICAgIHdpZHRoOiA0ODBweDtcbiAgfVxufSIsIi5uZWV0by1ydWxlcy1tYWluLWNvbnRlbnRfX2NvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwZHZoICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1ydWxlcy1tYWluLWNhcmQgLm5lZXRvLXVpLWJ0bi51bmRlcmxpbmUge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufSIsIi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsIHtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGZsZXgtZ3JvdzogMDtcblxuICAmLS1zbWFsbCB7XG4gICAgd2lkdGg6IDMyMHB4O1xuXG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkge1xuICAgICAgd2lkdGg6IDM4MHB4O1xuICAgIH1cbiAgfVxuXG4gICYtLWxhcmdlIHtcbiAgICB3aWR0aDogMzgwcHg7XG5cbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gICAgICB3aWR0aDogNDgwcHg7XG4gICAgfVxuICB9XG59Il19 */";
+var css = ".neeto-filters-error-boundary{align-items:center;background-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-sm);display:flex;gap:1rem;margin-bottom:.75rem;padding:.5rem 1.25rem}.neeto-filters-error-boundary p{color:rgb(var(--neeto-ui-gray-800))}.neeto-rules-main-content__container{height:100dvh!important}.neeto-rules-main-card .neeto-ui-btn.underline{text-align:left}.neeto-rules-side-panel{flex-grow:0;flex-shrink:0}.neeto-rules-side-panel--small{width:320px}@media (min-width:1024px){.neeto-rules-side-panel--small{width:380px}}.neeto-rules-side-panel--large{width:380px}@media (min-width:1024px){.neeto-rules-side-panel--large{width:480px}}.neeto-rules-json-editor__wrapper{height:35vh;position:relative}.neeto-rules-json-editor__editor{height:100%}.neeto-rules-json-editor__dynamic-variables{position:absolute;right:1rem;top:1rem;z-index:10}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lcnJvci1ib3VuZGFyeS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL21haW4uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19sYXlvdXQuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19wYW5lLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvY29tcG9uZW50cy9fanNvbi1lZGl0b3Iuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw4QkFJRSxrQkFBQSxDQUdBLDhDQUFBLENBREEsd0NBQUEsQ0FIQSxZQUFBLENBRUEsUUFBQSxDQUhBLG9CQUFBLENBREEscUJDT0YsQ0RDRSxnQ0FDRSxtQ0NDSixDQ1hBLHFDQUNFLHVCRGNGLENDWEEsK0NBQ0UsZURjRixDRW5CQSx3QkFFRSxXQUFBLENBREEsYUZ1QkYsQ0VwQkUsK0JBQ0UsV0ZzQkosQ0VwQkksMEJBSEYsK0JBSUksV0Z1QkosQ0FDRixDRXBCRSwrQkFDRSxXRnNCSixDRXBCSSwwQkFIRiwrQkFJSSxXRnVCSixDQUNGLENHdkNFLGtDQUVFLFdBQUEsQ0FEQSxpQkgyQ0osQ0d2Q0UsaUNBQ0UsV0h5Q0osQ0d0Q0UsNENBQ0UsaUJBQUEsQ0FFQSxVQUFBLENBREEsUUFBQSxDQUVBLFVId0NKIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLWZpbHRlcnMtZXJyb3ItYm91bmRhcnkge1xuICBwYWRkaW5nOiAwLjVyZW0gMS4yNXJlbTtcbiAgbWFyZ2luLWJvdHRvbTogMC43NXJlbTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAxcmVtO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLXNtKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSk7XG5cbiAgcCB7XG4gICAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTgwMCkpO1xuICB9XG59XG4iLCIubmVldG8tZmlsdGVycy1lcnJvci1ib3VuZGFyeSB7XG4gIHBhZGRpbmc6IDAuNXJlbSAxLjI1cmVtO1xuICBtYXJnaW4tYm90dG9tOiAwLjc1cmVtO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IDFyZW07XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtc20pO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0xMDApKTtcbn1cbi5uZWV0by1maWx0ZXJzLWVycm9yLWJvdW5kYXJ5IHAge1xuICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktODAwKSk7XG59XG5cbi5uZWV0by1ydWxlcy1tYWluLWNvbnRlbnRfX2NvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwZHZoICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1ydWxlcy1tYWluLWNhcmQgLm5lZXRvLXVpLWJ0bi51bmRlcmxpbmUge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufVxuXG4ubmVldG8tcnVsZXMtc2lkZS1wYW5lbCB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWdyb3c6IDA7XG59XG4ubmVldG8tcnVsZXMtc2lkZS1wYW5lbC0tc21hbGwge1xuICB3aWR0aDogMzIwcHg7XG59XG5AbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1zbWFsbCB7XG4gICAgd2lkdGg6IDM4MHB4O1xuICB9XG59XG4ubmVldG8tcnVsZXMtc2lkZS1wYW5lbC0tbGFyZ2Uge1xuICB3aWR0aDogMzgwcHg7XG59XG5AbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1sYXJnZSB7XG4gICAgd2lkdGg6IDQ4MHB4O1xuICB9XG59XG5cbi5uZWV0by1ydWxlcy1qc29uLWVkaXRvcl9fd3JhcHBlciB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAzNXZoO1xufVxuLm5lZXRvLXJ1bGVzLWpzb24tZWRpdG9yX19lZGl0b3Ige1xuICBoZWlnaHQ6IDEwMCU7XG59XG4ubmVldG8tcnVsZXMtanNvbi1lZGl0b3JfX2R5bmFtaWMtdmFyaWFibGVzIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDFyZW07XG4gIHJpZ2h0OiAxcmVtO1xuICB6LWluZGV4OiAxMDtcbn0iLCIubmVldG8tcnVsZXMtbWFpbi1jb250ZW50X19jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMGR2aCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tcnVsZXMtbWFpbi1jYXJkIC5uZWV0by11aS1idG4udW5kZXJsaW5lIHtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbn0iLCIubmVldG8tcnVsZXMtc2lkZS1wYW5lbCB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWdyb3c6IDA7XG5cbiAgJi0tc21hbGwge1xuICAgIHdpZHRoOiAzMjBweDtcblxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgICAgIHdpZHRoOiAzODBweDtcbiAgICB9XG4gIH1cblxuICAmLS1sYXJnZSB7XG4gICAgd2lkdGg6IDM4MHB4O1xuXG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkge1xuICAgICAgd2lkdGg6IDQ4MHB4O1xuICAgIH1cbiAgfVxufSIsIi5uZWV0by1ydWxlcy1qc29uLWVkaXRvciB7XG4gICZfX3dyYXBwZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBoZWlnaHQ6IDM1dmg7XG4gIH1cblxuICAmX19lZGl0b3Ige1xuICAgIGhlaWdodDogMTAwJTtcbiAgfVxuXG4gICZfX2R5bmFtaWMtdmFyaWFibGVzIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAxcmVtO1xuICAgIHJpZ2h0OiAxcmVtO1xuICAgIHotaW5kZXg6IDEwO1xuICB9XG59XG4iXX0= */";
 n(css,{});
 
 var useActiveField = function useActiveField(name) {
@@ -507,15 +510,20 @@ var DEFAULT_LONG_TEXT_ROWS = 8;
 var Target$j = function Target(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var index = _ref.index,
+    name = _ref.name,
     _ref$selectedField = _ref.selectedField,
     selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
     defaultLabel = _ref.defaultLabel,
     defaultSeparator = _ref.defaultSeparator,
-    _onClick = _ref.onClick;
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? noop : _ref$onClick;
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
-  var isValid = errors.actions && 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]) && 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 _useActiveField = useActiveField(name),
+    isFieldActive = _useActiveField.isFieldActive,
+    setFieldActive = _useActiveField.setFieldActive;
+  var isFieldInvalid = errors.actions && 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]) && 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()) || defaultSeparator;
   var label = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || defaultLabel;
   return /*#__PURE__*/jsxs(Fragment, {
@@ -530,39 +538,60 @@ var Target$j = function Target(_ref) {
       label: label.toLowerCase(),
       style: "link",
       className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-error-500": isValid
+        "neeto-ui-text-accent-800": isFieldActive,
+        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
       }),
       onClick: function onClick() {
-        return _onClick === null || _onClick === void 0 ? void 0 : _onClick();
+        _onClick();
+        setFieldActive();
       }
     })]
   });
 };
 var LongTextField = function LongTextField(_ref2) {
   var name = _ref2.name,
-    _ref2$value = _ref2.value,
-    value = _ref2$value === void 0 ? "" : _ref2$value,
     _ref2$selectedField = _ref2.selectedField,
-    selectedField = _ref2$selectedField === void 0 ? {} : _ref2$selectedField;
+    selectedField = _ref2$selectedField === void 0 ? {} : _ref2$selectedField,
+    _ref2$shouldAutoFocus = _ref2.shouldAutoFocus,
+    shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus;
+  var _useActiveField2 = useActiveField(name, {
+      shouldAutoFocus: shouldAutoFocus
+    }),
+    ref = _useActiveField2.ref,
+    setFieldActive = _useActiveField2.setFieldActive;
   var rows = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.rows) || DEFAULT_LONG_TEXT_ROWS;
   return /*#__PURE__*/jsx(Textarea, {
     name: name,
+    ref: ref,
     rows: rows,
-    value: value,
     required: true,
-    className: "w-full"
+    className: "w-full",
+    onFocus: setFieldActive
   });
 };
 LongTextField.Target = Target$j;
 
-var ADDITIONAL_DATA_INITIAL_VALUE = {
+var CUSTOM_HEADERS_INITIAL_VALUE = {
   key: "",
   value: ""
 };
 var SAMPLE_ENDPOINT = "https://example.com";
+var JSON_LANGUAGE = "json";
+var EDITOR_CONFIG = {
+  formatOnType: true,
+  formatOnPaste: true,
+  automaticLayout: true,
+  tabSize: 2,
+  minimap: {
+    enabled: false
+  },
+  scrollBeyondLastLine: false,
+  autoIndent: "full"
+};
+var API_REQUEST_FIELDS = ["endpoint", "body", "enableCustomHeaders", "customHeaders"];
 
 var addOption = function addOption(arrayHelpers) {
-  return arrayHelpers.push(ADDITIONAL_DATA_INITIAL_VALUE);
+  return arrayHelpers.push(CUSTOM_HEADERS_INITIAL_VALUE);
 };
 var removeOption = function removeOption(_ref) {
   var arrayHelpers = _ref.arrayHelpers,
@@ -577,8 +606,8 @@ var hasKeyOrValue = whereAny({
   key: isNotEmpty,
   value: isNotEmpty
 });
-var formatAdditionalData = function formatAdditionalData(additionalData) {
-  return isPresent(additionalData) ? additionalData : [ADDITIONAL_DATA_INITIAL_VALUE];
+var formatCustomFields = function formatCustomFields(customFields) {
+  return isPresent(customFields) ? customFields : [CUSTOM_HEADERS_INITIAL_VALUE];
 };
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -587,30 +616,27 @@ var dotPath = useWith(path, [split(".")]);
 var KeyValuePairsField = withT(function (_ref) {
   var t = _ref.t,
     name = _ref.name,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label,
+    entity = _ref.entity,
     onFocus = _ref.onFocus;
   return /*#__PURE__*/jsx(FieldArray, {
     name: name,
     children: function children(arrayHelpers) {
-      var data = dotPath(name, arrayHelpers.form.values);
+      var data = dotPath(name, arrayHelpers.form.values) || [CUSTOM_HEADERS_INITIAL_VALUE];
       var showDeleteButton = data.length > 1 || hasKeyOrValue(data[0]);
       return /*#__PURE__*/jsxs("div", {
-        className: "space-y-3",
-        children: [/*#__PURE__*/jsx(Label, {
-          children: label
-        }), data.map(function (_, index) {
+        className: "flex flex-col space-y-3",
+        children: [data.map(function (_, index) {
           return /*#__PURE__*/jsxs("div", {
             className: "flex h-8 space-x-3",
             children: [/*#__PURE__*/jsx(Input$1, {
               onFocus: onFocus,
-              className: "w-2/5",
+              className: "w-1/3",
               name: "".concat(name, ".").concat(index, ".key"),
               placeholder: t("neetoRules.labels.key"),
               type: "text"
             }), /*#__PURE__*/jsx(Input$1, {
               onFocus: onFocus,
-              className: "w-3/5",
+              className: "w-2/3",
               name: "".concat(name, ".").concat(index, ".value"),
               placeholder: t("neetoRules.labels.value"),
               type: "text",
@@ -630,7 +656,10 @@ var KeyValuePairsField = withT(function (_ref) {
           }, index);
         }), /*#__PURE__*/jsx(Button, {
           onFocus: onFocus,
-          label: t("neetoRules.labels.addKeyValuePair"),
+          className: "w-30 ml-auto",
+          label: t("neetoRules.labels.addEntity", {
+            entity: entity
+          }),
           style: "secondary",
           onClick: function onClick() {
             return addOption(arrayHelpers);
@@ -641,6 +670,167 @@ var KeyValuePairsField = withT(function (_ref) {
   });
 });
 
+var CustomHeaders = function CustomHeaders(_ref) {
+  var name = _ref.name,
+    onFocus = _ref.onFocus;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var switchName = "".concat(name, ".enableCustomHeaders");
+  var keyValuePairsFieldName = "".concat(name, ".customHeaders");
+  var isCustomHeadersEnabled = dotPath(switchName, values);
+  var handleChange = function handleChange(_ref2) {
+    var checked = _ref2.target.checked;
+    if (!checked) {
+      setFieldValue(keyValuePairsFieldName, [CUSTOM_HEADERS_INITIAL_VALUE]);
+    }
+    setFieldValue(switchName, checked);
+  };
+  var label = t("neetoRules.labels.includeHeaders");
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col space-y-4 mb-4",
+    children: [/*#__PURE__*/jsx(Switch, {
+      label: label,
+      onFocus: onFocus,
+      "data-cy": "neeto-rules-api-fields-".concat(hyphenate(label), "-switch"),
+      name: switchName,
+      onChange: handleChange
+    }), isCustomHeadersEnabled && /*#__PURE__*/jsx(KeyValuePairsField, {
+      onFocus: onFocus,
+      entity: t("neetoRules.labels.headers"),
+      name: "".concat(name, ".customHeaders")
+    })]
+  });
+};
+
+var JsonEditor = function JsonEditor(_ref) {
+  var name = _ref.name,
+    onFocus = _ref.onFocus,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "{}" : _ref$initialValue,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables;
+  var editorRef = useRef(null);
+  var completionProviderRef = useRef(null);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    var _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    _useField2$2 = _useField2[2],
+    setValue = _useField2$2.setValue,
+    setTouched = _useField2$2.setTouched;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleEditorDidMount = function handleEditorDidMount(editor, monaco) {
+    editorRef.current = editor;
+    completionProviderRef.current = monaco.languages.registerCompletionItemProvider(JSON_LANGUAGE, {
+      triggerCharacters: ["{"],
+      provideCompletionItems: function provideCompletionItems(model, position) {
+        var lineContent = model.getLineContent(position.lineNumber);
+        var beforeCursor = lineContent.slice(0, position.column - 1);
+        if (!beforeCursor.endsWith('"{')) {
+          return {
+            suggestions: []
+          };
+        }
+        var suggestions = variables.map(function (_ref2) {
+          var key = _ref2.key,
+            label = _ref2.label;
+          return {
+            label: label,
+            kind: monaco.languages.CompletionItemKind.Variable,
+            insertText: "{".concat(key, "}}"),
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            detail: t("neetoRules.apiFields.insertPlaceholder", {
+              label: label
+            })
+          };
+        });
+        return {
+          suggestions: suggestions
+        };
+      }
+    });
+  };
+  var insertVariable = function insertVariable(_ref3) {
+    var key = _ref3.key;
+    var editor = editorRef.current;
+    if (!editor) return;
+    var selection = editor.getSelection();
+    var range = {
+      startLineNumber: selection.startLineNumber,
+      startColumn: selection.startColumn,
+      endLineNumber: selection.endLineNumber,
+      endColumn: selection.endColumn
+    };
+    var text = "\"{{".concat(key, "}}\"");
+    editor.executeEdits("", [{
+      range: range,
+      text: text,
+      forceMoveMarkers: true
+    }]);
+    var position = editor.getPosition();
+    editor.setPosition({
+      lineNumber: position.lineNumber,
+      column: position.column + text.length
+    });
+    editor.focus();
+  };
+  var handleChange = function handleChange(value) {
+    setTouched(true);
+    setValue(value);
+  };
+  useEffect(function () {
+    var editor = editorRef.current;
+    if (!editor) return;
+    var currentValue = editor.getValue();
+    if (currentValue !== initialValue) {
+      editor.setValue(initialValue);
+    }
+  }, [initialValue]);
+  useEffect(function () {
+    return function () {
+      var _completionProviderRe;
+      (_completionProviderRe = completionProviderRef.current) === null || _completionProviderRe === void 0 || _completionProviderRe.dispose();
+      completionProviderRef.current = null;
+    };
+  }, []);
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-2 mb-2",
+    children: [/*#__PURE__*/jsx(Label, {
+      required: true,
+      "data-cy": "api-field-body",
+      children: t("neetoRules.labels.body")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-rules-json-editor__wrapper",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "neeto-rules-json-editor__dynamic-variables",
+        children: /*#__PURE__*/jsx(DynamicVariables, {
+          variables: variables,
+          onVariableClick: insertVariable
+        })
+      }), /*#__PURE__*/jsx(Editor, {
+        onFocus: onFocus,
+        className: "neeto-rules-json-editor__editor",
+        defaultLanguage: JSON_LANGUAGE,
+        defaultValue: initialValue,
+        height: "100%",
+        options: EDITOR_CONFIG,
+        theme: "vs-dark",
+        onChange: handleChange,
+        onMount: handleEditorDidMount
+      }), error && touched && /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-input__error",
+        children: error
+      })]
+    })]
+  });
+};
+
 var SelectTemplateField = function SelectTemplateField(_ref) {
   var selectedField = _ref.selectedField,
     templates = _ref.templates,
@@ -727,7 +917,8 @@ var ApiFields = function ApiFields(_ref2) {
   var _useTranslation2 = useTranslation(),
     t = _useTranslation2.t;
   var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
   var _useActiveField2 = useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
@@ -736,8 +927,10 @@ var ApiFields = function ApiFields(_ref2) {
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
   var isTemplateSelectionEnabled = isPresent(templates);
   var handleTemplateChange = function handleTemplateChange(template) {
-    setFieldValue("".concat(name, ".endpoint"), template.endpoint);
-    setFieldValue("".concat(name, ".additionalData"), formatAdditionalData(template.additionalData));
+    API_REQUEST_FIELDS.forEach(function (key) {
+      var value = key === "customHeaders" ? formatCustomFields(template[key]) : template[key];
+      setFieldValue("".concat(name, ".").concat(key), value);
+    });
   };
   return /*#__PURE__*/jsxs("div", {
     className: "w-full",
@@ -757,9 +950,13 @@ var ApiFields = function ApiFields(_ref2) {
       ref: isTemplateSelectionEnabled ? null : ref,
       type: "text",
       onFocus: setFieldActive
-    }), /*#__PURE__*/jsx(KeyValuePairsField, {
-      label: t("neetoRules.labels.additionalData"),
-      name: "".concat(name, ".additionalData"),
+    }), /*#__PURE__*/jsx(CustomHeaders, {
+      name: name,
+      onFocus: setFieldActive
+    }), /*#__PURE__*/jsx(JsonEditor, {
+      initialValue: dotPath("".concat(name, ".body"), values),
+      name: "".concat(name, ".body"),
+      variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables,
       onFocus: setFieldActive
     })]
   });
@@ -2649,7 +2846,6 @@ var ActionSubItem = function ActionSubItem(_ref) {
     });
   }
   if ((selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.longText || (selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.textarea) {
-    var _action$metadata6, _action$metadata7;
     return isTarget ? /*#__PURE__*/jsx(LongTextField.Target, {
       hasError: hasError,
       index: index,
@@ -2657,7 +2853,6 @@ var ActionSubItem = function ActionSubItem(_ref) {
       defaultLabel: t("neetoRules.labels.body"),
       defaultSeparator: t("neetoRules.common.as"),
       name: "".concat(name, ".value"),
-      value: (_action$metadata6 = action.metadata) === null || _action$metadata6 === void 0 ? void 0 : _action$metadata6.value,
       onClick: function onClick() {
         return openPanel("large");
       }
@@ -2667,8 +2862,7 @@ var ActionSubItem = function ActionSubItem(_ref) {
       shouldAutoFocus: true,
       defaultLabel: t("neetoRules.labels.body"),
       defaultSeparator: t("neetoRules.common.as"),
-      name: "".concat(name, ".value"),
-      value: (_action$metadata7 = action.metadata) === null || _action$metadata7 === void 0 ? void 0 : _action$metadata7.value
+      name: "".concat(name, ".value")
     });
   }
   if (selectedField !== null && selectedField !== void 0 && selectedField.component) {
@@ -3570,18 +3764,15 @@ var ValueField = function ValueField(_ref) {
     });
   }
   if (fieldType === CONDITION_VALUE_TYPES.textarea) {
-    var _condition$metadata, _condition$metadata2;
     return isTarget ? /*#__PURE__*/jsx(LongTextField.Target, {
       index: index,
       onClick: onClick,
       defaultLabel: t("neetoRules.labels.text"),
-      name: "".concat(name, ".value"),
-      value: (_condition$metadata = condition.metadata) === null || _condition$metadata === void 0 ? void 0 : _condition$metadata.value
+      name: "".concat(name, ".value")
     }) : /*#__PURE__*/jsx(LongTextField, {
       index: index,
       defaultLabel: t("neetoRules.labels.text"),
-      name: "".concat(name, ".value"),
-      value: (_condition$metadata2 = condition.metadata) === null || _condition$metadata2 === void 0 ? void 0 : _condition$metadata2.value
+      name: "".concat(name, ".value")
     });
   }
   if (fieldType === CONDITION_VALUE_TYPES.radio) {
@@ -4335,7 +4526,27 @@ var getActionsSchema = function getActionsSchema(element, customData) {
               entity: t$1("neetoRules.labels.endpoint")
             })).required(t$1("neetoRules.validations.required.entity", {
               entity: t$1("neetoRules.labels.endpoint")
-            }))
+            })),
+            body: yup.string().trim().required(t$1("neetoRules.validations.required.entity", {
+              entity: t$1("neetoRules.labels.body")
+            })).test("is-valid-json-and-not-empty", function (value, context) {
+              if (!value) return true;
+              try {
+                var parsedValue = JSON.parse(value);
+                if (isNotPresent(parsedValue)) {
+                  return context.createError({
+                    message: t$1("neetoRules.validations.required.entity", {
+                      entity: t$1("neetoRules.labels.body")
+                    })
+                  });
+                }
+                return true;
+              } catch (_unused) {
+                return context.createError({
+                  message: t$1("neetoRules.validations.invalidJsonBody")
+                });
+              }
+            })
           });
         } else if (ACTION_TYPES.multiSelect === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup.object({
@@ -5672,7 +5883,7 @@ var Status = function Status() {
     var status = e.target.checked ? ENABLED : DISABLED;
     setFieldValue("status.value", status);
   };
-  return /*#__PURE__*/jsx(Switch, {
+  return /*#__PURE__*/jsx(Switch$1, {
     checked: defaultValue === ENABLED,
     label: t("neetoRules.labels.active"),
     labelProps: {