@bigbinary/neeto-webhooks-frontend 3.0.11 → 3.0.12

package/dist/cjs/v2/NeetoWebhooks.js

@@ -0,0 +1,1205 @@
+'use strict';
+
+var ramda = require('ramda');
+var reactRouterDom = require('react-router-dom');
+var main = require('../../main-B8V9tERH.js');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var neetoCist = require('@bigbinary/neeto-cist');
+var constants = require('@bigbinary/neeto-commons-frontend/v2/constants');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
+var utils = require('@bigbinary/neeto-commons-frontend/v2/utils');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var Container = require('@bigbinary/neeto-molecules/v2/Container');
+var Header$2 = require('@bigbinary/neeto-molecules/v2/Header');
+var TableWrapper = require('@bigbinary/neeto-molecules/v2/TableWrapper');
+var reactI18next = require('react-i18next');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var reactQuery = require('@tanstack/react-query');
+var reactQueryDevtools = require('@tanstack/react-query-devtools');
+var jsxRuntime = require('react/jsx-runtime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var DateFormat = require('@bigbinary/neeto-molecules/v2/DateFormat');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var i18next = require('i18next');
+var formik = require('@bigbinary/neeto-atoms/formik');
+var formik$1 = require('formik');
+var lucideReact = require('lucide-react');
+var HelpPopover = require('@bigbinary/neeto-molecules/v2/HelpPopover');
+var MoreDropdown = require('@bigbinary/neeto-molecules/v2/MoreDropdown');
+var yup = require('yup');
+var SubHeader = require('@bigbinary/neeto-molecules/v2/SubHeader');
+require('@bigbinary/neeto-commons-frontend/initializers');
+require('@bigbinary/neeto-commons-frontend/constants');
+require('axios');
+require('@bigbinary/neeto-commons-frontend/react-utils');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(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__*/jsxRuntime.jsxs(reactQuery.QueryClientProvider, {
+      client: main.queryClient,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$3({}, props)), /*#__PURE__*/jsxRuntime.jsx(reactQueryDevtools.ReactQueryDevtools, {
+        initialIsOpen: false,
+        position: "bottom"
+      })]
+    });
+  };
+  return QueryWrapper;
+};
+
+var DELIVERY_TAB = {
+  response: "response",
+  request: "request"
+};
+
+var Snippet = function Snippet(_ref) {
+  var children = _ref.children,
+    _ref$dataTestid = _ref.dataTestid,
+    dataTestid = _ref$dataTestid === void 0 ? "" : _ref$dataTestid;
+  return /*#__PURE__*/jsxRuntime.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-testid": dataTestid,
+    children: children
+  });
+};
+
+var TransactionDetails = function TransactionDetails(_ref) {
+  var delivery = _ref.delivery;
+  var _useState = react.useState(DELIVERY_TAB.request),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeHeader = _useState2[0],
+    setActiveHeader = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var status = delivery.status,
+    identifier = delivery.identifier,
+    responseStatusCode = delivery.responseStatusCode,
+    sid = delivery.sid;
+  var renderPayload = function renderPayload() {
+    try {
+      return JSON.stringify(JSON.parse(delivery.requestBody), null, 2);
+    } catch (_unused) {
+      return "";
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-bg-white sticky top-0 mb-2 flex w-full flex-col",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex w-full flex-col space-y-2 pb-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.sid"), ":", /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "px-2 font-bold",
+            "data-testid": "delivery-sid",
+            variant: "body2",
+            children: sid
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.deliveryId"), ":", /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "px-2 font-bold",
+            "data-testid": "delivery-identifier",
+            variant: "body2",
+            children: identifier
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex items-center",
+          children: [t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "px-2 font-bold",
+            "data-testid": "delivery-response-code",
+            variant: "body2",
+            children: responseStatusCode
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+            variant: status === "success" ? "green-subtle" : "amber-subtle",
+            children: status
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Tabs, {
+        value: activeHeader,
+        onValueChange: setActiveHeader,
+        children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Tabs.List, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Item, {
+            value: DELIVERY_TAB.request,
+            children: t("neetoWebhooks.delivery.request")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Item, {
+            value: DELIVERY_TAB.response,
+            children: t("neetoWebhooks.delivery.response")
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Content, {
+          value: DELIVERY_TAB.request,
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "mt-2 w-full space-y-4",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.header")
+              }), /*#__PURE__*/jsxRuntime.jsx(Snippet, {
+                dataTestid: "delivery-request-header",
+                children: delivery.requestHeader
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.payload")
+              }), /*#__PURE__*/jsxRuntime.jsx(Snippet, {
+                dataTestid: "delivery-request-payload",
+                children: renderPayload()
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Content, {
+          value: DELIVERY_TAB.response,
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "mt-2 w-full space-y-4",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.header")
+              }), /*#__PURE__*/jsxRuntime.jsx(Snippet, {
+                dataTestid: "delivery-response-header",
+                children: delivery.responseHeader
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.body")
+              }), /*#__PURE__*/jsxRuntime.jsx(Snippet, {
+                dataTestid: "delivery-response-body",
+                children: delivery.responseBody
+              })]
+            })]
+          })
+        })]
+      })]
+    })
+  });
+};
+
+var Details = function Details(_ref) {
+  var _delivery$webhook;
+  var onClose = _ref.onClose,
+    deliveryId = _ref.deliveryId,
+    webhookSid = _ref.webhookSid;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useRedeliverWebhook = main.useRedeliverWebhook(deliveryId, webhookSid),
+    isRedelivering = _useRedeliverWebhook.isPending,
+    redeliverWebhook = _useRedeliverWebhook.mutateAsync;
+  var _useShowDelivery = main.useShowDelivery(deliveryId, webhookSid),
+    isLoading = _useShowDelivery.isPending,
+    _useShowDelivery$data = _useShowDelivery.data,
+    _useShowDelivery$data2 = _useShowDelivery$data === void 0 ? {} : _useShowDelivery$data,
+    delivery = _useShowDelivery$data2.delivery;
+  var handleRedeliverClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return redeliverWebhook();
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleRedeliverClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet, {
+    onClose: onClose,
+    isOpen: neetoCist.isPresent(deliveryId),
+    size: "large",
+    children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DateFormat.Date, {
+              date: delivery.createdAt,
+              tooltipProps: {
+                disabled: true
+              },
+              typographyProps: {
+                variant: "h2",
+                weight: "semibold"
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              children: " \u2022 "
+            }), /*#__PURE__*/jsxRuntime.jsx(DateFormat.Time, {
+              date: delivery.createdAt,
+              tooltipProps: {
+                disabled: true
+              },
+              typographyProps: {
+                variant: "h2",
+                weight: "normal"
+              }
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+          children: neetoCist.isPresent(delivery) && /*#__PURE__*/jsxRuntime.jsx(TransactionDetails, {
+            delivery: delivery
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Footer, {
+          className: "gap-x-2",
+          children: [(delivery === null || delivery === void 0 ? void 0 : delivery.eventId) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+            disabled: isRedelivering || ((_delivery$webhook = delivery.webhook) === null || _delivery$webhook === void 0 ? void 0 : _delivery$webhook.versionExpired),
+            label: t("neetoWebhooks.delivery.redeliver"),
+            loading: isRedelivering,
+            onClick: handleRedeliverClick
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+            label: t("neetoWebhooks.buttons.cancel"),
+            variant: "ghost",
+            onClick: onClose
+          })]
+        })]
+      })
+    })
+  });
+};
+
+var buildColumns$1 = function buildColumns(_ref) {
+  var deliveryDetailsPath = _ref.deliveryDetailsPath,
+    page = _ref.page;
+  return [{
+    id: "identifier",
+    accessorKey: "identifier",
+    header: i18next.t("neetoWebhooks.delivery.deliveryId"),
+    size: 390,
+    cell: function cell(_ref2) {
+      var row = _ref2.row;
+      var delivery = row.original;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          variant: "link",
+          to: utils.buildUrl(deliveryDetailsPath, {
+            deliveryId: delivery.sid,
+            page: page
+          }),
+          weight: "semibold",
+          children: delivery.identifier
+        }), delivery.redelivery && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+          variant: "blue",
+          children: i18next.t("neetoWebhooks.delivery.redelivery")
+        })]
+      });
+    }
+  }, {
+    id: "createdAt",
+    accessorKey: "createdAt",
+    header: i18next.t("neetoWebhooks.tableHeaders.createdAt"),
+    size: 280,
+    cell: function cell(_ref3) {
+      var getValue = _ref3.getValue;
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex items-center justify-between space-x-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          children: /*#__PURE__*/jsxRuntime.jsx(DateFormat.DateTime, {
+            date: getValue()
+          })
+        })
+      });
+    }
+  }, {
+    id: "responseStatusCode",
+    header: i18next.t("neetoWebhooks.common.responseStatus"),
+    size: 250,
+    cell: function cell(_ref4) {
+      var row = _ref4.row;
+      var _row$original = row.original,
+        responseStatusCode = _row$original.responseStatusCode,
+        status = _row$original.status;
+      return /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex items-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "px-2",
+          variant: "body2",
+          children: responseStatusCode
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+          variant: status === "success" ? "green" : "amber",
+          children: status
+        })]
+      });
+    }
+  }, {
+    id: "event",
+    accessorKey: "event",
+    header: i18next.t("neetoWebhooks.common.event", constants.SINGULAR),
+    size: 270,
+    cell: function cell(_ref5) {
+      var _getValue;
+      var getValue = _ref5.getValue;
+      return (_getValue = getValue()) === null || _getValue === void 0 ? void 0 : _getValue.label;
+    }
+  }];
+};
+
+var Deliveries = function Deliveries(_ref) {
+  var webhooksUrl = _ref.webhooksUrl,
+    hostBreadcrumbs = _ref.breadcrumbs,
+    helpLink = _ref.helpLink;
+  var _useRouteMatch = reactRouterDom.useRouteMatch(),
+    deliveriesUrl = _useRouteMatch.url;
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useParams = reactRouterDom.useParams(),
+    webhookId = _useParams.webhookId,
+    deliveryId = _useParams.deliveryId;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? constants.DEFAULT_PAGE_INDEX : _useQueryParams$page;
+  var deliveriesPath = main.getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = main.getDeliveryDetailsPath(deliveriesUrl);
+  var _useFetchDeliveries = main.useFetchDeliveries(webhookId, {
+      page: page,
+      pageSize: constants.DEFAULT_PAGE_SIZE
+    }),
+    isLoading = _useFetchDeliveries.isLoading,
+    isFetching = _useFetchDeliveries.isFetching,
+    _useFetchDeliveries$d = _useFetchDeliveries.data,
+    _useFetchDeliveries$d2 = _useFetchDeliveries$d === void 0 ? {} : _useFetchDeliveries$d,
+    totalCount = _useFetchDeliveries$d2.totalCount,
+    _useFetchDeliveries$d3 = _useFetchDeliveries$d2.deliveries,
+    deliveries = _useFetchDeliveries$d3 === void 0 ? [] : _useFetchDeliveries$d3;
+  var breadcrumbsWithoutWebhooksTitle = neetoCist.removeBy({
+    text: t("neetoWebhooks.webhook.title")
+  }, hostBreadcrumbs);
+  var breadcrumbs = [].concat(_toConsumableArray(breadcrumbsWithoutWebhooksTitle), [{
+    link: webhooksUrl,
+    text: t("neetoWebhooks.webhook.title")
+  }, {
+    link: window.location.pathname,
+    text: t("neetoWebhooks.delivery.title")
+  }]);
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-center items-center w-full h-screen",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    className: "w-full",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header$2, {
+      breadcrumbs: breadcrumbs,
+      title: t("neetoWebhooks.delivery.title"),
+      titleHelpPopoverProps: {
+        title: t("neetoWebhooks.delivery.title"),
+        description: t("neetoWebhooks.delivery.helpDescription"),
+        helpLinkProps: {
+          href: helpLink
+        }
+      }
+    }), neetoCist.isNotEmpty(deliveries) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+      hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DataTable, {
+        totalCount: totalCount,
+        columns: buildColumns$1({
+          deliveryDetailsPath: deliveryDetailsPath,
+          page: page
+        }),
+        currentPage: Number(page),
+        data: deliveries,
+        loading: isFetching,
+        pageSize: constants.DEFAULT_PAGE_SIZE
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-center items-center w-full h-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Empty, {
+        description: t("neetoWebhooks.delivery.empty.description"),
+        title: t("neetoWebhooks.delivery.empty.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Details, {
+      deliveryId: deliveryId,
+      webhookSid: webhookId,
+      onClose: function onClose() {
+        return history.replace(utils.buildUrl(deliveriesPath, {
+          webhookId: webhookId,
+          page: page
+        }));
+      }
+    })]
+  });
+};
+var Deliveries$1 = withReactQuery(Deliveries);
+
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
+var WEBHOOK_INITIAL_VALUES = {
+  endpoint: "",
+  events: [],
+  secret: "",
+  isActive: true
+};
+
+var EventCheckbox = function EventCheckbox(_ref) {
+  var events = _ref.events,
+    values = _ref.values,
+    arrayHelpers = _ref.arrayHelpers,
+    onEventsChange = _ref.onEventsChange;
+  var handleToggle = function handleToggle(isSelected, index, event) {
+    if (isSelected) {
+      arrayHelpers.remove(index);
+    } else {
+      arrayHelpers.push(event);
+    }
+    onEventsChange === null || onEventsChange === void 0 || onEventsChange();
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: events.map(function (event) {
+      var _values$events;
+      var index = neetoCist.findIndexBy(event, (_values$events = values.events) !== null && _values$events !== void 0 ? _values$events : []);
+      var isSelected = index > -1;
+      return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Checkbox, {
+        checked: isSelected,
+        className: "my-4",
+        label: event.label,
+        onCheckedChange: function onCheckedChange() {
+          return handleToggle(isSelected, index, event);
+        }
+      }, event.identifier);
+    })
+  });
+};
+
+var ToggleActiveSwitch = function ToggleActiveSwitch(_ref) {
+  var isActive = _ref.isActive,
+    webhookId = _ref.webhookId;
+  var _useState = react.useState(isActive),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var previousStatusRef = react.useRef(isActive);
+  var _useUpdateWebhook = main.useUpdateWebhook(webhookId, {
+      onError: function onError() {
+        // Revert to the previous state
+        setStatus(previousStatusRef.current);
+      },
+      onSuccess: function onSuccess() {
+        // Update the previous status ref on successful update
+        previousStatusRef.current = status;
+      }
+    }),
+    updateWebhook = _useUpdateWebhook.mutate;
+  var handleToggle = function handleToggle(updatedStatus) {
+    // Store the current status as previous before changing
+    previousStatusRef.current = status;
+    setStatus(updatedStatus);
+    updateWebhook({
+      id: webhookId,
+      payload: {
+        isActive: updatedStatus
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, {
+    checked: status,
+    onCheckedChange: handleToggle
+  });
+};
+
+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), true).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 getMenuItems = function getMenuItems(_ref) {
+  var onEdit = _ref.onEdit,
+    onDelete = _ref.onDelete;
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: i18next.t("neetoWebhooks.buttons.edit"),
+    "data-testid": "neeto-webhooks-edit-button",
+    onClick: onEdit
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: i18next.t("neetoWebhooks.buttons.delete"),
+    "data-testid": "neeto-webhooks-delete-button",
+    onClick: onDelete
+  }];
+};
+var getValidationSchema = function getValidationSchema(webhooks) {
+  return yup__namespace.object().shape({
+    endpoint: yup__namespace.string().trim().matches(/^(https?):\/\//i, i18next.t("neetoWebhooks.errors.webhook.invalidUrlProtocol")).url(i18next.t("neetoWebhooks.errors.webhook.invalidUrl")).required(i18next.t("neetoWebhooks.errors.webhook.required")).test("Is endpoint unique", i18next.t("neetoWebhooks.errors.webhook.urlNotUnique"), function (endpoint, ctx) {
+      return !ramda.pluck("endpoint", neetoCist.removeById(ctx.parent.id, webhooks)).includes(endpoint === null || endpoint === void 0 ? void 0 : endpoint.trim());
+    }),
+    events: yup__namespace.array()["default"]([]).min(1, i18next.t("neetoWebhooks.errors.webhook.events.required")),
+    secret: yup__namespace.string().trim().nullable()
+  });
+};
+var buildPayload = function buildPayload(_ref2) {
+  var _initialValues$events;
+  var isEditing = _ref2.isEditing,
+    values = _ref2.values,
+    initialValues = _ref2.initialValues;
+  var events = values.events.map(function (_ref3) {
+    var identifier = _ref3.identifier;
+    return {
+      identifier: identifier
+    };
+  });
+  if (!isEditing) return _objectSpread$2(_objectSpread$2({}, values), {}, {
+    eventsAttributes: events
+  });
+  var deletable = ((_initialValues$events = initialValues.events) !== null && _initialValues$events !== void 0 ? _initialValues$events : []).filter(function (_ref4) {
+    var identifier = _ref4.identifier;
+    return !neetoCist.findBy({
+      identifier: identifier
+    }, values.events);
+  }).map(ramda.assoc("_destroy", true));
+  var creatable = values.events.filter(function (_ref5) {
+    var identifier = _ref5.identifier;
+    return !neetoCist.findBy({
+      identifier: identifier
+    }, initialValues.events);
+  });
+  return _objectSpread$2(_objectSpread$2({}, values), {}, {
+    eventsAttributes: [].concat(_toConsumableArray(creatable), _toConsumableArray(deletable))
+  });
+};
+var formatTimeUntilExpiration = function formatTimeUntilExpiration(expiresAt) {
+  if (!expiresAt) return null;
+  var now = new Date();
+  var expiry = new Date(expiresAt);
+  var diffMs = expiry - now;
+  if (diffMs <= 0) return null;
+  var diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  var diffDays = Math.floor(diffHours / 24);
+  if (diffDays > 0) {
+    return i18next.t("neetoWebhooks.webhook.versionStatus.expiresIn.days", {
+      count: diffDays
+    });
+  }
+  var remainingHours = diffHours;
+  var remainingMinutes = Math.floor(diffMs % (1000 * 60 * 60) / (1000 * 60));
+  return i18next.t("neetoWebhooks.webhook.versionStatus.expiresIn.hoursAndMinutes", {
+    hours: remainingHours,
+    hoursPlural: remainingHours !== 1 ? "s" : "",
+    minutes: remainingMinutes,
+    minutesPlural: remainingMinutes !== 1 ? "s" : ""
+  });
+};
+var formatExpiredDate = function formatExpiredDate(expiresAt) {
+  if (!expiresAt) return null;
+  var expiry = new Date(expiresAt);
+  return i18next.t("neetoWebhooks.webhook.versionStatus.expiredOn", {
+    date: expiry.toLocaleDateString()
+  });
+};
+var buildColumns = function buildColumns(_ref6) {
+  var handleDelete = _ref6.handleDelete,
+    handleEdit = _ref6.handleEdit,
+    deliveriesPath = _ref6.deliveriesPath;
+  return [{
+    id: "endpoint",
+    accessorKey: "endpoint",
+    header: i18next.t("neetoWebhooks.common.endpoint"),
+    size: 700,
+    cell: function cell(_ref7) {
+      var row = _ref7.row,
+        getValue = _ref7.getValue;
+      var webhook = row.original;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between space-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          variant: "link",
+          to: utils.buildUrl(deliveriesPath, {
+            webhookId: webhook.sid
+          }),
+          children: getValue()
+        }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            className: "me-1 my-1"
+          },
+          menuItems: getMenuItems({
+            onEdit: function onEdit() {
+              return handleEdit(webhook.id);
+            },
+            onDelete: function onDelete() {
+              return handleDelete(webhook.id);
+            }
+          })
+        })]
+      });
+    }
+  }, {
+    id: "isActive",
+    accessorKey: "isActive",
+    header: i18next.t("neetoWebhooks.webhook.active"),
+    size: 150,
+    cell: function cell(_ref8) {
+      var row = _ref8.row,
+        getValue = _ref8.getValue;
+      return /*#__PURE__*/jsxRuntime.jsx(ToggleActiveSwitch, {
+        isActive: getValue(),
+        webhookId: row.original.id
+      });
+    }
+  }, {
+    id: "version",
+    accessorKey: "version",
+    header: i18next.t("neetoWebhooks.webhook.version"),
+    size: 200,
+    cell: function cell(_ref9) {
+      var row = _ref9.row,
+        getValue = _ref9.getValue;
+      var webhook = row.original;
+      var timeMessage = webhook.versionExpired ? formatExpiredDate(webhook.versionExpiresAt) : formatTimeUntilExpiration(webhook.versionExpiresAt);
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col space-y-1",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            children: getValue()
+          }), webhook.versionExpired && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+            variant: "red",
+            children: "expired"
+          }), webhook.versionDeprecated && !webhook.versionExpired && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+            variant: "amber",
+            children: "deprecated"
+          })]
+        }), timeMessage && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "text-xs neeto-ui-text-gray-600",
+          children: [timeMessage, ".", " ", /*#__PURE__*/jsxRuntime.jsx("a", {
+            className: "text-blue-600 hover:text-blue-800 underline",
+            href: webhook.defaultVersionPayloadDocUrl,
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: i18next.t("neetoWebhooks.webhook.versionStatus.moreDetails")
+          }), "."]
+        })]
+      });
+    }
+  }, {
+    id: "events",
+    accessorKey: "events",
+    header: i18next.t("neetoWebhooks.common.event", constants.PLURAL),
+    size: 300,
+    cell: function cell(_ref10) {
+      var getValue = _ref10.getValue;
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "whitespace-normal",
+        children: ramda.pluck("label", getValue()).sort().join(", ")
+      });
+    }
+  }];
+};
+var generateRandomSecret = function generateRandomSecret() {
+  return main.v4().replace(/-/g, "");
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AddWebhookPane = function AddWebhookPane(_ref) {
+  var editingWebhookId = _ref.editingWebhookId,
+    entityId = _ref.entityId,
+    entityType = _ref.entityType,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onCreate = _ref.onCreate,
+    webhooks = _ref.webhooks,
+    webhooksHelpLink = _ref.webhooksHelpLink,
+    secretsHelpLink = _ref.secretsHelpLink;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSecretInputFieldVisible = _useState2[0],
+    setIsSecretInputFieldVisible = _useState2[1];
+  var _useCreateWebhook = main.useCreateWebhook({
+      onSuccess: function onSuccess() {
+        onClose();
+        onCreate === null || onCreate === void 0 || onCreate();
+      }
+    }),
+    createWebhook = _useCreateWebhook.mutate;
+  var _useShowWebhook = main.useShowWebhook(editingWebhookId),
+    _useShowWebhook$data = _useShowWebhook.data,
+    _useShowWebhook$data2 = _useShowWebhook$data === void 0 ? {} : _useShowWebhook$data,
+    _useShowWebhook$data3 = _useShowWebhook$data2.webhook,
+    webhook = _useShowWebhook$data3 === void 0 ? {} : _useShowWebhook$data3;
+  var _useUpdateWebhook = main.useUpdateWebhook(editingWebhookId, {
+      onSuccess: onClose
+    }),
+    updateWebhook = _useUpdateWebhook.mutate;
+  var endpointRef = react.useRef();
+  var _useFetchEvents = main.useFetchEvents(),
+    _useFetchEvents$data = _useFetchEvents.data,
+    events = _useFetchEvents$data === void 0 ? [] : _useFetchEvents$data,
+    isLoading = _useFetchEvents.isLoading;
+  var initialValues = react.useMemo(function () {
+    return editingWebhookId ? _objectSpread$1(_objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), webhook), {}, {
+      events: Array.isArray(webhook === null || webhook === void 0 ? void 0 : webhook.events) ? webhook === null || webhook === void 0 ? void 0 : webhook.events : []
+    }) : _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), {}, {
+      events: events
+    });
+  }, [editingWebhookId, webhook, events]);
+  var isWebhookExpiredOrDeprecated = editingWebhookId && (webhook.versionExpired || webhook.versionDeprecated);
+  var handleSubmit = function handleSubmit(values) {
+    // Check if webhook is expired or deprecated before allowing edit
+    if (editingWebhookId && (webhook.versionExpired || webhook.versionDeprecated)) {
+      return;
+    }
+    var payload = buildPayload({
+      isEditing: editingWebhookId,
+      values: values,
+      initialValues: initialValues
+    });
+    editingWebhookId ? updateWebhook({
+      id: editingWebhookId,
+      payload: payload,
+      entityId: entityId
+    }) : createWebhook(_objectSpread$1(_objectSpread$1({}, payload), {}, {
+      entityId: entityId,
+      entityType: entityType
+    }));
+  };
+  var handleClick = function handleClick(setFieldValue) {
+    var randomWebhookSecret = generateRandomSecret();
+    setFieldValue("secret", randomWebhookSecret);
+    setIsSecretInputFieldVisible(true);
+  };
+  var handleRegenerate = function handleRegenerate(setFieldValue) {
+    var randomWebhookSecret = generateRandomSecret();
+    setFieldValue("secret", randomWebhookSecret);
+  };
+  var handleDelete = function handleDelete(setFieldValue) {
+    setFieldValue("secret", null);
+    setIsSecretInputFieldVisible(false);
+  };
+  react.useEffect(function () {
+    if (webhook !== null && webhook !== void 0 && webhook.secret) {
+      setIsSecretInputFieldVisible(true);
+    }
+  }, [webhook]);
+  return /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
+    formikProps: {
+      enableReinitialize: true,
+      validationSchema: getValidationSchema(webhooks),
+      initialValues: initialValues,
+      onSubmit: function onSubmit(values) {
+        return handleSubmit(getValidationSchema().cast(values));
+      }
+    },
+    children: function children(_ref2) {
+      var setFieldValue = _ref2.setFieldValue,
+        setFieldTouched = _ref2.setFieldTouched,
+        values = _ref2.values,
+        isValid = _ref2.isValid,
+        dirty = _ref2.dirty;
+      return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet, {
+        isOpen: isOpen,
+        onClose: onClose,
+        initialFocusRef: endpointRef,
+        children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Header, {
+          className: "flex items-center gap-x-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            as: "h2",
+            "data-testid": "add-new-webhook-pane-header",
+            variant: "h2",
+            weight: "semibold",
+            children: editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")
+          }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+            description: t("neetoWebhooks.webhook.helpDescription"),
+            helpLinkProps: {
+              href: webhooksHelpLink
+            },
+            title: t("neetoWebhooks.webhook.title")
+          })]
+        }), isLoading ? /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex items-center justify-center",
+            children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+            className: "pb-6",
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "w-full space-y-4 md:space-y-6",
+              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                className: "mb-2",
+                variant: "body2",
+                children: t("neetoWebhooks.webhook.postRequestIsSentToEndpointURL")
+              }), /*#__PURE__*/jsxRuntime.jsx(formik.Textarea, {
+                required: true,
+                "data-testid": "endpoint-input-field",
+                label: t("neetoWebhooks.webhook.endpoint"),
+                name: "endpoint",
+                placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
+                ref: endpointRef,
+                rows: 1
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Label, {
+                  className: "flex items-center gap-x-2",
+                  children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+                    helpLinkProps: {
+                      href: secretsHelpLink
+                    },
+                    popoverProps: {
+                      position: "bottom"
+                    },
+                    title: t("neetoWebhooks.webhook.secretkeyHelpTitle"),
+                    description: t("neetoWebhooks.webhook.secretkeyHelpDescription")
+                  })]
+                }), isSecretInputFieldVisible ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-center justify-between space-x-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+                    "data-testid": "secret-key-input-field",
+                    name: "secret",
+                    placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
+                  }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+                    menuItems: [{
+                      key: "regenerate-secret",
+                      label: t("neetoWebhooks.buttons.regenerate"),
+                      "data-testid": "regenerate-secret",
+                      onClick: function onClick() {
+                        return handleRegenerate(setFieldValue);
+                      }
+                    }, {
+                      key: "delete-secret",
+                      label: t("neetoWebhooks.buttons.delete"),
+                      "data-testid": "delete-secret",
+                      onClick: function onClick() {
+                        return handleDelete(setFieldValue);
+                      }
+                    }]
+                  })]
+                }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+                  "data-testid": "add-secret-key",
+                  icon: lucideReact.Plus,
+                  iconPosition: "left",
+                  label: t("neetoWebhooks.buttons.generateSecretKey"),
+                  variant: "link",
+                  onClick: function onClick() {
+                    return handleClick(setFieldValue);
+                  }
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
+                  required: true,
+                  children: t("neetoWebhooks.common.event", constants.PLURAL)
+                }), /*#__PURE__*/jsxRuntime.jsx(formik$1.FieldArray, {
+                  name: "events",
+                  render: function render(arrayHelpers) {
+                    return /*#__PURE__*/jsxRuntime.jsx(EventCheckbox, {
+                      arrayHelpers: arrayHelpers,
+                      events: events,
+                      values: values,
+                      onEventsChange: function onEventsChange() {
+                        return setFieldTouched("events", true);
+                      }
+                    });
+                  }
+                }), /*#__PURE__*/jsxRuntime.jsx(formik$1.ErrorMessage, {
+                  name: "events",
+                  render: function render(msg) {
+                    return /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "neeto-ui-text-error-800 text-xs mt-1",
+                      "data-testid": "event-error-text",
+                      children: msg
+                    });
+                  }
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Footer, {
+            children: /*#__PURE__*/jsxRuntime.jsx(formik.ActionBlock, {
+              cancelButtonProps: {
+                onClick: onClose
+              },
+              submitButtonProps: {
+                disabled: isWebhookExpiredOrDeprecated || !isValid || editingWebhookId && !dirty
+              }
+            })
+          })]
+        })]
+      });
+    }
+  });
+};
+
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Header = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    breadcrumbs = _ref.breadcrumbs,
+    title = _ref.title,
+    titleHelpPopoverProps = _ref.titleHelpPopoverProps,
+    setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen,
+    headerSize = _ref.headerSize,
+    webhooks = _ref.webhooks,
+    webhooksHelpLink = _ref.webhooksHelpLink;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header$2, {
+      breadcrumbs: breadcrumbs,
+      size: headerSize,
+      title: title || t("neetoWebhooks.webhook.title"),
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "add-new-webhook-button",
+        label: t("neetoWebhooks.webhook.add"),
+        onClick: function onClick() {
+          return setIsAddWebhookPaneOpen(true);
+        }
+      }),
+      titleHelpPopoverProps: _objectSpread({
+        description: t("neetoWebhooks.webhook.helpDescription"),
+        helpLinkProps: {
+          href: webhooksHelpLink
+        },
+        title: t("neetoWebhooks.webhook.title")
+      }, titleHelpPopoverProps)
+    }), neetoCist.isNotEmpty(webhooks) && /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
+      leftActionBlock: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        as: "h4",
+        variant: "h4",
+        children: t("neetoWebhooks.common.webhookWithCount", {
+          count: webhooks.length
+        })
+      })
+    })]
+  });
+});
+var Header$1 = /*#__PURE__*/react.memo(Header);
+
+var Webhooks = function Webhooks(_ref) {
+  var deliveriesPath = _ref.deliveriesPath,
+    entityType = _ref.entityType,
+    breadcrumbs = _ref.breadcrumbs,
+    title = _ref.title,
+    titleHelpPopoverProps = _ref.titleHelpPopoverProps,
+    entityId = _ref.entityId,
+    onCreate = _ref.onCreate,
+    onDelete = _ref.onDelete,
+    headerSize = _ref.headerSize,
+    _ref$containerClassNa = _ref.containerClassName,
+    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
+    webhooksHelpLink = _ref.webhooksHelpLink,
+    secretsHelpLink = _ref.secretsHelpLink;
+  var _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    editingWebhookId = _useState2[0],
+    setEditingWebhookId = _useState2[1];
+  var _useState3 = react.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deletingWebhookId = _useState4[0],
+    setDeletingWebhookId = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isAddWebhookPaneOpen = _useState6[0],
+    setIsAddWebhookPaneOpen = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isDeleteAlertOpen = _useState8[0],
+    setIsDeleteAlertOpen = _useState8[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? constants.DEFAULT_PAGE_INDEX : _useQueryParams$page;
+  var _useFetchWebhooks = main.useFetchWebhooks({
+      entityId: entityId,
+      page: page,
+      pageSize: constants.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,
+    _useFetchWebhooks$dat4 = _useFetchWebhooks$dat2.totalCount,
+    totalCount = _useFetchWebhooks$dat4 === void 0 ? 0 : _useFetchWebhooks$dat4;
+  var _useDestroyWebhook = main.useDestroyWebhook({
+      onSuccess: function onSuccess() {
+        setIsDeleteAlertOpen(false);
+        onDelete === null || onDelete === void 0 || onDelete();
+      }
+    }),
+    isDeleting = _useDestroyWebhook.isPending,
+    destroyWebhook = _useDestroyWebhook.mutate;
+  var handlePaneClose = function handlePaneClose() {
+    setEditingWebhookId(null);
+    setIsAddWebhookPaneOpen(false);
+  };
+  var handleEdit = react.useCallback(function (id) {
+    setEditingWebhookId(id);
+    setIsAddWebhookPaneOpen(true);
+  }, []);
+  var handleDelete = react.useCallback(function (id) {
+    setDeletingWebhookId(id);
+    setIsDeleteAlertOpen(true);
+  }, []);
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-center items-center w-full h-screen",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    className: containerClassName,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header$1, {
+      breadcrumbs: breadcrumbs,
+      headerSize: headerSize,
+      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
+      title: title,
+      titleHelpPopoverProps: titleHelpPopoverProps,
+      webhooks: webhooks,
+      webhooksHelpLink: webhooksHelpLink
+    }), neetoCist.isNotEmpty(webhooks) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+      hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DataTable, {
+        totalCount: totalCount,
+        currentPage: Number(page),
+        data: webhooks,
+        loading: isFetching,
+        pageSize: constants.DEFAULT_PAGE_SIZE,
+        columns: buildColumns({
+          handleDelete: handleDelete,
+          handleEdit: handleEdit,
+          deliveriesPath: deliveriesPath
+        })
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-center items-center w-full h-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Empty, {
+        title: t("neetoWebhooks.webhook.empty"),
+        description: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          href: webhooksHelpLink,
+          label: t("neetoWebhooks.webhook.emptyHelpText"),
+          rel: "noreferrer",
+          target: "_blank",
+          variant: "link"
+        }),
+        primaryButtonProps: {
+          label: t("neetoWebhooks.webhook.add"),
+          onClick: function onClick() {
+            return setIsAddWebhookPaneOpen(true);
+          }
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(AddWebhookPane, {
+      editingWebhookId: editingWebhookId,
+      entityId: entityId,
+      entityType: entityType,
+      onCreate: onCreate,
+      secretsHelpLink: secretsHelpLink,
+      webhooks: webhooks,
+      webhooksHelpLink: webhooksHelpLink,
+      isOpen: isAddWebhookPaneOpen,
+      onClose: handlePaneClose
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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);
+
+var NeetoWebhooks = function NeetoWebhooks(_ref) {
+  var entityType = _ref.entityType,
+    entityId = _ref.entityId,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    title = _ref.title,
+    titleHelpPopoverProps = _ref.titleHelpPopoverProps,
+    onCreate = _ref.onCreate,
+    onDelete = _ref.onDelete,
+    headerSize = _ref.headerSize,
+    containerClassName = _ref.containerClassName,
+    _ref$helpLinkUrls = _ref.helpLinkUrls,
+    helpLinkUrls = _ref$helpLinkUrls === void 0 ? {} : _ref$helpLinkUrls;
+  var _useRouteMatch = reactRouterDom.useRouteMatch(),
+    webhooksPath = _useRouteMatch.path,
+    webhooksUrl = _useRouteMatch.url;
+  var deliveriesPath = main.getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = main.getDeliveryDetailsPath(deliveriesPath);
+  var helpLinks = ramda.mergeRight(main.HELP_LINK_URLS, helpLinkUrls);
+  return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      exact: true,
+      path: webhooksPath,
+      component: function component() {
+        return /*#__PURE__*/jsxRuntime.jsx(Webhooks$1, {
+          breadcrumbs: breadcrumbs,
+          containerClassName: containerClassName,
+          deliveriesPath: deliveriesPath,
+          entityId: entityId,
+          entityType: entityType,
+          headerSize: headerSize,
+          onCreate: onCreate,
+          onDelete: onDelete,
+          title: title,
+          titleHelpPopoverProps: titleHelpPopoverProps,
+          secretsHelpLink: helpLinks.secrets,
+          webhooksHelpLink: helpLinks.webhooks
+        });
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      exact: true,
+      path: deliveryDetailsPath,
+      render: function render() {
+        return /*#__PURE__*/jsxRuntime.jsx(Deliveries$1, {
+          breadcrumbs: breadcrumbs,
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
+        });
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      path: deliveriesPath,
+      render: function render() {
+        return /*#__PURE__*/jsxRuntime.jsx(Deliveries$1, {
+          breadcrumbs: breadcrumbs,
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
+        });
+      }
+    })]
+  });
+};
+
+module.exports = NeetoWebhooks;
+//# sourceMappingURL=NeetoWebhooks.js.map