@bigbinary/neeto-rules-frontend 2.5.15-beta-3 → 2.5.15-beta-5

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

@@ -3,9 +3,9 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { shallow } from 'zustand/shallow';
-import { useRef, useEffect, createElement, useState, forwardRef, useMemo, memo, Fragment as Fragment$1 } from 'react';
+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, isNotEmpty, isPresent, hyphenate, renameKeys, nullSafe, noop, 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) {
@@ -89,7 +92,7 @@ var useActiveField = function useActiveField(name) {
   useEffect(function () {
     if (!shouldAutoFocus || activeField) return;
     setFieldActive();
-  }, []);
+  }, [name]);
   useEffect(function () {
     var shouldFocus = shouldFocusRef.current;
     shouldFocusRef.current = true;
@@ -104,10 +107,12 @@ var useActiveField = function useActiveField(name) {
     shouldFocusRef.current = !ref.current;
     if (needsRerender) {
       setPanelState(assocPath(["data", "activeField"], null));
+      requestAnimationFrame(function () {
+        return setPanelState(assocPath(["data", "activeField"], name));
+      });
+    } else {
+      setPanelState(assocPath(["data", "activeField"], name));
     }
-    requestAnimationFrame(function () {
-      return setPanelState(assocPath(["data", "activeField"], name));
-    });
   };
   var resetActiveField = function resetActiveField() {
     return setPanelState(assocPath(["data", "activeField"], null));
@@ -553,14 +558,27 @@ var LongTextField = function LongTextField(_ref2) {
 };
 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,
@@ -575,8 +593,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
@@ -585,30 +603,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",
@@ -628,7 +643,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);
@@ -639,6 +657,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,
@@ -725,7 +904,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
     }),
@@ -734,8 +914,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",
@@ -755,9 +937,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
     })]
   });
@@ -947,17 +1133,17 @@ var EditorAction = function EditorAction(_ref) {
     editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef,
     defaults = _ref.defaults,
     otherProps = _objectWithoutProperties(_ref, _excluded$d);
-  var _useState = useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    editorData = _useState2[0],
-    setEditorData = _useState2[1];
+  var _useStateWithDependen = useStateWithDependency(value, [name]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    editorData = _useStateWithDependen2[0],
+    setEditorData = _useStateWithDependen2[1];
   var _useFormikContext = useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var debouncedValue = useDebounce(editorData, 200);
   useEffect(function () {
     setFieldValue(name, editorData);
   }, [debouncedValue]);
-  return /*#__PURE__*/jsx(FormikEditor, _objectSpread$n({
+  return /*#__PURE__*/createElement(FormikEditor, _objectSpread$n({
     addons: addons,
     autoFocus: autoFocus,
     defaults: defaults,
@@ -967,6 +1153,7 @@ var EditorAction = function EditorAction(_ref) {
     hideSlashCommands: true,
     className: "w-full",
     "data-cy": "neeto-editor",
+    key: name,
     ref: editorRef,
     onChange: setEditorData
   }, otherProps));
@@ -4332,7 +4519,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({
@@ -5669,7 +5876,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: {