@bigbinary/neeto-message-templates-frontend 0.3.6 → 0.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { isNotEmpty, noop, renameKeys, findBy, capitalize, nullSafe } from '@bigbinary/neeto-cist';
+import { noop, isNotEmpty, renameKeys, findBy, capitalize, nullSafe } from '@bigbinary/neeto-cist';
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
@@ -10,7 +10,7 @@ import { t } from 'i18next';
 import { MenuHorizontal } from '@bigbinary/neeto-icons';
 import { useTranslation, Trans } from 'react-i18next';
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@bigbinary/neeto-commons-frontend/constants';
-import { useMutationWithInvalidation, withImmutableActions } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useMutationWithInvalidation, withImmutableActions, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useQuery } from 'react-query';
 import axios from 'axios';
 import { create } from 'zustand';
@@ -140,6 +140,11 @@ var MESSAGE_TEMPLATES = {
     editText: t("neetoMessageTemplate.template.editWhatsappTemplate")
   }
 };
+var MESSAGE_TYPES = {
+  sms: t("messageType.sms"),
+  email: t("messageType.email"),
+  whatsapp: t("messageType.whatsapp")
+};
 var DEFAULT_EDITOR_ROW_COUNT = 15;
 
 var MESSAGE_TEMPLATE_INITIAL_STATE = {
@@ -303,16 +308,11 @@ var RowActions = function RowActions(_ref) {
   }, t("neetoMessageTemplate.template.delete"))));
 };
 
