@bigbinary/neeto-rules-frontend 2.5.15-beta-8 → 2.5.15-beta-9

package/dist/cjs/NeetoRulesForm.js

@@ -13,22 +13,24 @@ var Delete = require('@bigbinary/neeto-icons/Delete');
 var Refresh = require('@bigbinary/neeto-icons/Refresh');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
-var useUtilityStore = require('../useUtilityStore-BFuftXo4.js');
+var useUtilityStore = require('../useUtilityStore-DhJI92iM.js');
 var classNames = require('classnames');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
+var i18next = require('i18next');
+var yup = require('yup');
 var Radio = require('@bigbinary/neetoui/formik/Radio');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var managers = require('@bigbinary/neetoui/managers');
 var jsxRuntime = require('react/jsx-runtime');
 var Collapse = require('@bigbinary/neeto-icons/Collapse');
-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 Help = require('@bigbinary/neeto-icons/Help');
 var DynamicVariables = require('@bigbinary/neeto-molecules/DynamicVariables');
 var Label = require('@bigbinary/neetoui/Label');
 var Select = require('@bigbinary/neetoui/Select');
@@ -47,7 +49,6 @@ var _toArray = require('@babel/runtime/helpers/toArray');
 var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var Tag = require('@bigbinary/neetoui/Tag');
 var reactSelect = require('react-select');
-var yup = require('yup');
 var constants = require('../constants-BkPVd-Gz.js');
 var Radio$1 = require('@bigbinary/neetoui/Radio');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -60,7 +61,6 @@ var Tooltip = require('@bigbinary/neetoui/Tooltip');
 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$1 = require('@bigbinary/neetoui/Switch');
 var useCustomDataStore = require('../useCustomDataStore-BEG8I__n.js');
 var _typeof = require('@babel/runtime/helpers/typeof');
