@bigbinary/neeto-webhooks-frontend 1.5.8 → 1.6.0

package/dist/index.cjs.js

@@ -4,18 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactRouterDom = require('react-router-dom');
-var classNames = require('classnames');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var neetoui = require('@bigbinary/neetoui');
-var ramda = require('ramda');
 var reactQuery = require('react-query');
 var devtools = require('react-query/devtools');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var axios = require('axios');
+var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+var ramda = require('ramda');
+var neetoIcons = require('@bigbinary/neeto-icons');
 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 }; }
@@ -39,10 +42,12 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header$2);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
 const consoleLogger = {
@@ -2883,6 +2888,12 @@ function useTranslation(ns) {
   });
 }
 
+var common = {
+	event_one: "Event",
+	event_other: "Events",
+	endpoint: "Endpoint",
+	responseStatus: "Response status"
+};
 var entity = {
 	webhook: "webhook",
 	configure: "Configure"
@@ -2890,14 +2901,19 @@ var entity = {
 var buttons = {
 	saveChanges: "Save changes",
 	cancel: "Cancel",
-	"delete": "Delete"
+	"delete": "Delete",
+	edit: "Edit",
+	viewDetails: "View details"
 };
 var errors = {
 	webhook: {
 		required: "Please enter your endpoint URL",
 		invalidUrl: "Please enter a valid URL",
 		invalidUrlProtocol: "Please enter a valid URL. URL must begin with http or https",
-		urlNotUnique: "Endpoint URL must be unique"
+		urlNotUnique: "Endpoint URL must be unique",
+		events: {
+			required: "Please select atleast one webhook event"
+		}
 	}
 };
 var delivery = {
@@ -2909,6 +2925,7 @@ var delivery = {
 	header: "Header",
 	body: "Body",
 	payload: "Payload",
+	identifier: "Identifier",
 	empty: {
 		title: "There are no deliveries to show.",
 		description: "No events have been sent to this webhook"
@@ -2920,10 +2937,18 @@ var webhook = {
 	empty: "There are no webhooks defined currently",
 	add: "Add new webhook",
 	endpoint: "Endpoint",
+	event_one: "Event",
+	event_other: "Events",
 	endpointPlaceholder: "Enter endpoint URL",
+	eventPlaceholder: "Select webhook events",
 	secret: "Secret key (optional) <helpLink><info></helpLink>",
 	secretPlaceholder: "Enter secret key",
-	edit: "Edit Webhook"
+	edit: "Edit Webhook",
+	active: "Active",
+	activeStatuses: {
+		yes: "Yes",
+		no: "No"
+	}
 };
 var operation = {
 	edit: "Edit",
@@ -2935,14 +2960,21 @@ var alert = {
 		message: "You are deleting the {{entity}}."
 	}
 };
+var tableHeaders = {
+	active: "Active",
+	details: "Details",
+	createdAt: "Created at"
+};
 var en = {
+	common: common,
 	entity: entity,
 	buttons: buttons,
 	errors: errors,
 	delivery: delivery,
 	webhook: webhook,
 	operation: operation,
-	alert: alert
+	alert: alert,
+	tableHeaders: tableHeaders
 };
 
 instance.use(initReactI18next).init({
@@ -2989,6 +3021,124 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var queryClient = new reactQuery.QueryClient({
+  queryCache: new reactQuery.QueryCache(),
+  defaultOptions: {
+    queries: {
+      staleTime: constants.DEFAULT_STALE_TIME
+    }
+  }
+});
+
+/* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
+var withReactQuery = function withReactQuery(Component) {
+  var QueryWrapper = function QueryWrapper(props) {
+    return /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
+      client: queryClient
+    }, /*#__PURE__*/React__default["default"].createElement(Component, props), /*#__PURE__*/React__default["default"].createElement(devtools.ReactQueryDevtools, {
+      initialIsOpen: false,
+      position: "bottom-right"
+    }));
+  };
+  return QueryWrapper;
+};
+
+var baseUrl$2 = "/webhooks/deliveries";
+var fetch$1 = function fetch(params) {
+  return axios__default["default"].get(baseUrl$2, {
+    params: params
+  });
+};
+var show$1 = function show(id) {
+  return axios__default["default"].get("".concat(baseUrl$2, "/").concat(id));
+};
+var redeliver = function redeliver(id) {
+  return axios__default["default"].post("".concat(baseUrl$2, "/").concat(id, "/redeliver"));
+};
+var deliveriesApi = {
+  fetch: fetch$1,
+  show: show$1,
+  redeliver: redeliver
+};
+
+var QUERY_KEYS = {
+  DELIVERY_LIST: "delivery-list",
+  DELIVERY_DETAILS: "delivery-details",
+  WEBHOOK_LIST: "webhook-list",
+  WEBHOOK_DETAILS: "webhook-details",
+  EVENTS_LIST: "events-list"
+};
+var DELIVERY_STALE_TIME = 3200000; // 1 hour
+var WEBHOOK_STALE_TIME = 3200000; // 1 hour
+var POST_REDELIVERY_ON_SUCCESS_TIMEOUT = 5000; // 5 seconds
+
+var useFetchDeliveries = function useFetchDeliveries(params) {
+  return reactQuery.useQuery([QUERY_KEYS.DELIVERY_LIST, params], function () {
+    return deliveriesApi.fetch(params);
+  }, {
+    staleTime: DELIVERY_STALE_TIME
+  });
+};
+var useShowDelivery = function useShowDelivery(id) {
+  return reactQuery.useQuery([QUERY_KEYS.DELIVERY_DETAILS, id], function () {
+    return deliveriesApi.show(id);
+  }, {
+    staleTime: DELIVERY_STALE_TIME
+  });
+};
+var useRedeliverWebhook = function useRedeliverWebhook() {
+  var queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation(deliveriesApi.redeliver, {
+    onSuccess: function onSuccess() {
+      setTimeout(function () {
+        return queryClient.invalidateQueries(QUERY_KEYS.DELIVERY_LIST);
+      }, POST_REDELIVERY_ON_SUCCESS_TIMEOUT);
+    }
+  });
+};
+
+var DEFAULT_PAGE_SIZE = 10;
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -3369,137 +3519,24 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
-var queryClient = new reactQuery.QueryClient({
-  queryCache: new reactQuery.QueryCache()
-});
-
-var withReactQuery = function withReactQuery(Component) {
-  var QueryWrapper = function QueryWrapper(props) {
-    return /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
-      client: queryClient
-    }, /*#__PURE__*/React__default["default"].createElement(Component, props), /*#__PURE__*/React__default["default"].createElement(devtools.ReactQueryDevtools, {
-      initialIsOpen: false,
-      position: "bottom-right"
-    }));
-  };
-  return QueryWrapper;
-};
-
-var baseUrl$1 = "/webhooks/deliveries";
-var fetch$1 = function fetch(webhook_id) {
-  return axios__default["default"].get(baseUrl$1, {
-    params: {
-      webhook_id: webhook_id
-    }
-  });
-};
-var show$1 = function show(id) {
-  return axios__default["default"].get("".concat(baseUrl$1, "/").concat(id));
-};
-var redeliver = function redeliver(id) {
-  return axios__default["default"].post("".concat(baseUrl$1, "/").concat(id, "/redeliver"));
-};
-var deliveriesApi = {
-  fetch: fetch$1,
-  show: show$1,
-  redeliver: redeliver
-};
-
-var QUERY_KEYS = {
-  DELIVERY_LIST: "delivery-list",
-  DELIVERY_DETAILS: "delivery-details",
-  WEBHOOK_LIST: "webhook-list",
-  WEBHOOK_DETAILS: "webhook-details"
-};
-var DELIVERY_STALE_TIME = 3200000; // 1 hour
-var WEBHOOK_STALE_TIME = 3200000; // 1 hour
-var POST_REDELIVERY_ON_SUCCESS_TIMEOUT = 5000; // 5 seconds
-
-var useFetchDeliveries = function useFetchDeliveries(webhookId) {
-  return reactQuery.useQuery([QUERY_KEYS.DELIVERY_LIST, webhookId], function () {
-    return deliveriesApi.fetch(webhookId);
-  }, {
-    staleTime: DELIVERY_STALE_TIME
-  });
-};
-var useShowDelivery = function useShowDelivery(id) {
-  return reactQuery.useQuery([QUERY_KEYS.DELIVERY_DETAILS, id], function () {
-    return deliveriesApi.show(id);
-  }, {
-    staleTime: DELIVERY_STALE_TIME
-  });
-};
-var useRedeliverWebhook = function useRedeliverWebhook() {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(deliveriesApi.redeliver, {
-    onSuccess: function onSuccess() {
-      setTimeout(function () {
-        return queryClient.invalidateQueries(QUERY_KEYS.DELIVERY_LIST);
-      }, POST_REDELIVERY_ON_SUCCESS_TIMEOUT);
-    }
-  });
-};
-
 var DELIVERY_TAB = {
   response: "response",
   request: "request"
 };
-var DELIVERY_STATUS = {
-  failure: "failure",
-  success: "success"
-};
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
 
 var Snippet = function Snippet(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "my-2 whitespace-pre-wrap break-all rounded border border-gray-300 bg-gray-100 p-4"
+    className: "neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-gray-100 my-2 whitespace-pre-wrap break-all border p-4"
   }, children);
 };
 
