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

package/dist/cjs/NeetoRulesForm.js

@@ -26,7 +26,10 @@ var i18next = require('i18next');
 var Left = require('@bigbinary/neeto-icons/Left');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
 var Input$1 = require('@bigbinary/neetoui/formik/Input');
+var Switch = require('@bigbinary/neetoui/formik/Switch');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Editor = require('@monaco-editor/react');
+var DynamicVariables = require('@bigbinary/neeto-molecules/DynamicVariables');
 var Label = require('@bigbinary/neetoui/Label');
 var Select = require('@bigbinary/neetoui/Select');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
@@ -58,7 +61,7 @@ var Container = require('@bigbinary/neeto-molecules/Container');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var Help = require('@bigbinary/neeto-icons/Help');
-var Switch = require('@bigbinary/neetoui/Switch');
+var Switch$1 = require('@bigbinary/neetoui/Switch');
 var useCustomDataStore = require('../useCustomDataStore-BEG8I__n.js');
 var _typeof = require('@babel/runtime/helpers/typeof');
 require('zustand');
@@ -84,7 +87,7 @@ var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
 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) {
@@ -110,7 +113,7 @@ var useActiveField = function useActiveField(name) {
   react.useEffect(function () {
     if (!shouldAutoFocus || activeField) return;
     setFieldActive();
-  }, []);
+  }, [name]);
   react.useEffect(function () {
     var shouldFocus = shouldFocusRef.current;
     shouldFocusRef.current = true;
@@ -125,10 +128,12 @@ var useActiveField = function useActiveField(name) {
     shouldFocusRef.current = !ref.current;
     if (needsRerender) {
       setPanelState(ramda.assocPath(["data", "activeField"], null));
+      requestAnimationFrame(function () {
+        return setPanelState(ramda.assocPath(["data", "activeField"], name));
+      });
+    } else {
+      setPanelState(ramda.assocPath(["data", "activeField"], name));
     }
-    requestAnimationFrame(function () {
-      return setPanelState(ramda.assocPath(["data", "activeField"], name));
-    });
   };
   var resetActiveField = function resetActiveField() {
     return setPanelState(ramda.assocPath(["data", "activeField"], null));
@@ -574,14 +579,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,
@@ -596,8 +614,8 @@ var hasKeyOrValue = ramda.whereAny({
   key: neetoCist.isNotEmpty,
   value: neetoCist.isNotEmpty
 });
-var formatAdditionalData = function formatAdditionalData(additionalData) {
-  return neetoCist.isPresent(additionalData) ? additionalData : [ADDITIONAL_DATA_INITIAL_VALUE];
+var formatCustomFields = function formatCustomFields(customFields) {
+  return neetoCist.isPresent(customFields) ? customFields : [CUSTOM_HEADERS_INITIAL_VALUE];
 };
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -606,30 +624,27 @@ 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,
+    entity = _ref.entity,
     onFocus = _ref.onFocus;
   return /*#__PURE__*/jsxRuntime.jsx(formik.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__*/jsxRuntime.jsxs("div", {
-        className: "space-y-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-          children: label
-        }), data.map(function (_, index) {
+        className: "flex flex-col space-y-3",
+        children: [data.map(function (_, index) {
           return /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex h-8 space-x-3",
             children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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",
@@ -649,7 +664,10 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
           }, index);
         }), /*#__PURE__*/jsxRuntime.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);
@@ -660,6 +678,167 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
   });
 });
 
+var CustomHeaders = function CustomHeaders(_ref) {
+  var name = _ref.name,
+    onFocus = _ref.onFocus;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = reactI18next.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__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col space-y-4 mb-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
+      label: label,
+      onFocus: onFocus,
+      "data-cy": "neeto-rules-api-fields-".concat(neetoCist.hyphenate(label), "-switch"),
+      name: switchName,
+      onChange: handleChange
+    }), isCustomHeadersEnabled && /*#__PURE__*/jsxRuntime.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 = react.useRef(null);
+  var completionProviderRef = react.useRef(null);
+  var _useField = formik.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 = reactI18next.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);
+  };
+  react.useEffect(function () {
+    var editor = editorRef.current;
+    if (!editor) return;
+    var currentValue = editor.getValue();
+    if (currentValue !== initialValue) {
+      editor.setValue(initialValue);
+    }
+  }, [initialValue]);
+  react.useEffect(function () {
+    return function () {
+      var _completionProviderRe;
+      (_completionProviderRe = completionProviderRef.current) === null || _completionProviderRe === void 0 || _completionProviderRe.dispose();
+      completionProviderRef.current = null;
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-2 mb-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+      required: true,
+      "data-cy": "api-field-body",
+      children: t("neetoRules.labels.body")
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-rules-json-editor__wrapper",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-rules-json-editor__dynamic-variables",
+        children: /*#__PURE__*/jsxRuntime.jsx(DynamicVariables, {
+          variables: variables,
+          onVariableClick: insertVariable
+        })
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+        className: "neeto-ui-input__error",
+        children: error
+      })]
+    })]
+  });
+};
+
 var SelectTemplateField = function SelectTemplateField(_ref) {
   var selectedField = _ref.selectedField,
     templates = _ref.templates,
@@ -746,7 +925,8 @@ var ApiFields = function ApiFields(_ref2) {
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
   var _useFormikContext = formik.useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
   var _useActiveField2 = useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
@@ -755,8 +935,10 @@ var ApiFields = function ApiFields(_ref2) {
   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"), 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__*/jsxRuntime.jsxs("div", {
     className: "w-full",
@@ -776,9 +958,13 @@ var ApiFields = function ApiFields(_ref2) {
       ref: isTemplateSelectionEnabled ? null : ref,
       type: "text",
       onFocus: setFieldActive
-    }), /*#__PURE__*/jsxRuntime.jsx(KeyValuePairsField, {
-      label: t("neetoRules.labels.additionalData"),
-      name: "".concat(name, ".additionalData"),
+    }), /*#__PURE__*/jsxRuntime.jsx(CustomHeaders, {
+      name: name,
+      onFocus: setFieldActive
+    }), /*#__PURE__*/jsxRuntime.jsx(JsonEditor, {
+      initialValue: dotPath("".concat(name, ".body"), values),
+      name: "".concat(name, ".body"),
+      variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables,
       onFocus: setFieldActive
     })]
   });
