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

package/dist/index.js

@@ -4,23 +4,24 @@ import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
-import { Typography, Button, Pane, Table, NoData, Alert, Select, Textarea } from '@bigbinary/neetoui';
-import { isEmpty, equals, prop, includes, pick, omit, assoc, mergeAll, pluck } from 'ramda';
+import { Typography, Button, Pane, Table, NoData, Alert, Select, Textarea, Label } from '@bigbinary/neetoui';
+import { isEmpty, equals, prop, includes, pick, omit, assoc, mergeAll, pluck, whereAny, reject, modify } from 'ramda';
 import { t } from 'i18next';
-import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@bigbinary/neeto-commons-frontend/constants';
-import { useMutationWithInvalidation, withImmutableActions, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import { useMutationWithInvalidation, withImmutableActions, useQueryParams, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useQuery } from 'react-query';
 import axios from 'axios';
 import require$$0 from 'util';
 import { create } from 'zustand';
 import { FormikEditor } from '@bigbinary/neeto-editor';
-import { Input, Form as Form$1, Select as Select$1, Button as Button$1 } from '@bigbinary/neetoui/formik';
+import { Input, Form as Form$2, Select as Select$1, Button as Button$1, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
-import { useFormikContext } from 'formik';
+import { useFormikContext, FieldArray } from 'formik';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import { Delete } from '@bigbinary/neeto-icons';
 
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -147,6 +148,10 @@ var MESSAGE_TYPES = {
   whatsapp: t("messageType.whatsapp")
 };
 var DEFAULT_EDITOR_ROW_COUNT = 15;
+var DEFAULT_PAGE_PROPERTIES = {
+  size: DEFAULT_PAGE_SIZE,
+  index: DEFAULT_PAGE_INDEX
+};
 
 var MESSAGE_TEMPLATE_INITIAL_STATE = {
   isOpen: false,
@@ -154,10 +159,6 @@ var MESSAGE_TEMPLATE_INITIAL_STATE = {
   isDelete: false,
   template: {}
 };
-var DEFAULT_PAGE_PROPERTIES = {
-  size: DEFAULT_PAGE_SIZE,
-  index: DEFAULT_PAGE_INDEX
-};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2262,15 +2263,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 isEmpty(ownerId) ? undefined : ownerId;
 };
-var useFetchTemplates = function useFetchTemplates(params) {
+var useFetchTemplates = function useFetchTemplates(params, options) {
   return useQuery([QUERY_KEYS.NEETO_MESSAGE_TEMPLATES, params], function () {
     return messageTemplatesApi.fetchAll(params);
-  });
+  }, options);
 };
 var useCreateTemplate = function useCreateTemplate(ownerId, options) {
   return useMutationWithInvalidation(function (messageTemplate) {
@@ -2278,7 +2279,7 @@ var useCreateTemplate = function useCreateTemplate(ownerId, options) {
       messageTemplate: messageTemplate,
       ownerId: ownerIdValue(ownerId)
     });
-  }, _objectSpread$4({
+  }, _objectSpread$6({
     keysToInvalidate: [QUERY_KEYS.NEETO_MESSAGE_TEMPLATES]
   }, options));
 };
@@ -2345,8 +2346,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,
@@ -2357,14 +2358,14 @@ var RowActions = function RowActions(_ref) {
     id = template.id;
   var templateType = useTemplateStore(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
     }));
@@ -2403,7 +2404,7 @@ var renderSearchProps = function renderSearchProps(label, value) {
     "data-cy": "".concat(hyphenate(value), "-search-input")
   };
 };
