@bigbinary/neeto-rules-frontend 0.6.2 → 0.6.4

package/dist/index.js

@@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow';
 import classNames$1 from 'classnames';
 import { useFormikContext, Formik, Form, useField, FieldArray, ErrorMessage } from 'formik';
 import { findBy, noop as noop$1, isNotEmpty, renameKeys, isPresent, nullSafe, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
-import { ActionBlock, Textarea, MultiEmailInput, Input as Input$3, Select as Select$2, Radio } from '@bigbinary/neetoui/formik';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { t as t$2 } from 'i18next';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
@@ -13,13 +13,29 @@ import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
 import { withImmutableActions, withT, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { create } from 'zustand';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Typography, Button, Pane, Input as Input$2, Label, Select as Select$1, DatePicker, Dropdown as Dropdown$1, Checkbox, Tag, Tooltip } from '@bigbinary/neetoui';
+import Pane from '@bigbinary/neetoui/Pane';
+import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation } from 'react-i18next';
 import { Down, Up, Delete, Check, Search, Close, Plus, Refresh, Eye } from '@bigbinary/neeto-icons';
+import Button from '@bigbinary/neetoui/Button';
 import { pluck, isNil, isNotNil, whereAny, useWith, path, split, assocPath, toLower, isEmpty, without, append as append$1, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test, partition } from 'ramda';
 import { joinHyphenCase, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
+import Dropdown$1 from '@bigbinary/neetoui/Dropdown';
+import Input$2 from '@bigbinary/neetoui/Input';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import Label from '@bigbinary/neetoui/Label';
+import Select$1 from '@bigbinary/neetoui/Select';
+import dayjs from 'dayjs';
+import DatePicker from '@bigbinary/neetoui/DatePicker';
+import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
+import Input$3 from '@bigbinary/neetoui/formik/Input';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
+import Checkbox from '@bigbinary/neetoui/Checkbox';
 import { createPortal } from 'react-dom';
+import Tag from '@bigbinary/neetoui/Tag';
+import Tooltip from '@bigbinary/neetoui/Tooltip';
+import Select$2 from '@bigbinary/neetoui/formik/Select';
+import Radio from '@bigbinary/neetoui/formik/Radio';
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -95,8 +111,6 @@ function _objectWithoutProperties$1(source, excluded) {
   return target;
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -308,8 +322,8 @@ var CONDITION_VALUE_TYPES = {
 var INPUT_FIELD_TYPES = ["email", "text", "number", "decimal", "url", "regex"];
 var MAXIMUM_OPTION_LENGTH$2 = 7;
 
-function ownKeys$a(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getSchemaForStrings = function getSchemaForStrings(element) {
   var label = element.label,
     _element$componentPro = element.componentProps,
@@ -535,7 +549,7 @@ var getSchemaForElement = function getSchemaForElement(element, customData) {
 var getValidationSchema = function getValidationSchema(data, customData) {
   var fieldKeys = Object.keys(data);
   var schema = fieldKeys.reduce(function (acc, key) {
-    return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$1({}, key, yup.object({
+    return _objectSpread$a(_objectSpread$a({}, acc), {}, _defineProperty$1({}, key, yup.object({
       value: getSchemaForElement(data[key], customData)
     })));
   }, {});
@@ -558,8 +572,8 @@ var VALIDATION_SCHEMA = (_VALIDATION_SCHEMA = {}, _defineProperty$1(_VALIDATION_
 var DECIMAL_NUMBER_REGEX = /^\d*\.?\d+$/;
 var POSITIVE_NUMBER_REGEX = /^[0-9]+$/;
 
-function ownKeys$9(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildPayload = function buildPayload(data, values) {
   return Object.keys(data).reduce(function (acc, key) {
     var fieldValue = values[key].value;
@@ -569,26 +583,26 @@ var buildPayload = function buildPayload(data, values) {
         var _fieldValue;
         fieldValue = (_fieldValue = fieldValue) === null || _fieldValue === void 0 ? void 0 : _fieldValue.map(function (conditionGroup) {
           var _conditionGroup$condi;
-          return _objectSpread$8(_objectSpread$8({}, conditionGroup), {}, {
+          return _objectSpread$9(_objectSpread$9({}, conditionGroup), {}, {
             conditions: [].concat(_toConsumableArray$1(conditionGroup.conditions.value), _toConsumableArray$1(((_conditionGroup$condi = conditionGroup.conditions) === null || _conditionGroup$condi === void 0 ? void 0 : _conditionGroup$condi.deleted) || []))
           });
         });
       }
       fieldValue = [].concat(_toConsumableArray$1(fieldValue), _toConsumableArray$1(((_values$key = values[key]) === null || _values$key === void 0 ? void 0 : _values$key.deleted) || []));
     }
-    return _objectSpread$8(_objectSpread$8({}, acc), {}, _defineProperty$1({}, key, fieldValue));
+    return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$1({}, key, fieldValue));
   }, {});
 };
 var formatData = function formatData(data) {
   return Object.keys(data).reduce(function (acc, key) {
     var value = data[key].type === FIELD_TYPES.conditionGroup ? data[key].value.map(function (conditionGroup) {
-      return _objectSpread$8(_objectSpread$8({}, conditionGroup), {}, {
+      return _objectSpread$9(_objectSpread$9({}, conditionGroup), {}, {
         conditions: {
           value: conditionGroup.conditions
         }
       });
     }) : data[key].value;
-    return _objectSpread$8(_objectSpread$8({}, acc), {}, _defineProperty$1({}, key, {
+    return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$1({}, key, {
       value: value
     }));
   }, {});
@@ -652,9 +666,9 @@ var ScrollToErrorField = function ScrollToErrorField(_ref) {
   return null;
 };
 
-var _excluded$g = ["isSubmitting", "dirty", "values"];
-function ownKeys$8(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$g = ["dirty", "values"];
+function ownKeys$9(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NeetoRules$2 = function NeetoRules(_ref) {
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? {} : _ref$data,
@@ -684,14 +698,13 @@ var NeetoRules$2 = function NeetoRules(_ref) {
     validationSchema: getValidationSchema(data, customData),
     onSubmit: submitForm
   }, function (_ref2) {
-    var isSubmitting = _ref2.isSubmitting,
-      dirty = _ref2.dirty,
+    var dirty = _ref2.dirty,
       values = _ref2.values,
       fromikBag = _objectWithoutProperties$1(_ref2, _excluded$g);
     return /*#__PURE__*/React__default.createElement(Form, {
       ref: formRef,
       className: classNames$1(["w-full space-y-6 px-0 md:px-14 xl:px-24", className])
-    }, typeof children === "function" ? children === null || children === void 0 ? void 0 : children(_objectSpread$7({
+    }, typeof children === "function" ? children === null || children === void 0 ? void 0 : children(_objectSpread$8({
       values: values,
       formattedValues: buildPayload(data, values),
       dirty: dirty
@@ -701,16 +714,9 @@ var NeetoRules$2 = function NeetoRules(_ref) {
       className: "py-4"
     }, /*#__PURE__*/React__default.createElement(ActionBlock, {
       cancelButtonProps: {
-        disabled: false,
-        onClick: function onClick() {
-          return handleCancel();
-        }
+        onClick: handleCancel
       },
       submitButtonProps: {
-        className: "mr-2",
-        htmlType: "submit",
-        disabled: isSubmitting || !dirty,
-        onClick: function onClick() {},
         "data-cy": "form-submit-button"
       }
     })));
@@ -1118,6 +1124,30 @@ var useOnButtonPressed = function useOnButtonPressed(ref, handler) {
 
 var DEFAULT_LONG_TEXT_ROWS = 8;
 
+function ownKeys$8(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PaneFooterBlock = function PaneFooterBlock(_ref) {
+  var setShowPane = _ref.setShowPane,
+    _ref$submitButtonProp = _ref.submitButtonProps,
+    submitButtonProps = _ref$submitButtonProp === void 0 ? {} : _ref$submitButtonProp,
+    _ref$cancelButtonProp = _ref.cancelButtonProps,
+    cancelButtonProps = _ref$cancelButtonProp === void 0 ? {} : _ref$cancelButtonProp;
+  return /*#__PURE__*/React__default.createElement(ActionBlock, {
+    cancelButtonProps: _objectSpread$7({
+      "data-cy": "cancel-button",
+      onClick: function onClick() {
+        return setShowPane(false);
+      }
+    }, cancelButtonProps),
+    submitButtonProps: _objectSpread$7({
+      "data-cy": "save-changes-button",
+      onClick: function onClick() {
+        return setShowPane(false);
+      }
+    }, submitButtonProps)
+  });
+};
+
 var LongTextField = function LongTextField(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var name = _ref.name,
@@ -1131,8 +1161,6 @@ var LongTextField = function LongTextField(_ref) {
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
@@ -1181,20 +1209,8 @@ var LongTextField = function LongTextField(_ref) {
     value: value,
     required: true,
     className: "w-full"
-  })), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  })), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -1421,21 +1437,8 @@ var ApiFields = function ApiFields(_ref) {
   }), /*#__PURE__*/React__default.createElement(KeyValuePairsField, {
     label: t("neetoRules.labels.additionalData"),
     name: "".concat(name, ".additionalData")
-  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "cancel-button",
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -1449,6 +1452,8 @@ var CustomAction = function CustomAction(_ref) {
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
@@ -1458,7 +1463,7 @@ var CustomAction = function CustomAction(_ref) {
     return setShowPane(false);
   });
   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$2("neetoRules.common.as");
+  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.placeholder;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
@@ -1490,34 +1495,11 @@ var CustomAction = function CustomAction(_ref) {
   }, defaultLabel)), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement(ActionComponent, {
     action: action,
     name: name
-  })), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t$2("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t$2("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  })), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
-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})); 
-} (dayjs_min, dayjs_min.exports));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
 var DateField$1 = function DateField(_ref) {
   var _actions$value$index$, _selectedField$separa, _errors$actions, _touched$actions;
   var name = _ref.name,
@@ -1930,19 +1912,10 @@ var EmailFields = function EmailFields(_ref) {
     name: "".concat(name, ".body"),
     value: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.body,
     variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables
-  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "email-action-save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
+  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane,
+    submitButtonProps: {
+      "data-cy": "email-action-save-changes-button"
     }
   }))));
 };
@@ -2132,6 +2105,8 @@ var ListField = function ListField(_ref) {
     values = _ref$values === void 0 ? [] : _ref$values,
     index = _ref.index,
     selectedField = _ref.selectedField;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
@@ -2148,7 +2123,7 @@ var ListField = function ListField(_ref) {
     return setShowPane(false);
   });
   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$2("neetoRules.common.to");
+  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || t("neetoRules.common.to");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "list-action-separator-text",
@@ -2167,7 +2142,7 @@ var ListField = function ListField(_ref) {
         return !prevState;
       });
     }
-  }, t$2("neetoRules.form.list").toLowerCase()), /*#__PURE__*/React__default.createElement(Pane, {
+  }, t("neetoRules.form.list")), /*#__PURE__*/React__default.createElement(Pane, {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
@@ -2179,7 +2154,7 @@ var ListField = function ListField(_ref) {
     "data-cy": "list-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, t$2("neetoRules.form.list"))), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
+  }, t("neetoRules.form.list"))), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
     className: "mt-2 w-full space-y-2"
   }, /*#__PURE__*/React__default.createElement(FieldArray, {
     name: name
@@ -2222,27 +2197,15 @@ var ListField = function ListField(_ref) {
     }) : /*#__PURE__*/React__default.createElement(Button, {
       "data-cy": "list-action-add-item-button",
       icon: Plus,
-      label: t$2("neetoRules.common.addItem"),
+      label: t("neetoRules.common.addItem"),
       ref: initialFocusRef,
       style: "text",
       onClick: function onClick() {
         return setIsInputCardOpen(true);
       }
     }));
-  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t$2("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t$2("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -2377,6 +2340,8 @@ var NoteField = function NoteField(_ref) {
     value = _ref$value === void 0 ? "" : _ref$value,
     index = _ref.index,
     selectedField = _ref.selectedField;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
@@ -2389,9 +2354,9 @@ var NoteField = function NoteField(_ref) {
     return setShowPane(false);
   });
   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$2("neetoRules.common.as");
+  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 variables = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables) || [];
-  var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t$2("neetoRules.form.note");
+  var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.form.note");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "note-action-separator-text",
@@ -2426,20 +2391,8 @@ var NoteField = function NoteField(_ref) {
     name: name,
     value: value,
     variables: variables
-  })), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t$2("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t$2("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  })), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -10534,21 +10487,8 @@ var SmsFields = function SmsFields(_ref) {
     name: "".concat(name, ".body"),
     value: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.body,
     variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables
-  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "cancel-button",
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }))), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -10753,6 +10693,7 @@ var ActionItem = function ActionItem(_ref) {
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
   var optionList = elementProps.actionOptions;
+  var ActionChildren = action.children;
   var actions = values[parentName].value || [];
   var label = index ? t("neetoRules.common.and", {
     what: t("neetoRules.common.then")
@@ -10880,6 +10821,11 @@ var ActionItem = function ActionItem(_ref) {
     selectedField: selectedField,
     name: "".concat(name, ".metadata"),
     options: getSelectedFieldOptions()
+  }), isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/React__default.createElement(ActionChildren, {
+    action: action,
+    index: index,
+    selectedField: selectedField,
+    parentFieldName: name
   }));
 };
 var ActionItem$1 = /*#__PURE__*/memo(ActionItem);