@@ -87,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-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}[data-tippy-root]{z-index:99999!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19sYXlvdXQuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvY29tcG9uZW50cy9fcGFuZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2pzb24tZWRpdG9yLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvY29tcG9uZW50cy9fZHJvcGRvd24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FDRSx1QkNDRixDREVBLCtDQUNFLGVDQ0YsQ0NOQSx3QkFFRSxXQUFBLENBREEsYURVRixDQ1BFLCtCQUNFLFdEU0osQ0NQSSwwQkFIRiwrQkFJSSxXRFVKLENBQ0YsQ0NQRSwrQkFDRSxXRFNKLENDUEksMEJBSEYsK0JBSUksV0RVSixDQUNGLENFMUJFLGtDQUVFLFdBQUEsQ0FEQSxpQkY4QkosQ0UxQkUsaUNBQ0UsV0Y0QkosQ0V6QkUsNENBQ0UsaUJBQUEsQ0FFQSxVQUFBLENBREEsUUFBQSxDQUVBLFVGMkJKLENHekNBLGtCQUNFLHVCSDRDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1ydWxlcy1tYWluLWNvbnRlbnRfX2NvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwZHZoICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1ydWxlcy1tYWluLWNhcmQgLm5lZXRvLXVpLWJ0bi51bmRlcmxpbmUge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufSIsIi5uZWV0by1ydWxlcy1tYWluLWNvbnRlbnRfX2NvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwZHZoICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1ydWxlcy1tYWluLWNhcmQgLm5lZXRvLXVpLWJ0bi51bmRlcmxpbmUge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufVxuXG4ubmVldG8tcnVsZXMtc2lkZS1wYW5lbCB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWdyb3c6IDA7XG59XG4ubmVldG8tcnVsZXMtc2lkZS1wYW5lbC0tc21hbGwge1xuICB3aWR0aDogMzIwcHg7XG59XG5AbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1zbWFsbCB7XG4gICAgd2lkdGg6IDM4MHB4O1xuICB9XG59XG4ubmVldG8tcnVsZXMtc2lkZS1wYW5lbC0tbGFyZ2Uge1xuICB3aWR0aDogMzgwcHg7XG59XG5AbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1sYXJnZSB7XG4gICAgd2lkdGg6IDQ4MHB4O1xuICB9XG59XG5cbi5uZWV0by1ydWxlcy1qc29uLWVkaXRvcl9fd3JhcHBlciB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAzNXZoO1xufVxuLm5lZXRvLXJ1bGVzLWpzb24tZWRpdG9yX19lZGl0b3Ige1xuICBoZWlnaHQ6IDEwMCU7XG59XG4ubmVldG8tcnVsZXMtanNvbi1lZGl0b3JfX2R5bmFtaWMtdmFyaWFibGVzIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDFyZW07XG4gIHJpZ2h0OiAxcmVtO1xuICB6LWluZGV4OiAxMDtcbn1cblxuW2RhdGEtdGlwcHktcm9vdF0ge1xuICB6LWluZGV4OiA5OTk5OSAhaW1wb3J0YW50O1xufSIsIi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsIHtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGZsZXgtZ3JvdzogMDtcblxuICAmLS1zbWFsbCB7XG4gICAgd2lkdGg6IDMyMHB4O1xuXG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkge1xuICAgICAgd2lkdGg6IDM4MHB4O1xuICAgIH1cbiAgfVxuXG4gICYtLWxhcmdlIHtcbiAgICB3aWR0aDogMzgwcHg7XG5cbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gICAgICB3aWR0aDogNDgwcHg7XG4gICAgfVxuICB9XG59IiwiLm5lZXRvLXJ1bGVzLWpzb24tZWRpdG9yIHtcbiAgJl9fd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGhlaWdodDogMzV2aDtcbiAgfVxuXG4gICZfX2VkaXRvciB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICB9XG5cbiAgJl9fZHluYW1pYy12YXJpYWJsZXMge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDFyZW07XG4gICAgcmlnaHQ6IDFyZW07XG4gICAgei1pbmRleDogMTA7XG4gIH1cbn1cbiIsIltkYXRhLXRpcHB5LXJvb3RdIHtcbiAgei1pbmRleDogOTk5OTkgIWltcG9ydGFudDtcbn1cbiJdfQ== */";
+var css = ".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;padding-bottom:2rem;position:relative}.neeto-rules-json-editor__editor{height:100%}.neeto-rules-json-editor__dynamic-variables{position:absolute;right:1rem;top:1rem;z-index:10}[data-tippy-root]{z-index:99999!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19sYXlvdXQuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvY29tcG9uZW50cy9fcGFuZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2pzb24tZWRpdG9yLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvY29tcG9uZW50cy9fZHJvcGRvd24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FDRSx1QkNDRixDREVBLCtDQUNFLGVDQ0YsQ0NOQSx3QkFFRSxXQUFBLENBREEsYURVRixDQ1BFLCtCQUNFLFdEU0osQ0NQSSwwQkFIRiwrQkFJSSxXRFVKLENBQ0YsQ0NQRSwrQkFDRSxXRFNKLENDUEksMEJBSEYsK0JBSUksV0RVSixDQUNGLENFMUJFLGtDQUVFLFdBQUEsQ0FDQSxtQkFBQSxDQUZBLGlCRitCSixDRTFCRSxpQ0FDRSxXRjRCSixDRXpCRSw0Q0FDRSxpQkFBQSxDQUVBLFVBQUEsQ0FEQSxRQUFBLENBRUEsVUYyQkosQ0cxQ0Esa0JBQ0UsdUJINkNGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXJ1bGVzLW1haW4tY29udGVudF9fY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMDBkdmggIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXJ1bGVzLW1haW4tY2FyZCAubmVldG8tdWktYnRuLnVuZGVybGluZSB7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59IiwiLm5lZXRvLXJ1bGVzLW1haW4tY29udGVudF9fY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMDBkdmggIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXJ1bGVzLW1haW4tY2FyZCAubmVldG8tdWktYnRuLnVuZGVybGluZSB7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59XG5cbi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsIHtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGZsZXgtZ3JvdzogMDtcbn1cbi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1zbWFsbCB7XG4gIHdpZHRoOiAzMjBweDtcbn1cbkBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXJ1bGVzLXNpZGUtcGFuZWwtLXNtYWxsIHtcbiAgICB3aWR0aDogMzgwcHg7XG4gIH1cbn1cbi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsLS1sYXJnZSB7XG4gIHdpZHRoOiAzODBweDtcbn1cbkBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXJ1bGVzLXNpZGUtcGFuZWwtLWxhcmdlIHtcbiAgICB3aWR0aDogNDgwcHg7XG4gIH1cbn1cblxuLm5lZXRvLXJ1bGVzLWpzb24tZWRpdG9yX193cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDM1dmg7XG4gIHBhZGRpbmctYm90dG9tOiAycmVtO1xufVxuLm5lZXRvLXJ1bGVzLWpzb24tZWRpdG9yX19lZGl0b3Ige1xuICBoZWlnaHQ6IDEwMCU7XG59XG4ubmVldG8tcnVsZXMtanNvbi1lZGl0b3JfX2R5bmFtaWMtdmFyaWFibGVzIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDFyZW07XG4gIHJpZ2h0OiAxcmVtO1xuICB6LWluZGV4OiAxMDtcbn1cblxuW2RhdGEtdGlwcHktcm9vdF0ge1xuICB6LWluZGV4OiA5OTk5OSAhaW1wb3J0YW50O1xufSIsIi5uZWV0by1ydWxlcy1zaWRlLXBhbmVsIHtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGZsZXgtZ3JvdzogMDtcblxuICAmLS1zbWFsbCB7XG4gICAgd2lkdGg6IDMyMHB4O1xuXG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkge1xuICAgICAgd2lkdGg6IDM4MHB4O1xuICAgIH1cbiAgfVxuXG4gICYtLWxhcmdlIHtcbiAgICB3aWR0aDogMzgwcHg7XG5cbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gICAgICB3aWR0aDogNDgwcHg7XG4gICAgfVxuICB9XG59IiwiLm5lZXRvLXJ1bGVzLWpzb24tZWRpdG9yIHtcbiAgJl9fd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGhlaWdodDogMzV2aDtcbiAgICBwYWRkaW5nLWJvdHRvbTogMnJlbTtcbiAgfVxuXG4gICZfX2VkaXRvciB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICB9XG5cbiAgJl9fZHluYW1pYy12YXJpYWJsZXMge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDFyZW07XG4gICAgcmlnaHQ6IDFyZW07XG4gICAgei1pbmRleDogMTA7XG4gIH1cbn1cbiIsIltkYXRhLXRpcHB5LXJvb3RdIHtcbiAgei1pbmRleDogOTk5OTkgIWltcG9ydGFudDtcbn1cbiJdfQ== */";
 n(css,{});
 
 var useActiveField = function useActiveField(name) {
@@ -196,9 +196,9 @@ var Header = function Header(_ref) {
   });
 };
 
