@bigbinary/neeto-webhooks-frontend 1.6.25 → 1.7.0-beta1

package/dist/index.js

@@ -7,18 +7,33 @@ import Container from '@bigbinary/neeto-molecules/Container';
 import Header$2 from '@bigbinary/neeto-molecules/Header';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
-import { Typography, Tag, Tab, Pane, Button, Table, NoData, Spinner, Alert } from '@bigbinary/neetoui';
+import NoData from '@bigbinary/neetoui/NoData';
+import Table from '@bigbinary/neetoui/Table';
 import { useTranslation } from 'react-i18next';
-import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
+import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
+import Button from '@bigbinary/neetoui/Button';
+import Pane from '@bigbinary/neetoui/Pane';
+import Typography from '@bigbinary/neetoui/Typography';
+import Tab from '@bigbinary/neetoui/Tab';
+import Tag from '@bigbinary/neetoui/Tag';
 import { t as t$1 } from 'i18next';
 import { prop, pluck, assoc } from 'ramda';
+import Alert from '@bigbinary/neetoui/Alert';
+import { useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Plus } from '@bigbinary/neeto-icons';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
-import { Form, Textarea, Select, Input, Switch, ActionBlock } from '@bigbinary/neetoui/formik';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Form from '@bigbinary/neetoui/formik/Form';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import Select from '@bigbinary/neetoui/formik/Select';
+import Switch from '@bigbinary/neetoui/formik/Switch';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import * as yup from 'yup';
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
@@ -99,6 +114,47 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _typeof$1(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof$1(o);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof$1(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof$1(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof$1(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
 var queryClient = new QueryClient({
   queryCache: new QueryCache(),
   defaultOptions: {
@@ -108,15 +164,17 @@ var queryClient = new QueryClient({
   }
 });
 
-/* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var withReactQuery = function withReactQuery(Component) {
   var QueryWrapper = function QueryWrapper(props) {
-    return /*#__PURE__*/React.createElement(QueryClientProvider, {
-      client: queryClient
-    }, /*#__PURE__*/React.createElement(Component, props), /*#__PURE__*/React.createElement(ReactQueryDevtools, {
-      initialIsOpen: false,
-      position: "bottom-right"
-    }));
+    return /*#__PURE__*/jsxs(QueryClientProvider, {
+      client: queryClient,
+      children: [/*#__PURE__*/jsx(Component, _objectSpread$2({}, props)), /*#__PURE__*/jsx(ReactQueryDevtools, {
+        initialIsOpen: false,
+        position: "bottom"
+      })]
+    });
   };
   return QueryWrapper;
 };
@@ -151,28 +209,35 @@ var WEBHOOK_STALE_TIME = 3200000; // 1 hour
 var POST_REDELIVERY_ON_SUCCESS_TIMEOUT = 5000; // 5 seconds
 
 var useFetchDeliveries = function useFetchDeliveries(webhookId, params) {
-  return useQuery([QUERY_KEYS.DELIVERY_LIST, webhookId, params], function () {
-    return deliveriesApi.fetch(webhookId, params);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.DELIVERY_LIST, webhookId, params],
+    queryFn: function queryFn() {
+      return deliveriesApi.fetch(webhookId, params);
+    },
     staleTime: DELIVERY_STALE_TIME
   });
 };
 var useShowDelivery = function useShowDelivery(id, webhookId) {
-  return useQuery([QUERY_KEYS.DELIVERY_DETAILS, id, webhookId], function () {
-    return deliveriesApi.show(id, webhookId);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.DELIVERY_DETAILS, id, webhookId],
+    queryFn: function queryFn() {
+      return deliveriesApi.show(id, webhookId);
+    },
     staleTime: DELIVERY_STALE_TIME,
     enabled: !!id
   });
 };
 var useRedeliverWebhook = function useRedeliverWebhook(deliveryId, webhookSid) {
   var queryClient = useQueryClient();
-  return useMutation(function () {
-    return deliveriesApi.redeliver(deliveryId, webhookSid);
-  }, {
+  return useMutation({
+    mutationFn: function mutationFn() {
+      return deliveriesApi.redeliver(deliveryId, webhookSid);
+    },
     onSuccess: function onSuccess() {
       setTimeout(function () {
-        return queryClient.invalidateQueries(QUERY_KEYS.DELIVERY_LIST);
+        return queryClient.invalidateQueries({
+          queryKey: [QUERY_KEYS.DELIVERY_LIST]
+        });
       }, POST_REDELIVERY_ON_SUCCESS_TIMEOUT);
     }
   });
@@ -215,9 +280,9 @@ function getDefaultExportFromCjs (x) {
 
 var regeneratorRuntime$1 = {exports: {}};
 
-var _typeof$1 = {exports: {}};
+var _typeof = {exports: {}};
 
-_typeof$1.exports;
+_typeof.exports;
 
 (function (module) {
 	function _typeof(o) {
@@ -230,9 +295,9 @@ _typeof$1.exports;
 	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
 	}
 	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (_typeof$1));
+} (_typeof));
 
-var _typeofExports = _typeof$1.exports;
+var _typeofExports = _typeof.exports;
 
 regeneratorRuntime$1.exports;
 
@@ -571,10 +636,11 @@ var Snippet = function Snippet(_ref) {
   var children = _ref.children,
     _ref$dataCy = _ref.dataCy,
     dataCy = _ref$dataCy === void 0 ? "" : _ref$dataCy;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-gray-100 my-2 whitespace-pre-wrap break-all border p-4",
-    "data-cy": dataCy
-  }, children);
+    "data-cy": dataCy,
+    children: children
+  });
 };
 
 var TransactionDetails = function TransactionDetails(_ref) {
@@ -595,57 +661,89 @@ var TransactionDetails = function TransactionDetails(_ref) {
       return "";
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-white sticky top-0 mb-2 flex w-full flex-col"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-2 pb-4"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "flex items-center space-x-1"
-  }, t("neetoWebhooks.delivery.identifier"), ":", /*#__PURE__*/React.createElement(Typography, {
-    className: "px-2 font-bold",
-    "data-cy": "delivery-identifier",
-    style: "body2"
-  }, identifier)), /*#__PURE__*/React.createElement("span", {
-    className: "flex items-center"
-  }, t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/React.createElement(Typography, {
-    className: "px-2 font-bold",
-    "data-cy": "delivery-response-code",
-    style: "body2"
-  }, responseStatusCode), /*#__PURE__*/React.createElement(Tag, {
-    style: status === "success" ? "success" : "warning"
-  }, status))), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tab.Item, {
-    active: activeHeader === DELIVERY_TAB.request,
-    onClick: function onClick() {
-      return setActiveHeader(DELIVERY_TAB.request);
-    }
-  }, t("neetoWebhooks.delivery.request")), /*#__PURE__*/React.createElement(Tab.Item, {
-    active: activeHeader === DELIVERY_TAB.response,
-    onClick: function onClick() {
-      return setActiveHeader(DELIVERY_TAB.response);
-    }
-  }, t("neetoWebhooks.delivery.response")))), /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 w-full"
-  }, activeHeader === DELIVERY_TAB.request ? /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h5"
-  }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React.createElement(Snippet, {
-    dataCy: "delivery-request-header"
-  }, delivery.requestHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h5"
-  }, t("neetoWebhooks.delivery.payload")), /*#__PURE__*/React.createElement(Snippet, {
-    dataCy: "delivery-request-payload"
-  }, renderPayload()))) : /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h5"
-  }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React.createElement(Snippet, {
-    dataCy: "delivery-response-header"
-  }, delivery.responseHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h5"
-  }, t("neetoWebhooks.delivery.body")), /*#__PURE__*/React.createElement(Snippet, {
-    dataCy: "delivery-response-body"
-  }, delivery.responseBody)))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-bg-white sticky top-0 mb-2 flex w-full flex-col",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col space-y-2 pb-4",
+        children: [/*#__PURE__*/jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.identifier"), ":", /*#__PURE__*/jsx(Typography, {
+            className: "px-2 font-bold",
+            "data-cy": "delivery-identifier",
+            style: "body2",
+            children: identifier
+          })]
+        }), /*#__PURE__*/jsxs("span", {
+          className: "flex items-center",
+          children: [t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/jsx(Typography, {
+            className: "px-2 font-bold",
+            "data-cy": "delivery-response-code",
+            style: "body2",
+            children: responseStatusCode
+          }), /*#__PURE__*/jsx(Tag, {
+            style: status === "success" ? "success" : "warning",
+            children: status
+          })]
+        })]
+      }), /*#__PURE__*/jsxs(Tab, {
+        children: [/*#__PURE__*/jsx(Tab.Item, {
+          active: activeHeader === DELIVERY_TAB.request,
+          onClick: function onClick() {
+            return setActiveHeader(DELIVERY_TAB.request);
+          },
+          children: t("neetoWebhooks.delivery.request")
+        }), /*#__PURE__*/jsx(Tab.Item, {
+          active: activeHeader === DELIVERY_TAB.response,
+          onClick: function onClick() {
+            return setActiveHeader(DELIVERY_TAB.response);
+          },
+          children: t("neetoWebhooks.delivery.response")
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "mt-2 w-full",
+      children: activeHeader === DELIVERY_TAB.request ? /*#__PURE__*/jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h5",
+            children: t("neetoWebhooks.delivery.header")
+          }), /*#__PURE__*/jsx(Snippet, {
+            dataCy: "delivery-request-header",
+            children: delivery.requestHeader
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h5",
+            children: t("neetoWebhooks.delivery.payload")
+          }), /*#__PURE__*/jsx(Snippet, {
+            dataCy: "delivery-request-payload",
+            children: renderPayload()
+          })]
+        })]
+      }) : /*#__PURE__*/jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h5",
+            children: t("neetoWebhooks.delivery.header")
+          }), /*#__PURE__*/jsx(Snippet, {
+            dataCy: "delivery-response-header",
+            children: delivery.responseHeader
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h5",
+            children: t("neetoWebhooks.delivery.body")
+          }), /*#__PURE__*/jsx(Snippet, {
+            dataCy: "delivery-response-body",
+            children: delivery.responseBody
+          })]
+        })]
+      })
+    })]
+  });
 };
 
 var Details = function Details(_ref) {
@@ -655,7 +753,7 @@ var Details = function Details(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useRedeliverWebhook = useRedeliverWebhook(deliveryId, webhookSid),
-    isRedelivering = _useRedeliverWebhook.isLoading,
+    isRedelivering = _useRedeliverWebhook.isPending,
     redeliverWebhook = _useRedeliverWebhook.mutateAsync;
   var _useShowDelivery = useShowDelivery(deliveryId, webhookSid),
     isLoading = _useShowDelivery.isLoading,
@@ -682,43 +780,57 @@ var Details = function Details(_ref) {
   if (isNotPresent(delivery)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsx(Pane, {
     onClose: onClose,
     isOpen: isPresent(deliveryId),
-    size: "large"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateFormat.Date, {
-    date: delivery.createdAt,
-    tooltipProps: {
-      disabled: true
-    },
-    typographyProps: {
-      style: "h2",
-      weight: "semibold"
-    }
-  }), /*#__PURE__*/React.createElement("span", null, " \u2022 "), /*#__PURE__*/React.createElement(DateFormat.Time, {
-    date: delivery.createdAt,
-    tooltipProps: {
-      disabled: true
-    },
-    typographyProps: {
-      style: "h2",
-      weight: "normal"
-    }
-  }))), /*#__PURE__*/React.createElement(Pane.Body, null, isPresent(delivery) && /*#__PURE__*/React.createElement(TransactionDetails, {
-    delivery: delivery
-  })), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "gap-x-2"
-  }, event && /*#__PURE__*/React.createElement(Button, {
-    disabled: isRedelivering,
-    label: t("neetoWebhooks.delivery.redeliver"),
-    loading: isRedelivering,
-    style: "primary",
-    onClick: handleRedeliverClick
-  }), /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoWebhooks.buttons.cancel"),
-    style: "text",
-    onClick: onClose
-  })))));
+    size: "large",
+    children: /*#__PURE__*/jsx(Fragment, {
+      children: isLoading ? /*#__PURE__*/jsx(PageLoader, {}) : /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Pane.Header, {
+          children: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(DateFormat.Date, {
+              date: delivery.createdAt,
+              tooltipProps: {
+                disabled: true
+              },
+              typographyProps: {
+                style: "h2",
+                weight: "semibold"
+              }
+            }), /*#__PURE__*/jsx("span", {
+              children: " \u2022 "
+            }), /*#__PURE__*/jsx(DateFormat.Time, {
+              date: delivery.createdAt,
+              tooltipProps: {
+                disabled: true
+              },
+              typographyProps: {
+                style: "h2",
+                weight: "normal"
+              }
+            })]
+          })
+        }), /*#__PURE__*/jsx(Pane.Body, {
+          children: isPresent(delivery) && /*#__PURE__*/jsx(TransactionDetails, {
+            delivery: delivery
+          })
+        }), /*#__PURE__*/jsxs(Pane.Footer, {
+          className: "gap-x-2",
+          children: [event && /*#__PURE__*/jsx(Button, {
+            disabled: isRedelivering,
+            label: t("neetoWebhooks.delivery.redeliver"),
+            loading: isRedelivering,
+            style: "primary",
+            onClick: handleRedeliverClick
+          }), /*#__PURE__*/jsx(Button, {
+            label: t("neetoWebhooks.buttons.cancel"),
+            style: "text",
+            onClick: onClose
+          })]
+        })]
+      })
+    })
+  });
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
@@ -729,17 +841,20 @@ var buildColumns$1 = function buildColumns(_ref) {
     dataIndex: "identifier",
     width: 390,
     render: function render(_, delivery) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center gap-x-3"
-      }, /*#__PURE__*/React.createElement(Button, {
-        style: "link",
-        weight: "semibold",
-        onClick: function onClick() {
-          return handleDetailsClick(delivery.sid);
-        }
-      }, delivery.identifier), delivery.redelivery && /*#__PURE__*/React.createElement(Tag, {
-        style: "info"
-      }, t$1("neetoWebhooks.delivery.redelivery")));
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          style: "link",
+          weight: "semibold",
+          onClick: function onClick() {
+            return handleDetailsClick(delivery.sid);
+          },
+          children: delivery.identifier
+        }), delivery.redelivery && /*#__PURE__*/jsx(Tag, {
+          style: "info",
+          children: t$1("neetoWebhooks.delivery.redelivery")
+        })]
+      });
     }
   }, {
     title: t$1("neetoWebhooks.tableHeaders.createdAt"),
@@ -747,11 +862,14 @@ var buildColumns$1 = function buildColumns(_ref) {
     dataIndex: "createdAt",
     width: 280,
     render: function render(createdAt) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between space-x-1"
-      }, /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement(DateFormat.DateTime, {
-        date: createdAt
-      })));
+      return /*#__PURE__*/jsx("div", {
+        className: "flex items-center justify-between space-x-1",
+        children: /*#__PURE__*/jsx(Typography, {
+          children: /*#__PURE__*/jsx(DateFormat.DateTime, {
+            date: createdAt
+          })
+        })
+      });
     }
   }, {
     title: t$1("neetoWebhooks.common.responseStatus"),
@@ -760,14 +878,17 @@ var buildColumns$1 = function buildColumns(_ref) {
     render: function render(_ref2) {
       var responseStatusCode = _ref2.responseStatusCode,
         status = _ref2.status;
-      return /*#__PURE__*/React.createElement("span", {
-        className: "flex items-center"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        className: "px-2",
-        style: "body2"
-      }, responseStatusCode), /*#__PURE__*/React.createElement(Tag, {
-        style: status === "success" ? "success" : "warning"
-      }, status));
+      return /*#__PURE__*/jsxs("span", {
+        className: "flex items-center",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "px-2",
+          style: "body2",
+          children: responseStatusCode
+        }), /*#__PURE__*/jsx(Tag, {
+          style: status === "success" ? "success" : "warning",
+          children: status
+        })]
+      });
     }
   }, {
     title: t$1("neetoWebhooks.common.event", SINGULAR),
@@ -827,35 +948,38 @@ var Deliveries = function Deliveries(_ref) {
       webhookId: webhookId
     }));
   };
