@bigbinary/neeto-webhooks-frontend 2.0.1 → 2.0.2

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

@@ -41,6 +41,7 @@
       "payload": "Payload",
       "deliveryId": "Delivery ID",
       "sid": "ID",
+      "helpDescription": "Details related to the response received when the product interacts with the endpoint specified in the webhook.",
       "empty": {
         "title": "There are no deliveries to show.",
         "description": "No events have been sent to this webhook"

package/dist/index.cjs.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var NoData = require('@bigbinary/neetoui/NoData');
@@ -26,10 +28,8 @@ var Tab = require('@bigbinary/neetoui/Tab');
 var Tag = require('@bigbinary/neetoui/Tag');
 var i18next = require('i18next');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var ramda = require('ramda');
 var Alert = require('@bigbinary/neetoui/Alert');
 var Plus = require('@bigbinary/neeto-icons/Plus');
-var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var Input = require('@bigbinary/neetoui/formik/Input');
@@ -63,6 +63,7 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header$2);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
@@ -76,7 +77,6 @@ var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
 var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
-var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
@@ -87,6 +87,12 @@ var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
+var HELP_LINK_URLS = {
+  webhook: "https://neetocalhelp.neetokb.com/p/a-4bb6c2a2",
+  secrets: "https://neetocalhelp.neetokb.com/p/a-80de90bd",
+  deliveries: "https://help.neetocal.com/articles/managing-webhook-deliveries"
+};
+
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
 };
@@ -961,7 +967,8 @@ var buildColumns$1 = function buildColumns(_ref) {
 
 var Deliveries = function Deliveries(_ref) {
   var webhooksUrl = _ref.webhooksUrl,
-    hostBreadcrumbs = _ref.breadcrumbs;
+    hostBreadcrumbs = _ref.breadcrumbs,
+    helpLink = _ref.helpLink;
   var _useRouteMatch = reactRouterDom.useRouteMatch(),
     deliveriesUrl = _useRouteMatch.url;
   var history = reactRouterDom.useHistory();
@@ -1001,7 +1008,16 @@ var Deliveries = function Deliveries(_ref) {
     className: "w-full",
     children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
       breadcrumbs: breadcrumbs,
-      title: t("neetoWebhooks.delivery.title")
+      title: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-x-2",
+        children: [t("neetoWebhooks.delivery.title"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+          description: t("neetoWebhooks.delivery.helpDescription"),
+          helpLinkProps: {
+            href: helpLink
+          },
+          title: t("neetoWebhooks.delivery.title")
+        })]
+      })
     }), neetoCist.isNotEmpty(deliveries) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
       hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
@@ -1113,9 +1129,6 @@ var useDestroyWebhook = function useDestroyWebhook(options) {
   });
 };
 
-var WEBHOOK_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-4bb6c2a2";
-var WEBHOOK_SECRETS_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-80de90bd";
-
 var baseUrl = "/webhooks/events/all";
 var all = function all() {
   return axios__default["default"].get(baseUrl);
@@ -1320,7 +1333,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     onCreate = _ref.onCreate,
-    webhooks = _ref.webhooks;
+    webhooks = _ref.webhooks,
+    webhookHelpLink = _ref.webhookHelpLink,
+    secretsHelpLink = _ref.secretsHelpLink;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
@@ -1400,7 +1415,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
         description: t("neetoWebhooks.webhook.helpDescription"),
         helpLinkProps: {
-          href: WEBHOOK_HELP_URL
+          href: webhookHelpLink
         },
         title: t("neetoWebhooks.webhook.title")
       })]
@@ -1448,7 +1463,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                     className: "flex items-center gap-x-2",
                     children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
                       helpLinkProps: {
-                        href: WEBHOOK_SECRETS_HELP_URL
+                        href: secretsHelpLink
                       },
                       description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
                       title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
@@ -1506,7 +1521,8 @@ var Header = reactUtils.withT(function (_ref) {
     breadcrumbs = _ref.breadcrumbs,
     title = _ref.title,
     setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen,
-    headerSize = _ref.headerSize;
+    headerSize = _ref.headerSize,
+    webhookHelpLink = _ref.webhookHelpLink;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
       breadcrumbs: breadcrumbs,
@@ -1523,7 +1539,7 @@ var Header = reactUtils.withT(function (_ref) {
         children: [t("neetoWebhooks.webhook.title"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
           description: t("neetoWebhooks.webhook.helpDescription"),
           helpLinkProps: {
-            href: WEBHOOK_HELP_URL
+            href: webhookHelpLink
           },
           title: t("neetoWebhooks.webhook.title")
         })]
@@ -1549,7 +1565,9 @@ var Webhooks = function Webhooks(_ref) {
     onDelete = _ref.onDelete,
     headerSize = _ref.headerSize,
     _ref$containerClassNa = _ref.containerClassName,
-    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa;
+    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
+    webhookHelpLink = _ref.webhookHelpLink,
+    secretsHelpLink = _ref.secretsHelpLink;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     editingWebhookId = _useState2[0],
@@ -1613,7 +1631,8 @@ var Webhooks = function Webhooks(_ref) {
       breadcrumbs: breadcrumbs,
       headerSize: headerSize,
       setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
-      title: title
+      title: title,
+      webhookHelpLink: webhookHelpLink
     }), neetoCist.isNotEmpty(webhooks) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
       hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
@@ -1634,7 +1653,7 @@ var Webhooks = function Webhooks(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
         title: t("neetoWebhooks.webhook.empty"),
         helpText: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-          href: WEBHOOK_HELP_URL,
+          href: webhookHelpLink,
           label: t("neetoWebhooks.webhook.emptyHelpText"),
           rel: "noreferrer",
           style: "link",
@@ -1652,6 +1671,8 @@ var Webhooks = function Webhooks(_ref) {
       entityId: entityId,
       entityType: entityType,
       onCreate: onCreate,
+      secretsHelpLink: secretsHelpLink,
+      webhookHelpLink: webhookHelpLink,
       webhooks: webhooks,
       isOpen: isAddWebhookPaneOpen,
       onClose: handlePaneClose
@@ -1687,12 +1708,15 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     onCreate = _ref.onCreate,
     onDelete = _ref.onDelete,
     headerSize = _ref.headerSize,
+    _ref$helpLinkUrls = _ref.helpLinkUrls,
+    helpLinkUrls = _ref$helpLinkUrls === void 0 ? {} : _ref$helpLinkUrls,
     containerClassName = _ref.containerClassName;
   var _useRouteMatch = reactRouterDom.useRouteMatch(),
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
+  var helpLinks = ramda.mergeRight(HELP_LINK_URLS, helpLinkUrls);
   return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
     children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
       exact: true,
@@ -1707,7 +1731,9 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
           headerSize: headerSize,
           onCreate: onCreate,
           onDelete: onDelete,
-          title: title
+          title: title,
+          secretsHelpLink: helpLinks.secrets,
+          webhookHelpLink: helpLinks.webhook
         });
       }
     }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
@@ -1716,17 +1742,19 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
       render: function render() {
         return /*#__PURE__*/jsxRuntime.jsx(Deliveries$1, {
           breadcrumbs: breadcrumbs,
-          webhooksUrl: webhooksUrl
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
         });
       }
     }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      path: deliveriesPath,
       component: function component() {
         return /*#__PURE__*/jsxRuntime.jsx(Deliveries$1, {
           breadcrumbs: breadcrumbs,
-          webhooksUrl: webhooksUrl
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
         });
-      },
-      path: deliveriesPath
+      }
     })]
   });
 };