@bigbinary/neeto-message-templates-frontend 0.5.0 → 0.5.2

package/dist/index.cjs.js

@@ -11,8 +11,8 @@ var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var i18next = require('i18next');
-var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactQuery = require('react-query');
 var axios = require('axios');
@@ -25,6 +25,7 @@ var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var yup = require('yup');
 var formik = require('formik');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var neetoIcons = require('@bigbinary/neeto-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -181,6 +182,10 @@ var MESSAGE_TYPES = {
   whatsapp: i18next.t("messageType.whatsapp")
 };
 var DEFAULT_EDITOR_ROW_COUNT = 15;
+var DEFAULT_PAGE_PROPERTIES = {
+  size: constants.DEFAULT_PAGE_SIZE,
+  index: constants.DEFAULT_PAGE_INDEX
+};
 
 var MESSAGE_TEMPLATE_INITIAL_STATE = {
   isOpen: false,
@@ -188,10 +193,6 @@ var MESSAGE_TEMPLATE_INITIAL_STATE = {
   isDelete: false,
   template: {}
 };
-var DEFAULT_PAGE_PROPERTIES = {
-  size: constants.DEFAULT_PAGE_SIZE,
-  index: constants.DEFAULT_PAGE_INDEX
-};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2296,15 +2297,15 @@ var QUERY_KEYS = {
   NEETO_MESSAGE_TEMPLATES: "neeto-message-templates"
 };
 
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ownerIdValue = function ownerIdValue(ownerId) {
   return ramda.isEmpty(ownerId) ? undefined : ownerId;
 };
-var useFetchTemplates = function useFetchTemplates(params) {
+var useFetchTemplates = function useFetchTemplates(params, options) {
   return reactQuery.useQuery([QUERY_KEYS.NEETO_MESSAGE_TEMPLATES, params], function () {
     return messageTemplatesApi.fetchAll(params);
-  });
+  }, options);
 };
 var useCreateTemplate = function useCreateTemplate(ownerId, options) {
   return reactUtils.useMutationWithInvalidation(function (messageTemplate) {
@@ -2312,7 +2313,7 @@ var useCreateTemplate = function useCreateTemplate(ownerId, options) {
       messageTemplate: messageTemplate,
       ownerId: ownerIdValue(ownerId)
     });
-  }, _objectSpread$4({
+  }, _objectSpread$6({
     keysToInvalidate: [QUERY_KEYS.NEETO_MESSAGE_TEMPLATES]
   }, options));
 };
@@ -2379,8 +2380,8 @@ var getMenuItems = function getMenuItems(_ref) {
   }];
 };
 