-  if (isLoading) return /*#__PURE__*/React.createElement(PageLoader, null);
-  return /*#__PURE__*/React.createElement(Container, {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(Header$2, {
-    breadcrumbs: breadcrumbs,
-    title: t("neetoWebhooks.delivery.title")
-  }), isNotEmpty(deliveries) ? /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: totalCount > DEFAULT_PAGE_SIZE
-  }, /*#__PURE__*/React.createElement(Table, {
-    totalCount: totalCount,
-    fixedHeight: true,
-    columnData: buildColumns$1({
-      handleDetailsClick: handleDetailsClick
-    }),
-    currentPageNumber: pageNumber,
-    defaultPageSize: DEFAULT_PAGE_SIZE,
-    handlePageChange: setPageNumber,
-    loading: isFetching,
-    rowData: deliveries
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    description: t("neetoWebhooks.delivery.empty.description"),
-    title: t("neetoWebhooks.delivery.empty.title")
-  })), /*#__PURE__*/React.createElement(Details, {
-    deliveryId: deliveryId,
-    webhookSid: webhookId,
-    onClose: handleClose
-  }));
+  if (isLoading) return /*#__PURE__*/jsx(PageLoader, {});
+  return /*#__PURE__*/jsxs(Container, {
+    className: "w-full",
+    children: [/*#__PURE__*/jsx(Header$2, {
+      breadcrumbs: breadcrumbs,
+      title: t("neetoWebhooks.delivery.title")
+    }), isNotEmpty(deliveries) ? /*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: totalCount > DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsx(Table, {
+        totalCount: totalCount,
+        fixedHeight: true,
+        columnData: buildColumns$1({
+          handleDetailsClick: handleDetailsClick
+        }),
+        currentPageNumber: pageNumber,
+        defaultPageSize: DEFAULT_PAGE_SIZE,
+        handlePageChange: setPageNumber,
+        loading: isFetching,
+        rowData: deliveries
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        description: t("neetoWebhooks.delivery.empty.description"),
+        title: t("neetoWebhooks.delivery.empty.title")
+      })
+    }), /*#__PURE__*/jsx(Details, {
+      deliveryId: deliveryId,
+      webhookSid: webhookId,
+      onClose: handleClose
+    })]
+  });
 };
 var Deliveries$1 = withReactQuery(Deliveries);
 