-var DeliveryItem = function DeliveryItem(_ref) {
-  var deliveryId = _ref.deliveryId,
-    isRedelivering = _ref.isRedelivering,
-    onRedeliverClick = _ref.onRedeliverClick;
+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],
@@ -3511,17 +3548,29 @@ var DeliveryItem = function DeliveryItem(_ref) {
     _useShowDelivery$data = _useShowDelivery.data,
     _useShowDelivery$data2 = _useShowDelivery$data === void 0 ? {} : _useShowDelivery$data,
     _useShowDelivery$data3 = _useShowDelivery$data2.delivery,
-    delivery = _useShowDelivery$data3 === void 0 ? {} : _useShowDelivery$data3;
+    deliveryDetails = _useShowDelivery$data3 === void 0 ? {} : _useShowDelivery$data3;
   if (isLoading) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center justify-center py-6"
+      className: "flex w-full items-center justify-center py-6"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "p-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, {
-    className: "mb-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-white sticky top-0 mb-2 flex w-full flex-col"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full flex-col space-y-2 pb-4"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "flex items-center space-x-1"
+  }, t("delivery.identifier"), ":", /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "px-2 font-bold",
+    style: "body2"
+  }, identifier)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "flex items-center"
+  }, t("common.responseStatus"), ":", /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "px-2 font-bold",
+    style: "body2"
+  }, responseStatusCode), /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    style: status === "success" ? "success" : "warning"
+  }, status))), /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
     active: activeHeader === DELIVERY_TAB.request,
     onClick: function onClick() {
       return setActiveHeader(DELIVERY_TAB.request);
@@ -3531,65 +3580,190 @@ var DeliveryItem = function DeliveryItem(_ref) {
     onClick: function onClick() {
       return setActiveHeader(DELIVERY_TAB.response);
     }
-  }, t("delivery.response")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-1 justify-end"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "mr-2 mb-2",
-    label: t("delivery.redeliver"),
-    loading: isRedelivering,
-    style: "secondary",
-    onClick: function onClick() {
-      return onRedeliverClick(delivery.id);
-    }
-  }))), activeHeader === DELIVERY_TAB.request ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, t("delivery.response")))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mt-2"
+  }, activeHeader === DELIVERY_TAB.request ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-4"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
-  }, t("delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, delivery.requestHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, deliveryDetails.requestHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
-  }, t("delivery.payload")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, JSON.stringify(JSON.parse(delivery.requestBody), null, 2)))) : /*#__PURE__*/React__default["default"].createElement("div", {
+  }, t("delivery.payload")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, JSON.stringify(JSON.parse(deliveryDetails.requestBody), null, 2)))) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-4"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
-  }, t("delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, delivery.responseHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, deliveryDetails.responseHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
-  }, t("delivery.body")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, delivery.responseBody))));
+  }, t("delivery.body")), /*#__PURE__*/React__default["default"].createElement(Snippet, null, deliveryDetails.responseBody)))));
 };
 
