@bigbinary/neeto-rules-frontend 0.4.6 → 0.4.8

package/README.md

@@ -560,6 +560,26 @@ neetoRulesFrontend allows to pass custom action components from host application
   },
 ```
 
+#### 2.10 Custom email templates
+
+neetoRulesFrontend allows to pass predefined email templates from host application. This enables to use templates created using neeto-message-templates-nano. Below is an example for custom email templates which is being sent by neeto-form in action options.
+
+```jsx
+{
+  "label": "Email to responder",
+  "value": "email_to_responder",
+  "type": "emailTo",
+  "templates": [
+    {
+      "id": "caca1cc9-f9db-480a-a64f-6ea0c72d4b05",
+      "name": "Send emails to rejected candidates",
+      "subject": "Application Status - Screening Round Unsuccessful",
+      "body": "<p>Dear {{full-name}},</p><p>Thank you for your interest. Unfortunately, we regret to inform you that you did not pass the screener round.</p><p>Best regards, </p><p>Spinkart</p>"
+    }
+  ]
+}
+```
+
 #### 3. `RulePreview`
 
 The `RulePreview` component is used to preview the automation rule.

package/app/javascript/src/translations/en.json

@@ -130,7 +130,8 @@
       "checked": "Checked",
       "unchecked": "Unchecked",
       "text": "Text",
-      "ruleSummary": "Automation rule summary"
+      "ruleSummary": "Automation rule summary",
+      "template": "Template"
     },
     "placeholders": {
       "if": "If",
@@ -139,7 +140,8 @@
       "emailField": "Type email and press enter",
       "selectTags": "Select Tags",
       "selectOption": "Select option",
-      "value": "Value"
+      "value": "Value",
+      "selectTemplate": "Select a template"
     },
     "buttons": {
       "save": "Save",

package/dist/index.cjs.js

@@ -1530,7 +1530,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 = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var _useState = React.useState(value),
@@ -1550,9 +1552,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
   });
 };
 
@@ -1596,19 +1597,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 = React.useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var debouncedValue = reactUtils.useDebounce(text, duration);
-  React.useEffect(function () {
-    setValue(text);
-  }, [debouncedValue]);
-  return [text, setText];
-};
-
 var _excluded$8 = ["initialFocusRef", "name", "label"];
 var InputField$2 = function InputField(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
@@ -1616,24 +1604,15 @@ var InputField$2 = function InputField(_ref) {
     label = _ref.label,
     otherProps = _objectWithoutProperties(_ref, _excluded$8);
   var _useField = formik.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__default["default"].createElement(neetoui.Input, _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));
 };
 
@@ -1649,12 +1628,18 @@ var EmailFields = function EmailFields(_ref) {
     index = _ref.index;
   var _useFormikContext = formik.useFormikContext(),
     errors = _useFormikContext.errors,
-    touched = _useFormikContext.touched;
+    touched = _useFormikContext.touched,
+    setFieldValue = _useFormikContext.setFieldValue;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showPane = _useState2[0],
     setShowPane = _useState2[1];
+  var _useStateWithDependen = reactUtils.useStateWithDependency(null, [selectedField]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    selectedTemplate = _useStateWithDependen2[0],
+    setSelectedTemplate = _useStateWithDependen2[1];
   var initialFocusRef = React.useRef(null);
+  var editorRef = React.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   useOnButtonPressed(initialFocusRef, function () {
@@ -1663,6 +1648,36 @@ var EmailFields = function EmailFields(_ref) {
   var isValid = errors.actions && ramda.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]) && ramda.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 = neetoCist.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 = neetoCist.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__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "action-email-seperator-text",
@@ -1695,18 +1710,32 @@ var EmailFields = function EmailFields(_ref) {
     weight: "semibold"
   }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
-  }, isEmailIdField && /*#__PURE__*/React__default["default"].createElement(EmailIdFields, {
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+    isClearable: true,
+    isSearchable: true,
+    className: "mb-4",
+    innerRef: initialFocusRef,
+    label: t("neetoRules.labels.template"),
+    options: neetoCist.renameKeys({
+      name: "label",
+      id: "value"
+    }, templates),
+    placeholder: t("neetoRules.placeholders.selectTemplate"),
+    value: selectedTemplate,
+    onChange: handleTemplateChange
+  }), isEmailIdField && /*#__PURE__*/React__default["default"].createElement(EmailIdFields, {
     emails: emails,
-    initialFocusRef: initialFocusRef,
-    name: "".concat(name, ".emails")
+    name: "".concat(name, ".emails"),
+    initialFocusRef: isFirstFieldInForm("emails") ? initialFocusRef : null
   }), !selectedField.hideSubject && /*#__PURE__*/React__default["default"].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__default["default"].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,
@@ -2387,7 +2416,7 @@ var ActionItem = function ActionItem(_ref) {
   }) : t("neetoRules.common.then");
   var actionOptions = React.useMemo(function () {
     return getActionOptions(action, actions, optionList);
-  }, [action, actions]);
+  }, [action, actions, optionList]);
   var selectedField = React.useMemo(function () {
     return getFieldDetails$1(action.name, actionOptions);
   }, [action, actionOptions]);
@@ -4603,6 +4632,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 = React.useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var debouncedValue = reactUtils.useDebounce(text, duration);
+  React.useEffect(function () {
+    setValue(text);
+  }, [debouncedValue]);
+  return [text, setText];
+};
+
 var _excluded$4 = ["data", "name", "label"];
 var InputField = function InputField(_ref) {
   var data = _ref.data,