@@ -890,97 +1014,58 @@ var webhooksApi = {
 };
 
 var useFetchWebhooks = function useFetchWebhooks(params) {
-  return useQuery([QUERY_KEYS.WEBHOOK_LIST, params], function () {
-    return webhooksApi.fetch(params);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.WEBHOOK_LIST, params],
+    queryFn: function queryFn() {
+      return webhooksApi.fetch(params);
+    },
     staleTime: WEBHOOK_STALE_TIME
   });
 };
 var useCreateWebhook = function useCreateWebhook(options) {
-  var queryClient = useQueryClient();
-  return useMutation(webhooksApi.create, {
+  return useMutationWithInvalidation(webhooksApi.create, {
+    keysToInvalidate: [QUERY_KEYS.WEBHOOK_LIST],
     onSuccess: function onSuccess() {
       var _options$onSuccess;
-      queryClient.invalidateQueries(QUERY_KEYS.WEBHOOK_LIST);
       options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
     }
   });
 };
 var useShowWebhook = function useShowWebhook(id) {
-  return useQuery([QUERY_KEYS.WEBHOOK_DETAILS, id], function () {
-    return webhooksApi.show(id);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.WEBHOOK_DETAILS, id],
+    queryFn: function queryFn() {
+      return webhooksApi.show(id);
+    },
     enabled: !!id,
     staleTime: WEBHOOK_STALE_TIME
   });
 };
 var useUpdateWebhook = function useUpdateWebhook(id, options) {
-  var queryClient = useQueryClient();
-  return useMutation(function (_ref) {
+  return useMutationWithInvalidation(function (_ref) {
     var id = _ref.id,
       payload = _ref.payload;
     return webhooksApi.update(id, payload);
   }, {
+    keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST], [QUERY_KEYS.WEBHOOK_DETAILS, id], [QUERY_KEYS.DELIVERY_LIST, id]],
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
-      queryClient.invalidateQueries(QUERY_KEYS.WEBHOOK_LIST);
-      queryClient.invalidateQueries([QUERY_KEYS.WEBHOOK_DETAILS, id]);
-      queryClient.invalidateQueries([QUERY_KEYS.DELIVERY_LIST, id]);
       options === null || options === void 0 || (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 || _options$onSuccess2.call(options);
     }
   });
 };
 var useDestroyWebhook = function useDestroyWebhook(options) {
-  var queryClient = useQueryClient();
-  return useMutation(webhooksApi.destroy, {
+  return useMutationWithInvalidation(webhooksApi.destroy, {
+    keysToInvalidate: [QUERY_KEYS.WEBHOOK_LIST],
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
-      queryClient.invalidateQueries(QUERY_KEYS.WEBHOOK_LIST);
       options === null || options === void 0 || (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 || _options$onSuccess3.call(options);
     }
   });
 };
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
+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() {
@@ -991,14 +1076,13 @@ var eventsApi = {
 };
 
 var useFetchEvents = function useFetchEvents() {
-  return useQuery([QUERY_KEYS.EVENTS_LIST], eventsApi.all, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.EVENTS_LIST],
+    queryFn: eventsApi.all,
     staleTime: WEBHOOK_STALE_TIME
   });
 };
 
-var WEBHOOK_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-4bb6c2a2";
-var WEBHOOK_SECRETS_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-80de90bd";
-
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -1133,26 +1217,28 @@ var buildColumns = function buildColumns(_ref6) {
     dataIndex: "endpoint",
     width: 830,
     render: function render(endpoint, webhook) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between space-x-3"
-      }, /*#__PURE__*/React.createElement(Button, {
-        style: "link",
-        to: buildUrl(deliveriesPath, {
-          webhookId: webhook.sid
-        })
-      }, endpoint), /*#__PURE__*/React.createElement(MoreDropdown, {
-        dropdownProps: {
-          strategy: "fixed"
-        },
-        menuItems: getMenuItems({
-          onEdit: function onEdit() {
-            return handleEdit(webhook.id);
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between space-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          style: "link",
+          to: buildUrl(deliveriesPath, {
+            webhookId: webhook.sid
+          }),
+          children: endpoint
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownProps: {
+            strategy: "fixed"
           },
-          onDelete: function onDelete() {
-            return handleDelete(webhook.id);
-          }
-        })
-      }));
+          menuItems: getMenuItems({
+            onEdit: function onEdit() {
+              return handleEdit(webhook.id);
+            },
+            onDelete: function onDelete() {
+              return handleDelete(webhook.id);
+            }
+          })
+        })]
+      });
     }
   }, {
     title: t$1("neetoWebhooks.webhook.active"),
@@ -1251,128 +1337,154 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       setIsSecretInputFieldVisible(true);
     }
   }, [webhook]);
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     onClose: onClose,
-    initialFocusRef: endpointRef
-  }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "flex items-center gap-x-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "add-new-webhook-pane-header",
-    style: "h2",
-    weight: "semibold"
-  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React.createElement(HelpPopover, {
-    description: t("neetoWebhooks.webhook.helpDescription"),
-    helpLinkProps: {
-      href: WEBHOOK_HELP_URL
-    },
-    title: t("neetoWebhooks.webhook.title")
-  })), /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      enableReinitialize: true,
-      validationSchema: getValidationSchema(webhooks),
-      initialValues: initialValues,
-      onSubmit: function onSubmit(values) {
-        return handleSubmit(getValidationSchema().cast(values));
-      }
-    }
-  }, function (_ref2) {
-    var setFieldValue = _ref2.setFieldValue;
-    return isLoading ? /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-center"
-    }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-full space-y-4"
-    }, /*#__PURE__*/React.createElement(Textarea, {
-      required: true,
-      "data-cy": "endpoint-input-field",
-      label: t("neetoWebhooks.webhook.endpoint"),
-      name: "endpoint",
-      placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
-      ref: endpointRef,
-      rows: 1
-    }), !isLoading && /*#__PURE__*/React.createElement(Select, {
-      isMulti: true,
-      required: true,
-      getOptionLabel: prop("label"),
-      getOptionValue: prop("identifier"),
-      label: t("neetoWebhooks.common.event", PLURAL),
-      name: "events",
-      options: events,
-      placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
-    }), isSecretInputFieldVisible && /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-between space-x-3"
-    }, /*#__PURE__*/React.createElement(Input, {
-      "data-cy": "secret-key-input-field",
-      name: "secret",
-      label: /*#__PURE__*/React.createElement("span", {
-        className: "flex items-center gap-x-2"
-      }, t("neetoWebhooks.webhook.secret"), /*#__PURE__*/React.createElement(HelpPopover, {
+    initialFocusRef: endpointRef,
+    children: [/*#__PURE__*/jsxs(Pane.Header, {
+      className: "flex items-center gap-x-2",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-cy": "add-new-webhook-pane-header",
+        style: "h2",
+        weight: "semibold",
+        children: editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")
+      }), /*#__PURE__*/jsx(HelpPopover, {
+        description: t("neetoWebhooks.webhook.helpDescription"),
         helpLinkProps: {
-          href: WEBHOOK_SECRETS_HELP_URL
+          href: WEBHOOK_HELP_URL
         },
-        description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
-        title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
-      })),
-      placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "mt-6"
-    }, /*#__PURE__*/React.createElement(MoreDropdown, {
-      menuItems: [{
-        key: "regenerate-secret",
-        label: t("neetoWebhooks.buttons.regenerate"),
-        "data-cy": "regenerate-secret",
-        onClick: function onClick() {
-          return handleRegenerate(setFieldValue);
+        title: t("neetoWebhooks.webhook.title")
+      })]
+    }), /*#__PURE__*/jsx(Form, {
+      formikProps: {
+        enableReinitialize: true,
+        validationSchema: getValidationSchema(webhooks),
+        initialValues: initialValues,
+        onSubmit: function onSubmit(values) {
+          return handleSubmit(getValidationSchema().cast(values));
         }
-      }, {
-        key: "delete-secret",
-        label: t("neetoWebhooks.buttons.delete"),
-        "data-cy": "delete-secret",
-        onClick: function onClick() {
-          return handleDelete(setFieldValue);
-        }
-      }]
-    }))), /*#__PURE__*/React.createElement(Switch, {
-      label: t("neetoWebhooks.webhook.active"),
-      name: "isActive"
-    }), !isSecretInputFieldVisible && /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "add-secret-key",
-      icon: Plus,
-      label: t("neetoWebhooks.buttons.addSecretKey"),
-      style: "text",
-      onClick: function onClick() {
-        return handleClick(setFieldValue);
-      }
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        onClick: onClose
+      },
+      children: function children(_ref2) {
+        var setFieldValue = _ref2.setFieldValue;
+        return isLoading ? /*#__PURE__*/jsx("div", {
+          className: "flex items-center justify-center",
+          children: /*#__PURE__*/jsx(Spinner, {})
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Pane.Body, {
+            children: /*#__PURE__*/jsxs("div", {
+              className: "w-full space-y-4",
+              children: [/*#__PURE__*/jsx(Textarea, {
+                required: true,
+                "data-cy": "endpoint-input-field",
+                label: t("neetoWebhooks.webhook.endpoint"),
+                name: "endpoint",
+                placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
+                ref: endpointRef,
+                rows: 1
+              }), !isLoading && /*#__PURE__*/jsx(Select, {
+                isMulti: true,
+                required: true,
+                getOptionLabel: prop("label"),
+                getOptionValue: prop("identifier"),
+                label: t("neetoWebhooks.common.event", PLURAL),
+                name: "events",
+                options: events,
+                placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
+              }), isSecretInputFieldVisible && /*#__PURE__*/jsxs("div", {
+                className: "flex items-center justify-between space-x-3",
+                children: [/*#__PURE__*/jsx(Input, {
+                  "data-cy": "secret-key-input-field",
+                  name: "secret",
+                  label: /*#__PURE__*/jsxs("span", {
+                    className: "flex items-center gap-x-2",
+                    children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
+                      helpLinkProps: {
+                        href: WEBHOOK_SECRETS_HELP_URL
+                      },
+                      description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
+                      title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
+                    })]
+                  }),
+                  placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
+                }), /*#__PURE__*/jsx("div", {
+                  className: "mt-6",
+                  children: /*#__PURE__*/jsx(MoreDropdown, {
+                    menuItems: [{
+                      key: "regenerate-secret",
+                      label: t("neetoWebhooks.buttons.regenerate"),
+                      "data-cy": "regenerate-secret",
+                      onClick: function onClick() {
+                        return handleRegenerate(setFieldValue);
+                      }
+                    }, {
+                      key: "delete-secret",
+                      label: t("neetoWebhooks.buttons.delete"),
+                      "data-cy": "delete-secret",
+                      onClick: function onClick() {
+                        return handleDelete(setFieldValue);
+                      }
+                    }]
+                  })
+                })]
+              }), /*#__PURE__*/jsx(Switch, {
+                label: t("neetoWebhooks.webhook.active"),
+                name: "isActive"
+              }), !isSecretInputFieldVisible && /*#__PURE__*/jsx(Button, {
+                "data-cy": "add-secret-key",
+                icon: Plus,
+                label: t("neetoWebhooks.buttons.addSecretKey"),
+                style: "text",
+                onClick: function onClick() {
+                  return handleClick(setFieldValue);
+                }
+              })]
+            })
+          }), /*#__PURE__*/jsx(Pane.Footer, {
+            children: /*#__PURE__*/jsx(ActionBlock, {
+              cancelButtonProps: {
+                onClick: onClose
+              }
+            })
+          })]
+        });
       }
