Add button for webhook re-registration on the Connection page

dist/resources/css/sequra-core.css

@@ -1381,6 +1381,10 @@
 #sequra-page .sq-field-wrapper.sqm--block.sqm--bellow-frame {
   margin-top: 30px;
 }
+#sequra-page .sq-field-wrapper.sqm--block.sqm--bellow-frame .sqm--actions-bar {
+  display: flex;
+  gap: 6px;
+}
 #sequra-page .sq-field-wrapper .items {
   display: flex;
   align-items: center;

dist/resources/js/AdvancedController.js

@@ -303,7 +303,7 @@ if (!window.SequraFE) {
 
             const resetDetails = () => {
                 document.querySelectorAll('.sqm--log-context').forEach(elem => {
-                    elem.style.display = 'none'
+                    elem.style.display = 'none';
                     elem.innerHTML = '';
                 });
                 document.querySelectorAll('.sqm--log-details').forEach(elem => {

dist/resources/js/ConnectionSettingsForm.js

@@ -29,6 +29,7 @@ if (!window.SequraFE) {
      * connectUrl: string,
      * validateConnectionDataUrl: string,
      * disconnectUrl: string,
+     * reRegisterUrl: string,
      * page: string,
      * appState: string
      * }} configuration
@@ -316,15 +317,31 @@ if (!window.SequraFE) {
                 return;
             }
 
-            pageInnerContent?.append(
-                generator.createButtonField({
-                    className: 'sqm--block sqm--bellow-frame',
-                    buttonType: 'danger',
-                    buttonSize: 'medium',
-                    buttonLabel: 'general.disconnect',
-                    onClick: handleDisconnect
-                })
-            );
+            const reRegisterWebhooksButton = generator.createButton({
+                type: 'secondary',
+                size: 'medium',
+                className: '',
+                onClick: handleReRegister,
+                label: 'Re-register webhooks'
+            })
+
+            const disconnectionButton = generator.createButton({
+                type: 'danger',
+                size: 'medium',
+                className: '',
+                onClick: handleDisconnect,
+                label: 'general.disconnect'
+            })
+
+            const actionsBar = generator.createActionsBar(
+                'sqm--block sqm--bellow-frame',
+                [
+                    reRegisterWebhooksButton,
+                    disconnectionButton
+                ]
+            )
+
+            pageInnerContent?.append(actionsBar);
 
             pageContent?.append(
                 generator.createPageFooter({
@@ -555,7 +572,7 @@ if (!window.SequraFE) {
 
                 utilities.showLoader();
 
-                api.post(configuration.disconnectUrl, createPayload(), SequraFE.customHeader)
+                api.post(configuration.disconnectUrl, createDisconnectionPayload(), SequraFE.customHeader)
                     .then(() => SequraFE.state.display())
                     .finally(utilities.hideLoader);
             })
@@ -564,7 +581,37 @@ if (!window.SequraFE) {
         /**
          * Handles the disconnect button click.
          */
-        const createPayload = () => {
+        const handleReRegister = () => {
+            utilities.showLoader();
+
+            api.post(configuration.reRegisterUrl, createReRegisterPayload(), SequraFE.customHeader)
+                .then((response) => {
+                    if (response.isSuccessful) {
+                        SequraFE.responseService.successHandler(
+                            {successMessage: 'connection.webhookReRegistration.successMessage'}
+                        )
+                    } else {
+                        SequraFE.responseService.errorHandler(
+                            {errorMessage: 'connection.webhookReRegistration.errorMessage'}
+                        ).catch(() => {
+                        });
+                    }
+
+                })
+                .catch((error) => {
+                    const errorMessage = String(error && error.message ? error.message : error);
+                    SequraFE.responseService.errorHandler(
+                        {errorMessage: errorMessage}
+                    ).catch(() => {
+                    });
+                })
+                .finally(utilities.hideLoader);
+        }
+
+        /**
+         * Creates connection payload.
+         */
+        const createDisconnectionPayload = () => {
             const isFullDisconnect = activeDeployments.length <= 1;
             const deploymentId = activeDeploymentId;
 
@@ -574,6 +621,22 @@ if (!window.SequraFE) {
             };
         }
 
+        /**
+         * Creates payload for webhook re-registration.
+         */
+        const createReRegisterPayload = () => {
+            const environment = changedSettings.environment ?? 'sandbox';
+            const username = getSettingsForActiveDeployment(changedSettings).username ?? '';
+            const password = getSettingsForActiveDeployment(changedSettings).password ?? '';
+            const deployment = getSettingsForActiveDeployment(changedSettings).deployment ?? '';
+
+            return {
+                environment,
+                username,
+                password,
+                deployment
+            };
+        }
 
         /**
          * Disables the form footer controls.

dist/resources/js/ElementGenerator.js

@@ -438,6 +438,20 @@ if (!window.SequraFE) {
         return createFieldWrapper(buttonLink, label, description, '', error, '');
     };
 
+
+    /**
+     * Adds bar with multiple action buttons.
+     *
+     * @returns HTMLElement
+     */
+    const createActionsBar = (className, children) => {
+        const fieldWrapper = createElement('div', 'sq-field-wrapper ' + className)
+        const inputWrapper = createElement('div', 'sqm--actions-bar', '', null, children);
+        fieldWrapper.append(inputWrapper);
+
+        return fieldWrapper;
+    };
+
     /**
      * Creates multi item selector wrapper around the provided multi item selector element.
      *
@@ -671,7 +685,7 @@ if (!window.SequraFE) {
                 )
             ]
         );
-    }
+    };
 
     SequraFE.elementGenerator = {
         createElement,
@@ -691,6 +705,7 @@ if (!window.SequraFE) {
         createButtonField,
         createButtonLink,
         createButtonLinkField,
+        createActionsBar,
         createMultiItemSelectorField,
         createCountryField,
         createFormFields,

dist/resources/js/GeneralSettingsForm.js

@@ -397,7 +397,7 @@ if (!window.SequraFE) {
                     }
                 }
                 return countriesString ? translate('countries.enabledCountries').replace('{countries}', countriesString) : '';
-            }
+            };
             const descriptionWithCountries = (description, countries) => SequraFE.translationService.translate(description) + countriesString(countries);
 
             const enabledForServiceInput = document.querySelector(`.${classNameEnabledForService} input`);
@@ -430,7 +430,7 @@ if (!window.SequraFE) {
             }
 
             // Update the visibility of the fields.
-            const selector = '.sq-field-wrapper:has(.sq-service-related-field), .sq-field-wrapper.sq-service-related-field'
+            const selector = '.sq-field-wrapper:has(.sq-service-related-field), .sq-field-wrapper.sq-service-related-field';
             const hiddenClass = 'sqs--hidden';
             document.querySelectorAll(selector).forEach((el) => {
                 if (changedGeneralSettings.enabledForServices.length > 0) {

dist/resources/js/ResponseService.js

@@ -36,6 +36,27 @@ if (!window.SequraFE) {
             return Promise.reject(response);
         };
 
+        /**
+         * Handles a success response from the submit action.
+         *
+         * @param {{successMessage?: string}} response
+         * @returns {void}
+         */
+        this.successHandler = (response) => {
+            const {utilities, templateService, elementGenerator} = SequraFE;
+            let container = document.querySelector('.sqp-flash-message-wrapper');
+            if (!container) {
+                container = elementGenerator.createElement('div', 'sqp-flash-message-wrapper');
+                templateService.getMainPage().prepend(container);
+            }
+
+            templateService.clearComponent(container);
+
+            if (response.successMessage) {
+                container.prepend(utilities.createFlashMessage(response.successMessage, 'success'));
+            }
+        };
+
         /**
          * Handles unauthorized response.
          *

dist/resources/js/StateController.js

@@ -280,7 +280,7 @@ SequraFE.appPages = {
                 switch (page) {
                     case SequraFE.appPages.ONBOARDING.COUNTRIES:
                         if (!dataStore.connectionSettings?.connectionData?.every(c => c.username)) {
-                            page = SequraFE.appPages.ONBOARDING.CONNECT
+                            page = SequraFE.appPages.ONBOARDING.CONNECT;
                         }
 
                         if (!dataStore.deploymentsSettings?.some(deployment => deployment.active === true)) {

dist/resources/lang/en.json

@@ -193,6 +193,11 @@
     "disconnect": {
       "title": "Disconnect",
       "message": "Are you sure you want to disconnect?"
+    },
+    "webhookReRegistration": {
+      "title": "Re-register webhooks",
+      "successMessage": "Webhooks were re-registered successfully.",
+      "errorMessage": "Webhooks were not re-registered successfully."
     }
   },
   "deployments": {

dist/resources/lang/es.json

@@ -192,6 +192,11 @@
     "disconnect": {
       "title": "Desconectar",
       "message": "¿Estás seguro de que deseas desconectarte?"
+    },
+    "webhookReRegistration": {
+      "title": "Volver a registrar webhooks",
+      "successMessage": "Los webhooks se registraron nuevamente con éxito.",
+      "errorMessage": "No se pudieron volver a registrar los webhooks."
     }
   },
   "deployments": {

dist/resources/lang/fr.json

@@ -193,6 +193,11 @@
     "disconnect": {
       "title": "Déconnecter",
       "message": "Êtes-vous sûr de vouloir vous déconnecter ?"
+    },
+    "webhookReRegistration": {
+      "title": "Re-enregistrer les webhooks",
+      "successMessage": "Les webhooks ont été réenregistrés avec succès.",
+      "errorMessage": "Les webhooks n’ont pas pu être réenregistrés avec succès."
     }
   },
   "deployments": {

dist/resources/lang/it.json

@@ -193,6 +193,11 @@
     "disconnect": {
       "title": "Disconnetti",
       "message": "Sei sicuro di volerti disconnettere?"
+    },
+    "webhookReRegistration": {
+      "title": "Registrare nuovamente i webhook",
+      "successMessage": "I webhook sono stati registrati nuovamente con successo.",
+      "errorMessage": "Non è stato possibile registrare nuovamente i webhook."
     }
   },
   "deployments": {

dist/resources/lang/pt.json

@@ -194,6 +194,11 @@
     "disconnect": {
       "title": "Desconectar",
       "message": "Tem a certeza de que se quer desconectar?"
+    },
+    "webhookReRegistration": {
+      "title": "Registrar novamente os webhooks",
+      "successMessage": "Os webhooks foram registrados novamente com sucesso.",
+      "errorMessage": "Não foi possível registrar novamente os webhooks."
     }
   },
   "deployments": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sequra-core-admin-fe",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "scripts": {
     "copy-dist-js": "cp ./src/services/* ./src/components/**/*.js ./src/controllers/*.js ./src/forms/*.js ./dist/resources/js",
     "copy-dist-assets": "cp -r ./src/design/assets ./src/lang ./dist/resources",

src/controllers/AdvancedController.js

@@ -303,7 +303,7 @@ if (!window.SequraFE) {
 
             const resetDetails = () => {
                 document.querySelectorAll('.sqm--log-context').forEach(elem => {
-                    elem.style.display = 'none'
+                    elem.style.display = 'none';
                     elem.innerHTML = '';
                 });
                 document.querySelectorAll('.sqm--log-details').forEach(elem => {

src/controllers/StateController.js

@@ -280,7 +280,7 @@ SequraFE.appPages = {
                 switch (page) {
                     case SequraFE.appPages.ONBOARDING.COUNTRIES:
                         if (!dataStore.connectionSettings?.connectionData?.every(c => c.username)) {
-                            page = SequraFE.appPages.ONBOARDING.CONNECT
+                            page = SequraFE.appPages.ONBOARDING.CONNECT;
                         }
 
                         if (!dataStore.deploymentsSettings?.some(deployment => deployment.active === true)) {

src/design/components/field-wrapper.scss

@@ -118,6 +118,11 @@
 
     &.sqm--bellow-frame {
       margin-top: 30px;
+
+      .sqm--actions-bar {
+        display: flex;
+        gap: 6px;
+      }
     }
   }