-var _excluded$e = ["component"];
-function ownKeys$o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$f = ["component"];
+function ownKeys$u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Panel = function Panel() {
   var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
       return {
@@ -219,17 +219,17 @@ var Panel = function Panel() {
     Object.assign(data, panelState.data);
   }
   var Component = config.component,
-    paneProps = _objectWithoutProperties(config, _excluded$e);
+    paneProps = _objectWithoutProperties(config, _excluded$f);
   var isOpen = !!panelState.type;
   var hasOverlays = managers.manager.hasOverlays();
   var panelSize = {
     small: "neeto-rules-side-panel--small",
     large: "neeto-rules-side-panel--large"
   }[panelState.size] || "neeto-rules-side-panel--small";
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$o(_objectSpread$o({
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$u(_objectSpread$u({
     className: classNames("neeto-rules-side-panel neeto-ui-border-gray-300 transition-width neeto-ui-bg-white ml-auto flex h-screen max-h-full flex-col overflow-y-auto border-l duration-300 ease-in-out", _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, panelSize, isOpen), "w-0 overflow-hidden", !isOpen), "absolute", hasOverlays), "right-0", hasOverlays))
   }, paneProps), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$o(_objectSpread$o({}, data), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$u(_objectSpread$u({}, data), {}, {
       onClose: resetPanelState
     }), panelState.type)
   }));
@@ -293,6 +293,11 @@ var DEFAULT_RULE_ACTION = {
 var EDITOR_ADDONS = ["code-block", "block-quote", "image-upload"];
 var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var ACTION_INPUT_TYPES = ["text", "number", "decimal", "regex"];
+var DEFAULT_HELP_POPOVER_PROPS = {
+  helpLinkProps: {
+    label: i18next.t("neetoRules.labels.viewHelpArticle")
+  }
+};
 
 var getFieldDetails$1 = function getFieldDetails(fieldValue) {
   var actionOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -611,7 +616,13 @@ var EDITOR_CONFIG = {
   scrollBeyondLastLine: false,
   autoIndent: "full"
 };
-var API_REQUEST_FIELDS = ["endpoint", "body", "enableCustomHeaders", "customHeaders"];
+var API_REQUEST_FIELDS = {
+  TEMPLATE_ID: "templateId",
+  ENDPOINT: "endpoint",
+  BODY: "body",
+  ENABLE_CUSTOM_HEADERS: "enableCustomHeaders",
+  CUSTOM_HEADERS: "customHeaders"
+};
 
 var addOption = function addOption(arrayHelpers) {
   return arrayHelpers.push(CUSTOM_HEADERS_INITIAL_VALUE);
@@ -632,9 +643,72 @@ var hasKeyOrValue = ramda.whereAny({
 var formatCustomFields = function formatCustomFields(customFields) {
   return neetoCist.isPresent(customFields) ? customFields : [CUSTOM_HEADERS_INITIAL_VALUE];
 };
+var rejectEmptyKeyValuePairs = ramda.reject(ramda.whereAny({
+  key: ramda.isEmpty,
+  value: ramda.isEmpty
+}));
+var areHeadersSame = function areHeadersSame(enableCustomHeaders, customHeaders) {
+  var template = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var templateHasCustomHeaders = template.enableCustomHeaders,
+    templateHeaders = template.customHeaders;
+  if (!enableCustomHeaders && !templateHasCustomHeaders) return true;
+  if (enableCustomHeaders !== templateHasCustomHeaders) return false;
+  return ramda.equals(customHeaders, templateHeaders);
+};
+var isBodyAvailable = function isBodyAvailable(body) {
+  try {
+    var data = JSON.parse(body);
+    return neetoCist.isPresent(data);
+  } catch (_unused) {
+    return false;
+  }
+};
+var formatTemplateValues = function formatTemplateValues(key, template) {
+  switch (key) {
+    case API_REQUEST_FIELDS.CUSTOM_HEADERS:
+      return formatCustomFields(template[key]);
+    case API_REQUEST_FIELDS.TEMPLATE_ID:
+      return template.id;
+    default:
+      return template[key];
+  }
+};
+
+var sanitizeHelpPopoverProps = ramda.unless(ramda.path(["helpLinkProps", "href"]), ramda.omit(["helpLinkProps"]));
+var setEditorContent = function setEditorContent(ref, content) {
+  if (!ref.current) return;
+  ref.current.editor.commands.setContent(content);
+};
+var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    refs.forEach(function (ref) {
+      if (typeof ref === "function") ref(node);else if (ref !== null) ref.current = node;
+    });
+  };
+};
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 var dotPath = ramda.useWith(ramda.path, [ramda.split(".")]);
+var areValuesEqual = function areValuesEqual(value1, value2) {
+  var normalize = ramda.when(ramda.is(String), ramda.trim);
+  return ramda.eqBy(normalize, value1, value2);
+};
+var buildHelpPopoverProps = function buildHelpPopoverProps(popoverProps) {
+  var combinedProps = ramda.mergeDeepLeft(popoverProps, DEFAULT_HELP_POPOVER_PROPS);
+  return sanitizeHelpPopoverProps(combinedProps);
+};
+var withHelpPopover = function withHelpPopover(helpPopoverProps) {
+  return neetoCist.isPresent(helpPopoverProps) ? {
+    labelProps: {
+      helpIconProps: {
+        popoverProps: buildHelpPopoverProps(helpPopoverProps)
+      }
+    }
+  } : {};
+};
 
 var KeyValuePairsField = reactUtils.withT(function (_ref) {
   var t = _ref.t,
@@ -693,9 +767,13 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
   });
 });
 
+function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CustomHeaders = function CustomHeaders(_ref) {
   var name = _ref.name,
-    onFocus = _ref.onFocus;
+    onFocus = _ref.onFocus,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps;
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     setFieldValue = _useFormikContext.setFieldValue;
@@ -714,27 +792,31 @@ var CustomHeaders = function CustomHeaders(_ref) {
   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, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$t({
       label: label,
       onFocus: onFocus,
       "data-cy": "neeto-rules-api-fields-".concat(neetoCist.hyphenate(label), "-switch"),
       name: switchName,
       onChange: handleChange
-    }), isCustomHeadersEnabled && /*#__PURE__*/jsxRuntime.jsx(KeyValuePairsField, {
+    }, withHelpPopover(helpPopoverProps))), isCustomHeadersEnabled && /*#__PURE__*/jsxRuntime.jsx(KeyValuePairsField, {
       onFocus: onFocus,
       entity: t("neetoRules.labels.headers"),
-      name: "".concat(name, ".customHeaders")
+      name: keyValuePairsFieldName
     })]
   });
 };
 