-    })));
-  }));
+    })]
+  });
 };
 
-var Header = function Header(_ref) {
-  var breadcrumbs = _ref.breadcrumbs,
+var Header = withT(function (_ref) {
+  var t = _ref.t,
+    breadcrumbs = _ref.breadcrumbs,
     setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$2, {
-    breadcrumbs: breadcrumbs,
-    title: t("neetoWebhooks.webhook.title"),
-    actionBlock: /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "add-new-webhook-button",
-      label: t("neetoWebhooks.webhook.add"),
-      onClick: function onClick() {
-        return setIsAddWebhookPaneOpen(true);
-      }
-    })
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-3",
-    "data-cy": "webhook-description-header",
-    style: "h5",
-    weight: "normal"
-  }, t("neetoWebhooks.webhook.description")));
-};
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Header$2, {
+      breadcrumbs: breadcrumbs,
+      actionBlock: /*#__PURE__*/jsx(Button, {
+        "data-cy": "add-new-webhook-button",
+        label: t("neetoWebhooks.webhook.add"),
+        onClick: function onClick() {
+          return setIsAddWebhookPaneOpen(true);
+        }
+      }),
+      title: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-x-2",
+        children: [t("neetoWebhooks.webhook.title"), /*#__PURE__*/jsx(HelpPopover, {
+          description: t("neetoWebhooks.webhook.helpDescription"),
+          helpLinkProps: {
+            href: WEBHOOK_HELP_URL
+          },
+          title: t("neetoWebhooks.webhook.title")
+        })]
+      })
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "mb-3",
+      "data-cy": "webhook-description-header",
+      style: "h5",
+      weight: "normal",
+      children: t("neetoWebhooks.webhook.description")
+    })]
+  });
+});
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
 var Webhooks = function Webhooks(_ref) {
@@ -1423,7 +1535,7 @@ var Webhooks = function Webhooks(_ref) {
         onDelete === null || onDelete === void 0 || onDelete();
       }
     }),
