@bigbinary/neeto-rules-frontend 0.4.6 → 0.4.8

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';
@@ -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,