@bigbinary/neeto-webhooks-frontend 2.2.15 → 2.2.17

package/README.md

@@ -82,6 +82,7 @@ The engine is used to manage webhooks across neeto products.
 You can learn more about the setup and usage here:
 
 1. [Models](/docs/engine/models.md)
+2. [Webhook Versioning Implementation](/docs/webhook-versioning.md)
 
 ## Frontend package
 

package/app/javascript/src/translations/de.json

@@ -19,7 +19,8 @@
       "edit": "Bearbeiten",
       "viewDetails": "Details anzeigen",
       "regenerate": "Neu generieren",
-      "generateSecretKey": "Geheimen Schlüssel generieren"
+      "generateSecretKey": "Geheimen Schlüssel generieren",
+      "save": "Speichern"
     },
     "errors": {
       "webhook": {
@@ -72,7 +73,25 @@
         "inactive": "Inaktiv"
       },
       "statusActiveHelpDescription": "Das Webhook ist derzeit aktiv. Umschalten, um es inaktiv zu machen.",
-      "statusInactiveHelpDescription": "Das Webhook ist derzeit inaktiv. Umschalten, um es aktiv zu machen."
+      "statusInactiveHelpDescription": "Das Webhook ist derzeit inaktiv. Umschalten, um es aktiv zu machen.",
+      "version": "Version",
+      "versionStatus": {
+        "expired": {
+          "title": "Webhook Abgelaufen",
+          "message": "Diese Webhook-Version ist abgelaufen und kann nicht bearbeitet werden. Nur die Löschung ist erlaubt."
+        },
+        "deprecated": {
+          "title": "Webhook Veraltet",
+          "message": "Diese Webhook-Version ist veraltet und kann nicht bearbeitet werden. Nur die Löschung ist erlaubt."
+        },
+        "expiresIn": {
+          "days": "Läuft in {{count}} Tag ab",
+          "days_other": "Läuft in {{count}} Tagen ab",
+          "hoursAndMinutes": "Läuft in {{hours}} Stunde{{hoursPlural}} und {{minutes}} Minute{{minutesPlural}} ab"
+        },
+        "expiredOn": "Abgelaufen am {{date}}",
+        "moreDetails": "Mehr Details."
+      }
     },
     "operation": {
       "edit": "Bearbeiten",

package/app/javascript/src/translations/en.json

@@ -13,6 +13,7 @@
       "configure": "Configure"
     },
     "buttons": {
+      "save": "Save",
       "saveChanges": "Save changes",
       "cancel": "Cancel",
       "delete": "Delete",
@@ -72,7 +73,25 @@
         "inactive": "Inactive"
       },
       "statusActiveHelpDescription": "The webhook is currently active. Toggle to make it inactive.",