-    isDeleting = _useDestroyWebhook.isLoading,
+    isDeleting = _useDestroyWebhook.isPending,
     destroyWebhook = _useDestroyWebhook.mutate;
   var handlePaneClose = function handlePaneClose() {
     setEditingWebhookId(null);
@@ -1438,61 +1550,75 @@ var Webhooks = function Webhooks(_ref) {
     setIsDeleteAlertOpen(true);
   }, []);
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(PageLoader, null);
+    return /*#__PURE__*/jsx(PageLoader, {});
   }
-  return /*#__PURE__*/React.createElement(Container, {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(Header$1, {
-    breadcrumbs: breadcrumbs,
-    setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen
-  }), isNotEmpty(webhooks) ? /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: totalCount > DEFAULT_PAGE_SIZE
-  }, /*#__PURE__*/React.createElement(Table, {
-    totalCount: totalCount,
-    fixedHeight: true,
-    currentPageNumber: pageNumber,
-    defaultPageSize: DEFAULT_PAGE_SIZE,
-    handlePageChange: function handlePageChange(page) {
-      return setPageNumber(page);
-    },
-    loading: isFetching,
-    rowData: webhooks,
-    columnData: buildColumns({
-      handleDelete: handleDelete,
-      handleEdit: handleEdit,
-      deliveriesPath: deliveriesPath
-    })
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoWebhooks.webhook.empty")
-  })), /*#__PURE__*/React.createElement(AddWebhookPane, {
-    editingWebhookId: editingWebhookId,
-    entityId: entityId,
-    entityType: entityType,
-    onCreate: onCreate,
-    webhooks: webhooks,
-    isOpen: isAddWebhookPaneOpen,
-    onClose: handlePaneClose
-  }), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isDeleteAlertOpen,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoWebhooks.buttons.delete"),
-    message: t("neetoWebhooks.alert.delete.message", {
-      entity: t("neetoWebhooks.entity.webhook")
-    }),
-    title: t("neetoWebhooks.alert.delete.title", {
-      entity: t("neetoWebhooks.entity.webhook")
-    }),
-    onClose: function onClose() {
-      return setIsDeleteAlertOpen(false);
-    },
-    onSubmit: function onSubmit() {
-      return destroyWebhook(deletingWebhookId, {
-        entityId: entityId
-      });
-    }
-  }));
+  return /*#__PURE__*/jsxs(Container, {
+    className: "w-full",
+    children: [/*#__PURE__*/jsx(Header$1, {
+      breadcrumbs: breadcrumbs,
+      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen
+    }), isNotEmpty(webhooks) ? /*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: totalCount > DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsx(Table, {
+        totalCount: totalCount,
+        fixedHeight: true,
+        currentPageNumber: pageNumber,
+        defaultPageSize: DEFAULT_PAGE_SIZE,
+        handlePageChange: setPageNumber,
+        loading: isFetching,
+        rowData: webhooks,
+        columnData: buildColumns({
+          handleDelete: handleDelete,
+          handleEdit: handleEdit,
+          deliveriesPath: deliveriesPath
+        })
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        title: t("neetoWebhooks.webhook.empty"),
+        helpText: /*#__PURE__*/jsx("a", {
+          className: "neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium",
+          href: WEBHOOK_HELP_URL,
+          rel: "noreferrer",
+          target: "_blank",
+          children: t("neetoWebhooks.webhook.emptyHelpText")
+        }),
+        primaryButtonProps: {
+          label: t("neetoWebhooks.webhook.add"),
+          onClick: function onClick() {
+            return setIsAddWebhookPaneOpen(true);
+          }
+        }
+      })
+    }), /*#__PURE__*/jsx(AddWebhookPane, {
+      editingWebhookId: editingWebhookId,
+      entityId: entityId,
+      entityType: entityType,
+      onCreate: onCreate,
+      webhooks: webhooks,
+      isOpen: isAddWebhookPaneOpen,
+      onClose: handlePaneClose
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoWebhooks.buttons.delete"),
+      message: t("neetoWebhooks.alert.delete.message", {
+        entity: t("neetoWebhooks.entity.webhook")
+      }),
+      title: t("neetoWebhooks.alert.delete.title", {
+        entity: t("neetoWebhooks.entity.webhook")
+      }),
+      onClose: function onClose() {
+        return setIsDeleteAlertOpen(false);
+      },
+      onSubmit: function onSubmit() {
+        return destroyWebhook(deletingWebhookId, {
+          entityId: entityId
+        });
+      }
+    })]
+  });
 };
 var Webhooks$1 = withReactQuery(Webhooks);
 
