@bigbinary/neeto-webhooks-frontend 1.5.4 → 1.5.5

package/dist/index.cjs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactRouterDom = require('react-router-dom');
 var classNames = require('classnames');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
@@ -15,7 +16,6 @@ var reactQuery = require('react-query');
 var devtools = require('react-query/devtools');
 var axios = require('axios');
 var formik = require('@bigbinary/neetoui/formik');
-var pure = require('@bigbinary/neeto-commons-frontend/pure');
 var yup = require('yup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -2308,7 +2308,7 @@ instance.reloadResources;
 instance.use;
 instance.changeLanguage;
 instance.getFixedT;
-const t$1 = instance.t;
+const t$2 = instance.t;
 instance.exists;
 instance.setDefaultNamespace;
 instance.hasLoadedNamespace;
@@ -2319,6 +2319,32 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
+/**
+ * This file automatically generated from `pre-publish.js`.
+ * Do not manually edit.
+ */
+
+var voidElements = {
+  "area": true,
+  "base": true,
+  "br": true,
+  "col": true,
+  "embed": true,
+  "hr": true,
+  "img": true,
+  "input": true,
+  "link": true,
+  "meta": true,
+  "param": true,
+  "source": true,
+  "track": true,
+  "wbr": true
+};
+
+var e$1 = /*@__PURE__*/getDefaultExportFromCjs(voidElements);
+
+var t$1=/\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;function n$1(n){var r={type:"tag",name:"",voidElement:!1,attrs:{},children:[]},i=n.match(/<\/?([^\s]+?)[/\s>]/);if(i&&(r.name=i[1],(e$1[i[1]]||"/"===n.charAt(n.length-2))&&(r.voidElement=!0),r.name.startsWith("!--"))){var s=n.indexOf("--\x3e");return {type:"comment",comment:-1!==s?n.slice(4,s):""}}for(var a=new RegExp(t$1),c=null;null!==(c=a.exec(n));)if(c[0].trim())if(c[1]){var o=c[1].trim(),l=[o,""];o.indexOf("=")>-1&&(l=o.split("=")),r.attrs[l[0]]=l[1],a.lastIndex--;}else c[2]&&(r.attrs[c[2]]=c[3].trim().substring(1,c[3].length-1));return r}var r=/<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,i=/^\s*$/,s=Object.create(null);function a(e,t){switch(t.type){case"text":return e+t.content;case"tag":return e+="<"+t.name+(t.attrs?function(e){var t=[];for(var n in e)t.push(n+'="'+e[n]+'"');return t.length?" "+t.join(" "):""}(t.attrs):"")+(t.voidElement?"/>":">"),t.voidElement?e:e+t.children.reduce(a,"")+"</"+t.name+">";case"comment":return e+"\x3c!--"+t.comment+"--\x3e"}}var c={parse:function(e,t){t||(t={}),t.components||(t.components=s);var a,c=[],o=[],l=-1,m=!1;if(0!==e.indexOf("<")){var u=e.indexOf("<");c.push({type:"text",content:-1===u?e:e.substring(0,u)});}return e.replace(r,function(r,s){if(m){if(r!=="</"+a.name+">")return;m=!1;}var u,f="/"!==r.charAt(1),h=r.startsWith("\x3c!--"),p=s+r.length,d=e.charAt(p);if(h){var v=n$1(r);return l<0?(c.push(v),c):((u=o[l]).children.push(v),c)}if(f&&(l++,"tag"===(a=n$1(r)).type&&t.components[a.name]&&(a.type="component",m=!0),a.voidElement||m||!d||"<"===d||a.children.push({type:"text",content:e.slice(p,e.indexOf("<",p))}),0===l&&c.push(a),(u=o[l-1])&&u.children.push(a),o[l]=a),(!f||a.voidElement)&&(l>-1&&(a.voidElement||a.name===r.slice(2,-1))&&(l--,a=-1===l?c:o[l]),!m&&"<"!==d&&d)){u=-1===l?c:o[l].children;var x=e.indexOf("<",p),g=e.slice(p,-1===x?void 0:x);i.test(g)&&(g=" "),(x>-1&&l+u.length>=0||" "!==g)&&u.push({type:"text",content:g});}}),c},stringify:function(e){return e.reduce(function(e,t){return e+a("",t)},"")}};
+
 function warn() {
   if (console && console.warn) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -2449,6 +2475,244 @@ function getI18n() {
   return i18nInstance;
 }
 
+function hasChildren(node, checkLength) {
+  if (!node) return false;
+  const base = node.props ? node.props.children : node.children;
+  if (checkLength) return base.length > 0;
+  return !!base;
+}
+function getChildren(node) {
+  if (!node) return [];
+  return node.props ? node.props.children : node.children;
+}
+function hasValidReactChildren(children) {
+  if (Object.prototype.toString.call(children) !== '[object Array]') return false;
+  return children.every(child => React.isValidElement(child));
+}
+function getAsArray(data) {
+  return Array.isArray(data) ? data : [data];
+}
+function mergeProps(source, target) {
+  const newTarget = {
+    ...target
+  };
+  newTarget.props = Object.assign(source.props, target.props);
+  return newTarget;
+}
+function nodesToString(children, i18nOptions) {
+  if (!children) return '';
+  let stringNode = '';
+  const childrenArray = getAsArray(children);
+  const keepArray = i18nOptions.transSupportBasicHtmlNodes && i18nOptions.transKeepBasicHtmlNodesFor ? i18nOptions.transKeepBasicHtmlNodesFor : [];
+  childrenArray.forEach((child, childIndex) => {
+    if (typeof child === 'string') {
+      stringNode += `${child}`;
+    } else if (React.isValidElement(child)) {
+      const childPropsCount = Object.keys(child.props).length;
+      const shouldKeepChild = keepArray.indexOf(child.type) > -1;
+      const childChildren = child.props.children;
+      if (!childChildren && shouldKeepChild && childPropsCount === 0) {
+        stringNode += `<${child.type}/>`;
+      } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {
+        stringNode += `<${childIndex}></${childIndex}>`;
+      } else if (child.props.i18nIsDynamicList) {
+        stringNode += `<${childIndex}></${childIndex}>`;
+      } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {
+        stringNode += `<${child.type}>${childChildren}</${child.type}>`;
+      } else {
+        const content = nodesToString(childChildren, i18nOptions);
+        stringNode += `<${childIndex}>${content}</${childIndex}>`;
+      }
+    } else if (child === null) {
+      warn(`Trans: the passed in value is invalid - seems you passed in a null child.`);
+    } else if (typeof child === 'object') {
+      const {
+        format,
+        ...clone
+      } = child;
+      const keys = Object.keys(clone);
+      if (keys.length === 1) {
+        const value = format ? `${keys[0]}, ${format}` : keys[0];
+        stringNode += `{{${value}}}`;
+      } else {
+        warn(`react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.`, child);
+      }
+    } else {
+      warn(`Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.`, child);
+    }
+  });
+  return stringNode;
+}
+function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {
+  if (targetString === '') return [];
+  const keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
+  const emptyChildrenButNeedsHandling = targetString && new RegExp(keepArray.join('|')).test(targetString);
+  if (!children && !emptyChildrenButNeedsHandling) return [targetString];
+  const data = {};
+  function getData(childs) {
+    const childrenArray = getAsArray(childs);
+    childrenArray.forEach(child => {
+      if (typeof child === 'string') return;
+      if (hasChildren(child)) getData(getChildren(child));else if (typeof child === 'object' && !React.isValidElement(child)) Object.assign(data, child);
+    });
+  }
+  getData(children);
+  const ast = c.parse(`<0>${targetString}</0>`);
+  const opts = {
+    ...data,
+    ...combinedTOpts
+  };
+  function renderInner(child, node, rootReactNode) {
+    const childs = getChildren(child);
+    const mappedChildren = mapAST(childs, node.children, rootReactNode);
+    return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;
+  }
+  function pushTranslatedJSX(child, inner, mem, i, isVoid) {
+    if (child.dummy) child.children = inner;
+    mem.push(React.cloneElement(child, {
+      ...child.props,
+      key: i
+    }, isVoid ? undefined : inner));
+  }
+  function mapAST(reactNode, astNode, rootReactNode) {
+    const reactNodes = getAsArray(reactNode);
+    const astNodes = getAsArray(astNode);
+    return astNodes.reduce((mem, node, i) => {
+      const translationContent = node.children && node.children[0] && node.children[0].content && i18n.services.interpolator.interpolate(node.children[0].content, opts, i18n.language);
+      if (node.type === 'tag') {
+        let tmp = reactNodes[parseInt(node.name, 10)];
+        if (!tmp && rootReactNode.length === 1 && rootReactNode[0][node.name]) tmp = rootReactNode[0][node.name];
+        if (!tmp) tmp = {};
+        const child = Object.keys(node.attrs).length !== 0 ? mergeProps({
+          props: node.attrs
+        }, tmp) : tmp;
+        const isElement = React.isValidElement(child);
+        const isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
+        const isEmptyTransWithHTML = emptyChildrenButNeedsHandling && typeof child === 'object' && child.dummy && !isElement;
+        const isKnownComponent = typeof children === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
+        if (typeof child === 'string') {
+          const value = i18n.services.interpolator.interpolate(child, opts, i18n.language);
+          mem.push(value);
+        } else if (hasChildren(child) || isValidTranslationWithChildren) {
+          const inner = renderInner(child, node, rootReactNode);
+          pushTranslatedJSX(child, inner, mem, i);
+        } else if (isEmptyTransWithHTML) {
+          const inner = mapAST(reactNodes, node.children, rootReactNode);
+          mem.push(React.cloneElement(child, {
+            ...child.props,
+            key: i
+          }, inner));
+        } else if (Number.isNaN(parseFloat(node.name))) {
+          if (isKnownComponent) {
+            const inner = renderInner(child, node, rootReactNode);
+            pushTranslatedJSX(child, inner, mem, i, node.voidElement);
+          } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+            if (node.voidElement) {
+              mem.push(React.createElement(node.name, {
+                key: `${node.name}-${i}`
+              }));
+            } else {
+              const inner = mapAST(reactNodes, node.children, rootReactNode);
+              mem.push(React.createElement(node.name, {
+                key: `${node.name}-${i}`
+              }, inner));
+            }
+          } else if (node.voidElement) {
+            mem.push(`<${node.name} />`);
+          } else {
+            const inner = mapAST(reactNodes, node.children, rootReactNode);
+            mem.push(`<${node.name}>${inner}</${node.name}>`);
+          }
+        } else if (typeof child === 'object' && !isElement) {
+          const content = node.children[0] ? translationContent : null;
+          if (content) mem.push(content);
+        } else if (node.children.length === 1 && translationContent) {
+          mem.push(React.cloneElement(child, {
+            ...child.props,
+            key: i
+          }, translationContent));
+        } else {
+          mem.push(React.cloneElement(child, {
+            ...child.props,
+            key: i
+          }));
+        }
+      } else if (node.type === 'text') {
+        const wrapTextNodes = i18nOptions.transWrapTextNodes;
+        const content = shouldUnescape ? i18nOptions.unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
+        if (wrapTextNodes) {
+          mem.push(React.createElement(wrapTextNodes, {
+            key: `${node.name}-${i}`
+          }, content));
+        } else {
+          mem.push(content);
+        }
+      }
+      return mem;
+    }, []);
+  }
+  const result = mapAST([{
+    dummy: true,
+    children: children || []
+  }], ast, getAsArray(children || []));
+  return getChildren(result[0]);
+}
+function Trans$1(_ref) {
+  let {
+    children,
+    count,
+    parent,
+    i18nKey,
+    context,
+    tOptions = {},
+    values,
+    defaults,
+    components,
+    ns,
+    i18n: i18nFromProps,
+    t: tFromProps,
+    shouldUnescape,
+    ...additionalProps
+  } = _ref;
+  const i18n = i18nFromProps || getI18n();
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using i18nextReactModule');
+    return children;
+  }
+  const t = tFromProps || i18n.t.bind(i18n) || (k => k);
+  if (context) tOptions.context = context;
+  const reactI18nextOptions = {
+    ...getDefaults(),
+    ...(i18n.options && i18n.options.react)
+  };
+  let namespaces = ns || t.ns || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  const defaultValue = defaults || nodesToString(children, reactI18nextOptions) || reactI18nextOptions.transEmptyNodeValue || i18nKey;
+  const {
+    hashTransKey
+  } = reactI18nextOptions;
+  const key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
+  const interpolationOverride = values ? tOptions.interpolation : {
+    interpolation: {
+      ...tOptions.interpolation,
+      prefix: '#$?',
+      suffix: '?$#'
+    }
+  };
+  const combinedTOpts = {
+    ...tOptions,
+    count,
+    ...values,
+    ...interpolationOverride,
+    defaultValue,
+    ns: namespaces
+  };
+  const translation = key ? t(key, combinedTOpts) : defaultValue;
+  const content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);
+  const useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
+  return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content;
+}
+
 const initReactI18next = {
   type: '3rdParty',
   init(instance) {
@@ -2472,6 +2736,47 @@ class ReportNamespaces {
   }
 }
 
+function Trans(_ref) {
+  let {
+    children,
+    count,
+    parent,
+    i18nKey,
+    context,
+    tOptions = {},
+    values,
+    defaults,
+    components,
+    ns,
+    i18n: i18nFromProps,
+    t: tFromProps,
+    shouldUnescape,
+    ...additionalProps
+  } = _ref;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = React.useContext(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  const t = tFromProps || i18n && i18n.t.bind(i18n);
+  return Trans$1({
+    children,
+    count,
+    parent,
+    i18nKey,
+    context,
+    tOptions,
+    values,
+    defaults,
+    components,
+    ns: ns || t && t.ns || defaultNSFromContext || i18n && i18n.options && i18n.options.defaultNS,
+    i18n,
+    t: tFromProps,
+    shouldUnescape,
+    ...additionalProps
+  });
+}
+
 const usePrevious = (value, ignore) => {
   const ref = React.useRef();
   React.useEffect(() => {
@@ -2616,7 +2921,7 @@ var webhook = {
 	add: "Add new webhook",
 	endpoint: "Endpoint",
 	endpointPlaceholder: "Enter endpoint URL",
-	secret: "Secret key",
+	secret: "Secret key (optional) <helpLink><info></helpLink>",
 	secretPlaceholder: "Enter secret key",
 	edit: "Edit Webhook"
 };
@@ -3252,14 +3557,12 @@ var DeliveryItem = function DeliveryItem(_ref) {
 };
 
 var Deliveries = function Deliveries(_ref) {
-  var webhooksPath = _ref.webhooksPath,
+  var webhooksUrl = _ref.webhooksUrl,
     hostBreadcrumbs = _ref.breadcrumbs;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useParams = reactRouterDom.useParams(),
-    webhookId = _useParams.webhookId,
-    id = _useParams.id,
-    formId = _useParams.formId;
+    webhookId = _useParams.webhookId;
   var _useFetchDeliveries = useFetchDeliveries(webhookId),
     isLoading = _useFetchDeliveries.isLoading,
     _useFetchDeliveries$d = _useFetchDeliveries.data,
@@ -3287,11 +3590,11 @@ var Deliveries = function Deliveries(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  var breadcrumbs = [].concat(_toConsumableArray(hostBreadcrumbs), [{
-    link: utils.buildUrl(webhooksPath, {
-      id: id,
-      formId: formId
-    }),
+  var breadcrumbsWithoutWebhooksTitle = pure.removeBy({
+    text: t("webhook.title")
+  }, hostBreadcrumbs);
+  var breadcrumbs = [].concat(_toConsumableArray(breadcrumbsWithoutWebhooksTitle), [{
+    link: webhooksUrl,
     text: t("webhook.title")
   }, {
     link: window.location.pathname,
@@ -3482,12 +3785,12 @@ function _defineProperty(obj, key, value) {
 
 var WEBHOOK_HELP_URL = "https://help.neetocal.com/articles/webhook";
 
-var VALIDATION_SCHEMA = function VALIDATION_SCHEMA(webhooks) {
+var getValidationSchema = function getValidationSchema(webhooks) {
   return yup__namespace.object().shape({
-    endpoint: yup__namespace.string().trim().matches(/^(https?):\/\//i, t$1("errors.webhook.invalidUrlProtocol")).url(t$1("errors.webhook.invalidUrl")).required(t$1("errors.webhook.required")).test("Is endpoint unique", t$1("errors.webhook.urlNotUnique"), function (endpoint, ctx) {
+    endpoint: yup__namespace.string().trim().matches(/^(https?):\/\//i, t$2("errors.webhook.invalidUrlProtocol")).url(t$2("errors.webhook.invalidUrl")).required(t$2("errors.webhook.required")).test("Is endpoint unique", t$2("errors.webhook.urlNotUnique"), function (endpoint, ctx) {
       return !ramda.pluck("endpoint", pure.removeById(ctx.parent.id, webhooks)).includes(endpoint === null || endpoint === void 0 ? void 0 : endpoint.trim());
     }),
-    secret: yup__namespace.string().trim()
+    secret: yup__namespace.string().trim().nullable()
   });
 };
 
@@ -3553,10 +3856,10 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
   }))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     formikProps: {
       enableReinitialize: true,
-      validationSchema: VALIDATION_SCHEMA(webhooks),
+      validationSchema: getValidationSchema(webhooks),
       initialValues: initialValues,
       onSubmit: function onSubmit(values) {
-        return handleSubmit(VALIDATION_SCHEMA().cast(values));
+        return handleSubmit(getValidationSchema().cast(values));
       }
     }
   }, function (_ref2) {
@@ -3573,9 +3876,22 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       ref: endpointRef
     }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       "data-cy": "secret-key-input-field",
-      label: t("webhook.secret"),
       name: "secret",
-      placeholder: t("webhook.secretPlaceholder")
+      placeholder: t("webhook.secretPlaceholder"),
+      label: /*#__PURE__*/React__default["default"].createElement(Trans, {
+        i18nKey: "webhook.secret",
+        components: {
+          helpLink: /*#__PURE__*/React__default["default"].createElement("a", {
+            href: WEBHOOK_HELP_URL,
+            rel: "noreferrer",
+            target: "_blank"
+          }),
+          info: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
+            className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
+            size: 20
+          })
+        }
+      })
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "flex gap-2"
     }, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
@@ -3625,16 +3941,11 @@ var WebhookItem = function WebhookItem(_ref) {
     onDeleteClick = _ref.onDeleteClick,
     onEditClick = _ref.onEditClick,
     deliveriesPath = _ref.deliveriesPath;
-  var _useParams = reactRouterDom.useParams(),
-    id = _useParams.id,
-    formId = _useParams.formId;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
     className: "neeto-ui-rounded-lg neeto-ui-border-gray-300 flex cursor-pointer items-center justify-between gap-4 border px-4 py-2",
     to: utils.buildUrl(deliveriesPath, {
-      id: id,
-      formId: formId,
       webhookId: webhook.id
     })
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -3662,7 +3973,6 @@ var WebhookItem = function WebhookItem(_ref) {
 var WebhookItem$1 = /*#__PURE__*/React__default["default"].memo(WebhookItem);
 
 var Webhooks = function Webhooks(_ref) {
-  var _ref2;
   var deliveriesPath = _ref.deliveriesPath,
     entityType = _ref.entityType,
     breadcrumbs = _ref.breadcrumbs,
@@ -3685,11 +3995,7 @@ var Webhooks = function Webhooks(_ref) {
     setIsDeleteAlertOpen = _useState8[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useParams = reactRouterDom.useParams(),
-    id = _useParams.id,
-    formId = _useParams.formId;
-  var backwardCompatibleEntityId = (_ref2 = entityId !== null && entityId !== void 0 ? entityId : id) !== null && _ref2 !== void 0 ? _ref2 : formId;
-  var _useFetchWebhooks = useFetchWebhooks(backwardCompatibleEntityId),
+  var _useFetchWebhooks = useFetchWebhooks(entityId),
     isLoading = _useFetchWebhooks.isLoading,
     _useFetchWebhooks$dat = _useFetchWebhooks.data,
     _useFetchWebhooks$dat2 = _useFetchWebhooks$dat === void 0 ? {} : _useFetchWebhooks$dat,
@@ -3740,7 +4046,7 @@ var Webhooks = function Webhooks(_ref) {
     title: t("webhook.empty")
   }))), /*#__PURE__*/React__default["default"].createElement(AddWebhookPane, {
     editingWebhookId: editingWebhookId,
-    entityId: backwardCompatibleEntityId,
+    entityId: entityId,
     entityType: entityType,
     isOpen: isAddWebhookPaneOpen,
     webhooks: webhooks,
@@ -3771,8 +4077,9 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs;
   var _useRouteMatch = reactRouterDom.useRouteMatch(),
-    webhooksPath = _useRouteMatch.path;
-  var deliveriesPath = getDeliveriesPath(webhooksPath);
+    webhooksPath = _useRouteMatch.path,
+    webhooksUrl = _useRouteMatch.url;
+  var deliveriesPath = getDeliveriesPath(webhooksUrl);
   return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
     exact: true,
     path: webhooksPath,
@@ -3789,7 +4096,7 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     component: function component() {
       return /*#__PURE__*/React__default["default"].createElement(Deliveries$1, {
         breadcrumbs: breadcrumbs,
-        webhooksPath: webhooksPath
+        webhooksUrl: webhooksUrl
       });
     }
   }));