-var Deliveries = function Deliveries(_ref) {
-  var webhooksUrl = _ref.webhooksUrl,
-    hostBreadcrumbs = _ref.breadcrumbs;
+var Details = function Details(_ref) {
+  var delivery = _ref.delivery,
+    onClose = _ref.onClose;
+  var createdAt = delivery.createdAt,
+    id = delivery.id;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useParams = reactRouterDom.useParams(),
-    webhookId = _useParams.webhookId;
-  var _useFetchDeliveries = useFetchDeliveries(webhookId),
-    isLoading = _useFetchDeliveries.isLoading,
-    _useFetchDeliveries$d = _useFetchDeliveries.data,
-    _useFetchDeliveries$d2 = _useFetchDeliveries$d === void 0 ? {} : _useFetchDeliveries$d,
-    endpoint = _useFetchDeliveries$d2.endpoint,
-    _useFetchDeliveries$d3 = _useFetchDeliveries$d2.deliveries,
-    deliveries = _useFetchDeliveries$d3 === void 0 ? [] : _useFetchDeliveries$d3;
   var _useRedeliverWebhook = useRedeliverWebhook(),
     isRedelivering = _useRedeliverWebhook.isLoading,
     redeliverWebhook = _useRedeliverWebhook.mutateAsync;
-  var onRedeliverClick = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(deliveryId) {
+  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(deliveryId);
+            return redeliverWebhook(id);
           case 2:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function onRedeliverClick(_x) {
+    return function handleRedeliverClick() {
       return _ref2.apply(this, arguments);
     };
   }();
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    isOpen: pure.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,
+    typographyProps: {
+      style: "h2",
+      weight: "semibold"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, " \u2022 "), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Time, {
+    date: createdAt,
+    typographyProps: {
+      style: "h2",
+      weight: "normal"
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, pure.isPresent(delivery) && /*#__PURE__*/React__default["default"].createElement(TransactionDetails, {
+    delivery: delivery
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+    className: "gap-x-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    disabled: isRedelivering,
+    label: t("delivery.redeliver"),
+    loading: isRedelivering,
+    style: "primary",
+    onClick: handleRedeliverClick
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    label: t("buttons.cancel"),
+    style: "text",
+    onClick: onClose
+  })));
+};
+
+var buildColumns$1 = function buildColumns(_ref) {
+  var handleDetailsClick = _ref.handleDetailsClick;
+  return [{
+    title: t$2("delivery.identifier", constants.SINGULAR),
+    key: "identifier",
+    width: 300,
+    render: function render(_ref2) {
+      var identifier = _ref2.identifier,
+        redelivery = _ref2.redelivery;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex space-x-1"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        className: "px-2",
+        style: "body2",
+        weight: "semibold"
+      }, identifier), redelivery && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+        style: "info"
+      }, t$2("delivery.redelivery")));
+    }
+  }, {
+    title: t$2("tableHeaders.createdAt"),
+    key: "createdAt",
+    dataIndex: "createdAt",
+    width: 300,
+    render: function render(createdAt) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex items-center justify-between space-x-1"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
+        date: createdAt,
+        typographyProps: {
+          style: "body1",
+          weight: "semibold"
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("span", null, " \u2022 "), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Time, {
+        date: createdAt,
+        typographyProps: {
+          style: "body1"
+        }
+      })));
+    }
+  }, {
+    title: t$2("common.responseStatus"),
+    key: "responseStatusCode",
+    width: 150,
+    render: function render(_ref3) {
+      var responseStatusCode = _ref3.responseStatusCode,
+        status = _ref3.status;
+      return /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "flex items-center"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        className: "px-2 font-bold",
+        style: "body2"
+      }, responseStatusCode), /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+        style: status === "success" ? "success" : "warning"
+      }, status));
+    }
+  }, {
+    title: t$2("common.event", constants.SINGULAR),
+    key: "event",
+    dataIndex: "event",
+    width: 100,
+    render: ramda.prop("label")
+  }, {
+    title: t$2("tableHeaders.details"),
+    key: "details",
+    dataIndex: "details",
+    width: 150,
+    render: function render(_, delivery) {
+      return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        label: t$2("buttons.viewDetails"),
+        size: "small",
+        onClick: function onClick() {
+          return handleDetailsClick(delivery);
+        }
+      });
+    }
+  }];
+};
+
+var Deliveries = function Deliveries(_ref) {
+  var webhooksUrl = _ref.webhooksUrl,
+    hostBreadcrumbs = _ref.breadcrumbs;
+  var _useState = React.useState(1),
+    _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 _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useParams = reactRouterDom.useParams(),
+    webhookId = _useParams.webhookId;
+  var _useFetchDeliveries = useFetchDeliveries({
+      webhookId: webhookId,
+      page: pageNumber,
+      limit: DEFAULT_PAGE_SIZE
+    }),
+    isLoading = _useFetchDeliveries.isLoading,
+    isFetching = _useFetchDeliveries.isFetching,
+    _useFetchDeliveries$d = _useFetchDeliveries.data,
+    _useFetchDeliveries$d2 = _useFetchDeliveries$d === void 0 ? {} : _useFetchDeliveries$d,
+    endpoint = _useFetchDeliveries$d2.endpoint,
+    totalCount = _useFetchDeliveries$d2.totalCount,
+    _useFetchDeliveries$d3 = _useFetchDeliveries$d2.deliveries,
+    deliveries = _useFetchDeliveries$d3 === void 0 ? [] : _useFetchDeliveries$d3;
   var breadcrumbsWithoutWebhooksTitle = pure.removeBy({
     text: t("webhook.title")
   }, hostBreadcrumbs);
@@ -3601,86 +3775,61 @@ var Deliveries = function Deliveries(_ref) {
     text: endpoint
   }]);
   if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full px-6"