-      "statusInactiveHelpDescription": "The webhook is currently inactive. Toggle to make it active."
+      "statusInactiveHelpDescription": "The webhook is currently inactive. Toggle to make it active.",
+      "version": "Version",
+      "versionStatus": {
+        "expired": {
+          "title": "Webhook Expired",
+          "message": "This webhook version has expired and cannot be edited. Only deletion is allowed."
+        },
+        "deprecated": {
+          "title": "Webhook Deprecated",
+          "message": "This webhook version is deprecated and cannot be edited. Only deletion is allowed."
+        },
+        "expiresIn": {
+          "days": "Expires in {{count}} day",
+          "days_other": "Expires in {{count}} days",
+          "hoursAndMinutes": "Expires in {{hours}} hour{{hoursPlural}} and {{minutes}} minute{{minutesPlural}}"
+        },
+        "expiredOn": "Expired on {{date}}",
+        "moreDetails": "More details."
+      }
     },
     "operation": {
       "edit": "Edit",

package/app/javascript/src/translations/es.json

@@ -19,7 +19,8 @@
       "edit": "Editar",
       "viewDetails": "Ver detalles",
       "regenerate": "Regenerar",
-      "generateSecretKey": "Generar clave secreta"
+      "generateSecretKey": "Generar clave secreta",
+      "save": "Guardar"
     },
     "errors": {
       "webhook": {
@@ -72,7 +73,25 @@
         "inactive": "Inactivo"
       },
       "statusActiveHelpDescription": "El webhook está actualmente activo. Cambie para hacerlo inactivo.",
-      "statusInactiveHelpDescription": "El webhook está actualmente inactivo. Cambie para hacerlo activo."
+      "statusInactiveHelpDescription": "El webhook está actualmente inactivo. Cambie para hacerlo activo.",
+      "version": "Versión",
+      "versionStatus": {
+        "expired": {
+          "title": "Webhook Expirado",
+          "message": "Esta versión del webhook ha expirado y no se puede editar. Solo se permite la eliminación."
+        },
+        "deprecated": {
+          "title": "Webhook En Desuso",
+          "message": "Esta versión del webhook está en desuso y no se puede editar. Solo se permite la eliminación."
+        },
+        "expiresIn": {
+          "days": "Expira en {{count}} día",
+          "days_other": "Expira en {{count}} días",
+          "hoursAndMinutes": "Expira en {{hours}} hora{{hoursPlural}} y {{minutes}} minuto{{minutesPlural}}"
+        },
+        "expiredOn": "Expirado el {{date}}",
+        "moreDetails": "Más detalles."
+      }
     },
     "operation": {
       "edit": "Editar",

package/app/javascript/src/translations/fr.json

@@ -19,7 +19,8 @@
       "edit": "Modifier",
       "viewDetails": "Voir les détails",
       "regenerate": "Régénérer",
-      "generateSecretKey": "Générer une clé secrète"
+      "generateSecretKey": "Générer une clé secrète",
+      "save": "Enregistrer"
     },
     "errors": {
       "webhook": {
@@ -72,7 +73,25 @@
         "inactive": "Inactif"
       },
       "statusActiveHelpDescription": "Le webhook est actuellement actif. Basculez pour le rendre inactif.",
-      "statusInactiveHelpDescription": "Le webhook est actuellement inactif. Basculez pour le rendre actif."
+      "statusInactiveHelpDescription": "Le webhook est actuellement inactif. Basculez pour le rendre actif.",
+      "version": "Version",
+      "versionStatus": {
+        "expired": {
+          "title": "Webhook expiré",
+          "message": "Cette version de webhook a expiré et ne peut pas être modifiée. Seule la suppression est autorisée."
+        },
+        "deprecated": {
+          "title": "Webhook obsolète",
+          "message": "Cette version de webhook est obsolète et ne peut pas être modifiée. Seule la suppression est autorisée."
+        },
+        "expiresIn": {
+          "days": "Expire dans {{count}} jour",
+          "days_other": "Expire dans {{count}} jours",
+          "hoursAndMinutes": "Expire dans {{hours}} heure{{hoursPlural}} et {{minutes}} minute{{minutesPlural}}"
+        },
+        "expiredOn": "Expiré le {{date}}",
+        "moreDetails": "Plus de détails."
+      }
     },
     "operation": {
       "edit": "Modifier",

package/dist/NeetoWebhooks.js

@@ -275,6 +275,7 @@ var TransactionDetails = function TransactionDetails(_ref) {
 };
 
 var Details = function Details(_ref) {
+  var _delivery$webhook;
   var onClose = _ref.onClose,
     deliveryId = _ref.deliveryId,
     webhookSid = _ref.webhookSid;
@@ -345,7 +346,7 @@ var Details = function Details(_ref) {
         }), /*#__PURE__*/jsxs(Pane.Footer, {
           className: "gap-x-2",
           children: [(delivery === null || delivery === void 0 ? void 0 : delivery.eventId) && /*#__PURE__*/jsx(Button, {
-            disabled: isRedelivering,
+            disabled: isRedelivering || ((_delivery$webhook = delivery.webhook) === null || _delivery$webhook === void 0 ? void 0 : _delivery$webhook.versionExpired),
             label: t("neetoWebhooks.delivery.redeliver"),
             loading: isRedelivering,
             style: "primary",
@@ -584,6 +585,10 @@ var useUpdateWebhook = function useUpdateWebhook(id, options) {
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
       options === null || options === void 0 || (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 || _options$onSuccess2.call(options);
+    },
+    onError: function onError(error) {
+      var _options$onError;
+      options === null || options === void 0 || (_options$onError = options.onError) === null || _options$onError === void 0 || _options$onError.call(options, error);
     }
   });
 };
@@ -722,10 +727,22 @@ var ToggleActiveSwitch = function ToggleActiveSwitch(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     status = _useState2[0],
     setStatus = _useState2[1];
-  var _useUpdateWebhook = useUpdateWebhook(webhookId),
+  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(event) {
     var updatedStatus = event.target.checked;
+    // Store the current status as previous before changing
+    previousStatusRef.current = status;
     setStatus(updatedStatus);
     updateWebhook({
       id: webhookId,
@@ -796,6 +813,35 @@ var buildPayload = function buildPayload(_ref2) {
     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$1("neetoWebhooks.webhook.versionStatus.expiresIn.days", {
+      count: diffDays
+    });
+  }
+  var remainingHours = diffHours;
+  var remainingMinutes = Math.floor(diffMs % (1000 * 60 * 60) / (1000 * 60));
+  return t$1("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$1("neetoWebhooks.webhook.versionStatus.expiredOn", {
+    date: expiry.toLocaleDateString()
+  });
+};
 var buildColumns = function buildColumns(_ref6) {
   var handleDelete = _ref6.handleDelete,
     handleEdit = _ref6.handleEdit,
@@ -840,6 +886,38 @@ var buildColumns = function buildColumns(_ref6) {
       });
     },
     width: 150
+  }, {
+    title: t$1("neetoWebhooks.webhook.version"),
+    dataIndex: "version",
+    key: "version",
+    render: function render(version, webhook) {
+      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: version
+          }), webhook.versionExpired && /*#__PURE__*/jsx(Tag, {
+            label: "expired",
+            style: "danger"
+          }), webhook.versionDeprecated && !webhook.versionExpired && /*#__PURE__*/jsx(Tag, {
+            label: "deprecated",
+            style: "warning"
+          })]
+        }), 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$1("neetoWebhooks.webhook.versionStatus.moreDetails")
+          }), "."]
+        })]
+      });
+    },
+    width: 200
   }, {
     title: t$1("neetoWebhooks.common.event", PLURAL),
     dataIndex: "events",
@@ -898,7 +976,12 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
   var initialValues = editingWebhookId ? _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), webhook) : _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), {}, {
     events: 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,
@@ -1041,6 +1124,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                         values: values
                       }), touched.events && errors.events && /*#__PURE__*/jsx("div", {
                         className: "neeto-ui-text-error-800 text-xs mt-1",
+                        "data-cy": "event-error-text",
                         children: errors.events
                       })]
                     });
@@ -1052,6 +1136,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
             children: /*#__PURE__*/jsx(ActionBlock, {
               cancelButtonProps: {
                 onClick: onClose
+              },
+              submitButtonProps: {
+                disabled: isWebhookExpiredOrDeprecated
               }
             })
           })]