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

package/README.md

@@ -128,6 +128,7 @@ along with filtering and search capabilities.
   templates pane.
 - `onMutationSuccess`: The callback function which is triggered on the success
   of mutation functions(create, update & delete).
+- `helpDocUrl`: Help article link.
 
 ##### Usage
 
@@ -270,6 +271,7 @@ filtering and search capabilities.
 - `breadcrumbs`: An array of objects that specify breadcrumbs for navigation.
 - `onMutationSuccess`: The callback function which is triggered on the success
   of mutation functions(create, update & delete).
+- `helpDocUrl`: Help article link.
 
 ##### Usage
 

package/app/javascript/src/translations/en.json

@@ -24,6 +24,7 @@
       "subject": "Subject",
       "title": "Template",
       "active": "Active",
+      "linkToHelpArticle": "Here is how you can use <Link>{{entity}}</Link>.",
       "templateDeleteConfirmation": "You are deleting the template <strong>{{name}}</strong>. This can't be undone.",
       "deleteTemplate": "Delete {{label, anyCase}}?",
       "emailTemplates": "Email templates",

package/dist/index.cjs.js

@@ -7,6 +7,7 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -63,6 +64,7 @@ function _interopNamespace(e) {
 
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
@@ -3339,7 +3341,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 = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useDeleteTemplate = useDeleteTemplate(ownerId),
@@ -3354,6 +3357,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(ramda.assoc("isOpen", true));
+      }
+    },
+    helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoMessageTemplate.template.linkToHelpArticle",
+      values: {
+        entity: label
+      },
+      components: {
+        Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          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,
@@ -3385,20 +3416,7 @@ var List = function List(_ref) {
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$7(_objectSpread$7({}, !isFilterApplied && {
-        primaryButtonProps: {
-          label: addText,
-          onClick: function onClick() {
-            return setManageTemplatePane(ramda.assoc("isOpen", true));
-          }
-        }
-      }), {}, {
-        title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
-          type: emptyStateLabel
-        }) : t("neetoMessageTemplate.template.emptyState", {
-          type: emptyStateLabel
-        })
-      }))
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$7({}, noDataProps))
     }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
       isOpen: isDelete,
       isSubmitting: isDeleting,
@@ -3442,7 +3460,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 ? neetoCist.noop : _ref$onMutationSucces;
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? neetoCist.noop : _ref$onMutationSucces,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
   var _useState = react.useState(MESSAGE_TEMPLATE_INITIAL_STATE),
     _useState2 = _slicedToArray(_useState, 2),
     manageTemplatePane = _useState2[0],
@@ -3498,11 +3518,20 @@ var MessageTemplates = function MessageTemplates(_ref) {
       breadcrumbs: breadcrumbs,
       searchProps: renderSearchProps(label, value),
       size: "small",
-      title: label,
       actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "add-".concat(neetoCist.hyphenate(value), "-button"),
         label: addText,
         onClick: handleActionClick
+      }),
+      title: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex",
+        children: [label, /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+          className: "ml-2 self-center",
+          helpLinkProps: {
+            href: helpDocUrl
+          },
+          title: label
+        })]
       })
     }), /*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
       leftActionBlock: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
@@ -3531,6 +3560,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onChange: handleChange
     }), /*#__PURE__*/jsxRuntime.jsx(List, {
       addText: addText,
+      helpDocUrl: helpDocUrl,
       isFilterApplied: isFilterApplied,
       isLoading: isLoading,
       label: label,
@@ -4228,6 +4258,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 ? neetoCist.noop : _ref$onMutationSucces;
   var _useTranslation = reactI18next.useTranslation(),
@@ -4279,6 +4311,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
     totalCount = _useFetchTemplates$da2.totalCount,
     isLoading = _useFetchTemplates.isLoading,
     isFetching = _useFetchTemplates.isFetching;
+  var title = t("neetoMessageTemplate.template.apiTemplates");
   var isFilterApplied = neetoCist.isNotEmpty(filters);
   var handleFiltersChange = function handleFiltersChange(filters) {
     setFilters(filters);
@@ -4324,11 +4357,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__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoMessageTemplate.template.linkToHelpArticle",
+      values: {
+        entity: title
+      },
+      components: {
+        Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          className: "underline",
+          href: helpDocUrl,
+          style: "link",
+          target: "_blank"
+        })
+      }
+    })
+  }), {}, {
+    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+      type: title
+    }) : t("neetoMessageTemplate.template.emptyState", {
+      type: title
+    })
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
     children: [/*#__PURE__*/jsxRuntime.jsx(NeetoHeader__default["default"], {
       breadcrumbs: breadcrumbs,
       size: "small",
-      title: t("neetoMessageTemplate.template.apiTemplates"),
       actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         label: t("neetoMessageTemplate.api.addApiTemplate"),
         onClick: function onClick() {
@@ -4337,7 +4397,17 @@ var ApiTemplates = function ApiTemplates(_ref) {
       }),
       searchProps: {
         placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
-      }
+      },
+      title: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex",
+        children: [title, /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+          title: title,
+          className: "ml-2 self-center",
+          helpLinkProps: {
+            href: helpDocUrl
+          }
+        })]
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
       leftActionBlock: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
         component: "h4",
@@ -4389,20 +4459,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _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__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$1({}, noDataProps))
     }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"], {
       isOpen: isFormPaneOpen,
       onClose: handleCloseDeleteAlertAndFormPane,