@@ -1508,37 +1634,39 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     webhooksUrl = _useRouteMatch.url;
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
-  return /*#__PURE__*/React.createElement(Switch$1, null, /*#__PURE__*/React.createElement(Route, {
-    exact: true,
-    path: webhooksPath,
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Webhooks$1, {
-        breadcrumbs: breadcrumbs,
-        deliveriesPath: deliveriesPath,
-        entityId: entityId,
-        entityType: entityType,
-        onCreate: onCreate,
-        onDelete: onDelete
-      });
-    }
-  }), /*#__PURE__*/React.createElement(Route, {
-    exact: true,
-    path: deliveryDetailsPath,
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Deliveries$1, {
-        breadcrumbs: breadcrumbs,
-        webhooksUrl: webhooksUrl
-      });
-    }
-  }), /*#__PURE__*/React.createElement(Route, {
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Deliveries$1, {
-        breadcrumbs: breadcrumbs,
-        webhooksUrl: webhooksUrl
-      });
-    },
-    path: deliveriesPath
-  }));
+  return /*#__PURE__*/jsxs(Switch$1, {
+    children: [/*#__PURE__*/jsx(Route, {
+      exact: true,
+      path: webhooksPath,
+      component: function component() {
+        return /*#__PURE__*/jsx(Webhooks$1, {
+          breadcrumbs: breadcrumbs,
+          deliveriesPath: deliveriesPath,
+          entityId: entityId,
+          entityType: entityType,
+          onCreate: onCreate,
+          onDelete: onDelete
+        });
+      }
+    }), /*#__PURE__*/jsx(Route, {
+      exact: true,
+      path: deliveryDetailsPath,
+      render: function render() {
+        return /*#__PURE__*/jsx(Deliveries$1, {
+          breadcrumbs: breadcrumbs,
+          webhooksUrl: webhooksUrl
+        });
+      }
+    }), /*#__PURE__*/jsx(Route, {
+      component: function component() {
+        return /*#__PURE__*/jsx(Deliveries$1, {
+          breadcrumbs: breadcrumbs,
+          webhooksUrl: webhooksUrl
+        });
+      },
+      path: deliveriesPath
+    })]
+  });
 };
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}