@bigbinary/neeto-rules-frontend 0.4.5 → 0.4.7

package/dist/index.js

@@ -3,15 +3,15 @@ import { BrowserRouter } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
 import classNames from 'classnames';
 import { useFormikContext, Formik, Form, useField, FieldArray, ErrorMessage } from 'formik';
-import { findBy, noop, isNotEmpty, isPresent, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
+import { findBy, noop, isPresent, renameKeys, isNotEmpty, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
 import { ActionBlock, Textarea, MultiEmailInput, Input as Input$2, Select as Select$1, Radio } from '@bigbinary/neetoui/formik';
 import { t as t$1 } from 'i18next';
 import * as yup from 'yup';
 import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
-import { withImmutableActions, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withImmutableActions, useDebounce, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { create } from 'zustand';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Typography, Button, Pane, DatePicker, Dropdown as Dropdown$1, Input as Input$1, Checkbox, Select, Tooltip, Label } from '@bigbinary/neetoui';
+import { Typography, Button, Pane, DatePicker, Dropdown as Dropdown$1, Input as Input$1, Select, Checkbox, Tooltip, Label } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
 import { Down, Up, Check, Search, Close, Delete, Plus, Refresh, Eye } from '@bigbinary/neeto-icons';
 import { pluck, isNil, isNotNil, assocPath, toLower, isEmpty, without, append, pipe, partition } from 'ramda';
@@ -1243,7 +1243,7 @@ var dayjs_min = {exports: {}};
 dayjs_min.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},v="en",D={};D[v]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return v;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(v=i),i||!r&&v},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var v=this.$locale().weekStart||0,D=(y<v?y+7:y)-v;return $(r?m-D:m+(6-D),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,v=O.m(this,M);return v=(l={},l[c]=v/12,l[f]=v,l[h]=v/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?v:O.a(v)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[v],w.Ls=D,w.p={},w})); 
 } (dayjs_min, dayjs_min.exports));
 
 var dayjs_minExports = dayjs_min.exports;
@@ -1500,7 +1500,9 @@ var EditorAction = function EditorAction(_ref) {
     value = _ref$value === void 0 ? "" : _ref$value,
     label = _ref.label,
     _ref$variables = _ref.variables,
-    variables = _ref$variables === void 0 ? [] : _ref$variables;
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$editorRef = _ref.editorRef,
+    editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef;
   var _useFormikContext = useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var _useState = useState(value),
@@ -1520,9 +1522,8 @@ var EditorAction = function EditorAction(_ref) {
     addons: EDITOR_ADDONS,
     className: "w-full",
     "data-cy": "neeto-editor",
-    onChange: function onChange(value) {
-      return setEditorData(value);
-    }
+    ref: editorRef,
+    onChange: setEditorData
   });
 };
 