@@ -11395,6 +11341,8 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   var name = _ref.name,
     index = _ref.index,
     props = _objectWithoutProperties$1(_ref, _excluded$6);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
     conditions = _useFormikContext.values.conditions,
     setFieldValue = _useFormikContext.setFieldValue,
@@ -11411,7 +11359,7 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   });
   var values = (_conditions$value$ind = conditions.value[index]) === null || _conditions$value$ind === void 0 || (_conditions$value$ind = _conditions$value$ind.metadata) === null || _conditions$value$ind === void 0 ? void 0 : _conditions$value$ind.values;
   var allOptions = getAllOptions(values);
-  var defaultLabel = t$2("neetoRules.form.selectValues");
+  var defaultLabel = t("neetoRules.form.selectValues");
   var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isEmpty(allOptions) && /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "condition-value-multi-select-create-button",
@@ -11433,7 +11381,7 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
       className: "neeto-ui-text-gray-700 mt-1",
       style: "h5",
       weight: "normal"
-    }, t$2("neetoRules.common.or")), /*#__PURE__*/React__default.createElement(Typography, {
+    }, t("neetoRules.common.or")), /*#__PURE__*/React__default.createElement(Typography, {
       className: "hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline",
       "data-cy": "condition-value-multi-select-create-button",
       style: "h5",
@@ -11455,32 +11403,20 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
     className: "neeto-ui-text-gray-700",
     "data-cy": "multi-select-create-pane-header-title",
     style: "h3"
-  }, t$2("neetoRules.labels.multipleValues"))), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement(Select$1, _extends$1({
+  }, t("neetoRules.labels.multipleValues"))), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement(Select$1, _extends$1({
     isMulti: true,
     className: "mt-4 w-full",
     "data-cy": "multi-select-create-container",
     defaultValue: allOptions,
     innerRef: initialFocusRef,
-    label: t$2("neetoRules.labels.selectValues"),
+    label: t("neetoRules.labels.selectValues"),
     onChange: function onChange(options) {
       return setFieldValue(name, options.map(function (option) {
         return option.value;
       }));
     }
-  }, props))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t$2("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t$2("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }, props))), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };