@bigbinary/neeto-webhooks-frontend 3.0.11 → 3.0.12

package/dist/v2/NeetoWebhooks.js

@@ -0,0 +1,1184 @@
+import { pluck, assoc, mergeRight } from 'ramda';
+import { useRouteMatch, useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
+import { q as queryClient, u as useRedeliverWebhook, a as useShowDelivery, b as useFetchDeliveries, g as getDeliveriesPath, c as getDeliveryDetailsPath, d as useUpdateWebhook, v as v4, e as useCreateWebhook, f as useShowWebhook, h as useFetchEvents, i as useFetchWebhooks, j as useDestroyWebhook, H as HELP_LINK_URLS } from '../main-CfvmjDDj.js';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { isPresent, removeBy, isNotEmpty, findIndexBy, removeById, findBy } from '@bigbinary/neeto-cist';
+import { SINGULAR, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/v2/constants';
+import { useQueryParams, withT } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { buildUrl } from '@bigbinary/neeto-commons-frontend/v2/utils';
+import { Typography, Badge, Tabs, Sheet, Spinner, Button, DataTable, Empty, Checkbox, Switch, Label, Alert } from '@bigbinary/neeto-atoms';
+import Container from '@bigbinary/neeto-molecules/v2/Container';
+import Header$2 from '@bigbinary/neeto-molecules/v2/Header';
+import TableWrapper from '@bigbinary/neeto-molecules/v2/TableWrapper';
+import { useTranslation } from 'react-i18next';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import DateFormat from '@bigbinary/neeto-molecules/v2/DateFormat';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useMemo, useEffect, memo, useCallback } from 'react';
+import { t } from 'i18next';
+import { Form, Textarea, Input, ActionBlock } from '@bigbinary/neeto-atoms/formik';
+import { FieldArray, ErrorMessage } from 'formik';
+import { Plus } from 'lucide-react';
+import HelpPopover from '@bigbinary/neeto-molecules/v2/HelpPopover';
+import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
+import * as yup from 'yup';
+import SubHeader from '@bigbinary/neeto-molecules/v2/SubHeader';
+import '@bigbinary/neeto-commons-frontend/initializers';
+import '@bigbinary/neeto-commons-frontend/constants';
+import 'axios';
+import '@bigbinary/neeto-commons-frontend/react-utils';
+
+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__*/jsxs(QueryClientProvider, {
+      client: queryClient,
+      children: [/*#__PURE__*/jsx(Component, _objectSpread$3({}, props)), /*#__PURE__*/jsx(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__*/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 = useState(DELIVERY_TAB.request),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeHeader = _useState2[0],
+    setActiveHeader = _useState2[1];
+  var _useTranslation = 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__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-bg-white sticky top-0 mb-2 flex w-full flex-col",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col space-y-2 pb-4",
+        children: [/*#__PURE__*/jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.sid"), ":", /*#__PURE__*/jsx(Typography, {
+            className: "px-2 font-bold",
+            "data-testid": "delivery-sid",
+            variant: "body2",
+            children: sid
+          })]
+        }), /*#__PURE__*/jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.deliveryId"), ":", /*#__PURE__*/jsx(Typography, {
+            className: "px-2 font-bold",
+            "data-testid": "delivery-identifier",
+            variant: "body2",
+            children: identifier
+          })]
+        }), /*#__PURE__*/jsxs("span", {
+          className: "flex items-center",
+          children: [t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/jsx(Typography, {
+            className: "px-2 font-bold",
+            "data-testid": "delivery-response-code",
+            variant: "body2",
+            children: responseStatusCode
+          }), /*#__PURE__*/jsx(Badge, {
+            variant: status === "success" ? "green-subtle" : "amber-subtle",
+            children: status
+          })]
+        })]
+      }), /*#__PURE__*/jsxs(Tabs, {
+        value: activeHeader,
+        onValueChange: setActiveHeader,
+        children: [/*#__PURE__*/jsxs(Tabs.List, {
+          children: [/*#__PURE__*/jsx(Tabs.Item, {
+            value: DELIVERY_TAB.request,
+            children: t("neetoWebhooks.delivery.request")
+          }), /*#__PURE__*/jsx(Tabs.Item, {
+            value: DELIVERY_TAB.response,
+            children: t("neetoWebhooks.delivery.response")
+          })]
+        }), /*#__PURE__*/jsx(Tabs.Content, {
+          value: DELIVERY_TAB.request,
+          children: /*#__PURE__*/jsxs("div", {
+            className: "mt-2 w-full space-y-4",
+            children: [/*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx(Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.header")
+              }), /*#__PURE__*/jsx(Snippet, {
+                dataTestid: "delivery-request-header",
+                children: delivery.requestHeader
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx(Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.payload")
+              }), /*#__PURE__*/jsx(Snippet, {
+                dataTestid: "delivery-request-payload",
+                children: renderPayload()
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsx(Tabs.Content, {
+          value: DELIVERY_TAB.response,
+          children: /*#__PURE__*/jsxs("div", {
+            className: "mt-2 w-full space-y-4",
+            children: [/*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx(Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.header")
+              }), /*#__PURE__*/jsx(Snippet, {
+                dataTestid: "delivery-response-header",
+                children: delivery.responseHeader
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx(Typography, {
+                variant: "h5",
+                children: t("neetoWebhooks.delivery.body")
+              }), /*#__PURE__*/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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useRedeliverWebhook = useRedeliverWebhook(deliveryId, webhookSid),
+    isRedelivering = _useRedeliverWebhook.isPending,
+    redeliverWebhook = _useRedeliverWebhook.mutateAsync;
+  var _useShowDelivery = 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__*/jsx(Sheet, {
+    onClose: onClose,
+    isOpen: isPresent(deliveryId),
+    size: "large",
+    children: /*#__PURE__*/jsx(Fragment, {
+      children: isLoading ? /*#__PURE__*/jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsx(Spinner, {})
+      }) : /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Sheet.Header, {
+          children: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(DateFormat.Date, {
+              date: delivery.createdAt,
+              tooltipProps: {
+                disabled: true
+              },
+              typographyProps: {
+                variant: "h2",
+                weight: "semibold"
+              }
+            }), /*#__PURE__*/jsx("span", {
+              children: " \u2022 "
+            }), /*#__PURE__*/jsx(DateFormat.Time, {
+              date: delivery.createdAt,
+              tooltipProps: {
+                disabled: true
+              },
+              typographyProps: {
+                variant: "h2",
+                weight: "normal"
+              }
+            })]
+          })
+        }), /*#__PURE__*/jsx(Sheet.Body, {
+          children: isPresent(delivery) && /*#__PURE__*/jsx(TransactionDetails, {
+            delivery: delivery
+          })
+        }), /*#__PURE__*/jsxs(Sheet.Footer, {
+          className: "gap-x-2",
+          children: [(delivery === null || delivery === void 0 ? void 0 : delivery.eventId) && /*#__PURE__*/jsx(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__*/jsx(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: t("neetoWebhooks.delivery.deliveryId"),
+    size: 390,
+    cell: function cell(_ref2) {
+      var row = _ref2.row;
+      var delivery = row.original;
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          variant: "link",
+          to: buildUrl(deliveryDetailsPath, {
+            deliveryId: delivery.sid,
+            page: page
+          }),
+          weight: "semibold",
+          children: delivery.identifier
+        }), delivery.redelivery && /*#__PURE__*/jsx(Badge, {
+          variant: "blue",
+          children: t("neetoWebhooks.delivery.redelivery")
+        })]
+      });
+    }
+  }, {
+    id: "createdAt",
+    accessorKey: "createdAt",
+    header: t("neetoWebhooks.tableHeaders.createdAt"),
+    size: 280,
+    cell: function cell(_ref3) {
+      var getValue = _ref3.getValue;
+      return /*#__PURE__*/jsx("div", {
+        className: "flex items-center justify-between space-x-1",
+        children: /*#__PURE__*/jsx(Typography, {
+          children: /*#__PURE__*/jsx(DateFormat.DateTime, {
+            date: getValue()
+          })
+        })
+      });
+    }
+  }, {
+    id: "responseStatusCode",
+    header: 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__*/jsxs("span", {
+        className: "flex items-center",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "px-2",
+          variant: "body2",
+          children: responseStatusCode
+        }), /*#__PURE__*/jsx(Badge, {
+          variant: status === "success" ? "green" : "amber",
+          children: status
+        })]
+      });
+    }
+  }, {
+    id: "event",
+    accessorKey: "event",
+    header: t("neetoWebhooks.common.event", 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$1 = function Deliveries(_ref) {
+  var webhooksUrl = _ref.webhooksUrl,
+    hostBreadcrumbs = _ref.breadcrumbs,
+    helpLink = _ref.helpLink;
+  var _useRouteMatch = useRouteMatch(),
+    deliveriesUrl = _useRouteMatch.url;
+  var history = useHistory();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useParams = useParams(),
+    webhookId = _useParams.webhookId,
+    deliveryId = _useParams.deliveryId;
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? DEFAULT_PAGE_INDEX : _useQueryParams$page;
+  var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesUrl);
+  var _useFetchDeliveries = useFetchDeliveries(webhookId, {
+      page: page,
+      pageSize: 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 = 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__*/jsx("div", {
+      className: "flex justify-center items-center w-full h-screen",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxs(Container, {
+    className: "w-full",
+    children: [/*#__PURE__*/jsx(Header$2, {
+      breadcrumbs: breadcrumbs,
+      title: t("neetoWebhooks.delivery.title"),
+      titleHelpPopoverProps: {
+        title: t("neetoWebhooks.delivery.title"),
+        description: t("neetoWebhooks.delivery.helpDescription"),
+        helpLinkProps: {
+          href: helpLink
+        }
+      }
+    }), isNotEmpty(deliveries) ? /*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: totalCount > DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsx(DataTable, {
+        totalCount: totalCount,
+        columns: buildColumns$1({
+          deliveryDetailsPath: deliveryDetailsPath,
+          page: page
+        }),
+        currentPage: Number(page),
+        data: deliveries,
+        loading: isFetching,
+        pageSize: DEFAULT_PAGE_SIZE
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex justify-center items-center w-full h-full",
+      children: /*#__PURE__*/jsx(Empty, {
+        description: t("neetoWebhooks.delivery.empty.description"),
+        title: t("neetoWebhooks.delivery.empty.title")
+      })
+    }), /*#__PURE__*/jsx(Details, {
+      deliveryId: deliveryId,
+      webhookSid: webhookId,
+      onClose: function onClose() {
+        return history.replace(buildUrl(deliveriesPath, {
+          webhookId: webhookId,
+          page: page
+        }));
+      }
+    })]
+  });
+};
+var Deliveries = withReactQuery(Deliveries$1);
+
+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__*/jsx("div", {
+    children: events.map(function (event) {
+      var _values$events;
+      var index = findIndexBy(event, (_values$events = values.events) !== null && _values$events !== void 0 ? _values$events : []);
+      var isSelected = index > -1;
+      return /*#__PURE__*/jsx(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 = useState(isActive),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var previousStatusRef = useRef(isActive);
+  var _useUpdateWebhook = 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__*/jsx(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: t("neetoWebhooks.buttons.edit"),
+    "data-testid": "neeto-webhooks-edit-button",
+    onClick: onEdit
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: t("neetoWebhooks.buttons.delete"),
+    "data-testid": "neeto-webhooks-delete-button",
+    onClick: onDelete
+  }];
+};
+var getValidationSchema = function getValidationSchema(webhooks) {
+  return yup.object().shape({
+    endpoint: yup.string().trim().matches(/^(https?):\/\//i, t("neetoWebhooks.errors.webhook.invalidUrlProtocol")).url(t("neetoWebhooks.errors.webhook.invalidUrl")).required(t("neetoWebhooks.errors.webhook.required")).test("Is endpoint unique", t("neetoWebhooks.errors.webhook.urlNotUnique"), function (endpoint, ctx) {
+      return !pluck("endpoint", removeById(ctx.parent.id, webhooks)).includes(endpoint === null || endpoint === void 0 ? void 0 : endpoint.trim());
+    }),
+    events: yup.array()["default"]([]).min(1, t("neetoWebhooks.errors.webhook.events.required")),
+    secret: yup.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 !findBy({
+      identifier: identifier
+    }, values.events);
+  }).map(assoc("_destroy", true));
+  var creatable = values.events.filter(function (_ref5) {
+    var identifier = _ref5.identifier;
+    return !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 t("neetoWebhooks.webhook.versionStatus.expiresIn.days", {
+      count: diffDays
+    });
+  }
+  var remainingHours = diffHours;
+  var remainingMinutes = Math.floor(diffMs % (1000 * 60 * 60) / (1000 * 60));
+  return 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 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: t("neetoWebhooks.common.endpoint"),
+    size: 700,
+    cell: function cell(_ref7) {
+      var row = _ref7.row,
+        getValue = _ref7.getValue;
+      var webhook = row.original;
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between space-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          variant: "link",
+          to: buildUrl(deliveriesPath, {
+            webhookId: webhook.sid
+          }),
+          children: getValue()
+        }), /*#__PURE__*/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: t("neetoWebhooks.webhook.active"),
+    size: 150,
+    cell: function cell(_ref8) {
+      var row = _ref8.row,
+        getValue = _ref8.getValue;
+      return /*#__PURE__*/jsx(ToggleActiveSwitch, {
+        isActive: getValue(),
+        webhookId: row.original.id
+      });
+    }
+  }, {
+    id: "version",
+    accessorKey: "version",
+    header: 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__*/jsxs("div", {
+        className: "flex flex-col space-y-1",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsx("span", {
+            children: getValue()
+          }), webhook.versionExpired && /*#__PURE__*/jsx(Badge, {
+            variant: "red",
+            children: "expired"
+          }), webhook.versionDeprecated && !webhook.versionExpired && /*#__PURE__*/jsx(Badge, {
+            variant: "amber",
+            children: "deprecated"
+          })]
+        }), timeMessage && /*#__PURE__*/jsxs("div", {
+          className: "text-xs neeto-ui-text-gray-600",
+          children: [timeMessage, ".", " ", /*#__PURE__*/jsx("a", {
+            className: "text-blue-600 hover:text-blue-800 underline",
+            href: webhook.defaultVersionPayloadDocUrl,
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: t("neetoWebhooks.webhook.versionStatus.moreDetails")
+          }), "."]
+        })]
+      });
+    }
+  }, {
+    id: "events",
+    accessorKey: "events",
+    header: t("neetoWebhooks.common.event", PLURAL),
+    size: 300,
+    cell: function cell(_ref10) {
+      var getValue = _ref10.getValue;
+      return /*#__PURE__*/jsx("span", {
+        className: "whitespace-normal",
+        children: pluck("label", getValue()).sort().join(", ")
+      });
+    }
+  }];
+};
+var generateRandomSecret = function generateRandomSecret() {
+  return 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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSecretInputFieldVisible = _useState2[0],
+    setIsSecretInputFieldVisible = _useState2[1];
+  var _useCreateWebhook = useCreateWebhook({
+      onSuccess: function onSuccess() {
+        onClose();
+        onCreate === null || onCreate === void 0 || onCreate();
+      }
+    }),
+    createWebhook = _useCreateWebhook.mutate;
+  var _useShowWebhook = 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 = useUpdateWebhook(editingWebhookId, {
+      onSuccess: onClose
+    }),
+    updateWebhook = _useUpdateWebhook.mutate;
+  var endpointRef = useRef();
+  var _useFetchEvents = useFetchEvents(),
+    _useFetchEvents$data = _useFetchEvents.data,
+    events = _useFetchEvents$data === void 0 ? [] : _useFetchEvents$data,
+    isLoading = _useFetchEvents.isLoading;
+  var initialValues = 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);
+  };
+  useEffect(function () {
+    if (webhook !== null && webhook !== void 0 && webhook.secret) {
+      setIsSecretInputFieldVisible(true);
+    }
+  }, [webhook]);
+  return /*#__PURE__*/jsx(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__*/jsxs(Sheet, {
+        isOpen: isOpen,
+        onClose: onClose,
+        initialFocusRef: endpointRef,
+        children: [/*#__PURE__*/jsxs(Sheet.Header, {
+          className: "flex items-center gap-x-2",
+          children: [/*#__PURE__*/jsx(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__*/jsx(HelpPopover, {
+            description: t("neetoWebhooks.webhook.helpDescription"),
+            helpLinkProps: {
+              href: webhooksHelpLink
+            },
+            title: t("neetoWebhooks.webhook.title")
+          })]
+        }), isLoading ? /*#__PURE__*/jsx(Sheet.Body, {
+          children: /*#__PURE__*/jsx("div", {
+            className: "flex items-center justify-center",
+            children: /*#__PURE__*/jsx(Spinner, {})
+          })
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Sheet.Body, {
+            className: "pb-6",
+            children: /*#__PURE__*/jsxs("div", {
+              className: "w-full space-y-4 md:space-y-6",
+              children: [/*#__PURE__*/jsx(Typography, {
+                className: "mb-2",
+                variant: "body2",
+                children: t("neetoWebhooks.webhook.postRequestIsSentToEndpointURL")
+              }), /*#__PURE__*/jsx(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__*/jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxs(Label, {
+                  className: "flex items-center gap-x-2",
+                  children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
+                    helpLinkProps: {
+                      href: secretsHelpLink
+                    },
+                    popoverProps: {
+                      position: "bottom"
+                    },
+                    title: t("neetoWebhooks.webhook.secretkeyHelpTitle"),
+                    description: t("neetoWebhooks.webhook.secretkeyHelpDescription")
+                  })]
+                }), isSecretInputFieldVisible ? /*#__PURE__*/jsxs("div", {
+                  className: "flex items-center justify-between space-x-2",
+                  children: [/*#__PURE__*/jsx(Input, {
+                    "data-testid": "secret-key-input-field",
+                    name: "secret",
+                    placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
+                  }), /*#__PURE__*/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__*/jsx(Button, {
+                  "data-testid": "add-secret-key",
+                  icon: Plus,
+                  iconPosition: "left",
+                  label: t("neetoWebhooks.buttons.generateSecretKey"),
+                  variant: "link",
+                  onClick: function onClick() {
+                    return handleClick(setFieldValue);
+                  }
+                })]
+              }), /*#__PURE__*/jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsx(Label, {
+                  required: true,
+                  children: t("neetoWebhooks.common.event", PLURAL)
+                }), /*#__PURE__*/jsx(FieldArray, {
+                  name: "events",
+                  render: function render(arrayHelpers) {
+                    return /*#__PURE__*/jsx(EventCheckbox, {
+                      arrayHelpers: arrayHelpers,
+                      events: events,
+                      values: values,
+                      onEventsChange: function onEventsChange() {
+                        return setFieldTouched("events", true);
+                      }
+                    });
+                  }
+                }), /*#__PURE__*/jsx(ErrorMessage, {
+                  name: "events",
+                  render: function render(msg) {
+                    return /*#__PURE__*/jsx("div", {
+                      className: "neeto-ui-text-error-800 text-xs mt-1",
+                      "data-testid": "event-error-text",
+                      children: msg
+                    });
+                  }
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsx(Sheet.Footer, {
+            children: /*#__PURE__*/jsx(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$1 = 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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Header$2, {
+      breadcrumbs: breadcrumbs,
+      size: headerSize,
+      title: title || t("neetoWebhooks.webhook.title"),
+      actionBlock: /*#__PURE__*/jsx(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)
+    }), isNotEmpty(webhooks) && /*#__PURE__*/jsx(SubHeader, {
+      leftActionBlock: /*#__PURE__*/jsx(Typography, {
+        as: "h4",
+        variant: "h4",
+        children: t("neetoWebhooks.common.webhookWithCount", {
+          count: webhooks.length
+        })
+      })
+    })]
+  });
+});
+var Header = /*#__PURE__*/memo(Header$1);
+
+var Webhooks$1 = 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 = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    editingWebhookId = _useState2[0],
+    setEditingWebhookId = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deletingWebhookId = _useState4[0],
+    setDeletingWebhookId = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isAddWebhookPaneOpen = _useState6[0],
+    setIsAddWebhookPaneOpen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isDeleteAlertOpen = _useState8[0],
+    setIsDeleteAlertOpen = _useState8[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? DEFAULT_PAGE_INDEX : _useQueryParams$page;
+  var _useFetchWebhooks = useFetchWebhooks({
+      entityId: entityId,
+      page: page,
+      pageSize: 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 = 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 = useCallback(function (id) {
+    setEditingWebhookId(id);
+    setIsAddWebhookPaneOpen(true);
+  }, []);
+  var handleDelete = useCallback(function (id) {
+    setDeletingWebhookId(id);
+    setIsDeleteAlertOpen(true);
+  }, []);
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex justify-center items-center w-full h-screen",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxs(Container, {
+    className: containerClassName,
+    children: [/*#__PURE__*/jsx(Header, {
+      breadcrumbs: breadcrumbs,
+      headerSize: headerSize,
+      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
+      title: title,
+      titleHelpPopoverProps: titleHelpPopoverProps,
+      webhooks: webhooks,
+      webhooksHelpLink: webhooksHelpLink
+    }), isNotEmpty(webhooks) ? /*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: totalCount > DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsx(DataTable, {
+        totalCount: totalCount,
+        currentPage: Number(page),
+        data: webhooks,
+        loading: isFetching,
+        pageSize: DEFAULT_PAGE_SIZE,
+        columns: buildColumns({
+          handleDelete: handleDelete,
+          handleEdit: handleEdit,
+          deliveriesPath: deliveriesPath
+        })
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex justify-center items-center w-full h-full",
+      children: /*#__PURE__*/jsx(Empty, {
+        title: t("neetoWebhooks.webhook.empty"),
+        description: /*#__PURE__*/jsx(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__*/jsx(AddWebhookPane, {
+      editingWebhookId: editingWebhookId,
+      entityId: entityId,
+      entityType: entityType,
+      onCreate: onCreate,
+      secretsHelpLink: secretsHelpLink,
+      webhooks: webhooks,
+      webhooksHelpLink: webhooksHelpLink,
+      isOpen: isAddWebhookPaneOpen,
+      onClose: handlePaneClose
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoWebhooks.buttons.delete"),
+      message: t("neetoWebhooks.alert.delete.message", {
+        entity: t("neetoWebhooks.entity.webhook")
+      }),
+      title: t("neetoWebhooks.alert.delete.title", {
+        entity: t("neetoWebhooks.entity.webhook")
+      }),
+      onClose: function onClose() {
+        return setIsDeleteAlertOpen(false);
+      },
+      onSubmit: function onSubmit() {
+        return destroyWebhook(deletingWebhookId, {
+          entityId: entityId
+        });
+      }
+    })]
+  });
+};
+var Webhooks = withReactQuery(Webhooks$1);
+
+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 = useRouteMatch(),
+    webhooksPath = _useRouteMatch.path,
+    webhooksUrl = _useRouteMatch.url;
+  var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
+  var helpLinks = mergeRight(HELP_LINK_URLS, helpLinkUrls);
+  return /*#__PURE__*/jsxs(Switch$1, {
+    children: [/*#__PURE__*/jsx(Route, {
+      exact: true,
+      path: webhooksPath,
+      component: function component() {
+        return /*#__PURE__*/jsx(Webhooks, {
+          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__*/jsx(Route, {
+      exact: true,
+      path: deliveryDetailsPath,
+      render: function render() {
+        return /*#__PURE__*/jsx(Deliveries, {
+          breadcrumbs: breadcrumbs,
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
+        });
+      }
+    }), /*#__PURE__*/jsx(Route, {
+      path: deliveriesPath,
+      render: function render() {
+        return /*#__PURE__*/jsx(Deliveries, {
+          breadcrumbs: breadcrumbs,
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
+        });
+      }
+    })]
+  });
+};
+
+export { NeetoWebhooks as default };
+//# sourceMappingURL=NeetoWebhooks.js.map