+  return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+    className: "w-full"
   }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], {
     breadcrumbs: breadcrumbs,
     title: t("delivery.title")
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "deliveries__list"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Accordion, {
-    className: classNames__default["default"]("neeto-ui-rounded", {
-      border: deliveries.length
+  }), pure.isNotEmpty(deliveries) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
+    hasPagination: totalCount > DEFAULT_PAGE_SIZE
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+    totalCount: totalCount,
+    fixedHeight: true,
+    currentPageNumber: pageNumber,
+    defaultPageSize: DEFAULT_PAGE_SIZE,
+    handlePageChange: function handlePageChange(page) {
+      return setPageNumber(page);
+    },
+    loading: isFetching,
+    rowData: deliveries,
+    columnData: buildColumns$1({
+      handleDetailsClick: setSelectedDelivery
     })
-  }, deliveries.map(function (_ref3) {
-    var id = _ref3.id,
-      status = _ref3.status,
-      identifier = _ref3.identifier,
-      action = _ref3.action,
-      redelivery = _ref3.redelivery,
-      createdAt = _ref3.createdAt;
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Accordion.Item, {
-      key: id,
-      title: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex flex-1 justify-between"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center gap-2"
-      }, /*#__PURE__*/React__default["default"].createElement("span", null, status === DELIVERY_STATUS.failure ? /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
-        className: "neeto-ui-text-error-600",
-        size: 20,
-        strokeWidth: 2.5
-      }) : /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
-        className: "neeto-ui-text-success-600",
-        size: 24,
-        strokeWidth: 2
-      })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "h5"
-      }, identifier), /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
-        label: action,
-        style: "info"
-      }), redelivery && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
-        label: t("delivery.redelivery")
-      })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        className: "mr-8",
-        style: "body2"
-      }, utils.dateFormat.dateTime(createdAt)))
-    }, /*#__PURE__*/React__default["default"].createElement(DeliveryItem, {
-      deliveryId: id,
-      isRedelivering: isRedelivering,
-      onRedeliverClick: onRedeliverClick
-    }));
-  })), ramda.isEmpty(deliveries) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex h-full items-center justify-center"
+  })) : /*#__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("delivery.empty.description"),
     title: t("delivery.empty.title")
-  }))));
+  })), /*#__PURE__*/React__default["default"].createElement(Details, {
+    delivery: selectedDelivery,
+    onClose: function onClose() {
+      return setSelectedDelivery({});
+    }
+  }));
 };
 var Deliveries$1 = withReactQuery(Deliveries);
 
