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

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
 
@@ -173,7 +174,9 @@ const App = () => {
       type={type}
       isTestingTemplateDisabled={isTestingTemplateDisabled}
       manageTemplatesPaneCustomFields={manageTemplatesPaneCustomFields()}
-      onMutationSuccess={() => queryClient.invalidateQueries(["rules"])}
+      onMutationSuccess={() => queryClient.invalidateQueries({
+        queryKey: ["rules"],
+      })}
     />
   );
 };
@@ -270,6 +273,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
 
@@ -287,7 +291,7 @@ const App = () => {
   return (
     <ApiTemplates
       {...{ breadcrumbs, ownerId }}
-      onMutationSuccess={() => queryClient.invalidateQueries(["rules"])}
+      onMutationSuccess={() => queryClient.invalidateQueries({ queryKey: ["rules"] })}
     />
   );
 };

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');
@@ -15,8 +16,8 @@ var reactI18next = require('react-i18next');
 var i18next = require('i18next');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var reactQuery = require('react-query');
 var axios = require('axios');
 var require$$0 = require('util');
 var zustand = require('zustand');
@@ -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);
@@ -2336,9 +2338,12 @@ var ownerIdValue = function ownerIdValue(ownerId) {
   return ramda.isEmpty(ownerId) ? undefined : ownerId;
 };
 var useFetchTemplates = function useFetchTemplates(params, options) {
-  return reactQuery.useQuery([QUERY_KEYS.NEETO_MESSAGE_TEMPLATES, params], function () {
-    return messageTemplatesApi.fetchAll(params);
-  }, options);
+  return reactQuery.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 reactUtils.useMutationWithInvalidation(function (messageTemplate) {
@@ -3339,12 +3344,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 = reactI18next.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,
@@ -3354,6 +3360,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 +3419,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 +3463,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 +3521,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 +3563,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onChange: handleChange
     }), /*#__PURE__*/jsxRuntime.jsx(List, {
       addText: addText,
+      helpDocUrl: helpDocUrl,
       isFilterApplied: isFilterApplied,
       isLoading: isLoading,
       label: label,
@@ -4152,10 +4185,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 = neetoCist.isNotEmpty(selectedApiTemplate);
   var handleSubmit = function handleSubmit(values, _ref2) {
     var setSubmitting = _ref2.setSubmitting;
@@ -4228,6 +4261,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 +4314,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);
@@ -4286,7 +4322,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) {
@@ -4324,11 +4360,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 +4400,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 +4462,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,