+function ownKeys$s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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;
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps;
   var editorRef = react.useRef(null);
   var completionProviderRef = react.useRef(null);
   var _useField = formik.useField(name),
@@ -823,12 +905,18 @@ var JsonEditor = function JsonEditor(_ref) {
     };
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-2 mb-2",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+    className: "space-y-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread$s(_objectSpread$s({
       required: true,
-      "data-cy": "api-field-body",
+      "data-cy": "api-field-body"
+    }, neetoCist.isPresent(helpPopoverProps) && {
+      helpIconProps: {
+        icon: Help,
+        popoverProps: buildHelpPopoverProps(helpPopoverProps)
+      }
+    }), {}, {
       children: t("neetoRules.labels.body")
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+    })), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "neeto-rules-json-editor__wrapper",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "neeto-rules-json-editor__dynamic-variables",
@@ -854,6 +942,43 @@ var JsonEditor = function JsonEditor(_ref) {
   });
 };
 
+var SaveAsTemplate = function SaveAsTemplate(_ref) {
+  var name = _ref.name,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var switchName = "".concat(name, ".shouldSaveAsTemplate");
+  var templateName = "".concat(name, ".templateName");
+  var shouldSaveAsTemplate = dotPath(switchName, values);
+  var handleChange = function handleChange(_ref2) {
+    var checked = _ref2.target.checked;
+    if (!checked) {
+      setFieldValue(templateName, "");
+    }
+    setFieldValue(switchName, checked);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames(["flex flex-col space-y-4", className]),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
+      "data-cy": "neeto-rules-save-as-template-switch",
+      label: t("neetoRules.labels.saveAsTemplate"),
+      name: switchName,
+      onChange: handleChange
+    }), shouldSaveAsTemplate && /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+      autoFocus: true,
+      required: true,
+      label: t("neetoRules.labels.templateName"),
+      name: templateName
+    })]
+  });
+};
+
+function ownKeys$r(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SelectTemplateField = function SelectTemplateField(_ref) {
   var selectedField = _ref.selectedField,
     templates = _ref.templates,
@@ -874,7 +999,9 @@ var SelectTemplateField = function SelectTemplateField(_ref) {
     }, templates);
     onChange === null || onChange === void 0 || onChange(template);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Select, {
+  var _ref2 = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.helpPopoverProps) || {},
+    helpPopoverProps = _ref2.template;
+  return /*#__PURE__*/jsxRuntime.jsx(Select, _objectSpread$r({
     onFocus: onFocus,
     isClearable: true,
     isSearchable: true,
@@ -888,7 +1015,35 @@ var SelectTemplateField = function SelectTemplateField(_ref) {
     placeholder: t("neetoRules.placeholders.selectTemplate"),
     value: selectedTemplate,
     onChange: handleTemplateChange
-  });
+  }, withHelpPopover(helpPopoverProps)));
+};
+
+var useHasFieldChanged = function useHasFieldChanged(name) {
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    initialValues = _useFormikContext.initialValues;
+  var initialValue = dotPath(name, initialValues);
+  var value = dotPath(name, values);
+  return neetoCist.notEqualsDeep(initialValue, value);
+};
+
+var useResetSaveAsTemplateOnHide = function useResetSaveAsTemplateOnHide(name, shouldShowSaveAsTemplate) {
+  var _dotPath;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var currentValue = (_dotPath = dotPath(name, values)) !== null && _dotPath !== void 0 ? _dotPath : {};
+  var isVisible = shouldShowSaveAsTemplate(currentValue);
+  var wasVisibleRef = react.useRef(isVisible);
+  react.useEffect(function () {
+    var wasVisible = wasVisibleRef.current;
+    if (wasVisible && !isVisible) {
+      setFieldValue("".concat(name, ".shouldSaveAsTemplate"), false);
+      setFieldValue("".concat(name, ".templateName"), "");
+    }
+    wasVisibleRef.current = isVisible;
+  }, [isVisible, name, setFieldValue]);
+  return isVisible;
 };
 
 var Target$i = function Target(_ref) {
@@ -941,20 +1096,46 @@ var ApiFields = function ApiFields(_ref2) {
     t = _useTranslation2.t;
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
-    values = _useFormikContext.values;
+    formValues = _useFormikContext.values;
   var _useActiveField2 = useActiveField(name, {
       shouldAutoFocus: shouldAutoFocus
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
+  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+      return {
+        isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
+      };
+    }, shallow.shallow),
+    isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
+  var hasFieldChanged = useHasFieldChanged(name);
+  var templates = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates) || [];
+  var shouldShowSaveAsTemplate = react.useCallback(function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      templateId = _ref3.templateId,
+      endpoint = _ref3.endpoint,
+      enableCustomHeaders = _ref3.enableCustomHeaders,
+      _ref3$customHeaders = _ref3.customHeaders,
+      customHeaders = _ref3$customHeaders === void 0 ? [CUSTOM_HEADERS_INITIAL_VALUE] : _ref3$customHeaders,
+      body = _ref3.body;
+    var template = neetoCist.findBy({
+      id: templateId
+    }, templates);
+    var hasContent = neetoCist.isPresent(endpoint) || neetoCist.isPresent(rejectEmptyKeyValuePairs(customHeaders)) || isBodyAvailable(body);
+    var isContentDifferentFromTemplate = !(areValuesEqual(template === null || template === void 0 ? void 0 : template.endpoint, endpoint) && areHeadersSame(enableCustomHeaders, customHeaders, template) && ramda.equals(template === null || template === void 0 ? void 0 : template.body, body));
+    return hasContent && hasFieldChanged && isContentDifferentFromTemplate;
+  }, [templates, hasFieldChanged]);
+  var isSaveAsTemplateVisible = useResetSaveAsTemplateOnHide(name, isSaveAsTemplateEnabled ? shouldShowSaveAsTemplate : ramda.F);
   var isTemplateSelectionEnabled = neetoCist.isPresent(templates);
   var handleTemplateChange = function handleTemplateChange(template) {
-    API_REQUEST_FIELDS.forEach(function (key) {
-      var value = key === "customHeaders" ? formatCustomFields(template[key]) : template[key];
+    ramda.values(API_REQUEST_FIELDS).forEach(function (key) {
+      var value = formatTemplateValues(key, template);
       setFieldValue("".concat(name, ".").concat(key), value);
     });
   };
+  var _ref4 = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.helpPopoverProps) || {},
+    customHeadersHelpPopoverProps = _ref4.customHeaders,
+    bodyHelpPopoverProps = _ref4.body;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "w-full",
     children: [isTemplateSelectionEnabled && /*#__PURE__*/jsxRuntime.jsx(SelectTemplateField, {
@@ -975,12 +1156,16 @@ var ApiFields = function ApiFields(_ref2) {
       onFocus: setFieldActive
     }), /*#__PURE__*/jsxRuntime.jsx(CustomHeaders, {
       name: name,
+      helpPopoverProps: customHeadersHelpPopoverProps,
       onFocus: setFieldActive
     }), /*#__PURE__*/jsxRuntime.jsx(JsonEditor, {
-      initialValue: dotPath("".concat(name, ".body"), values),
+      helpPopoverProps: bodyHelpPopoverProps,
+      initialValue: dotPath("".concat(name, ".body"), formValues),
       name: "".concat(name, ".body"),
       variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables,
       onFocus: setFieldActive
+    }), isSaveAsTemplateVisible && /*#__PURE__*/jsxRuntime.jsx(SaveAsTemplate, {
+      name: name
     })]
   });
 };
