@bigbinary/neeto-message-templates-frontend 0.7.2 → 0.8.0-beta1

package/dist/index.js

@@ -3,6 +3,7 @@ import { hyphenate, noop, isNotEmpty, renameKeys, findBy, capitalize, nullSafe }
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
@@ -11,8 +12,8 @@ import { useTranslation, Trans } from 'react-i18next';
 import { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@bigbinary/neeto-commons-frontend/constants';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import { useQuery } from '@tanstack/react-query';
 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';
@@ -2288,9 +2289,12 @@ var ownerIdValue = function ownerIdValue(ownerId) {
   return isEmpty(ownerId) ? undefined : ownerId;
 };
 var useFetchTemplates = function useFetchTemplates(params, options) {
-  return useQuery([QUERY_KEYS.NEETO_MESSAGE_TEMPLATES, params], function () {
-    return messageTemplatesApi.fetchAll(params);
-  }, options);
+  return useQuery(_objectSpread$d({
+    queryKey: [QUERY_KEYS.NEETO_MESSAGE_TEMPLATES, params],
+    queryFn: function queryFn() {
+      return messageTemplatesApi.fetchAll(params);
+    }
+  }, options));
 };
 var useCreateTemplate = function useCreateTemplate(ownerId, options) {
   return useMutationWithInvalidation(function (messageTemplate) {
@@ -3291,12 +3295,13 @@ var List = function List(_ref) {
     isFilterApplied = _ref.isFilterApplied,
     ownerId = _ref.ownerId,
     type = _ref.type,
-    onMutationSuccess = _ref.onMutationSuccess;
+    onMutationSuccess = _ref.onMutationSuccess,
+    helpDocUrl = _ref.helpDocUrl;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useDeleteTemplate = useDeleteTemplate(ownerId),
     deleteTemplate = _useDeleteTemplate.mutate,
-    isDeleting = _useDeleteTemplate.isLoading;
+    isDeleting = _useDeleteTemplate.isPending;
   var templates = templatesData.templates,
     totalCount = templatesData.totalCount;
   var template = manageTemplatePane.template,
@@ -3306,6 +3311,34 @@ var List = function List(_ref) {
   var isSms = type === "sms";
   var typeLabelSingular = isSms ? labelSingular : labelSingular.toLowerCase();
   var emptyStateLabel = isSms ? label : label.toLowerCase();
+  var noDataProps = _objectSpread$7(_objectSpread$7({}, !isFilterApplied && {
+    primaryButtonProps: {
+      label: addText,
+      onClick: function onClick() {
+        return setManageTemplatePane(assoc("isOpen", true));
+      }
+    },
+    helpText: /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoMessageTemplate.template.linkToHelpArticle",
+      values: {
+        entity: label
+      },
+      components: {
+        Link: /*#__PURE__*/jsx(Button, {
+          className: "underline",
+          href: helpDocUrl,
+          style: "link",
+          target: "_blank"
+        })
+      }
+    })
+  }), {}, {
+    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+      type: emptyStateLabel
+    }) : t("neetoMessageTemplate.template.emptyState", {
+      type: emptyStateLabel
+    })
+  });
   var handleDelete = function handleDelete() {
     deleteTemplate(template.id, {
       onSuccess: onMutationSuccess,
@@ -3337,20 +3370,7 @@ var List = function List(_ref) {
       })
     }) : /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsx(NoData, _objectSpread$7(_objectSpread$7({}, !isFilterApplied && {
-        primaryButtonProps: {
-          label: addText,
-          onClick: function onClick() {
-            return setManageTemplatePane(assoc("isOpen", true));
-          }
-        }
-      }), {}, {
-        title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
-          type: emptyStateLabel
-        }) : t("neetoMessageTemplate.template.emptyState", {
-          type: emptyStateLabel
-        })
-      }))
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$7({}, noDataProps))
     }), /*#__PURE__*/jsx(Alert, {
       isOpen: isDelete,
       isSubmitting: isDeleting,
@@ -3394,7 +3414,9 @@ var MessageTemplates = function MessageTemplates(_ref) {
     _ref$manageTemplatesP = _ref.manageTemplatesPaneCustomFields,
     manageTemplatesPaneCustomFields = _ref$manageTemplatesP === void 0 ? null : _ref$manageTemplatesP,
     _ref$onMutationSucces = _ref.onMutationSuccess,
-    onMutationSuccess = _ref$onMutationSucces === void 0 ? noop : _ref$onMutationSucces;
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? noop : _ref$onMutationSucces,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
   var _useState = useState(MESSAGE_TEMPLATE_INITIAL_STATE),
     _useState2 = _slicedToArray(_useState, 2),
     manageTemplatePane = _useState2[0],
@@ -3450,11 +3472,20 @@ var MessageTemplates = function MessageTemplates(_ref) {
       breadcrumbs: breadcrumbs,
       searchProps: renderSearchProps(label, value),
       size: "small",
-      title: label,
       actionBlock: /*#__PURE__*/jsx(Button, {
         "data-cy": "add-".concat(hyphenate(value), "-button"),
         label: addText,
         onClick: handleActionClick
+      }),
+      title: /*#__PURE__*/jsxs("span", {
+        className: "flex",
+        children: [label, /*#__PURE__*/jsx(HelpPopover, {
+          className: "ml-2 self-center",
+          helpLinkProps: {
+            href: helpDocUrl
+          },
+          title: label
+        })]
       })
     }), /*#__PURE__*/jsx(SubHeader, {
       leftActionBlock: /*#__PURE__*/jsx(Typography, {
@@ -3483,6 +3514,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onChange: handleChange
     }), /*#__PURE__*/jsx(List, {
       addText: addText,
+      helpDocUrl: helpDocUrl,
       isFilterApplied: isFilterApplied,
       isLoading: isLoading,
       label: label,
@@ -4104,10 +4136,10 @@ var Form = function Form(_ref) {
     t = _useTranslation.t;
   var _useCreateTemplate = useCreateTemplate(ownerId),
     createApiTemplate = _useCreateTemplate.mutate,
-    isCreating = _useCreateTemplate.isLoading;
+    isCreating = _useCreateTemplate.isPending;
   var _useUpdateTemplate = useUpdateTemplate(ownerId),
     updateApiTemplate = _useUpdateTemplate.mutate,
-    isUpdating = _useUpdateTemplate.isLoading;
+    isUpdating = _useUpdateTemplate.isPending;
   var isEdit = isNotEmpty(selectedApiTemplate);
   var handleSubmit = function handleSubmit(values, _ref2) {
     var setSubmitting = _ref2.setSubmitting;
@@ -4180,6 +4212,8 @@ var ApiTemplates = function ApiTemplates(_ref) {
   var ownerId = _ref.ownerId,
     _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl,
     _ref$onMutationSucces = _ref.onMutationSuccess,
     onMutationSuccess = _ref$onMutationSucces === void 0 ? noop : _ref$onMutationSucces;
   var _useTranslation = useTranslation(),
@@ -4231,6 +4265,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
     totalCount = _useFetchTemplates$da2.totalCount,
     isLoading = _useFetchTemplates.isLoading,
     isFetching = _useFetchTemplates.isFetching;
+  var title = t("neetoMessageTemplate.template.apiTemplates");
   var isFilterApplied = isNotEmpty(filters);
   var handleFiltersChange = function handleFiltersChange(filters) {
     setFilters(filters);
@@ -4238,7 +4273,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
   };
   var _useDeleteTemplate = useDeleteTemplate(ownerId),
     deleteTemplate = _useDeleteTemplate.mutate,
-    isDeleting = _useDeleteTemplate.isLoading;
+    isDeleting = _useDeleteTemplate.isPending;
   var _useUpdateTemplate = useUpdateTemplate(ownerId),
     updateTemplate = _useUpdateTemplate.mutate;
   var handleOpenEditPane = function handleOpenEditPane(apiTemplate) {
@@ -4276,11 +4311,38 @@ var ApiTemplates = function ApiTemplates(_ref) {
       }
     });
   };
+  var noDataProps = _objectSpread$1(_objectSpread$1({}, !isFilterApplied && {
+    primaryButtonProps: {
+      label: t("neetoMessageTemplate.api.addApiTemplate"),
+      onClick: function onClick() {
+        return setIsFormPaneOpen(true);
+      }
+    },
+    helpText: /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoMessageTemplate.template.linkToHelpArticle",
+      values: {
+        entity: title
+      },
+      components: {
+        Link: /*#__PURE__*/jsx(Button, {
+          className: "underline",
+          href: helpDocUrl,
+          style: "link",
+          target: "_blank"
+        })
+      }
+    })
+  }), {}, {
+    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+      type: title
+    }) : t("neetoMessageTemplate.template.emptyState", {
+      type: title
+    })
+  });
   return /*#__PURE__*/jsxs(Container, {
     children: [/*#__PURE__*/jsx(NeetoHeader, {
       breadcrumbs: breadcrumbs,
       size: "small",
-      title: t("neetoMessageTemplate.template.apiTemplates"),
       actionBlock: /*#__PURE__*/jsx(Button, {
         label: t("neetoMessageTemplate.api.addApiTemplate"),
         onClick: function onClick() {
@@ -4289,7 +4351,17 @@ var ApiTemplates = function ApiTemplates(_ref) {
       }),
       searchProps: {
         placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
-      }
+      },
+      title: /*#__PURE__*/jsxs("span", {
+        className: "flex",
+        children: [title, /*#__PURE__*/jsx(HelpPopover, {
+          title: title,
+          className: "ml-2 self-center",
+          helpLinkProps: {
+            href: helpDocUrl
+          }
+        })]
+      })
     }), /*#__PURE__*/jsx(SubHeader, {
       leftActionBlock: /*#__PURE__*/jsx(Typography, {
         component: "h4",
@@ -4341,20 +4413,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
       })
     }) : /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsx(NoData, _objectSpread$1(_objectSpread$1({}, !isFilterApplied && {
-        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")
-        })
-      }))
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$1({}, noDataProps))
     }), /*#__PURE__*/jsx(Pane, {
       isOpen: isFormPaneOpen,
       onClose: handleCloseDeleteAlertAndFormPane,