@bigbinary/neeto-webhooks-frontend 3.0.12 → 3.0.14

package/dist/cjs/v2/NeetoWebhooks.js

@@ -1,14 +1,16 @@
 'use strict';
 
+var react = require('react');
 var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
-var main = require('../../main-B8V9tERH.js');
+var main = require('../../main-CuEMguMt.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var lucideReact = require('lucide-react');
 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');
@@ -21,11 +23,9 @@ 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');
@@ -79,7 +79,7 @@ var Snippet = function Snippet(_ref) {
     _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",
+    className: "my-2 whitespace-pre-wrap break-all rounded-lg border border-border bg-muted p-4",
     "data-testid": dataTestid,
     children: children
   });
@@ -104,97 +104,98 @@ var TransactionDetails = function TransactionDetails(_ref) {
       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
-          })]
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "sticky top-0 mb-2 flex w-full flex-col bg-background",
+    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",
+          "data-testid": "delivery-sid",
+          variant: "body2",
+          weight: "bold",
+          children: sid
         })]
-      }), /*#__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, {
+      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex items-center space-x-1",
+        children: [t("neetoWebhooks.delivery.deliveryId"), ":", /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "px-2",
+          "data-testid": "delivery-identifier",
+          variant: "body2",
+          weight: "bold",
+          children: identifier
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex items-center",
+        children: [t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "px-2",
+          "data-testid": "delivery-response-code",
+          variant: "body2",
+          weight: "bold",
+          children: responseStatusCode
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+          variant: status === "success" ? "green" : "amber",
+          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: /*#__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, {
+          children: t("neetoWebhooks.delivery.request")
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Item, {
           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
-              })]
-            })]
-          })
+          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
+            })]
+          })]
+        })
       })]
-    })
+    })]
   });
 };
 
@@ -240,15 +241,14 @@ var Details = function Details(_ref) {
         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.jsxs(neetoAtoms.Sheet.Title, {
             children: [/*#__PURE__*/jsxRuntime.jsx(DateFormat.Date, {
               date: delivery.createdAt,
               tooltipProps: {
                 disabled: true
               },
               typographyProps: {
-                variant: "h2",
-                weight: "semibold"
+                variant: null
               }
             }), /*#__PURE__*/jsxRuntime.jsx("span", {
               children: " \u2022 "
@@ -258,7 +258,7 @@ var Details = function Details(_ref) {
                 disabled: true
               },
               typographyProps: {
-                variant: "h2",
+                variant: null,
                 weight: "normal"
               }
             })]
@@ -299,14 +299,16 @@ var buildColumns$1 = function buildColumns(_ref) {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex items-center gap-x-3",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          className: "min-w-0 shrink justify-start text-left [&>span]:min-w-0 [&>span>span]:truncate",
+          title: delivery.identifier,
           variant: "link",
           to: utils.buildUrl(deliveryDetailsPath, {
             deliveryId: delivery.sid,
             page: page
           }),
-          weight: "semibold",
           children: delivery.identifier
         }), delivery.redelivery && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+          className: "shrink-0",
           variant: "blue",
           children: i18next.t("neetoWebhooks.delivery.redelivery")
         })]
@@ -319,13 +321,8 @@ var buildColumns$1 = function buildColumns(_ref) {
     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()
-          })
-        })
+      return /*#__PURE__*/jsxRuntime.jsx(DateFormat.DateTime, {
+        date: getValue()
       });
     }
   }, {
@@ -338,14 +335,13 @@ var buildColumns$1 = function buildColumns(_ref) {
         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, {
+        className: "flex items-center gap-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
           variant: status === "success" ? "green" : "amber",
           children: status
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          variant: "body2",
+          children: responseStatusCode
         })]
       });
     }