@@ -1155,9 +1340,9 @@ var EmailIdFields = function EmailIdFields(_ref) {
   });
 };
 
-var _excluded$d = ["autoFocus", "name", "value", "label", "variables", "addons", "editorRef", "defaults"];
-function ownKeys$n(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$e = ["autoFocus", "name", "value", "label", "variables", "addons", "editorRef", "defaults"];
+function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EditorAction = function EditorAction(_ref) {
   var _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
@@ -1172,7 +1357,7 @@ var EditorAction = function EditorAction(_ref) {
     _ref$editorRef = _ref.editorRef,
     editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef,
     defaults = _ref.defaults,
-    otherProps = _objectWithoutProperties(_ref, _excluded$d);
+    otherProps = _objectWithoutProperties(_ref, _excluded$e);
   var _useStateWithDependen = reactUtils.useStateWithDependency(value, [name]),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
     editorData = _useStateWithDependen2[0],
@@ -1183,7 +1368,7 @@ var EditorAction = function EditorAction(_ref) {
   react.useEffect(function () {
     setFieldValue(name, editorData);
   }, [debouncedValue]);
-  return /*#__PURE__*/react.createElement(FormikEditor, _objectSpread$n({
+  return /*#__PURE__*/react.createElement(FormikEditor, _objectSpread$q({
     addons: addons,
     autoFocus: autoFocus,
     defaults: defaults,
@@ -1199,6 +1384,9 @@ var EditorAction = function EditorAction(_ref) {
   }, otherProps));
 };
 
+var _excluded$d = ["dropdownOptions", "name", "selectedField", "shouldAutoFocus", "className", "required"];
+function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Target$f = function Target(_ref) {
   var _selectedOption$label;
   var dropdownOptions = _ref.dropdownOptions,
@@ -1259,7 +1447,8 @@ var SelectField$2 = function SelectField(_ref2) {
     shouldAutoFocus = _ref2$shouldAutoFocus === void 0 ? false : _ref2$shouldAutoFocus,
     className = _ref2.className,
     _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? false : _ref2$required;
+    required = _ref2$required === void 0 ? false : _ref2$required,
+    otherProps = _objectWithoutProperties(_ref2, _excluded$d);
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
   var _useField3 = formik.useField(name),
@@ -1290,35 +1479,23 @@ var SelectField$2 = function SelectField(_ref2) {
     setValue((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : null);
     setTouched(true);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Select$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Select$1, _objectSpread$p(_objectSpread$p({}, _objectSpread$p({
     className: className,
     name: name,
-    required: required,
+    required: required
+  }, otherProps)), {}, {
     innerRef: ref,
     label: defaultLabel,
     options: dropdownOptions,
     value: selectedOption,
     onChange: handleSelectOption,
     onFocus: setFieldActive
-  });
+  }));
 };
 SelectField$2.Target = Target$f;
 
-var setEditorContent = function setEditorContent(ref, content) {
-  if (!ref.current) return;
-  ref.current.editor.commands.setContent(content);
-};
-var mergeRefs = function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-  return function (node) {
-    refs.forEach(function (ref) {
-      if (typeof ref === "function") ref(node);else if (ref !== null) ref.current = node;
-    });
-  };
-};
-
+function ownKeys$o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Target$e = function Target(_ref) {
   var selectedField = _ref.selectedField,
     _ref$separatorIndex = _ref.separatorIndex,
@@ -1391,8 +1568,28 @@ var EmailFields = function EmailFields(_ref2) {
     }),
     initialFocusRef = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
+  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+      return {
+        isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
+      };
+    }, shallow.shallow),
+    isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
+  var hasFieldChanged = useHasFieldChanged(name);
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
   var isTemplateSelectionEnabled = neetoCist.isPresent(templates);
+  var shouldShowSaveAsTemplate = react.useCallback(function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      templateId = _ref3.templateId,
+      subject = _ref3.subject,
+      body = _ref3.body;
+    var template = neetoCist.findBy({
+      id: templateId
+    }, templates);
+    var hasContent = neetoCist.isPresent(subject) || neetoCist.isPresent(body);
+    var isContentDifferentFromTemplate = !(areValuesEqual(template === null || template === void 0 ? void 0 : template.subject, subject) && (template === null || template === void 0 ? void 0 : template.body) === body);
+    return hasContent && hasFieldChanged && isContentDifferentFromTemplate;
+  }, [templates, hasFieldChanged]);
+  var isSaveAsTemplateVisible = useResetSaveAsTemplateOnHide(name, isSaveAsTemplateEnabled ? shouldShowSaveAsTemplate : ramda.F);
   var isFirstFieldInForm = function isFirstFieldInForm(field) {
     if (isTemplateSelectionEnabled) return false;
     if (field === "emails") return true;
@@ -1400,14 +1597,17 @@ var EmailFields = function EmailFields(_ref2) {
     return !isEmailIdField && selectedField.hideSubject;
   };
   var handleTemplateChange = function handleTemplateChange(template) {
+    setFieldValue("".concat(name, ".templateId"), template.id);
     setFieldValue("".concat(name, ".body"), template.body);
     setEditorContent(editorRef, template.body);
     if (selectedField.hideSubject) return;
     setFieldValue("".concat(name, ".subject"), template.subject);
   };
+  var _ref4 = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.helpPopoverProps) || {},
+    recipientFieldHelpPopoverProps = _ref4.recipientField;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "w-full",
-    children: [showFieldSelection && /*#__PURE__*/react.createElement(SelectField$2, {
+    children: [showFieldSelection && /*#__PURE__*/react.createElement(SelectField$2, _objectSpread$o({
       index: index,
       selectedField: selectedField,
       required: true,
@@ -1416,7 +1616,7 @@ var EmailFields = function EmailFields(_ref2) {
       dropdownOptions: fieldOptions,
       key: "".concat(name, ".value"),
       name: "".concat(name, ".value")
-    }), isTemplateSelectionEnabled && /*#__PURE__*/jsxRuntime.jsx(SelectTemplateField, {
+    }, withHelpPopover(recipientFieldHelpPopoverProps))), isTemplateSelectionEnabled && /*#__PURE__*/jsxRuntime.jsx(SelectTemplateField, {
       initialFocusRef: initialFocusRef,
       selectedField: selectedField,
       templates: templates,
@@ -1444,6 +1644,9 @@ var EmailFields = function EmailFields(_ref2) {
       variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables,
       editorRef: isFirstFieldInForm("body") ? mergeRefs(editorRef, initialFocusRef) : editorRef,
       onFocus: setFieldActive
+    }), isSaveAsTemplateVisible && /*#__PURE__*/jsxRuntime.jsx(SaveAsTemplate, {
+      name: name,
+      className: "mt-4"
     })]
   });
 };
@@ -1546,8 +1749,8 @@ var SHORTCUTS = {
 };
 
 var _excluded$c = ["value", "nullable", "className", "handleSubmit", "handleCancel"];
-function ownKeys$m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$n(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InlineInput = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var _props$value = props.value,
     value = _props$value === void 0 ? "" : _props$value,
@@ -1585,7 +1788,7 @@ var InlineInput = /*#__PURE__*/react.forwardRef(function (props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames("flex flex-grow", _defineProperty({}, className, className)),
     ref: inputWrapperRef,
-    children: /*#__PURE__*/jsxRuntime.jsx(Input$2, _objectSpread$m(_objectSpread$m({
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$2, _objectSpread$n(_objectSpread$n({
       autoFocus: true,
       required: true,
       className: "neeto-planner-inline-input",
@@ -2232,8 +2435,8 @@ var formatErrorMessage = function formatErrorMessage(error) {
 };
 
 var _excluded$b = ["children"];
-function ownKeys$l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var STYLES = {
   border: {
     "default": "1px solid rgb(var(--neeto-ui-gray-400))",
@@ -2245,8 +2448,8 @@ var STYLES = {
   }
 };
 var MultiValueRemove = function MultiValueRemove(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.MultiValueRemove, _objectSpread$l(_objectSpread$l({}, props), {}, {
-    innerProps: _objectSpread$l(_objectSpread$l({}, props.innerProps), {}, _defineProperty({}, "data-cy", "".concat(dasherize(props.data.label), "-remove-icon"))),
+  return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.MultiValueRemove, _objectSpread$m(_objectSpread$m({}, props), {}, {
+    innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-cy", "".concat(dasherize(props.data.label), "-remove-icon"))),
     children: /*#__PURE__*/jsxRuntime.jsx(Close, {
       size: 16
     })
@@ -2266,8 +2469,8 @@ var ValueContainer = function ValueContainer(_ref) {
     firstChild = _children[0],
     rest = _children.slice(1);
   var shouldCollapse = !isFocused && value.length > visiblePhoneNumbersCount;
-  return /*#__PURE__*/jsxRuntime.jsxs(reactSelect.components.ValueContainer, _objectSpread$l(_objectSpread$l({}, props), {}, {
-    innerProps: _objectSpread$l(_objectSpread$l({}, props.innerProps), {}, _defineProperty({}, "data-cy", "multi-phone-number-input-container")),
+  return /*#__PURE__*/jsxRuntime.jsxs(reactSelect.components.ValueContainer, _objectSpread$m(_objectSpread$m({}, props), {}, {
+    innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-cy", "multi-phone-number-input-container")),
     children: [shouldCollapse ? firstChild.slice(0, visiblePhoneNumbersCount) : firstChild, shouldCollapse && /*#__PURE__*/jsxRuntime.jsx(Tag, {
       style: "secondary",
       label: t("neetoRules.labels.remainingItemsCount", {
@@ -2277,8 +2480,8 @@ var ValueContainer = function ValueContainer(_ref) {
   }));
 };
 var ClearIndicator = function ClearIndicator(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.ClearIndicator, _objectSpread$l(_objectSpread$l({}, props), {}, {
-    innerProps: _objectSpread$l(_objectSpread$l({}, props.innerProps), {}, _defineProperty({}, "data-cy", "clear-all-button")),
+  return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.ClearIndicator, _objectSpread$m(_objectSpread$m({}, props), {}, {
+    innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-cy", "clear-all-button")),
     children: /*#__PURE__*/jsxRuntime.jsx(Close, {
       className: "cursor-pointer",
       size: 16
@@ -2296,7 +2499,7 @@ var CUSTOM_STYLES = {
   input: ramda.assoc("overflow", "hidden"),
   multiValue: function multiValue(styles, _ref2) {
     var valid = _ref2.data.valid;
-    return _objectSpread$l(_objectSpread$l({}, styles), {}, {
+    return _objectSpread$m(_objectSpread$m({}, styles), {}, {
       border: valid ? STYLES.border["default"] : STYLES.border.error,
       color: valid ? STYLES.color["default"] : STYLES.color.error
     });
@@ -2310,8 +2513,8 @@ var CUSTOM_COMPONENTS = {
 };
 
 var _excluded$a = ["value", "onChange", "error", "onBlur", "onFocus"];
-function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MultiPhoneNumberInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? [] : _ref$value,
@@ -2372,7 +2575,7 @@ var MultiPhoneNumberInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         "data-cy": "".concat(dasherize(label), "-input-label"),
         children: label
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(CreatableSelect, _objectSpread$k({
+    }), /*#__PURE__*/jsxRuntime.jsx(CreatableSelect, _objectSpread$l({
       isMulti: true,
       required: true,
       classNamePrefix: "neeto-ui-react-select",
@@ -2383,7 +2586,7 @@ var MultiPhoneNumberInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       className: classNames("neeto-ui-react-select__container neeto-ui-react-select__container--medium neeto-ui-email-input__select", {
         "neeto-ui-react-select__container--error": !!error
       }),
-      styles: _objectSpread$k(_objectSpread$k({}, CUSTOM_STYLES), {}, {
+      styles: _objectSpread$l(_objectSpread$l({}, CUSTOM_STYLES), {}, {
         control: ramda.mergeLeft({
           maxHeight: "200px",
           overflowY: "auto"
@@ -2396,7 +2599,7 @@ var MultiPhoneNumberInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         setIsFocused(true);
         _onFocus();
       }
-    }, _objectSpread$k({
+    }, _objectSpread$l({
       inputValue: inputValue,
       isFocused: isFocused,
       onChange: onChange,
@@ -2456,6 +2659,8 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
   });
 };
 
+function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Target$7 = function Target(_ref) {
   var name = _ref.name,
     _ref$separatorIndex = _ref.separatorIndex,
@@ -2527,11 +2732,29 @@ var SmsFields = function SmsFields(_ref2) {
     }),
     initialFocusRef = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
+  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+      return {
+        isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
+      };
+    }, shallow.shallow),
+    isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
+  var hasFieldChanged = useHasFieldChanged(name);
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
-  var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
+  var templates = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates) || [];
   var isTemplateSelectionEnabled = neetoCist.isPresent(templates);
+  var shouldShowSaveAsTemplate = react.useCallback(function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      templateId = _ref3.templateId,
+      body = _ref3.body;
+    var template = neetoCist.findBy({
+      id: templateId
+    }, templates);
+    return neetoCist.isPresent(body) && hasFieldChanged && (template === null || template === void 0 ? void 0 : template.body) !== body;
+  }, [templates, hasFieldChanged]);
+  var isSaveAsTemplateVisible = useResetSaveAsTemplateOnHide(name, isSaveAsTemplateEnabled ? shouldShowSaveAsTemplate : ramda.F);
   var handleTemplateChange = function handleTemplateChange(template) {
+    setFieldValue("".concat(name, ".templateId"), template.id);
     setFieldValue("".concat(name, ".body"), template.body);
     setEditorContent(editorRef, template.body);
   };
@@ -2539,9 +2762,11 @@ var SmsFields = function SmsFields(_ref2) {
     if (isTemplateSelectionEnabled) return false;
     return field === "phoneNumbers" ? true : !showPhoneNumberInput;
   };
+  var _ref4 = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.helpPopoverProps) || {},
+    recipientFieldHelpPopoverProps = _ref4.recipientField;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "w-full",
-    children: [showFieldSelection && /*#__PURE__*/react.createElement(SelectField$2, {
+    children: [showFieldSelection && /*#__PURE__*/react.createElement(SelectField$2, _objectSpread$k({
       index: index,
       selectedField: selectedField,
       shouldAutoFocus: true,
@@ -2549,7 +2774,7 @@ var SmsFields = function SmsFields(_ref2) {
       dropdownOptions: fieldOptions,
       key: "".concat(name, ".value"),
       name: "".concat(name, ".value")
-    }), isTemplateSelectionEnabled && /*#__PURE__*/jsxRuntime.jsx(SelectTemplateField, {
+    }, withHelpPopover(recipientFieldHelpPopoverProps))), isTemplateSelectionEnabled && /*#__PURE__*/jsxRuntime.jsx(SelectTemplateField, {
       initialFocusRef: initialFocusRef,
       selectedField: selectedField,
       templates: templates,
@@ -2570,6 +2795,9 @@ var SmsFields = function SmsFields(_ref2) {
       variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables,
       editorRef: isFirstFieldInForm("body") ? mergeRefs(editorRef, initialFocusRef) : editorRef,
       onFocus: setFieldActive
+    }), isSaveAsTemplateVisible && /*#__PURE__*/jsxRuntime.jsx(SaveAsTemplate, {
+      name: name,
+      className: "mt-4"
     })]
   });
 };
@@ -4588,7 +4816,8 @@ var getActionsSchema = function getActionsSchema(element, customData) {
             body: yup__namespace.string().test("body", i18next.t("neetoRules.validations.required.body"), function (value) {
               return !utils$1.isEditorEmpty(value);
             }),
-            value: selectedAction.type === ACTION_TYPES.emailTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema
+            value: selectedAction.type === ACTION_TYPES.emailTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema,
+            templateName: TEMPLATE_NAME_VALIDATION_SCHEMA
           });
         } else if ([ACTION_TYPES.sms, ACTION_TYPES.smsToNumbers, ACTION_TYPES.smsTo].includes(selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup__namespace.object({
@@ -4600,7 +4829,8 @@ var getActionsSchema = function getActionsSchema(element, customData) {
             body: yup__namespace.string().test("body", i18next.t("neetoRules.validations.required.body"), function (value) {
               return !utils$1.isEditorEmpty(value);
             }),
-            value: selectedAction.type === ACTION_TYPES.smsTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema
+            value: selectedAction.type === ACTION_TYPES.smsTo ? yup__namespace.string().required(i18next.t("neetoRules.validations.required.value")) : schema,
+            templateName: TEMPLATE_NAME_VALIDATION_SCHEMA
           });
         } else if (ACTION_TYPES.sendToApi === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup__namespace.object({
@@ -4628,7 +4858,8 @@ var getActionsSchema = function getActionsSchema(element, customData) {
                   message: i18next.t("neetoRules.validations.invalidJsonBody")
                 });
               }
-            })
+            }),
+            templateName: TEMPLATE_NAME_VALIDATION_SCHEMA
           });
         } else if (ACTION_TYPES.multiSelect === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup__namespace.object({
@@ -4804,6 +5035,12 @@ var PANEL_TYPE_CONFIG_MAP = _defineProperty(_defineProperty(_defineProperty(_def
   component: ActionSubItemPanel,
   data: {}
 });
+var TEMPLATE_NAME_VALIDATION_SCHEMA = yup__namespace.string().when("shouldSaveAsTemplate", {
+  is: true,
+  then: yup__namespace.string().trim().required(i18next.t("neetoRules.validations.required.entity", {
+    entity: i18next.t("neetoRules.labels.templateName")
+  }))
+});
 
 function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -4988,7 +5225,9 @@ var Actions = function Actions(_ref) {
     _ref$routeToSlackInte = _ref.routeToSlackIntegration,
     routeToSlackIntegration = _ref$routeToSlackInte === void 0 ? "" : _ref$routeToSlackInte,
     _ref$openPanel = _ref.openPanel,
-    openPanel = _ref$openPanel === void 0 ? false : _ref$openPanel;
+    openPanel = _ref$openPanel === void 0 ? false : _ref$openPanel,
+    _ref$isSaveAsTemplate = _ref.isSaveAsTemplateEnabled,
+    isSaveAsTemplateEnabled = _ref$isSaveAsTemplate === void 0 ? false : _ref$isSaveAsTemplate;
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     setFieldValue = _useFormikContext.setFieldValue;
@@ -5000,12 +5239,17 @@ var Actions = function Actions(_ref) {
     setShouldOpenPanel = _useState2[1];
   var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
       return {
-        resetPanelState: store["resetPanelState"]
+        resetPanelState: store["resetPanelState"],
+        setIsSaveAsTemplateEnabled: store["setIsSaveAsTemplateEnabled"]
       };
     }, shallow.shallow),
-    resetPanelState = _useUtilityStore.resetPanelState;
+    resetPanelState = _useUtilityStore.resetPanelState,
+    setIsSaveAsTemplateEnabled = _useUtilityStore.setIsSaveAsTemplateEnabled;
   var elementProps = data[name] || {};
   var actions = values[name].value || [];
+  react.useEffect(function () {
+    setIsSaveAsTemplateEnabled(isSaveAsTemplateEnabled);
+  }, [isSaveAsTemplateEnabled]);
   var showButton = react.useMemo(function () {
     var _actions;
     return !!((_actions = actions[(actions === null || actions === void 0 ? void 0 : actions.length) - 1]) !== null && _actions !== void 0 && _actions.name) && elementProps.actionOptions.length !== actions.length && showAddButton;