@bigbinary/neeto-webhooks-frontend 2.1.4 → 2.2.1

package/dist/cjs/NeetoWebhooks.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var React = require('react');
 var reactRouterDom = require('react-router-dom');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
@@ -8,9 +7,9 @@ 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');
+var Spinner = require('@bigbinary/neetoui/Spinner');
 var Table = require('@bigbinary/neetoui/Table');
 var reactI18next = require('react-i18next');
 var reactQuery = require('@tanstack/react-query');
@@ -21,6 +20,7 @@ var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
 var Button = require('@bigbinary/neetoui/Button');
 var Pane = require('@bigbinary/neetoui/Pane');
+var react = require('react');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Tab = require('@bigbinary/neetoui/Tab');
 var Tag = require('@bigbinary/neetoui/Tag');
@@ -30,7 +30,6 @@ var ramda = require('ramda');
 var Alert = require('@bigbinary/neetoui/Alert');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
-var Spinner = require('@bigbinary/neetoui/Spinner');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Form = require('@bigbinary/neetoui/formik/Form');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
@@ -59,13 +58,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-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);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
@@ -77,7 +75,6 @@ var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
-var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
@@ -701,7 +698,7 @@ var Snippet = function Snippet(_ref) {
 
 var TransactionDetails = function TransactionDetails(_ref) {
   var delivery = _ref.delivery;
-  var _useState = React.useState(DELIVERY_TAB.request),
+  var _useState = react.useState(DELIVERY_TAB.request),
     _useState2 = _slicedToArray(_useState, 2),
     activeHeader = _useState2[0],
     setActiveHeader = _useState2[1];
@@ -847,7 +844,10 @@ var Details = function Details(_ref) {
     isOpen: neetoCist.isPresent(deliveryId),
     size: "large",
     children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: isLoading ? /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
           children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [/*#__PURE__*/jsxRuntime.jsx(DateFormat__default["default"].Date, {
@@ -998,7 +998,12 @@ var Deliveries = function Deliveries(_ref) {
     link: window.location.pathname,
     text: endpoint
   }]);
-  if (isLoading) return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
     className: "w-full",
     children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
@@ -1331,7 +1336,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     webhooks = _ref.webhooks;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useState = React.useState(false),
+  var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSecretInputFieldVisible = _useState2[0],
     setIsSecretInputFieldVisible = _useState2[1];
@@ -1351,7 +1356,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       onSuccess: onClose
     }),
     updateWebhook = _useUpdateWebhook.mutate;
-  var endpointRef = React.useRef();
+  var endpointRef = react.useRef();
   var _useFetchEvents = useFetchEvents(),
     events = _useFetchEvents.data,
     isLoading = _useFetchEvents.isLoading;
@@ -1389,7 +1394,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     setFieldValue("secret", null);
     setIsSecretInputFieldVisible(false);
   };
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (webhook !== null && webhook !== void 0 && webhook.secret) {
       setIsSecretInputFieldVisible(true);
     }
@@ -1545,7 +1550,7 @@ var Header = reactUtils.withT(function (_ref) {
     })]
   });
 });
-var Header$1 = /*#__PURE__*/React__default["default"].memo(Header);
+var Header$1 = /*#__PURE__*/react.memo(Header);
 
 var Webhooks = function Webhooks(_ref) {
   var deliveriesPath = _ref.deliveriesPath,
@@ -1558,19 +1563,19 @@ var Webhooks = function Webhooks(_ref) {
     headerSize = _ref.headerSize,
     _ref$containerClassNa = _ref.containerClassName,
     containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa;
-  var _useState = React.useState(null),
+  var _useState = react.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     editingWebhookId = _useState2[0],
     setEditingWebhookId = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = react.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
     deletingWebhookId = _useState4[0],
     setDeletingWebhookId = _useState4[1];
-  var _useState5 = React.useState(false),
+  var _useState5 = react.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isAddWebhookPaneOpen = _useState6[0],
     setIsAddWebhookPaneOpen = _useState6[1];
-  var _useState7 = React.useState(false),
+  var _useState7 = react.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     isDeleteAlertOpen = _useState8[0],
     setIsDeleteAlertOpen = _useState8[1];
@@ -1604,16 +1609,19 @@ var Webhooks = function Webhooks(_ref) {
     setEditingWebhookId(null);
     setIsAddWebhookPaneOpen(false);
   };
-  var handleEdit = React.useCallback(function (id) {
+  var handleEdit = react.useCallback(function (id) {
     setEditingWebhookId(id);
     setIsAddWebhookPaneOpen(true);
   }, []);
-  var handleDelete = React.useCallback(function (id) {
+  var handleDelete = react.useCallback(function (id) {
     setDeletingWebhookId(id);
     setIsDeleteAlertOpen(true);
   }, []);
   if (isLoading) {
-    return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+    });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
     className: containerClassName,