@bigbinary/neeto-message-templates-frontend 0.7.2 → 0.7.3

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';
@@ -3291,7 +3292,8 @@ 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),
@@ -3306,6 +3308,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 +3367,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 +3411,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 +3469,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 +3511,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onChange: handleChange
     }), /*#__PURE__*/jsx(List, {
       addText: addText,
+      helpDocUrl: helpDocUrl,
       isFilterApplied: isFilterApplied,
       isLoading: isLoading,
       label: label,
@@ -4180,6 +4209,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 +4262,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);
@@ -4276,11 +4308,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 +4348,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 +4410,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,