-var baseUrl = "/webhooks/webhooks";
-var fetch = function fetch(entity_id) {
-  return axios__default["default"].get(baseUrl, {
-    params: {
-      entity_id: entity_id
-    }
+var baseUrl$1 = "/webhooks/webhooks";
+var fetch = function fetch(params) {
+  return axios__default["default"].get(baseUrl$1, {
+    params: params
   });
 };
 var create = function create(payload) {
-  return axios__default["default"].post(baseUrl, {
+  return axios__default["default"].post(baseUrl$1, {
     webhook: payload
   });
 };
 var show = function show(id) {
-  return axios__default["default"].get("".concat(baseUrl, "/").concat(id));
+  return axios__default["default"].get("".concat(baseUrl$1, "/").concat(id));
 };
 var update = function update(id, payload) {
-  return axios__default["default"].put("".concat(baseUrl, "/").concat(id), {
+  return axios__default["default"].put("".concat(baseUrl$1, "/").concat(id), {
     webhook: payload
   });
 };
 var destroy = function destroy(id) {
-  return axios__default["default"]["delete"]("".concat(baseUrl, "/").concat(id));
+  return axios__default["default"]["delete"]("".concat(baseUrl$1, "/").concat(id));
 };
 var webhooksApi = {
   fetch: fetch,
@@ -3690,9 +3839,9 @@ var webhooksApi = {
   destroy: destroy
 };
 
-var useFetchWebhooks = function useFetchWebhooks(entityId) {
-  return reactQuery.useQuery([QUERY_KEYS.WEBHOOK_LIST, entityId], function () {
-    return webhooksApi.fetch(entityId);
+var useFetchWebhooks = function useFetchWebhooks(params) {
+  return reactQuery.useQuery([QUERY_KEYS.WEBHOOK_LIST, params], function () {
+    return webhooksApi.fetch(params);
   }, {
     staleTime: WEBHOOK_STALE_TIME
   });
@@ -3783,16 +3932,125 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+var baseUrl = "/webhooks/events/all";
+var all = function all() {
+  return axios__default["default"].get(baseUrl);
+};
+var eventsApi = {
+  all: all
+};
+
+var useFetchEvents = function useFetchEvents() {
+  return reactQuery.useQuery([QUERY_KEYS.EVENTS_LIST], eventsApi.all, {
+    staleTime: WEBHOOK_STALE_TIME
+  });
+};
+
 var WEBHOOK_HELP_URL = "https://help.neetocal.com/articles/webhook";
 
+var Menu = neetoui.Dropdown.Menu,
+  MenuItem = neetoui.Dropdown.MenuItem;
+var ActionDropdown = function ActionDropdown(_ref) {
+  var onEdit = _ref.onEdit,
+    onDelete = _ref.onDelete;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+    buttonStyle: "text",
+    icon: neetoIcons.MenuHorizontal,
+    strategy: "fixed"
+  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+    onClick: onEdit
+  }, t("buttons.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+    style: "danger",
+    onClick: onDelete
+  }, t("buttons.delete"))));
+};
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getValidationSchema = function getValidationSchema(webhooks) {
   return yup__namespace.object().shape({
     endpoint: yup__namespace.string().trim().matches(/^(https?):\/\//i, t$2("errors.webhook.invalidUrlProtocol")).url(t$2("errors.webhook.invalidUrl")).required(t$2("errors.webhook.required")).test("Is endpoint unique", t$2("errors.webhook.urlNotUnique"), function (endpoint, ctx) {
       return !ramda.pluck("endpoint", pure.removeById(ctx.parent.id, webhooks)).includes(endpoint === null || endpoint === void 0 ? void 0 : endpoint.trim());
     }),
+    events: yup__namespace.array().min(1, t$2("errors.webhook.events.required")),
     secret: yup__namespace.string().trim().nullable()
   });
 };
+var buildPayload = function buildPayload(_ref) {
+  var _initialValues$events;
+  var isEditing = _ref.isEditing,
+    values = _ref.values,
+    initialValues = _ref.initialValues;
+  var events = values.events.map(function (_ref2) {
+    var identifier = _ref2.identifier;
+    return {
+      identifier: identifier
+    };
+  });
+  if (!isEditing) return _objectSpread$1(_objectSpread$1({}, values), {}, {
+    eventsAttributes: events
+  });
+  var deletable = ((_initialValues$events = initialValues.events) !== null && _initialValues$events !== void 0 ? _initialValues$events : []).filter(function (_ref3) {
+    var identifier = _ref3.identifier;
+    return !pure.findBy({
+      identifier: identifier
+    }, values.events);
+  }).map(ramda.assoc("_destroy", true));
+  var creatable = values.events.filter(function (_ref4) {
+    var identifier = _ref4.identifier;
+    return !pure.findBy({
+      identifier: identifier
+    }, initialValues.events);
+  });
+  return _objectSpread$1(_objectSpread$1({}, values), {}, {
+    eventsAttributes: [].concat(_toConsumableArray(creatable), _toConsumableArray(deletable))
+  });
+};
+var buildColumns = function buildColumns(_ref5) {
+  var handleDelete = _ref5.handleDelete,
+    handleEdit = _ref5.handleEdit,
+    deliveriesPath = _ref5.deliveriesPath;
+  return [{
+    title: t$2("common.endpoint"),
+    key: "endpoint",
+    dataIndex: "endpoint",
+    render: function render(endpoint, webhook) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex items-center justify-between space-x-3"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        style: "link",
+        to: utils.buildUrl(deliveriesPath, {
+          webhookId: webhook.id
+        })
+      }, endpoint), /*#__PURE__*/React__default["default"].createElement(ActionDropdown, {
+        onDelete: function onDelete() {
+          return handleDelete(webhook.id);
+        },
+        onEdit: function onEdit() {
+          return handleEdit(webhook.id);
+        }
+      }));
+    }
+  }, {
+    title: t$2("webhook.active"),
+    key: "isActive",
+    dataIndex: "isActive",
+    render: function render(isActive) {
+      return isActive ? t$2("webhook.activeStatuses.yes") : t$2("webhook.activeStatuses.no");
+    },
+    width: 100
+  }, {
+    title: t$2("common.event", constants.PLURAL),
+    dataIndex: "events",
+    key: "events",
+    render: function render(events) {
+      return ramda.pluck("label", events).sort().join(", ");
+    },
+    width: 200
+  }];
+};
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -3823,15 +4081,25 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     }),
     updateWebhook = _useUpdateWebhook.mutate;
   var endpointRef = React.useRef();
+  var _useFetchEvents = useFetchEvents(),
+    events = _useFetchEvents.data,
+    isLoading = _useFetchEvents.isLoading;
   var initialValues = editingWebhookId ? webhook : {
     endpoint: "",
-    secret: ""
+    events: events,
+    secret: "",
+    isActive: true
   };
   var handleSubmit = function handleSubmit(values) {
+    var payload = buildPayload({
+      isEditing: editingWebhookId,
+      values: values,
+      initialValues: initialValues
+    });
     editingWebhookId ? updateWebhook({
       id: editingWebhookId,
-      payload: values
-    }) : createWebhook(_objectSpread(_objectSpread({}, values), {}, {
+      payload: payload
+    }) : createWebhook(_objectSpread(_objectSpread({}, payload), {}, {
       entityId: entityId,
       entityType: entityType
     }));
@@ -3864,8 +4132,11 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     }
   }, function (_ref2) {
     var dirty = _ref2.dirty,
-      isSubmitting = _ref2.isSubmitting;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      isSubmitting = _ref2.isSubmitting,
+      isValid = _ref2.isValid;
+    return isLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center justify-center"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full space-y-4"
     }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       required: true,
@@ -3874,6 +4145,15 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       name: "endpoint",
       placeholder: t("webhook.endpointPlaceholder"),
       ref: endpointRef
+    }), !isLoading && /*#__PURE__*/React__default["default"].createElement(formik.Select, {
+      isMulti: true,
+      required: true,
+      getOptionLabel: ramda.prop("label"),
+      getOptionValue: ramda.prop("identifier"),
+      label: t("common.event", constants.PLURAL),
+      name: "events",
+      options: events,
+      placeholder: t("webhook.eventPlaceholder")
     }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
@@ -3892,6 +4172,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
           })
         }
       })