@@ -1566,19 +1567,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var useDebouncedUpdate = function useDebouncedUpdate(value, setValue) {
-  var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
-  var _useState = useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var debouncedValue = useDebounce(text, duration);
-  useEffect(function () {
-    setValue(text);
-  }, [debouncedValue]);
-  return [text, setText];
-};
-
 var _excluded$8 = ["initialFocusRef", "name", "label"];
 var InputField$2 = function InputField(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
@@ -1586,24 +1574,15 @@ var InputField$2 = function InputField(_ref) {
     label = _ref.label,
     otherProps = _objectWithoutProperties(_ref, _excluded$8);
   var _useField = useField(name),
-    _useField2 = _slicedToArray(_useField, 3),
+    _useField2 = _slicedToArray(_useField, 2),
     field = _useField2[0],
-    meta = _useField2[1],
-    setValue = _useField2[2].setValue;
-  var _useDebouncedUpdate = useDebouncedUpdate(field.value, setValue),
-    _useDebouncedUpdate2 = _slicedToArray(_useDebouncedUpdate, 2),
-    text = _useDebouncedUpdate2[0],
-    setText = _useDebouncedUpdate2[1];
+    meta = _useField2[1];
   return /*#__PURE__*/React.createElement(Input$1, _extends({
     label: label,
     type: "text"
   }, field, {
     error: meta.touched ? meta.error : "",
-    ref: initialFocusRef,
-    value: text,
-    onChange: function onChange(e) {
-      return setText(e.target.value);
-    }
+    ref: initialFocusRef
   }, otherProps));
 };
 
@@ -1619,12 +1598,18 @@ var EmailFields = function EmailFields(_ref) {
     index = _ref.index;
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
-    touched = _useFormikContext.touched;
+    touched = _useFormikContext.touched,
+    setFieldValue = _useFormikContext.setFieldValue;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showPane = _useState2[0],
     setShowPane = _useState2[1];
+  var _useStateWithDependen = useStateWithDependency(null, [selectedField]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    selectedTemplate = _useStateWithDependen2[0],
+    setSelectedTemplate = _useStateWithDependen2[1];
   var initialFocusRef = useRef(null);
+  var editorRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   useOnButtonPressed(initialFocusRef, function () {
@@ -1633,6 +1618,36 @@ var EmailFields = function EmailFields(_ref) {
   var isValid = errors.actions && isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
   var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || t("neetoRules.common.as");
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.emailPlaceholder) || t("neetoRules.common.email");
+  var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
+  var isTemplateSelectionEnabled = isPresent(templates);
+  var setEmailContent = function setEmailContent(ref, content) {
+    if (!ref.current) return;
+    ref.current.editor.commands.setContent(content);
+  };
+  var handleTemplateChange = function handleTemplateChange(option) {
+    setSelectedTemplate(option);
+    if (!option) return;
+    var template = findBy({
+      id: option.value
+    }, templates);
+    setFieldValue("".concat(name, ".body"), template.body);
+    setEmailContent(editorRef, template.body);
+    if (selectedField.hideSubject) return;
+    setFieldValue("".concat(name, ".subject"), template.subject);
+  };
+  var isFirstFieldInForm = function isFirstFieldInForm(field) {
+    if (isTemplateSelectionEnabled) {
+      return false;
+    }
+    switch (field) {
+      case "emails":
+        return true;
+      case "subject":
+        return !isEmailIdField;
+      default:
+        return !isEmailIdField && selectedField.hideSubject;
+    }
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "action-email-seperator-text",
@@ -1665,18 +1680,32 @@ var EmailFields = function EmailFields(_ref) {
     weight: "semibold"
   }, defaultLabel)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
     className: "w-full"
-  }, isEmailIdField && /*#__PURE__*/React.createElement(EmailIdFields, {
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React.createElement(Select, {
+    isClearable: true,
+    isSearchable: true,
+    className: "mb-4",
+    innerRef: initialFocusRef,
+    label: t("neetoRules.labels.template"),
+    options: renameKeys({
+      name: "label",
+      id: "value"
+    }, templates),
+    placeholder: t("neetoRules.placeholders.selectTemplate"),
+    value: selectedTemplate,
+    onChange: handleTemplateChange
+  }), isEmailIdField && /*#__PURE__*/React.createElement(EmailIdFields, {
     emails: emails,
-    initialFocusRef: initialFocusRef,
-    name: "".concat(name, ".emails")
+    name: "".concat(name, ".emails"),
+    initialFocusRef: isFirstFieldInForm("emails") ? initialFocusRef : null
   }), !selectedField.hideSubject && /*#__PURE__*/React.createElement(InputField$2, {
     className: "mb-4",
     "data-cy": "email-action-subject-text-field",
-    initialFocusRef: isEmailIdField ? null : initialFocusRef,
     label: t("neetoRules.labels.subject"),
-    name: "".concat(name, ".subject")
+    name: "".concat(name, ".subject"),
+    initialFocusRef: isFirstFieldInForm("subject") ? initialFocusRef : null
   }), /*#__PURE__*/React.createElement(EditorAction, {
-    autoFocus: !isEmailIdField && selectedField.hideSubject,
+    editorRef: editorRef,
+    autoFocus: isFirstFieldInForm("body"),
     label: t("neetoRules.labels.body"),
     name: "".concat(name, ".body"),
     value: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.body,
@@ -2357,7 +2386,7 @@ var ActionItem = function ActionItem(_ref) {
   }) : t("neetoRules.common.then");
   var actionOptions = useMemo(function () {
     return getActionOptions(action, actions, optionList);
-  }, [action, actions]);
+  }, [action, actions, optionList]);
   var selectedField = useMemo(function () {
     return getFieldDetails$1(action.name, actionOptions);
   }, [action, actionOptions]);
@@ -4573,6 +4602,19 @@ var Events = function Events(_ref) {
   }));
 };
 
+var useDebouncedUpdate = function useDebouncedUpdate(value, setValue) {
+  var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var debouncedValue = useDebounce(text, duration);
+  useEffect(function () {
+    setValue(text);
+  }, [debouncedValue]);
+  return [text, setText];
+};
+
 var _excluded$4 = ["data", "name", "label"];
 var InputField = function InputField(_ref) {
   var data = _ref.data,