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

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,
@@ -4031,13 +4061,16 @@ var KeyValuePairs = reactUtils.withT(function (_ref) {
             className: "flex h-8 space-x-3",
             children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
               className: "w-2/5",
+              "data-cy": "key-input-".concat(index),
               name: "".concat(name, ".").concat(index, ".key"),
               placeholder: t("neetoMessageTemplate.api.key")
             }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
               className: "w-3/5",
+              "data-cy": "value-input-".concat(index),
               name: "".concat(name, ".").concat(index, ".value"),
               placeholder: t("neetoMessageTemplate.api.value"),
               suffix: showDeleteButton && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                "data-cy": "delete-key-value-pair-".concat(index),
                 icon: neetoIcons.Delete,
                 size: "small",
                 style: "text",
@@ -4053,6 +4086,7 @@ var KeyValuePairs = reactUtils.withT(function (_ref) {
           }, index);
         }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           className: "w-full justify-center",
+          "data-cy": "add-key-value-pair-button",
           label: t("neetoMessageTemplate.api.addKeyValuePair"),
           style: "secondary",
           onClick: function onClick() {
@@ -4093,30 +4127,37 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex items-center justify-between gap-x-3",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          "data-cy": "api-template-name-link",
           label: name,
           style: "link",
           onClick: function onClick() {
             return handleOpenEditPane(apiTemplate);
           }
         }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+          dropdownButtonProps: {
+            "data-cy": "api-template-dropdown"
+          },
           dropdownProps: {
             strategy: "fixed"
           },
           menuItems: [{
             key: "edit",
             label: i18next.t("neetoMessageTemplate.template.edit"),
+            "data-cy": "api-template-button-edit-button",
             onClick: function onClick() {
               return handleOpenEditPane(apiTemplate);
             }
           }, {
             key: "status",
             label: ramda.equals(apiTemplate.status, TEMPLATE_STATUS.ACTIVE) ? i18next.t("neetoMessageTemplate.template.markAsInactive") : i18next.t("neetoMessageTemplate.template.markAsActive"),
+            "data-cy": "api-template-button-status-button",
             onClick: function onClick() {
               return handleMarkAsActiveOrInactive(apiTemplate);
             }
           }, {
             key: "delete",
             label: i18next.t("neetoMessageTemplate.template.delete"),
+            "data-cy": "api-template-button-delete-button",
             onClick: function onClick() {
               return handleOpenDeleteAlert(apiTemplate);
             }
@@ -4228,6 +4269,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 +4322,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,20 +4368,59 @@ 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"], {
+        "data-cy": "add-api-templates-button",
         label: t("neetoMessageTemplate.api.addApiTemplate"),
         onClick: function onClick() {
           return setIsFormPaneOpen(true);
         }
       }),
       searchProps: {
-        placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
-      }
+        placeholder: t("neetoMessageTemplate.template.searchApiTemplates"),
+        "data-cy": "api-templates-search-input"
+      },
+      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 +4472,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,
@@ -4538,10 +4608,12 @@ var SendToApiForm = function SendToApiForm(_ref) {
             children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
               isSubmitting: isSubmitting,
               cancelButtonProps: {
-                onClick: onClose
+                onClick: onClose,
+                "data-cy": "api-template-cancel-button"
               },
               submitButtonProps: {
-                label: t("neetoMessageTemplate.template.send")
+                label: t("neetoMessageTemplate.template.send"),
+                "data-cy": "api-template-send-button"
               }
             })
           })]