@@ -435,6 +431,7 @@ var Deliveries = function Deliveries(_ref) {
       className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Empty, {
         description: t("neetoWebhooks.delivery.empty.description"),
+        icon: lucideReact.Send,
         title: t("neetoWebhooks.delivery.empty.title")
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Details, {
@@ -627,17 +624,16 @@ var buildColumns = function buildColumns(_ref6) {
         getValue = _ref7.getValue;
       var webhook = row.original;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center justify-between space-x-3",
+        className: "flex items-center justify-between gap-3 w-full",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-          variant: "link",
+          className: "min-w-0 justify-start text-left [&>span]:min-w-0 [&>span>span]:truncate shrink",
+          title: getValue(),
           to: utils.buildUrl(deliveriesPath, {
             webhookId: webhook.sid
           }),
+          variant: "link",
           children: getValue()
         }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
-          dropdownButtonProps: {
-            className: "me-1 my-1"
-          },
           menuItems: getMenuItems({
             onEdit: function onEdit() {
               return handleEdit(webhook.id);
@@ -685,10 +681,11 @@ var buildColumns = function buildColumns(_ref6) {
             variant: "amber",
             children: "deprecated"
           })]
-        }), timeMessage && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "text-xs neeto-ui-text-gray-600",
+        }), timeMessage && /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
+          color: "muted",
+          variant: "caption",
           children: [timeMessage, ".", " ", /*#__PURE__*/jsxRuntime.jsx("a", {
-            className: "text-blue-600 hover:text-blue-800 underline",
+            className: "text-primary underline decoration-primary/40 underline-offset-4 hover:decoration-primary",
             href: webhook.defaultVersionPayloadDocUrl,
             rel: "noopener noreferrer",
             target: "_blank",
@@ -702,8 +699,8 @@ var buildColumns = function buildColumns(_ref6) {
     accessorKey: "events",
     header: i18next.t("neetoWebhooks.common.event", constants.PLURAL),
     size: 300,
-    cell: function cell(_ref10) {
-      var getValue = _ref10.getValue;
+    cell: function cell(_ref0) {
+      var getValue = _ref0.getValue;
       return /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "whitespace-normal",
         children: ramda.pluck("label", getValue()).sort().join(", ")
@@ -818,21 +815,19 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
         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",
+        size: "large",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Title, {
+            className: "flex items-center gap-2",
             "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")
-          })]
+            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",
@@ -844,22 +839,26 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "w-full space-y-4 md:space-y-6",
               children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-                className: "mb-2",
+                className: "mb-4",
                 variant: "body2",
                 children: t("neetoWebhooks.webhook.postRequestIsSentToEndpointURL")
               }), /*#__PURE__*/jsxRuntime.jsx(formik.Textarea, {
                 required: true,
+                className: "[&_textarea]:[field-sizing:content]!",
                 "data-testid": "endpoint-input-field",
                 label: t("neetoWebhooks.webhook.endpoint"),
                 name: "endpoint",
                 placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
                 ref: endpointRef,
-                rows: 1
+                resize: "none",
+                size: "small"
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "space-y-2",
-                children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Label, {
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
                   className: "flex items-center gap-x-2",
-                  children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+                  children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
+                    children: t("neetoWebhooks.webhook.secret")
+                  }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
                     helpLinkProps: {
                       href: secretsHelpLink
                     },
@@ -922,9 +921,11 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 }), /*#__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",
+                    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                      className: "mt-1",
+                      color: "destructive",
                       "data-testid": "event-error-text",
+                      variant: "caption",
                       children: msg
                     });
                   }
@@ -979,8 +980,8 @@ var Header = reactUtils.withT(function (_ref) {
       }, titleHelpPopoverProps)
     }), neetoCist.isNotEmpty(webhooks) && /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
       leftActionBlock: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-        as: "h4",
-        variant: "h4",
+        as: "h6",
+        variant: "h6",
         children: t("neetoWebhooks.common.webhookWithCount", {
           count: webhooks.length
         })
@@ -1091,6 +1092,7 @@ var Webhooks = function Webhooks(_ref) {
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Empty, {
+        icon: lucideReact.Webhook,
         title: t("neetoWebhooks.webhook.empty"),
         description: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
           href: webhooksHelpLink,
@@ -1155,6 +1157,12 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
   var _useRouteMatch = reactRouterDom.useRouteMatch(),
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
+  react.useEffect(function () {
+    return main.validateEntityProps({
+      entityId: entityId,
+      entityType: entityType
+    });
+  }, [entityId, entityType]);
   var deliveriesPath = main.getDeliveriesPath(webhooksUrl);
   var deliveryDetailsPath = main.getDeliveryDetailsPath(deliveriesPath);
   var helpLinks = ramda.mergeRight(main.HELP_LINK_URLS, helpLinkUrls);