-var renderSearchProps = function renderSearchProps(label, setSearchTerm, searchTerm) {
+var renderSearchProps = function renderSearchProps(label) {
   return {
     placeholder: t("neetoMessageTemplate.template.search", {
       what: label.toLowerCase()
-    }),
-    onChange: function onChange(_ref) {
-      var value = _ref.target.value;
-      return setSearchTerm(value);
-    },
-    value: searchTerm
+    })
   };
 };
 var buildTableColumnData = function buildTableColumnData(setManageTemplatePane, ownerId) {
@@ -833,7 +833,7 @@ var TestMessage = function TestMessage(_ref) {
     className: "neeto-ui-flex neeto-ui-items-center left-0 flex gap-x-2"
   }, /*#__PURE__*/React.createElement(Input, {
     name: isEmailTemplate ? "testEmailAddress" : "testPhoneNumber",
-    placeholder: t(isEmailTemplate ? "template.emailAddress" : "template.phoneNumber"),
+    placeholder: t(isEmailTemplate ? "neetoMessageTemplate.template.emailAddress" : "neetoMessageTemplate.template.phoneNumber"),
     onKeyDown: handleKeyDown,
     onKeyUp: handleTestValidation
   }), /*#__PURE__*/React.createElement(Button, {
@@ -1000,32 +1000,30 @@ function _toConsumableArray(arr) {
 }
 
 var useFilters = function useFilters() {
-  var _useState = useState(""),
+  var _useState = useState(DEFAULT_PAGE_PROPERTIES),
     _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var _useState3 = useState(DEFAULT_PAGE_PROPERTIES),
-    _useState4 = _slicedToArray(_useState3, 2),
-    pageProperties = _useState4[0],
-    setPageProperties = _useState4[1];
+    pageProperties = _useState2[0],
+    setPageProperties = _useState2[1];
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.search_term,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var filterColumns = buildTableColumnData().filter(prop("node"));
   var searchKeywordProps = {
-    key: "keyword",
+    key: "search_term",
     node: "name",
-    value: searchTerm.trim(),
-    setValue: setSearchTerm
+    value: searchTerm,
+    setValue: noop
   };
-  var _useState5 = useState(function () {
+  var _useState3 = useState(function () {
       return buildFiltersFromURL([].concat(_toConsumableArray(filterColumns), [searchKeywordProps]));
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    filters = _useState6[0],
-    setFilters = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
   return {
     filterColumns: filterColumns,
     searchKeywordProps: searchKeywordProps,
     searchTerm: searchTerm,
-    setSearchTerm: setSearchTerm,
     filters: filters,
     setFilters: setFilters,
     pageProperties: pageProperties,
@@ -1085,7 +1083,8 @@ var List = function List(_ref) {
     label = _ref.label,
     addText = _ref.addText,
     isFilterApplied = _ref.isFilterApplied,
-    ownerId = _ref.ownerId;
+    ownerId = _ref.ownerId,
+    type = _ref.type;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useDeleteTemplate = useDeleteTemplate(ownerId),
@@ -1097,6 +1096,9 @@ var List = function List(_ref) {
     isDelete = manageTemplatePane.isDelete;
   var pageIndex = pageProperties.index,
     pageSize = pageProperties.size;
+  var isSms = type === "sms";
+  var typeLabelSingular = isSms ? labelSingular : labelSingular.toLowerCase();
+  var emptyStateLabel = isSms ? label : label.toLowerCase();
   var handleDelete = function handleDelete() {
     deleteTemplate(template.id, {
       onSettled: function onSettled() {
@@ -1134,9 +1136,9 @@ var List = function List(_ref) {
       }
     },
     title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
-      type: label.toLowerCase()
+      type: emptyStateLabel
     }) : t("neetoMessageTemplate.template.emptyState", {
-      type: label.toLowerCase()
+      type: emptyStateLabel
     })
   })), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDelete,
@@ -1148,7 +1150,7 @@ var List = function List(_ref) {
       }
     }),
     title: t("neetoMessageTemplate.template.deleteTemplate", {
-      label: labelSingular.toLowerCase()
+      label: typeLabelSingular
     }),
     onClose: function onClose() {
       return setManageTemplatePane(assoc("isDelete", false));
@@ -1186,7 +1188,6 @@ var MessageTemplates = function MessageTemplates(_ref) {
     searchKeywordProps = _useFilters.searchKeywordProps,
     filterColumns = _useFilters.filterColumns,
     searchTerm = _useFilters.searchTerm,
-    setSearchTerm = _useFilters.setSearchTerm,
     filters = _useFilters.filters,
     setFilters = _useFilters.setFilters,
     pageProperties = _useFilters.pageProperties,
@@ -1228,7 +1229,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onClick: handleActionClick
     }),
     breadcrumbs: breadcrumbs,
-    searchProps: renderSearchProps(label, setSearchTerm, searchTerm),
+    searchProps: renderSearchProps(label),
     title: label
   }), /*#__PURE__*/React.createElement(SubHeader, {
     leftActionBlock: /*#__PURE__*/React.createElement(Bar, {
@@ -1257,7 +1258,8 @@ var MessageTemplates = function MessageTemplates(_ref) {
     pageProperties: pageProperties,
     setManageTemplatePane: setManageTemplatePane,
     setPageProperties: setPageProperties,
-    templatesData: templatesData
+    templatesData: templatesData,
+    type: type
   }), /*#__PURE__*/React.createElement(AddEdit, {
     addText: addText,
     createUpdateTemplate: createUpdateTemplate,
@@ -1393,7 +1395,7 @@ var Whatsapp = function Whatsapp(_ref) {
     t = _useTranslation.t;
   var getInitialVariableComponents = function getInitialVariableComponents(variables) {
     var initialComponents = {};
-    variables.forEach(function (_ref2) {
+    variables === null || variables === void 0 ? void 0 : variables.forEach(function (_ref2) {
       var type = _ref2.type,
         count = _ref2.count;
       initialComponents[type] = Array(count).fill("");
@@ -1401,7 +1403,8 @@ var Whatsapp = function Whatsapp(_ref) {
     return initialComponents;
   };
   var getTemplateMessage = function getTemplateMessage(components) {
-    return nullSafe(pluck)("text", components).join("\n");
+    var _nullSafe;
+    return (_nullSafe = nullSafe(pluck)("text", components)) === null || _nullSafe === void 0 ? void 0 : _nullSafe.join("\n");
   };
   if (isEmpty(templates)) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, null, t("neetoMessageTemplate.template.emptyState", {
@@ -1542,7 +1545,7 @@ var SendMessagePane = function SendMessagePane(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
-  }, t("neetoMessageTemplate.common.send"), " ", type)), /*#__PURE__*/React.createElement(Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React.createElement(Whatsapp, {
+  }, t("neetoMessageTemplate.common.send"), " ", MESSAGE_TYPES[type])), /*#__PURE__*/React.createElement(Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React.createElement(Whatsapp, {
     handleSubmit: handleSubmit,
     onClose: onClose,
     templates: templates