Merge pull request #406 from 4site-interactive-studios/fix-watch-for-error

Core: Trigger watchForError callbacks from setError

Author: fernanDOTdo

packages/scripts/dist/engrid.d.ts

@@ -54,6 +54,7 @@ export declare abstract class ENGrid {
     static removeHtml(target: string): void;
     static slugify(text: string): string;
     static watchForError(callback: Function): void;
+    private static getErrorCallbackKey;
     static getPaymentType(): string;
     static setPaymentType(paymentType: string): void;
     static isInViewport(element: HTMLElement): boolean;

packages/scripts/dist/engrid.js

@@ -1,3 +1,4 @@
+const errorCallbacks = new Map();
 export class ENGrid {
     constructor() {
         if (!ENGrid.enForm) {
@@ -426,6 +427,7 @@ export class ENGrid {
             else {
                 errorMessageElement.innerHTML = errorMessage;
             }
+            errorCallbacks.forEach((callback) => callback());
         }
     }
     static removeError(element) {
@@ -510,6 +512,24 @@ export class ENGrid {
     // This function is used to run a callback function when an error is displayed on the page
     static watchForError(callback) {
         const errorElement = document.querySelector(".en__errorList");
+        const callbackType = ENGrid.getErrorCallbackKey(callback);
+        // Register callback so setError can trigger it too
+        if (!errorCallbacks.has(callbackType)) {
+            errorCallbacks.set(callbackType, callback);
+        }
+        if (errorElement && !errorElement.dataset[callbackType]) {
+            errorElement.dataset[callbackType] = "true";
+            const observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+                        callback();
+                    }
+                });
+            });
+            observer.observe(errorElement, { childList: true });
+        }
+    }
+    static getErrorCallbackKey(callback) {
         const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
         // Avoid duplicate callbacks
         let callbackType = callback.toString();
@@ -523,18 +543,7 @@ export class ENGrid {
         callbackType = callbackType.replace(/[^a-zA-Z0-9]/g, "");
         // Limit to 20 characters and add prefix
         callbackType = callbackType.substring(0, 20);
-        callbackType = "engrid" + capitalize(callbackType);
-        if (errorElement && !errorElement.dataset[callbackType]) {
-            errorElement.dataset[callbackType] = "true";
-            const observer = new MutationObserver(function (mutations) {
-                mutations.forEach(function (mutation) {
-                    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-                        callback();
-                    }
-                });
-            });
-            observer.observe(errorElement, { childList: true });
-        }
+        return "engrid" + capitalize(callbackType);
     }
     // Get the Payment Type
     static getPaymentType() {

packages/scripts/src/engrid.ts

@@ -1,5 +1,7 @@
 import { Options } from ".";
 
+const errorCallbacks = new Map<string, Function>();
+
 export abstract class ENGrid {
   constructor() {
     if (!ENGrid.enForm) {
@@ -492,6 +494,7 @@ export abstract class ENGrid {
       } else {
         errorMessageElement.innerHTML = errorMessage;
       }
+      errorCallbacks.forEach((callback) => callback());
     }
   }
   static removeError(element: string | HTMLElement) {
@@ -592,8 +595,31 @@ export abstract class ENGrid {
     const errorElement = document.querySelector(
       ".en__errorList"
     ) as HTMLUListElement;
+    const callbackType = ENGrid.getErrorCallbackKey(callback);
+
+    // Register callback so setError can trigger it too
+    if (!errorCallbacks.has(callbackType)) {
+      errorCallbacks.set(callbackType, callback);
+    }
+
+    if (errorElement && !errorElement.dataset[callbackType]) {
+      errorElement.dataset[callbackType] = "true";
+
+      const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+          if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+            callback();
+          }
+        });
+      });
+      observer.observe(errorElement, { childList: true });
+    }
+  }
+
+  private static getErrorCallbackKey(callback: Function): string {
     const capitalize = (word: string) =>
       word.charAt(0).toUpperCase() + word.slice(1);
+
     // Avoid duplicate callbacks
     let callbackType = callback.toString();
     if (callbackType.indexOf("function") === 0) {
@@ -606,19 +632,7 @@ export abstract class ENGrid {
     callbackType = callbackType.replace(/[^a-zA-Z0-9]/g, "");
     // Limit to 20 characters and add prefix
     callbackType = callbackType.substring(0, 20);
-    callbackType = "engrid" + capitalize(callbackType);
-    if (errorElement && !errorElement.dataset[callbackType]) {
-      errorElement.dataset[callbackType] = "true";
-
-      const observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function (mutation) {
-          if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-            callback();
-          }
-        });
-      });
-      observer.observe(errorElement, { childList: true });
-    }
+    return "engrid" + capitalize(callbackType);
   }
   // Get the Payment Type
   static getPaymentType(): string {