@bigbinary/neeto-webhooks-frontend 1.6.13 → 1.6.14

package/dist/index.cjs.js

@@ -6,6 +6,7 @@ var React = require('react');
 var reactRouterDom = require('react-router-dom');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
@@ -21,7 +22,6 @@ var ramda = require('ramda');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var formik = require('@bigbinary/neetoui/formik');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var yup = require('yup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -57,6 +57,9 @@ var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
 };
+var getDeliveryDetailsPath = function getDeliveryDetailsPath(deliveriesPath) {
+  return "".concat(deliveriesPath, "/:deliveryId/");
+};
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -191,7 +194,8 @@ var useShowDelivery = function useShowDelivery(id) {
   return reactQuery.useQuery([QUERY_KEYS.DELIVERY_DETAILS, id], function () {
     return deliveriesApi.show(id);
   }, {
-    staleTime: DELIVERY_STALE_TIME
+    staleTime: DELIVERY_STALE_TIME,
+    enabled: !!id
   });
 };
 var useRedeliverWebhook = function useRedeliverWebhook() {
@@ -606,30 +610,18 @@ var Snippet = function Snippet(_ref) {
 
 var TransactionDetails = function TransactionDetails(_ref) {
   var delivery = _ref.delivery;
-  var deliveryId = delivery.id,
-    status = delivery.status,
-    identifier = delivery.identifier,
-    responseStatusCode = delivery.responseStatusCode;
   var _useState = React.useState(DELIVERY_TAB.request),
     _useState2 = _slicedToArray(_useState, 2),
     activeHeader = _useState2[0],
     setActiveHeader = _useState2[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useShowDelivery = useShowDelivery(deliveryId),
-    isLoading = _useShowDelivery.isLoading,
-    _useShowDelivery$data = _useShowDelivery.data,
-    _useShowDelivery$data2 = _useShowDelivery$data === void 0 ? {} : _useShowDelivery$data,
-    _useShowDelivery$data3 = _useShowDelivery$data2.delivery,
-    deliveryDetails = _useShowDelivery$data3 === void 0 ? {} : _useShowDelivery$data3;
-  if (isLoading) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex w-full items-center justify-center py-6"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
-  }
+  var status = delivery.status,
+    identifier = delivery.identifier,
+    responseStatusCode = delivery.responseStatusCode;
   var renderPayload = function renderPayload() {
     try {
-      return JSON.stringify(JSON.parse(deliveryDetails.requestBody), null, 2);
+      return JSON.stringify(JSON.parse(delivery.requestBody), null, 2);
     } catch (_unused) {
       return "";
     }
@@ -670,7 +662,7 @@ var TransactionDetails = function TransactionDetails(_ref) {
     style: "h5"
   }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-request-header"
-  }, deliveryDetails.requestHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, delivery.requestHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
   }, t("neetoWebhooks.delivery.payload")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-request-payload"
@@ -680,31 +672,33 @@ var TransactionDetails = function TransactionDetails(_ref) {
     style: "h5"
   }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-response-header"
-  }, deliveryDetails.responseHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, delivery.responseHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
   }, t("neetoWebhooks.delivery.body")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-response-body"
