@bigbinary/neeto-rules-frontend 0.5.0 → 0.6.0

package/dist/index.js

@@ -4,19 +4,19 @@ import { BrowserRouter } from 'react-router-dom';
 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, isPresent, renameKeys, isNotEmpty, nullSafe, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
+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 { t as t$2 } from 'i18next';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
 import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
-import { withImmutableActions, useDebounce, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
+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, DatePicker, Dropdown as Dropdown$1, Input as Input$2, Select as Select$1, Checkbox, Tag, Label, Tooltip } from '@bigbinary/neetoui';
+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 { 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 as append$1, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test, partition } from 'ramda';
+import { Down, Up, Delete, Check, Search, Close, Plus, Refresh, Eye } from '@bigbinary/neeto-icons';
+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 useHotkeys from '@bigbinary/neeto-hotkeys';
 import { createPortal } from 'react-dom';
@@ -240,7 +240,8 @@ var ACTION_TYPES = {
   longText: "longText",
   sms: "sms",
   smsToNumbers: "smsToNumbers",
-  smsTo: "smsTo"
+  smsTo: "smsTo",
+  sendToApi: "sendToApi"
 };
 var LIST_FIELD_TOOLTIP_PROPS = {
   save: {
@@ -453,7 +454,7 @@ var getActionsSchema = function getActionsSchema(element, customData) {
           return yup.object({
             phoneNumbers: selectedAction.type === ACTION_TYPES.smsToNumbers ? yup.array().required(t$2("neetoRules.validations.required.entity", {
               entity: t$2("neetoRules.common.phoneNumber")
-            })).of(yup.string().test("testPhoneNumber", t$2("neetoRules.validations.inValidPhoneNumber"), function (value) {
+            })).of(yup.string().test("testPhoneNumber", t$2("neetoRules.validations.invalidPhoneNumber"), function (value) {
               return isPhoneNumberValid(value);
             })) : schema,
             body: yup.string().test("body", t$2("neetoRules.validations.required.body"), function (value) {
@@ -461,6 +462,14 @@ var getActionsSchema = function getActionsSchema(element, customData) {
             }),
             value: selectedAction.type === ACTION_TYPES.smsTo ? yup.string().required(t$2("neetoRules.validations.required.value")) : schema
           });
+        } else if (ACTION_TYPES.sendToApi === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
+          return yup.object({
+            endpoint: yup.string().url(t$2("neetoRules.validations.invalidUrlEntity", {
+              entity: t$2("neetoRules.labels.endpoint")
+            })).required(t$2("neetoRules.validations.required.entity", {
+              entity: t$2("neetoRules.labels.endpoint")
+            }))
+          });
         } else if (ACTION_TYPES.multiSelect === (selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.type)) {
           return yup.object({
             value: yup.array().min(1, t$2("neetoRules.validations.atLeastOneValue")).required(t$2("neetoRules.validations.atLeastOneValue"))
@@ -1188,6 +1197,247 @@ var LongTextField = function LongTextField(_ref) {
   }))));
 };
 
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+var _excluded$f = ["initialFocusRef", "name", "label"];
+var InputField$2 = function InputField(_ref) {
+  var initialFocusRef = _ref.initialFocusRef,
+    name = _ref.name,
+    label = _ref.label,
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$f);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray$1(_useField, 2),
+    field = _useField2[0],
+    meta = _useField2[1];
+  return /*#__PURE__*/React__default.createElement(Input$2, _extends$1({
+    label: label,
+    type: "text"
+  }, field, {
+    error: meta.touched ? meta.error : "",
+    ref: initialFocusRef
+  }, otherProps));
+};
+
+var ADDITIONAL_DATA_INITIAL_VALUE = {
+  key: "",
+  value: ""
+};
+var SAMPLE_ENDPOINT = "https://example.com";
+
+var addOption = function addOption(arrayHelpers) {
+  return arrayHelpers.push(ADDITIONAL_DATA_INITIAL_VALUE);
+};
+var removeOption = function removeOption(_ref) {
+  var arrayHelpers = _ref.arrayHelpers,
+    index = _ref.index,
+    data = _ref.data;
+  arrayHelpers.remove(index);
+  if (data.length === 1) {
+    addOption(arrayHelpers);
+  }
+};
+var hasKeyOrValue = whereAny({
+  key: isNotEmpty,
+  value: isNotEmpty
+});
+
+var setEditorContent = function setEditorContent(ref, content) {
+  if (!ref.current) return;
+  ref.current.editor.commands.setContent(content);
+};
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+var dotPath = useWith(path, [split(".")]);
+
+var KeyValuePairsField = withT(function (_ref) {
+  var t = _ref.t,
+    name = _ref.name,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label;
+  return /*#__PURE__*/React__default.createElement(FieldArray, {
+    name: name
+  }, function (arrayHelpers) {
+    var data = dotPath(name, arrayHelpers.form.values);
+    var showDeleteButton = data.length > 1 || hasKeyOrValue(data[0]);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "space-y-3"
+    }, /*#__PURE__*/React__default.createElement(Label, null, label), data.map(function (_, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex h-8 space-x-3",
+        key: index
+      }, /*#__PURE__*/React__default.createElement(InputField$2, {
+        className: "w-2/5",
+        name: "".concat(name, ".").concat(index, ".key"),
+        placeholder: t("neetoRules.labels.key")
+      }), /*#__PURE__*/React__default.createElement(InputField$2, {
+        className: "w-3/5",
+        name: "".concat(name, ".").concat(index, ".value"),
+        placeholder: t("neetoRules.labels.value"),
+        suffix: showDeleteButton && /*#__PURE__*/React__default.createElement(Button, {
+          icon: Delete,
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            return removeOption({
+              arrayHelpers: arrayHelpers,
+              index: index,
+              data: data
+            });
+          }
+        })
+      }));
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      label: t("neetoRules.labels.addKeyValuePair"),
+      style: "secondary",
+      onClick: function onClick() {
+        return addOption(arrayHelpers);
+      }
+    }));
+  });
+});
+
+var SelectTemplateField = function SelectTemplateField(_ref) {
+  var selectedField = _ref.selectedField,
+    templates = _ref.templates,
+    onChange = _ref.onChange,
+    initialFocusRef = _ref.initialFocusRef;
+  var _useStateWithDependen = useStateWithDependency(null, [selectedField]),
+    _useStateWithDependen2 = _slicedToArray$1(_useStateWithDependen, 2),
+    selectedTemplate = _useStateWithDependen2[0],
+    setSelectedTemplate = _useStateWithDependen2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleTemplateChange = function handleTemplateChange(option) {
+    setSelectedTemplate(option);
+    if (!option) return;
+    var template = findBy({
+      id: option.value
+    }, templates);
+    onChange === null || onChange === void 0 || onChange(template);
+  };
+  return /*#__PURE__*/React__default.createElement(Select$1, {
+    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
+  });
+};
+
+var ApiFields = function ApiFields(_ref) {
+  var _errors$actions, _touched$actions, _selectedField$separa;
+  var name = _ref.name,
+    selectedField = _ref.selectedField,
+    index = _ref.index;
+  var _useFormikContext = useFormikContext(),
+    errors = _useFormikContext.errors,
+    touched = _useFormikContext.touched,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    showPane = _useState2[0],
+    setShowPane = _useState2[1];
+  var initialFocusRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  useOnButtonPressed(initialFocusRef, function () {
+    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("neetoRules.common.as");
+  var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.dataPlaceholder) || t("neetoRules.common.data");
+  var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
+  var isTemplateSelectionEnabled = isPresent(templates);
+  var handleTemplateChange = function handleTemplateChange(template) {
+    setFieldValue("".concat(name, ".endpoint"), template.endpoint);
+    setFieldValue("".concat(name, ".additionalData"), template.additionalData);
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 mt-1",
+    "data-cy": "api-action-separator-text",
+    style: "h5",
+    weight: "normal"
+  }, separator), /*#__PURE__*/React__default.createElement(Typography, {
+    "data-cy": "api-action-button",
+    style: "h5",
+    weight: "semibold",
+    className: classNames$1("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
+      "neeto-ui-text-primary-800": showPane,
+      "neeto-ui-text-error-500": isValid
+    }),
+    onClick: function onClick() {
+      return setShowPane(function (prevState) {
+        return !prevState;
+      });
+    }
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default.createElement(Pane, {
+    initialFocusRef: initialFocusRef,
+    isOpen: showPane,
+    size: "large",
+    onClose: function onClose() {
+      return setShowPane(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(Pane.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 cursor-pointer",
+    "data-cy": "api-action-pane-header-title",
+    style: "h3",
+    weight: "semibold"
+  }, defaultLabel)), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default.createElement(SelectTemplateField, {
+    initialFocusRef: initialFocusRef,
+    selectedField: selectedField,
+    templates: templates,
+    onChange: handleTemplateChange
+  }), /*#__PURE__*/React__default.createElement(InputField$2, {
+    required: true,
+    className: "mb-4",
+    "data-cy": "api-action-endpoint-text-field",
+    label: t("neetoRules.labels.endpoint"),
+    name: "".concat(name, ".endpoint"),
+    placeholder: SAMPLE_ENDPOINT,
+    initialFocusRef: isTemplateSelectionEnabled ? null : initialFocusRef
+  }), /*#__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);
+    }
+  }))));
+};
+
 var CustomAction = function CustomAction(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var ActionComponent = _ref.ActionComponent,
@@ -1511,22 +1761,7 @@ var DropdownField$1 = function DropdownField(_ref) {
   }, t$2("neetoRules.common.noOptions")))));
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
-var _excluded$f = ["autoFocus", "name", "value", "label", "variables", "addons", "editorRef", "defaults"];
+var _excluded$e = ["autoFocus", "name", "value", "label", "variables", "addons", "editorRef", "defaults"];
 var EditorAction = function EditorAction(_ref) {
   var autoFocus = _ref.autoFocus,
     name = _ref.name,
@@ -1540,7 +1775,7 @@ var EditorAction = function EditorAction(_ref) {
     _ref$editorRef = _ref.editorRef,
     editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef,
     defaults = _ref.defaults,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$f);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$e);
   var _useFormikContext = useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var _useState = useState(value),
@@ -1591,30 +1826,6 @@ var EmailIdFields = function EmailIdFields(_ref) {
   }));
 };
 
-var _excluded$e = ["initialFocusRef", "name", "label"];
-var InputField$2 = function InputField(_ref) {
-  var initialFocusRef = _ref.initialFocusRef,
-    name = _ref.name,
-    label = _ref.label,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$e);
-  var _useField = useField(name),
-    _useField2 = _slicedToArray$1(_useField, 2),
-    field = _useField2[0],
-    meta = _useField2[1];
-  return /*#__PURE__*/React__default.createElement(Input$2, _extends$1({
-    label: label,
-    type: "text"
-  }, field, {
-    error: meta.touched ? meta.error : "",
-    ref: initialFocusRef
-  }, otherProps));
-};
-
-var setEditorContent = function setEditorContent(ref, content) {
-  if (!ref.current) return;
-  ref.current.editor.commands.setContent(content);
-};
-
 var EmailFields = function EmailFields(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa, _action$metadata;
   var _ref$isEmailIdField = _ref.isEmailIdField,
@@ -1633,10 +1844,6 @@ var EmailFields = function EmailFields(_ref) {
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
     setShowPane = _useState2[1];
-  var _useStateWithDependen = useStateWithDependency(null, [selectedField]),
-    _useStateWithDependen2 = _slicedToArray$1(_useStateWithDependen, 2),
-    selectedTemplate = _useStateWithDependen2[0],
-    setSelectedTemplate = _useStateWithDependen2[1];
   var initialFocusRef = useRef(null);
   var editorRef = useRef(null);
   var _useTranslation = useTranslation(),
@@ -1649,12 +1856,7 @@ var EmailFields = function EmailFields(_ref) {
   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 handleTemplateChange = function handleTemplateChange(option) {
-    setSelectedTemplate(option);
-    if (!option) return;
-    var template = findBy({
-      id: option.value
-    }, templates);
+  var handleTemplateChange = function handleTemplateChange(template) {
     setFieldValue("".concat(name, ".body"), template.body);
     setEditorContent(editorRef, template.body);
     if (selectedField.hideSubject) return;
@@ -1705,18 +1907,10 @@ var EmailFields = function EmailFields(_ref) {
     weight: "semibold"
   }, defaultLabel)), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
-  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default.createElement(Select$1, {
-    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,
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default.createElement(SelectTemplateField, {
+    initialFocusRef: initialFocusRef,
+    selectedField: selectedField,
+    templates: templates,
     onChange: handleTemplateChange
   }), isEmailIdField && /*#__PURE__*/React__default.createElement(EmailIdFields, {
     emails: emails,
@@ -10095,7 +10289,7 @@ var PHONE_NUMBER_SEPARATION_REGEX = /[^\s,]+/g;
 var FLEXIBLE_PHONE_NUMBER_REGEX = /[0-9+, ]+/g;
 var PHONE_NUMBER_VALIDATION_SCHEMA = yup.string().required(t$2("neetoRules.validations.required.entity", {
   entity: t$2("neetoRules.common.phoneNumber")
-})).test("testPhoneNumber", t$2("neetoRules.validations.inValidPhoneNumber"), isPhoneNumberValid);
+})).test("testPhoneNumber", t$2("neetoRules.validations.invalidPhoneNumber"), isPhoneNumberValid);
 var CUSTOM_STYLES = {
   input: assoc("overflow", "hidden"),
   multiValue: function multiValue(styles, _ref2) {
@@ -10266,10 +10460,6 @@ var SmsFields = function SmsFields(_ref) {
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
     setShowPane = _useState2[1];
-  var _useStateWithDependen = useStateWithDependency(null, [selectedField]),
-    _useStateWithDependen2 = _slicedToArray$1(_useStateWithDependen, 2),
-    selectedTemplate = _useStateWithDependen2[0],
-    setSelectedTemplate = _useStateWithDependen2[1];
   var initialFocusRef = useRef(null);
   var editorRef = useRef(null);
   var _useTranslation = useTranslation(),
@@ -10282,12 +10472,7 @@ var SmsFields = function SmsFields(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.smsPlaceholder) || t("neetoRules.common.sms");
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
   var isTemplateSelectionEnabled = isPresent(templates);
-  var handleTemplateChange = function handleTemplateChange(option) {
-    setSelectedTemplate(option);
-    if (!option) return;
-    var template = findBy({
-      id: option.value
-    }, templates);
+  var handleTemplateChange = function handleTemplateChange(template) {
     setFieldValue("".concat(name, ".body"), template.body);
     setEditorContent(editorRef, template.body);
   };
@@ -10329,18 +10514,10 @@ var SmsFields = function SmsFields(_ref) {
     weight: "semibold"
   }, defaultLabel)), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
-  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default.createElement(Select$1, {
-    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,
+  }, isTemplateSelectionEnabled && /*#__PURE__*/React__default.createElement(SelectTemplateField, {
+    initialFocusRef: initialFocusRef,
+    selectedField: selectedField,
+    templates: templates,
     onChange: handleTemplateChange
   }), showPhoneNumberInput && /*#__PURE__*/React__default.createElement(PhoneNumberField, {
     phoneNumbers: phoneNumbers,
@@ -10454,6 +10631,14 @@ var ActionSubItems = function ActionSubItems(_ref) {
       key: name
     }));
   }
+  if ((selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.sendToApi) {
+    return /*#__PURE__*/React__default.createElement(ApiFields, {
+      index: index,
+      name: name,
+      selectedField: selectedField,
+      key: name
+    });
+  }
   if ((selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === ACTION_TYPES.dropdown) {
     return /*#__PURE__*/React__default.createElement(DropdownField$1, {
       index: index,