@bigbinary/neeto-webhooks-frontend 2.2.12 → 2.2.14

package/dist/cjs/NeetoWebhooks.js

@@ -11,6 +11,7 @@ var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var NoData = require('@bigbinary/neetoui/NoData');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var Table = require('@bigbinary/neetoui/Table');
@@ -32,16 +33,18 @@ var Tab = require('@bigbinary/neetoui/Tab');
 var Tag = require('@bigbinary/neetoui/Tag');
 var i18next = require('i18next');
 var Alert = require('@bigbinary/neetoui/Alert');
+var formik = require('formik');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var Label = require('@bigbinary/neetoui/Label');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Form = require('@bigbinary/neetoui/formik/Form');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
-var Select = require('@bigbinary/neetoui/formik/Select');
-var Switch = require('@bigbinary/neetoui/formik/Switch');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var yup = require('yup');
+var Switch = require('@bigbinary/neetoui/Switch');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 
 function _interopNamespaceDefault(e) {
@@ -472,7 +475,6 @@ var Deliveries = function Deliveries(_ref) {
     isFetching = _useFetchDeliveries.isFetching,
     _useFetchDeliveries$d = _useFetchDeliveries.data,
     _useFetchDeliveries$d2 = _useFetchDeliveries$d === void 0 ? {} : _useFetchDeliveries$d,
-    endpoint = _useFetchDeliveries$d2.endpoint,
     totalCount = _useFetchDeliveries$d2.totalCount,
     _useFetchDeliveries$d3 = _useFetchDeliveries$d2.deliveries,
     deliveries = _useFetchDeliveries$d3 === void 0 ? [] : _useFetchDeliveries$d3;
@@ -484,13 +486,10 @@ var Deliveries = function Deliveries(_ref) {
     text: t("neetoWebhooks.webhook.title")
   }, {
     link: window.location.pathname,
-    text: endpoint
+    text: t("neetoWebhooks.delivery.title")
   }]);
   if (isLoading) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
-    });
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader, {});
   }
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     className: "w-full",
@@ -519,7 +518,7 @@ var Deliveries = function Deliveries(_ref) {
         rowData: deliveries
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
+      className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
         description: t("neetoWebhooks.delivery.empty.description"),
         title: t("neetoWebhooks.delivery.empty.title")
@@ -635,6 +634,44 @@ var useFetchEvents = function useFetchEvents() {
   });
 };
 
+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;
+  var handleToggle = function handleToggle(isSelected, index, event) {
+    if (isSelected) {
+      arrayHelpers.remove(index);
+    } else {
+      arrayHelpers.push(event);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: events.map(function (event) {
+      var index = neetoCist.findIndexBy(event, values.events);
+      var isSelected = ramda.gt(index, -1);
+      return /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+        checked: isSelected,
+        className: "my-4",
+        label: event.label,
+        onChange: function onChange() {
+          return handleToggle(isSelected, index, event);
+        }
+      }, event.identifier);
+    })
+  });
+};
+
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -699,9 +736,29 @@ function v4(options, buf, offset) {
   return stringify(rnds);
 }
 