+    }), /*#__PURE__*/React__default["default"].createElement(formik.Switch, {
+      label: t("webhook.active"),
+      name: "isActive"
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "flex gap-2"
     }, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
@@ -3903,7 +4186,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       },
       submitButtonProps: {
         label: t("buttons.saveChanges"),
-        disabled: !dirty,
+        disabled: !dirty || !isValid,
         loading: isSubmitting
       }
     })));
@@ -3934,44 +4217,6 @@ var Header = function Header(_ref) {
 };
 var Header$1 = /*#__PURE__*/React__default["default"].memo(Header);
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var WebhookItem = function WebhookItem(_ref) {
-  var webhook = _ref.webhook,
-    onDeleteClick = _ref.onDeleteClick,
-    onEditClick = _ref.onEditClick,
-    deliveriesPath = _ref.deliveriesPath;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
-    className: "neeto-ui-rounded-lg neeto-ui-border-gray-300 flex cursor-pointer items-center justify-between gap-4 border px-4 py-2",
-    to: utils.buildUrl(deliveriesPath, {
-      webhookId: webhook.id
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-primary-800 break-all",
-    component: "span",
-    style: "body1"
-  }, webhook.endpoint), /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: "text",
-    icon: neetoIcons.MenuHorizontal
-  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    onClick: function onClick() {
-      return onEditClick(webhook.id);
-    }
-  }, t("operation.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    onClick: function onClick() {
-      return onDeleteClick(webhook.id);
-    }
-  }, t("operation.delete"))))));
-};
-var WebhookItem$1 = /*#__PURE__*/React__default["default"].memo(WebhookItem);
-
 var Webhooks = function Webhooks(_ref) {
   var deliveriesPath = _ref.deliveriesPath,
     entityType = _ref.entityType,
@@ -3993,14 +4238,25 @@ var Webhooks = function Webhooks(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isDeleteAlertOpen = _useState8[0],
     setIsDeleteAlertOpen = _useState8[1];
+  var _useState9 = React.useState(1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pageNumber = _useState10[0],
+    setPageNumber = _useState10[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchWebhooks = useFetchWebhooks(entityId),
+  var _useFetchWebhooks = useFetchWebhooks({
+      entityId: entityId,
+      page: pageNumber,
+      limit: DEFAULT_PAGE_SIZE
+    }),
     isLoading = _useFetchWebhooks.isLoading,
+    isFetching = _useFetchWebhooks.isFetching,
     _useFetchWebhooks$dat = _useFetchWebhooks.data,
     _useFetchWebhooks$dat2 = _useFetchWebhooks$dat === void 0 ? {} : _useFetchWebhooks$dat,
     _useFetchWebhooks$dat3 = _useFetchWebhooks$dat2.webhooks,
-    webhooks = _useFetchWebhooks$dat3 === void 0 ? [] : _useFetchWebhooks$dat3;
+    webhooks = _useFetchWebhooks$dat3 === void 0 ? [] : _useFetchWebhooks$dat3,
+    _useFetchWebhooks$dat4 = _useFetchWebhooks$dat2.totalCount,
+    totalCount = _useFetchWebhooks$dat4 === void 0 ? 0 : _useFetchWebhooks$dat4;
   var _useDestroyWebhook = useDestroyWebhook({
       onSuccess: function onSuccess() {
         return setIsDeleteAlertOpen(false);
@@ -4023,28 +4279,33 @@ var Webhooks = function Webhooks(_ref) {
   if (isLoading) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full px-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-white sticky top-0 z-50 w-full"
-  }), /*#__PURE__*/React__default["default"].createElement(Header$1, {
+  return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+    className: "w-full"
+  }, /*#__PURE__*/React__default["default"].createElement(Header$1, {
     breadcrumbs: breadcrumbs,
     setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "webhooks__list space-y-2"
-  }, webhooks.map(function (webhook) {
-    return /*#__PURE__*/React__default["default"].createElement(WebhookItem$1, {
-      deliveriesPath: deliveriesPath,
-      key: webhook.id,
-      webhook: webhook,
-      onDeleteClick: handleDelete,
-      onEditClick: handleEdit
-    });
-  }), ramda.isEmpty(webhooks) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex h-full items-center justify-center"
+  }), pure.isNotEmpty(webhooks) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
+    hasPagination: totalCount > DEFAULT_PAGE_SIZE
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement("div", {
+    className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
     title: t("webhook.empty")
-  }))), /*#__PURE__*/React__default["default"].createElement(AddWebhookPane, {
+  })), /*#__PURE__*/React__default["default"].createElement(AddWebhookPane, {
     editingWebhookId: editingWebhookId,
     entityId: entityId,
     entityType: entityType,