-  }, deliveryDetails.responseBody)))));
+  }, delivery.responseBody)))));
 };
 
 var Details = function Details(_ref) {
-  var delivery = _ref.delivery,
-    onClose = _ref.onClose;
-  var createdAt = delivery.createdAt,
-    id = delivery.id,
-    event = delivery.event;
+  var onClose = _ref.onClose,
+    deliveryId = _ref.deliveryId;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useRedeliverWebhook = useRedeliverWebhook(),
     isRedelivering = _useRedeliverWebhook.isLoading,
     redeliverWebhook = _useRedeliverWebhook.mutateAsync;
+  var _useShowDelivery = useShowDelivery(deliveryId),
+    isLoading = _useShowDelivery.isLoading,
+    _useShowDelivery$data = _useShowDelivery.data,
+    _useShowDelivery$data2 = _useShowDelivery$data === void 0 ? {} : _useShowDelivery$data,
+    delivery = _useShowDelivery$data2.delivery;
   var handleRedeliverClick = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return redeliverWebhook(id);
+            return redeliverWebhook(deliveryId);
           case 2:
           case "end":
             return _context.stop();
@@ -715,12 +709,15 @@ var Details = function Details(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  if (neetoCist.isNotPresent(delivery)) {
+    return null;
+  }
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    isOpen: neetoCist.isPresent(delivery),
-    size: "large",
-    onClose: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
-    date: createdAt,
+    onClose: onClose,
+    isOpen: neetoCist.isPresent(deliveryId),
+    size: "large"
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
+    date: delivery.createdAt,
     tooltipProps: {
       disabled: true
     },
@@ -729,7 +726,7 @@ var Details = function Details(_ref) {
       weight: "semibold"
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", null, " \u2022 "), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Time, {
-    date: createdAt,
+    date: delivery.createdAt,
     tooltipProps: {
       disabled: true
     },
@@ -751,7 +748,7 @@ var Details = function Details(_ref) {
     label: t("neetoWebhooks.buttons.cancel"),
     style: "text",
     onClick: onClose
-  })));
+  })))));
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
@@ -768,7 +765,7 @@ var buildColumns$1 = function buildColumns(_ref) {
         style: "link",
         weight: "semibold",
         onClick: function onClick() {
-          return handleDetailsClick(delivery);
+          return handleDetailsClick(delivery.sid);
         }
       }, delivery.identifier), delivery.redelivery && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
         style: "info"
@@ -818,14 +815,16 @@ var Deliveries = function Deliveries(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pageNumber = _useState2[0],
     setPageNumber = _useState2[1];
-  var _useState3 = React.useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedDelivery = _useState4[0],
-    setSelectedDelivery = _useState4[1];
+  var _useRouteMatch = reactRouterDom.useRouteMatch(),
+    deliveriesUrl = _useRouteMatch.url;
+  var history = reactRouterDom.useHistory();
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useParams = reactRouterDom.useParams(),
-    webhookId = _useParams.webhookId;
+    webhookId = _useParams.webhookId,
+    deliveryId = _useParams.deliveryId;
+  var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesUrl);
   var _useFetchDeliveries = useFetchDeliveries({
       sid: webhookId,
       page: pageNumber,
@@ -849,6 +848,16 @@ var Deliveries = function Deliveries(_ref) {
     link: window.location.pathname,
     text: endpoint
   }]);
+  var handleDetailsClick = function handleDetailsClick(sid) {
+    return history.push(utils.buildUrl(deliveryDetailsPath, {
+      deliveryId: sid
+    }));
+  };
+  var handleClose = function handleClose() {
+    history.push(utils.buildUrl(deliveriesPath, {
+      webhookId: webhookId
+    }));
+  };
   if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     className: "w-full"
@@ -860,26 +869,22 @@ var Deliveries = function Deliveries(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     totalCount: totalCount,
     fixedHeight: true,
+    columnData: buildColumns$1({
+      handleDetailsClick: handleDetailsClick
+    }),
     currentPageNumber: pageNumber,
     defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-    handlePageChange: function handlePageChange(page) {
-      return setPageNumber(page);
-    },
+    handlePageChange: setPageNumber,
     loading: isFetching,
-    rowData: deliveries,
-    columnData: buildColumns$1({
-      handleDetailsClick: setSelectedDelivery
-    })
+    rowData: deliveries
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
     description: t("neetoWebhooks.delivery.empty.description"),
     title: t("neetoWebhooks.delivery.empty.title")
   })), /*#__PURE__*/React__default["default"].createElement(Details, {
-    delivery: selectedDelivery,
-    onClose: function onClose() {
-      return setSelectedDelivery({});
-    }
+    deliveryId: deliveryId,
+    onClose: handleClose
   }));
 };
 var Deliveries$1 = withReactQuery(Deliveries);
@@ -1548,6 +1553,7 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
   return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
     exact: true,
     path: webhooksPath,
@@ -1561,6 +1567,15 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
         onDelete: onDelete
       });
     }
+  }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
+    exact: true,
+    path: deliveryDetailsPath,
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement(Deliveries$1, {
+        breadcrumbs: breadcrumbs,
+        webhooksUrl: webhooksUrl
+      });
+    }
   }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
     component: function component() {
       return /*#__PURE__*/React__default["default"].createElement(Deliveries$1, {