-var MENU_ITEMS = {
-  EDIT: "edit",
-  DELETE: "delete"
+var ToggleActiveSwitch = function ToggleActiveSwitch(_ref) {
+  var isActive = _ref.isActive,
+    webhookId = _ref.webhookId;
+  var _useState = react.useState(isActive),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useUpdateWebhook = useUpdateWebhook(webhookId),
+    updateWebhook = _useUpdateWebhook.mutate;
+  var handleToggle = function handleToggle(event) {
+    var updatedStatus = event.target.checked;
+    setStatus(updatedStatus);
+    updateWebhook({
+      id: webhookId,
+      payload: {
+        isActive: updatedStatus
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Switch, {
+    checked: status,
+    onChange: 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; }
@@ -797,13 +854,10 @@ var buildColumns = function buildColumns(_ref6) {
     title: i18next.t("neetoWebhooks.webhook.active"),
     key: "isActive",
     dataIndex: "isActive",
-    render: function render(isActive) {
-      return isActive ? /*#__PURE__*/jsxRuntime.jsx(Tag, {
-        label: i18next.t("neetoWebhooks.webhook.activeStatuses.active"),
-        style: "primary"
-      }) : /*#__PURE__*/jsxRuntime.jsx(Tag, {
-        label: i18next.t("neetoWebhooks.webhook.activeStatuses.inactive"),
-        style: "danger"
+    render: function render(isActive, webhook) {
+      return /*#__PURE__*/jsxRuntime.jsx(ToggleActiveSwitch, {
+        isActive: isActive,
+        webhookId: webhook.id
       });
     },
     width: 150
@@ -812,7 +866,10 @@ var buildColumns = function buildColumns(_ref6) {
     dataIndex: "events",
     key: "events",
     render: function render(events) {
-      return ramda.pluck("label", events).sort().join(", ");
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "whitespace-normal",
+        children: ramda.pluck("label", events).sort().join(", ")
+      });
     },
     width: 300
   }];
@@ -859,12 +916,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
   var _useFetchEvents = useFetchEvents(),
     events = _useFetchEvents.data,
     isLoading = _useFetchEvents.isLoading;
-  var initialValues = editingWebhookId ? webhook : {
-    endpoint: "",
-    events: events,
-    secret: "",
-    isActive: true
-  };
+  var initialValues = editingWebhookId ? _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), webhook) : _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), {}, {
+    events: events
+  });
   var handleSubmit = function handleSubmit(values) {
     var payload = buildPayload({
       isEditing: editingWebhookId,
@@ -927,7 +981,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       },
       children: function children(_ref2) {
         var setFieldValue = _ref2.setFieldValue,
-          values = _ref2.values;
+          values = _ref2.values,
+          touched = _ref2.touched,
+          errors = _ref2.errors;
         return isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex items-center justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
@@ -944,18 +1000,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
                 ref: endpointRef,
                 rows: 1
-              }), !isLoading && /*#__PURE__*/jsxRuntime.jsx(Select, {
-                isMulti: true,
-                required: true,
-                getOptionLabel: ramda.prop("label"),
-                getOptionValue: ramda.prop("identifier"),
-                label: t("neetoWebhooks.common.event", constants.PLURAL),
-                name: "events",
-                options: events,
-                placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "space-y-2",
-                children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+                children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
                   className: "flex items-center gap-x-2",
                   children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
                     helpLinkProps: {
@@ -1001,15 +1048,24 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                   }
                 })]
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex gap-2",
-                children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
-                  label: t("neetoWebhooks.webhook.active"),
-                  name: "isActive"
-                }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
-                  popoverProps: {
-                    position: "bottom"
-                  },
-                  description: values.isActive ? t("neetoWebhooks.webhook.statusActiveHelpDescription") : t("neetoWebhooks.webhook.statusInactiveHelpDescription")
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+                  required: true,
+                  children: t("neetoWebhooks.common.event", constants.PLURAL)
+                }), !isLoading && /*#__PURE__*/jsxRuntime.jsx(formik.FieldArray, {
+                  name: "events",
+                  render: function render(arrayHelpers) {
+                    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      children: [/*#__PURE__*/jsxRuntime.jsx(EventCheckbox, {
+                        arrayHelpers: arrayHelpers,
+                        events: events,
+                        values: values
+                      }), touched.events && errors.events && /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "neeto-ui-text-error-800 text-xs mt-1",
+                        children: errors.events
+                      })]
+                    });
+                  }
                 })]
               })]
             })
@@ -1138,10 +1194,7 @@ var Webhooks = function Webhooks(_ref) {
     setIsDeleteAlertOpen(true);
   }, []);
   if (isLoading) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
-    });
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader, {});
   }
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     className: containerClassName,
@@ -1169,7 +1222,7 @@ var Webhooks = function Webhooks(_ref) {
         })
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
+      className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
         title: t("neetoWebhooks.webhook.empty"),
         helpText: /*#__PURE__*/jsxRuntime.jsx(Button, {