-function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RowActions = function RowActions(_ref) {
   var template = _ref.template,
     setManageTemplatePane = _ref.setManageTemplatePane,
@@ -2391,14 +2392,14 @@ var RowActions = function RowActions(_ref) {
     id = template.id;
   var templateType = useTemplateStore(ramda.prop("templateType"));
   var handleEditTemplate = function handleEditTemplate() {
-    return setManageTemplatePane(_objectSpread$3(_objectSpread$3({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$5(_objectSpread$5({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true,
       isEdit: true,
       template: template
     }));
   };
   var handleDeleteTemplate = function handleDeleteTemplate() {
-    return setManageTemplatePane(_objectSpread$3(_objectSpread$3({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$5(_objectSpread$5({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isDelete: true,
       template: template
     }));
@@ -2437,7 +2438,7 @@ var renderSearchProps = function renderSearchProps(label, value) {
     "data-cy": "".concat(neetoCist.hyphenate(value), "-search-input")
   };
 };
-var buildTableColumnData = function buildTableColumnData(setManageTemplatePane, ownerId) {
+var buildTableColumnData$1 = function buildTableColumnData(setManageTemplatePane, ownerId) {
   return [{
     dataIndex: "name",
     key: "name",
@@ -2991,9 +2992,9 @@ var TestMessage = function TestMessage(_ref) {
   }, t("neetoMessageTemplate.sendMessage.testSmsNote")), customFields);
 };
 
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Form = function Form(_ref) {
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Form$1 = function Form(_ref) {
   var onClose = _ref.onClose,
     isEdit = _ref.isEdit,
     _ref$template = _ref.template,
@@ -3012,7 +3013,7 @@ var Form = function Form(_ref) {
   var templateType = useTemplateStore(ramda.prop("templateType"));
   var isEmailTemplate = ramda.equals(templateType, "email_template");
   var isTestTemplateVisible = ramda.includes(templateType, ["sms_template", "email_template"]) && shouldIncludeTestTemplate;
-  var _ref2 = isEmailTemplate ? [_objectSpread$2(_objectSpread$2({}, EMAIL_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$2(_objectSpread$2({}, SMS_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
+  var _ref2 = isEmailTemplate ? [_objectSpread$4(_objectSpread$4({}, EMAIL_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$4(_objectSpread$4({}, SMS_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
     _ref3 = _slicedToArray(_ref2, 2),
     TEMPLATE_INITIAL_VALUES = _ref3[0],
     TEMPLATE_FORM_SCHEMA = _ref3[1];
@@ -3119,7 +3120,7 @@ var AddEdit = function AddEdit(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, label)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(Form, {
+  }, label)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(Form$1, {
     createUpdateTemplate: createUpdateTemplate,
     customFields: customFields,
     handleSubmitTestTemplate: handleSubmitTestTemplate,
@@ -3158,7 +3159,7 @@ var useFilters = function useFilters() {
   var _useQueryParams = reactUtils.useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
-  var filterColumns = buildTableColumnData().filter(ramda.prop("node"));
+  var filterColumns = buildTableColumnData$1().filter(ramda.prop("node"));
   var searchKeywordProps = {
     key: "search_term",
     node: "name",
@@ -3263,7 +3264,7 @@ var List = function List(_ref) {
     hasPagination: totalCount > pageSize
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     totalCount: totalCount,
-    columnData: buildTableColumnData(setManageTemplatePane, ownerId),
+    columnData: buildTableColumnData$1(setManageTemplatePane, ownerId),
     currentPageNumber: pageIndex,
     defaultPageSize: pageSize,
     loading: isLoading,
@@ -3311,8 +3312,8 @@ var List = function List(_ref) {
   }));
 };
 
-function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MessageTemplates = function MessageTemplates(_ref) {
   var _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
@@ -3366,7 +3367,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     editText = _MESSAGE_TEMPLATES$ty.editText;
   var isFilterApplied = neetoCist.isNotEmpty(filters) || neetoCist.isNotEmpty(searchTerm);
   var handleActionClick = function handleActionClick() {
-    return setManageTemplatePane(_objectSpread$1(_objectSpread$1({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$3(_objectSpread$3({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true
     }));
   };
@@ -3458,8 +3459,8 @@ var WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA = yup__namespace.object().shape({
   })
 });
 
-function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmailAndSms = function EmailAndSms(_ref) {
   var onClose = _ref.onClose,
     templates = _ref.templates,
@@ -3479,7 +3480,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
     INITIAL_VALUES = _ref3[0],
     SEND_MESSAGE_FORM_SCHEMA = _ref3[1];
   var updatedInitialValues = ramda.mergeAll([INITIAL_VALUES, customFieldsInitialValues]);
-  var updatedValidationSchema = yup__namespace.object().shape(_objectSpread(_objectSpread({}, SEND_MESSAGE_FORM_SCHEMA === null || SEND_MESSAGE_FORM_SCHEMA === void 0 ? void 0 : SEND_MESSAGE_FORM_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
+  var updatedValidationSchema = yup__namespace.object().shape(_objectSpread$2(_objectSpread$2({}, SEND_MESSAGE_FORM_SCHEMA === null || SEND_MESSAGE_FORM_SCHEMA === void 0 ? void 0 : SEND_MESSAGE_FORM_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
   var initialValueKeys = Object.keys(INITIAL_VALUES);
   return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formProps: {
@@ -3501,7 +3502,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
       var template = neetoCist.findBy({
         id: value === null || value === void 0 ? void 0 : value.value
       }, templates);
-      setValues(_objectSpread(_objectSpread({}, template), customFieldValues));
+      setValues(_objectSpread$2(_objectSpread$2({}, template), customFieldValues));
       editorRef.current.editor.commands.setContent(template.body);
     };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
@@ -3702,9 +3703,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    initialFocusRef: initialFocusField,
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    initialFocusRef: initialFocusField
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
@@ -3725,6 +3726,559 @@ var SendMessagePane = function SendMessagePane(_ref) {
   })));
 };
 
+var VALID_URL_REGEX = /^(https?):\/\/([a-zA-Z0-9-]+\.){1,}[a-zA-Z]{2,}\/?[^\s]*$/;
+var ADDITIONAL_DATA_INITIAL_VALUE = {
+  key: "",
+  value: ""
+};
+var API_TEMPLATE_TYPE = "api_template";
+
+[{
+  dataIndex: "name",
+  key: "name",
+  title: i18next.t("neetoMessageTemplate.template.name")
+}, {
+  dataIndex: "status",
+  key: "status",
+  title: i18next.t("neetoMessageTemplate.template.active"),
+  render: function render(status) {
+    return status === "active" ? i18next.t("neetoMessageTemplate.yes") : i18next.t("neetoMessageTemplate.no");
+  },
+  width: "20%"
+}];
+var FILTER_COLUMNS = [{
+  key: "name",
+  node: "name",
+  label: i18next.t("neetoMessageTemplate.template.name"),
+  type: "text"
+}, {
+  key: "status",
+  node: "status",
+  label: i18next.t("neetoMessageTemplate.template.active"),
+  type: "single_option",
+  values: [{
+    label: i18next.t("neetoMessageTemplate.yes"),
+    value: "active"
+  }, {
+    label: i18next.t("neetoMessageTemplate.no"),
+    value: "inactive"
+  }]
+}];
+var API_TEMPLATE_INITIAL_VALUES = {
+  name: "",
+  endpoint: "",
+  additionalData: [ADDITIONAL_DATA_INITIAL_VALUE]
+};
+var SAMPLE_URL = "https://example.com";
+var API_TEMPLATE_FORM_VALIDATION_SCHEMA = yup__namespace.object({
+  name: yup__namespace.string().trim().required(i18next.t("neetoMessageTemplate.template.validation.namePresence")),
+  endpoint: yup__namespace.string().required(i18next.t("neetoMessageTemplate.api.validation.endpointPresence")).matches(VALID_URL_REGEX, i18next.t("neetoMessageTemplate.api.validation.validEndpoint")),
+  additionalData: yup__namespace.array().of(yup__namespace.object({
+    key: yup__namespace.string(),
+    value: yup__namespace.string()
+  }))
+});
+var TEMPLATE_STATUS = {
+  ACTIVE: "active",
+  INACTIVE: "inactive"
+};
+
+var removeOption = function removeOption(_ref) {
+  var arrayHelpers = _ref.arrayHelpers,
+    index = _ref.index,
+    data = _ref.data;
+  if (data.length === 1) {
+    arrayHelpers.remove(index);
+    arrayHelpers.push(ADDITIONAL_DATA_INITIAL_VALUE);
+    return;
+  }
+  arrayHelpers.remove(index);
+};
+var addOption = function addOption(arrayHelpers) {
+  return arrayHelpers.push(ADDITIONAL_DATA_INITIAL_VALUE);
+};
+var isKeyOrValueNotEmpty = ramda.whereAny({
+  key: neetoCist.isNotEmpty,
+  value: neetoCist.isNotEmpty
+});
+
+var KeyValuePairs = reactUtils.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["default"].createElement(formik.FieldArray, {
+    name: name
+  }, function (arrayHelpers) {
+    var data = arrayHelpers.form.values[name];
+    var showDeleteButton = data.length > 1 || isKeyOrValueNotEmpty(data[0]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "space-y-2"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, label), data.map(function (_, index) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex h-8 space-x-3",
+        key: index
+      }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+        className: "w-2/5",
+        name: "".concat(name, ".").concat(index, ".key"),
+        placeholder: t("neetoMessageTemplate.api.key")
+      }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+        className: "w-3/5",
+        name: "".concat(name, ".").concat(index, ".value"),
+        placeholder: t("neetoMessageTemplate.api.value"),
+        suffix: showDeleteButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+          icon: neetoIcons.Delete,
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            return removeOption({
+              arrayHelpers: arrayHelpers,
+              index: index,
+              data: data
+            });
+          }
+        })
+      }));
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      className: "w-full justify-center",
+      label: t("neetoMessageTemplate.api.addKeyValuePair"),
+      style: "secondary",
+      onClick: function onClick() {
+        return addOption(arrayHelpers);
+      }
+    }));
+  });
+});
+
+var rejectEmptyKeyValuePairs = ramda.reject(ramda.whereAny({
+  key: ramda.isEmpty,
+  value: ramda.isEmpty
+}));
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var buildApiTemplatePayload = function buildApiTemplatePayload(values) {
+  return {
+    entity: {
+      endpoint: values.endpoint,
+      additionalData: rejectEmptyKeyValuePairs(values.additionalData)
+    },
+    templateType: API_TEMPLATE_TYPE,
+    name: values.name
+  };
+};
+var buildTableColumnData = function buildTableColumnData(_ref) {
+  var handleMarkAsActiveOrInactive = _ref.handleMarkAsActiveOrInactive,
+    handleOpenDeleteAlert = _ref.handleOpenDeleteAlert,
+    handleOpenEditPane = _ref.handleOpenEditPane;
+  return [{
+    dataIndex: "name",
+    key: "name",
+    title: i18next.t("neetoMessageTemplate.template.name"),
+    render: function render(name, apiTemplate) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        style: "body2"
+      }, name), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed"
+        },
+        menuItems: [{
+          key: "edit",
+          label: i18next.t("neetoMessageTemplate.template.edit"),
+          onClick: function onClick() {
+            return handleOpenEditPane(apiTemplate);
+          }
+        }, {
+          key: "status",
+          label: ramda.equals(apiTemplate.status, TEMPLATE_STATUS.ACTIVE) ? i18next.t("neetoMessageTemplate.template.markAsInactive") : i18next.t("neetoMessageTemplate.template.markAsActive"),
+          onClick: function onClick() {
+            return handleMarkAsActiveOrInactive(apiTemplate);
+          }
+        }, {
+          key: "delete",
+          label: i18next.t("neetoMessageTemplate.template.delete"),
+          onClick: function onClick() {
+            return handleOpenDeleteAlert(apiTemplate);
+          }
+        }]
+      }));
+    }
+  }, {
+    dataIndex: "status",
+    key: "status",
+    title: i18next.t("neetoMessageTemplate.template.active"),
+    render: function render(status) {
+      return status === "active" ? i18next.t("neetoMessageTemplate.yes") : i18next.t("neetoMessageTemplate.no");
+    },
+    width: "20%"
+  }];
+};
+var buildApiTemplateInitialValues = function buildApiTemplateInitialValues(isEdit, apiTemplate) {
+  if (!isEdit) return API_TEMPLATE_INITIAL_VALUES;
+  var additionalData = ramda.isEmpty(apiTemplate.additionalData) ? [ADDITIONAL_DATA_INITIAL_VALUE] : apiTemplate.additionalData;
+  return _objectSpread$1(_objectSpread$1({}, ramda.pick(["name", "endpoint"], apiTemplate)), {}, {
+    additionalData: additionalData
+  });
+};
+
+var Form = function Form(_ref) {
+  var setFocusField = _ref.setFocusField,
+    onClose = _ref.onClose,
+    ownerId = _ref.ownerId,
+    selectedApiTemplate = _ref.selectedApiTemplate;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateTemplate = useCreateTemplate(ownerId),
+    createApiTemplate = _useCreateTemplate.mutate,
+    isCreating = _useCreateTemplate.isLoading;
+  var _useUpdateTemplate = useUpdateTemplate(ownerId),
+    updateApiTemplate = _useUpdateTemplate.mutate,
+    isUpdating = _useUpdateTemplate.isLoading;
+  var isEdit = neetoCist.isNotEmpty(selectedApiTemplate);
+  var handleSubmit = function handleSubmit(values, _ref2) {
+    var setSubmitting = _ref2.setSubmitting;
+    var payload = buildApiTemplatePayload(values);
+    var options = {
+      onSuccess: onClose,
+      onSettled: function onSettled() {
+        return setSubmitting(false);
+      }
+    };
+    if (isEdit) {
+      updateApiTemplate({
+        id: selectedApiTemplate.id,
+        payload: payload
+      }, options);
+      return;
+    }
+    createApiTemplate(payload, options);
+  };
+  var isMutating = isUpdating || isCreating;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+    formikProps: {
+      initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
+      validationSchema: API_TEMPLATE_FORM_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full space-y-5"
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+    required: true,
+    label: t("neetoMessageTemplate.template.name"),
+    name: "name",
+    ref: setFocusField
+  }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+    required: true,
+    label: t("neetoMessageTemplate.api.endpoint"),
+    name: "endpoint",
+    placeholder: SAMPLE_URL
+  }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairs, {
+    label: t("neetoMessageTemplate.api.additionalData"),
+    name: "additionalData"
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+    cancelButtonProps: {
+      onClick: onClose,
+      disabled: isMutating
+    },
+    className: "space-x-2"
+  }))));
+};
+
+var ApiTemplates = function ApiTemplates(_ref) {
+  var ownerId = _ref.ownerId,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(DEFAULT_PAGE_PROPERTIES),
+    _useState2 = _slicedToArray(_useState, 2),
+    pageParams = _useState2[0],
+    setPageParams = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFiltersPaneOpen = _useState4[0],
+    setIsFiltersPaneOpen = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFormPaneOpen = _useState6[0],
+    setIsFormPaneOpen = _useState6[1];
+  var _useState7 = React.useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedApiTemplate = _useState8[0],
+    setSelectedApiTemplate = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isDeleteAlertOpen = _useState10[0],
+    setIsDeleteAlertOpen = _useState10[1];
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var searchKeywordProps = {
+    key: "search_term",
+    node: "name",
+    value: searchTerm
+  };
+  var _useState11 = React.useState(function () {
+      return neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS), [searchKeywordProps]));
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    filters = _useState12[0],
+    setFilters = _useState12[1];
+  var _useFetchTemplates = useFetchTemplates({
+      filters: filters,
+      page: pageParams.index,
+      pageSize: pageParams.size,
+      templateType: API_TEMPLATE_TYPE,
+      ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId
+    }),
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
+    templates = _useFetchTemplates$da2.templates,
+    totalCount = _useFetchTemplates$da2.totalCount,
+    isLoading = _useFetchTemplates.isLoading,
+    isFetching = _useFetchTemplates.isFetching;
+  var isFilterApplied = neetoCist.isNotEmpty(filters);
+  var handleFiltersChange = function handleFiltersChange(filters) {
+    setFilters(filters);
+    setPageParams(DEFAULT_PAGE_PROPERTIES);
+  };
+  var _useDeleteTemplate = useDeleteTemplate(ownerId),
+    deleteTemplate = _useDeleteTemplate.mutate,
+    isDeleting = _useDeleteTemplate.isLoading;
+  var _useUpdateTemplate = useUpdateTemplate(ownerId),
+    updateTemplate = _useUpdateTemplate.mutate;
+  var handleOpenEditPane = function handleOpenEditPane(apiTemplate) {
+    setSelectedApiTemplate(apiTemplate);
+    setIsFormPaneOpen(true);
+  };
+  var handleOpenDeleteAlert = function handleOpenDeleteAlert(apiTemplate) {
+    setSelectedApiTemplate(apiTemplate);
+    setIsDeleteAlertOpen(true);
+  };
+  var handleCloseDeleteAlertAndFormPane = function handleCloseDeleteAlertAndFormPane() {
+    setIsDeleteAlertOpen(false);
+    setIsFormPaneOpen(false);
+    setSelectedApiTemplate({});
+  };
+  var handleMarkAsActiveOrInactive = function handleMarkAsActiveOrInactive(_ref2) {
+    var status = _ref2.status,
+      id = _ref2.id;
+    var newStatus = ramda.equals(status, TEMPLATE_STATUS.ACTIVE) ? TEMPLATE_STATUS.INACTIVE : TEMPLATE_STATUS.ACTIVE;
+    updateTemplate({
+      payload: {
+        status: newStatus,
+        templateType: API_TEMPLATE_TYPE
+      },
+      id: id
+    });
+  };
+  var handleDeleteApiTemplate = function handleDeleteApiTemplate() {
+    return deleteTemplate(selectedApiTemplate.id, {
+      onSuccess: handleCloseDeleteAlertAndFormPane
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], {
+    breadcrumbs: breadcrumbs,
+    title: t("neetoMessageTemplate.template.apiTemplates"),
+    actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      label: t("neetoMessageTemplate.api.addApiTemplate"),
+      onClick: function onClick() {
+        return setIsFormPaneOpen(true);
+      }
+    }),
+    searchProps: {
+      placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
+    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
+      columns: FILTER_COLUMNS,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFiltersPaneOpen,
+      onChange: handleFiltersChange
+    }),
+    rightActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"].RightBlock, {
+      dataProps: {
+        totalCount: totalCount
+      },
+      filterProps: {
+        columns: FILTER_COLUMNS,
+        isOpen: isFiltersPaneOpen,
+        keyword: searchKeywordProps,
+        setIsOpen: setIsFiltersPaneOpen,
+        onChange: handleFiltersChange
+      }
+    })
+  }), neetoCist.isNotEmpty(templates) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
+    hasPagination: totalCount > pageParams.size
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+    totalCount: totalCount,
+    currentPageNumber: pageParams.index,
+    defaultPageSize: pageParams.size,
+    handlePageChange: function handlePageChange(index, size) {
+      return setPageParams({
+        index: index,
+        size: size
+      });
+    },
+    loading: isLoading || isFetching,
+    rowData: templates,
+    columnData: buildTableColumnData({
+      handleMarkAsActiveOrInactive: handleMarkAsActiveOrInactive,
+      handleOpenDeleteAlert: handleOpenDeleteAlert,
+      handleOpenEditPane: handleOpenEditPane
+    })
+  })) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex h-full w-full items-center justify-center"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    primaryButtonProps: {
+      label: t("neetoMessageTemplate.api.addApiTemplate"),
+      onClick: function onClick() {
+        return setIsFormPaneOpen(true);
+      }
+    },
+    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+      type: t("neetoMessageTemplate.template.apiTemplates")
+    }) : t("neetoMessageTemplate.template.emptyState", {
+      type: t("neetoMessageTemplate.template.apiTemplates")
+    })
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    isOpen: isFormPaneOpen,
+    onClose: handleCloseDeleteAlertAndFormPane
+  }, function (_ref3) {
+    var setFocusField = _ref3.setFocusField;
+    return /*#__PURE__*/React__default["default"].createElement(Form, {
+      ownerId: ownerId,
+      selectedApiTemplate: selectedApiTemplate,
+      setFocusField: setFocusField,
+      onClose: handleCloseDeleteAlertAndFormPane
+    });
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+    isOpen: isDeleteAlertOpen,
+    isSubmitting: isDeleting,
+    submitButtonLabel: t("neetoMessageTemplate.template.delete"),
+    title: t("neetoMessageTemplate.api.deleteApiTemplate"),
+    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+      i18nKey: "neetoMessageTemplate.template.templateDeleteConfirmation",
+      values: {
+        name: selectedApiTemplate.name
+      }
+    }),
+    onClose: handleCloseDeleteAlertAndFormPane,
+    onSubmit: handleDeleteApiTemplate
+  }));
+};
+
+var SEND_TO_API_FORM_INITIAL_VALUES = {
+  endpoint: "",
+  additionalData: [ADDITIONAL_DATA_INITIAL_VALUE]
+};
+var SEND_TO_API_FORM_VALIDATION_SCHEMA = yup__namespace.object({
+  endpoint: yup__namespace.string().required(i18next.t("neetoMessageTemplate.api.validation.endpointPresence")).matches(VALID_URL_REGEX, i18next.t("neetoMessageTemplate.api.validation.validEndpoint")),
+  additionalData: yup__namespace.array().of(yup__namespace.object({
+    key: yup__namespace.string(),
+    value: yup__namespace.string()
+  }))
+});
+
+var buildSendToApiFormInitialValues = function buildSendToApiFormInitialValues(template) {
+  if (ramda.isEmpty(template)) return SEND_TO_API_FORM_INITIAL_VALUES;
+  var additionalData = ramda.isEmpty(template.additionalData) ? [ADDITIONAL_DATA_INITIAL_VALUE] : template.additionalData;
+  return {
+    endpoint: template.endpoint,
+    additionalData: additionalData
+  };
+};
+
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SendToApiPane = function SendToApiPane(props) {
+  var isOpen = props.isOpen,
+    onClose = props.onClose;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    isOpen: isOpen,
+    onClose: onClose
+  }, function (paneProps) {
+    return /*#__PURE__*/React__default["default"].createElement(SendToApiForm, _objectSpread(_objectSpread({}, props), {}, {
+      paneProps: paneProps
+    }));
+  });
+};
+var SendToApiForm = function SendToApiForm(_ref) {
+  var ownerId = _ref.ownerId,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    isSubmitting = _ref.isSubmitting,
+    setFocusField = _ref.paneProps.setFocusField;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTemplate = _useState2[0],
+    setSelectedTemplate = _useState2[1];
+  var _useFetchTemplates = useFetchTemplates({
+      status: "active",
+      templateType: API_TEMPLATE_TYPE,
+      ownerId: ownerId
+    }),
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
+    _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
+    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
+    isLoadingTemplates = _useFetchTemplates.isLoading;
+  var handleSubmit = function handleSubmit(formValues) {
+    var additionalDataModifiedFormValues = ramda.modify("additionalData", rejectEmptyKeyValuePairs, formValues);
+    onSubmit(additionalDataModifiedFormValues);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+    formikProps: {
+      initialValues: buildSendToApiFormInitialValues(selectedTemplate),
+      enableReinitialize: true,
+      validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full space-y-5"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+    innerRef: setFocusField,
+    isLoading: isLoadingTemplates,
+    label: t("neetoMessageTemplate.template.title"),
+    options: neetoCist.renameKeys({
+      name: "label",
+      id: "value"
+    }, templates),
+    placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
+    onChange: setSelectedTemplate
+  }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+    required: true,
+    label: t("neetoMessageTemplate.api.endpoint"),
+    name: "endpoint",
+    placeholder: SAMPLE_URL
+  }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairs, {
+    label: t("neetoMessageTemplate.api.additionalData"),
+    name: "additionalData"
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+    className: "space-x-2",
+    cancelButtonProps: {
+      disabled: isSubmitting,
+      onClick: onClose
+    },
+    submitButtonProps: {
+      disabled: isSubmitting,
+      label: t("neetoMessageTemplate.template.send")
+    }
+  }))));
+};
+
+exports.ApiTemplates = ApiTemplates;
 exports.MessageTemplates = MessageTemplates;
 exports.SendMessagePane = SendMessagePane;
+exports.SendToApiPane = SendToApiPane;
 //# sourceMappingURL=index.cjs.js.map