-var buildTableColumnData = function buildTableColumnData(setManageTemplatePane, ownerId) {
+var buildTableColumnData$1 = function buildTableColumnData(setManageTemplatePane, ownerId) {
   return [{
     dataIndex: "name",
     key: "name",
@@ -2957,9 +2958,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,
@@ -2978,7 +2979,7 @@ var Form = function Form(_ref) {
   var templateType = useTemplateStore(prop("templateType"));
   var isEmailTemplate = equals(templateType, "email_template");
   var isTestTemplateVisible = includes(templateType, ["sms_template", "email_template"]) && shouldIncludeTestTemplate;
-  var _ref2 = isEmailTemplate ? [_objectSpread$2(_objectSpread$2({}, EMAIL_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$2(_objectSpread$2({}, SMS_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
+  var _ref2 = isEmailTemplate ? [_objectSpread$4(_objectSpread$4({}, EMAIL_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$4(_objectSpread$4({}, SMS_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
     _ref3 = _slicedToArray(_ref2, 2),
     TEMPLATE_INITIAL_VALUES = _ref3[0],
     TEMPLATE_FORM_SCHEMA = _ref3[1];
@@ -2999,7 +3000,7 @@ var Form = function Form(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$2, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3085,7 +3086,7 @@ var AddEdit = function AddEdit(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
-  }, label)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form, {
+  }, label)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form$1, {
     createUpdateTemplate: createUpdateTemplate,
     customFields: customFields,
     handleSubmitTestTemplate: handleSubmitTestTemplate,
@@ -3124,7 +3125,7 @@ var useFilters = function useFilters() {
   var _useQueryParams = useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
-  var filterColumns = buildTableColumnData().filter(prop("node"));
+  var filterColumns = buildTableColumnData$1().filter(prop("node"));
   var searchKeywordProps = {
     key: "search_term",
     node: "name",
@@ -3229,7 +3230,7 @@ var List = function List(_ref) {
     hasPagination: totalCount > pageSize
   }, /*#__PURE__*/React.createElement(Table, {
     totalCount: totalCount,
-    columnData: buildTableColumnData(setManageTemplatePane, ownerId),
+    columnData: buildTableColumnData$1(setManageTemplatePane, ownerId),
     currentPageNumber: pageIndex,
     defaultPageSize: pageSize,
     loading: isLoading,
@@ -3277,8 +3278,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,
@@ -3332,7 +3333,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     editText = _MESSAGE_TEMPLATES$ty.editText;
   var isFilterApplied = isNotEmpty(filters) || 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
     }));
   };
@@ -3424,8 +3425,8 @@ var WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA = yup.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,
@@ -3445,9 +3446,9 @@ var EmailAndSms = function EmailAndSms(_ref) {
     INITIAL_VALUES = _ref3[0],
     SEND_MESSAGE_FORM_SCHEMA = _ref3[1];
   var updatedInitialValues = mergeAll([INITIAL_VALUES, customFieldsInitialValues]);
-  var updatedValidationSchema = yup.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.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.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$2, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3467,7 +3468,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
       var template = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
@@ -3551,7 +3552,7 @@ var Whatsapp = function Whatsapp(_ref) {
     templateMessage: getTemplateMessage((_templates$3 = templates[0]) === null || _templates$3 === void 0 ? void 0 : _templates$3.components),
     variableContents: getInitialVariableComponents((_templates$4 = templates[0]) === null || _templates$4 === void 0 ? void 0 : _templates$4.variableCount)
   };
-  return /*#__PURE__*/React.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$2, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3668,9 +3669,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
   return /*#__PURE__*/React.createElement(Pane, {
-    initialFocusRef: initialFocusField,
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    initialFocusRef: initialFocusField
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
@@ -3691,5 +3692,556 @@ var SendMessagePane = function SendMessagePane(_ref) {
   })));
 };
 
-export { MessageTemplates, SendMessagePane };
+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: t("neetoMessageTemplate.template.name")
+}, {
+  dataIndex: "status",
+  key: "status",
+  title: t("neetoMessageTemplate.template.active"),
+  render: function render(status) {
+    return status === "active" ? t("neetoMessageTemplate.yes") : t("neetoMessageTemplate.no");
+  },
+  width: "20%"
+}];
+var FILTER_COLUMNS = [{
+  key: "name",
+  node: "name",
+  label: t("neetoMessageTemplate.template.name"),
+  type: "text"
+}, {
+  key: "status",
+  node: "status",
+  label: t("neetoMessageTemplate.template.active"),
+  type: "single_option",
+  values: [{
+    label: t("neetoMessageTemplate.yes"),
+    value: "active"
+  }, {
+    label: 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.object({
+  name: yup.string().trim().required(t("neetoMessageTemplate.template.validation.namePresence")),
+  endpoint: yup.string().required(t("neetoMessageTemplate.api.validation.endpointPresence")).matches(VALID_URL_REGEX, t("neetoMessageTemplate.api.validation.validEndpoint")),
+  additionalData: yup.array().of(yup.object({
+    key: yup.string(),
+    value: yup.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 = whereAny({
+  key: isNotEmpty,
+  value: isNotEmpty
+});
+
+var KeyValuePairs = withT(function (_ref) {
+  var t = _ref.t,
+    name = _ref.name,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label;
+  return /*#__PURE__*/React.createElement(FieldArray, {
+    name: name
+  }, function (arrayHelpers) {
+    var data = arrayHelpers.form.values[name];
+    var showDeleteButton = data.length > 1 || isKeyOrValueNotEmpty(data[0]);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-2"
+    }, /*#__PURE__*/React.createElement(Label, null, label), data.map(function (_, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex h-8 space-x-3",
+        key: index
+      }, /*#__PURE__*/React.createElement(Input, {
+        className: "w-2/5",
+        name: "".concat(name, ".").concat(index, ".key"),
+        placeholder: t("neetoMessageTemplate.api.key")
+      }), /*#__PURE__*/React.createElement(Input, {
+        className: "w-3/5",
+        name: "".concat(name, ".").concat(index, ".value"),
+        placeholder: t("neetoMessageTemplate.api.value"),
+        suffix: showDeleteButton && /*#__PURE__*/React.createElement(Button, {
+          icon: Delete,
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            return removeOption({
+              arrayHelpers: arrayHelpers,
+              index: index,
+              data: data
+            });
+          }
+        })
+      }));
+    }), /*#__PURE__*/React.createElement(Button, {
+      className: "w-full justify-center",
+      label: t("neetoMessageTemplate.api.addKeyValuePair"),
+      style: "secondary",
+      onClick: function onClick() {
+        return addOption(arrayHelpers);
+      }
+    }));
+  });
+});
+
+var rejectEmptyKeyValuePairs = reject(whereAny({
+  key: isEmpty,
+  value: 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: t("neetoMessageTemplate.template.name"),
+    render: function render(name, apiTemplate) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React.createElement(Typography, {
+        style: "body2"
+      }, name), /*#__PURE__*/React.createElement(MoreDropdown, {
+        dropdownProps: {
+          strategy: "fixed"
+        },
+        menuItems: [{
+          key: "edit",
+          label: t("neetoMessageTemplate.template.edit"),
+          onClick: function onClick() {
+            return handleOpenEditPane(apiTemplate);
+          }
+        }, {
+          key: "status",
+          label: equals(apiTemplate.status, TEMPLATE_STATUS.ACTIVE) ? t("neetoMessageTemplate.template.markAsInactive") : t("neetoMessageTemplate.template.markAsActive"),
+          onClick: function onClick() {
+            return handleMarkAsActiveOrInactive(apiTemplate);
+          }
+        }, {
+          key: "delete",
+          label: t("neetoMessageTemplate.template.delete"),
+          onClick: function onClick() {
+            return handleOpenDeleteAlert(apiTemplate);
+          }
+        }]
+      }));
+    }
+  }, {
+    dataIndex: "status",
+    key: "status",
+    title: t("neetoMessageTemplate.template.active"),
+    render: function render(status) {
+      return status === "active" ? t("neetoMessageTemplate.yes") : t("neetoMessageTemplate.no");
+    },
+    width: "20%"
+  }];
+};
+var buildApiTemplateInitialValues = function buildApiTemplateInitialValues(isEdit, apiTemplate) {
+  if (!isEdit) return API_TEMPLATE_INITIAL_VALUES;
+  var additionalData = isEmpty(apiTemplate.additionalData) ? [ADDITIONAL_DATA_INITIAL_VALUE] : apiTemplate.additionalData;
+  return _objectSpread$1(_objectSpread$1({}, 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 = 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 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React.createElement(Form$2, {
+    formikProps: {
+      initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
+      validationSchema: API_TEMPLATE_FORM_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-5"
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    label: t("neetoMessageTemplate.template.name"),
+    name: "name",
+    ref: setFocusField
+  }), /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    label: t("neetoMessageTemplate.api.endpoint"),
+    name: "endpoint",
+    placeholder: SAMPLE_URL
+  }), /*#__PURE__*/React.createElement(KeyValuePairs, {
+    label: t("neetoMessageTemplate.api.additionalData"),
+    name: "additionalData"
+  }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(DEFAULT_PAGE_PROPERTIES),
+    _useState2 = _slicedToArray(_useState, 2),
+    pageParams = _useState2[0],
+    setPageParams = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFiltersPaneOpen = _useState4[0],
+    setIsFiltersPaneOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFormPaneOpen = _useState6[0],
+    setIsFormPaneOpen = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedApiTemplate = _useState8[0],
+    setSelectedApiTemplate = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isDeleteAlertOpen = _useState10[0],
+    setIsDeleteAlertOpen = _useState10[1];
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var searchKeywordProps = {
+    key: "search_term",
+    node: "name",
+    value: searchTerm
+  };
+  var _useState11 = useState(function () {
+      return 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: 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 = 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 = 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.createElement(Container, null, /*#__PURE__*/React.createElement(NeetoHeader, {
+    breadcrumbs: breadcrumbs,
+    title: t("neetoMessageTemplate.template.apiTemplates"),
+    actionBlock: /*#__PURE__*/React.createElement(Button, {
+      label: t("neetoMessageTemplate.api.addApiTemplate"),
+      onClick: function onClick() {
+        return setIsFormPaneOpen(true);
+      }
+    }),
+    searchProps: {
+      placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
+    }
+  }), /*#__PURE__*/React.createElement(SubHeader, {
+    leftActionBlock: /*#__PURE__*/React.createElement(Bar, {
+      columns: FILTER_COLUMNS,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFiltersPaneOpen,
+      onChange: handleFiltersChange
+    }),
+    rightActionBlock: /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
+      dataProps: {
+        totalCount: totalCount
+      },
+      filterProps: {
+        columns: FILTER_COLUMNS,
+        isOpen: isFiltersPaneOpen,
+        keyword: searchKeywordProps,
+        setIsOpen: setIsFiltersPaneOpen,
+        onChange: handleFiltersChange
+      }
+    })
+  }), isNotEmpty(templates) ? /*#__PURE__*/React.createElement(TableWrapper, {
+    hasPagination: totalCount > pageParams.size
+  }, /*#__PURE__*/React.createElement(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.createElement("div", {
+    className: "flex h-full w-full items-center justify-center"
+  }, /*#__PURE__*/React.createElement(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.createElement(Pane, {
+    isOpen: isFormPaneOpen,
+    onClose: handleCloseDeleteAlertAndFormPane
+  }, function (_ref3) {
+    var setFocusField = _ref3.setFocusField;
+    return /*#__PURE__*/React.createElement(Form, {
+      ownerId: ownerId,
+      selectedApiTemplate: selectedApiTemplate,
+      setFocusField: setFocusField,
+      onClose: handleCloseDeleteAlertAndFormPane
+    });
+  }), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isDeleteAlertOpen,
+    isSubmitting: isDeleting,
+    submitButtonLabel: t("neetoMessageTemplate.template.delete"),
+    title: t("neetoMessageTemplate.api.deleteApiTemplate"),
+    message: /*#__PURE__*/React.createElement(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.object({
+  endpoint: yup.string().required(t("neetoMessageTemplate.api.validation.endpointPresence")).matches(VALID_URL_REGEX, t("neetoMessageTemplate.api.validation.validEndpoint")),
+  additionalData: yup.array().of(yup.object({
+    key: yup.string(),
+    value: yup.string()
+  }))
+});
+
+var buildSendToApiFormInitialValues = function buildSendToApiFormInitialValues(template) {
+  if (isEmpty(template)) return SEND_TO_API_FORM_INITIAL_VALUES;
+  var additionalData = 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.createElement(Pane, {
+    isOpen: isOpen,
+    onClose: onClose
+  }, function (paneProps) {
+    return /*#__PURE__*/React.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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = 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 = modify("additionalData", rejectEmptyKeyValuePairs, formValues);
+    onSubmit(additionalDataModifiedFormValues);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React.createElement(Form$2, {
+    formikProps: {
+      initialValues: buildSendToApiFormInitialValues(selectedTemplate),
+      enableReinitialize: true,
+      validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-5"
+  }, /*#__PURE__*/React.createElement(Select, {
+    innerRef: setFocusField,
+    isLoading: isLoadingTemplates,
+    label: t("neetoMessageTemplate.template.title"),
+    options: renameKeys({
+      name: "label",
+      id: "value"
+    }, templates),
+    placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
+    onChange: setSelectedTemplate
+  }), /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    label: t("neetoMessageTemplate.api.endpoint"),
+    name: "endpoint",
+    placeholder: SAMPLE_URL
+  }), /*#__PURE__*/React.createElement(KeyValuePairs, {
+    label: t("neetoMessageTemplate.api.additionalData"),
+    name: "additionalData"
+  }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
+    className: "space-x-2",
+    cancelButtonProps: {
+      disabled: isSubmitting,
+      onClick: onClose
+    },
+    submitButtonProps: {
+      disabled: isSubmitting,
+      label: t("neetoMessageTemplate.template.send")
+    }
+  }))));
+};
+
+export { ApiTemplates, MessageTemplates, SendMessagePane, SendToApiPane };
 //# sourceMappingURL=index.js.map