@@ -968,17 +1154,17 @@ var EditorAction = function EditorAction(_ref) {
     editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef,
     defaults = _ref.defaults,
     otherProps = _objectWithoutProperties(_ref, _excluded$d);
-  var _useState = react.useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    editorData = _useState2[0],
-    setEditorData = _useState2[1];
+  var _useStateWithDependen = reactUtils.useStateWithDependency(value, [name]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    editorData = _useStateWithDependen2[0],
+    setEditorData = _useStateWithDependen2[1];
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var debouncedValue = reactUtils.useDebounce(editorData, 200);
   react.useEffect(function () {
     setFieldValue(name, editorData);
   }, [debouncedValue]);
-  return /*#__PURE__*/jsxRuntime.jsx(FormikEditor, _objectSpread$n({
+  return /*#__PURE__*/react.createElement(FormikEditor, _objectSpread$n({
     addons: addons,
     autoFocus: autoFocus,
     defaults: defaults,
@@ -988,6 +1174,7 @@ var EditorAction = function EditorAction(_ref) {
     hideSlashCommands: true,
     className: "w-full",
     "data-cy": "neeto-editor",
+    key: name,
     ref: editorRef,
     onChange: setEditorData
   }, otherProps));
@@ -4353,7 +4540,27 @@ var getActionsSchema = function getActionsSchema(element, customData) {
               entity: i18next.t("neetoRules.labels.endpoint")
             })).required(i18next.t("neetoRules.validations.required.entity", {
               entity: i18next.t("neetoRules.labels.endpoint")
-            }))
+            })),
+            body: yup__namespace.string().trim().required(i18next.t("neetoRules.validations.required.entity", {
+              entity: i18next.t("neetoRules.labels.body")
+            })).test("is-valid-json-and-not-empty", function (value, context) {
+              if (!value) return true;
+              try {
+                var parsedValue = JSON.parse(value);
+                if (neetoCist.isNotPresent(parsedValue)) {
+                  return context.createError({
+                    message: i18next.t("neetoRules.validations.required.entity", {
+                      entity: i18next.t("neetoRules.labels.body")
+                    })
+                  });
+                }
+                return true;
+              } catch (_unused) {
+                return context.createError({
+                  message: i18next.t("neetoRules.validations.invalidJsonBody")
+                });
+              }
+            })
           });
         } else if (ACTION_TYPES.multiSelect === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup__namespace.object({
@@ -5690,7 +5897,7 @@ var Status = function Status() {
     var status = e.target.checked ? ENABLED : DISABLED;
     setFieldValue("status.value", status);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Switch, {
+  return /*#__PURE__*/jsxRuntime.jsx(Switch$1, {
     checked: defaultValue === ENABLED,
     label: t("neetoRules.labels.active"),
     labelProps: {