Merge branch 'v8' of https://github.com/GleapSDK/JavaScript-SDK into v8

demo/index.html

@@ -10,6 +10,7 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,800;1,400&display=swap"
       rel="stylesheet"
     />
+    <link rel="icon" type="image/x-icon" href="fav.png">
     <script
       src="https://kit.fontawesome.com/0a1af2edbf.js"
       crossorigin="anonymous"

demo/main.js

@@ -31,6 +31,15 @@ Gleap.log("Test log err", "ERROR");
 
 Gleap.trackEvent("Master Event");
 
+Gleap.identify("123456789", {
+  name: "John Doe",
+  email: "[email protected]",
+  customData: {
+    yyy: "xxx",
+    penis: true
+  }
+});
+
 // Register custom action.
 Gleap.registerCustomAction((customAction) => {
   console.log("Custom action called:");

index.d.ts

@@ -60,14 +60,18 @@ export namespace Gleap {
   function setLiveSite(isLiveSite: boolean): void;
   function enableShortcuts(enabled: boolean): void;
   function setLanguage(language: string): void;
-  function preFillForm(data: string): void;
+  function preFillForm(data: object): void;
+  function showTabNotificationBadge(showNotificationBadge: boolean): void;
   function attachNetworkLogs(networkLogs: string): void;
   function clearIdentity(): void;
   function identify(
     userId: string,
     customerData: {
       name?: string;
       email?: string;
+      phone?: string;
+      value?: number;
+      customData?: object;
     },
     userHash?: string
   ): void;
@@ -89,6 +93,7 @@ export namespace Gleap {
   function openFeatureRequests(showBackButton?: boolean): void;
   function close(): void;
   function hide(): void;
+  function setUseCookies(useCookies: boolean): void;
   function setEnvironment(environment: "dev" | "staging" | "prod"): void;
   function showFeedbackButton(show: boolean): void;
   function startFeedbackFlow(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "8.4.1",
+  "version": "8.5.1",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

src/Gleap.js

@@ -23,7 +23,7 @@ import GleapPreFillManager from "./GleapPreFillManager";
 import GleapNotificationManager from "./GleapNotificationManager";
 import GleapAudioManager from "./GleapAudioManager";
 
-if (typeof HTMLCanvasElement !== "undefined" && HTMLCanvasElement.prototype) {
+if (typeof HTMLCanvasElement !== "undefined" && HTMLCanvasElement.prototype && HTMLCanvasElement.prototype.__originalGetContext === undefined) {
   HTMLCanvasElement.prototype.__originalGetContext =
     HTMLCanvasElement.prototype.getContext;
   HTMLCanvasElement.prototype.getContext = function (type, options) {
@@ -175,6 +175,14 @@ class Gleap {
     GleapSession.getInstance().clearSession(0, false);
   }
 
+  /**
+   * Enable or disable Gleap session tracking through cookies.
+   * @param {*} useCookies 
+   */
+  static setUseCookies(useCookies) {
+    GleapSession.getInstance().useCookies = useCookies;
+  }
+
   /**
    * Indentifies the user session
    * @param {string} userId
@@ -380,6 +388,17 @@ class Gleap {
     GleapCustomDataManager.getInstance().clearCustomData();
   }
 
+  /**
+   * Show or hide the notification badge count.
+   * @param {boolean} showNotificationBadge show or hide the notification badge
+   *
+   */
+  static showTabNotificationBadge(showNotificationBadge) {
+    const notificationInstance = GleapNotificationManager.getInstance();
+    notificationInstance.showNotificationBadge = showNotificationBadge;
+    notificationInstance.updateTabBarNotificationCount();
+  }
+
   /**
    * Override the browser language.
    * @param {string} language country code with two letters
@@ -623,7 +642,7 @@ class Gleap {
   /**
    * Opens a help center collection
    */
-   static openHelpCenterCollection(collectionId, showBackButton = true) {
+  static openHelpCenterCollection(collectionId, showBackButton = true) {
     if (!collectionId) {
       return;
     }

src/GleapConfigManager.js

@@ -149,7 +149,7 @@ export default class GleapConfigManager {
       }
 
       Gleap.enableShortcuts(flowConfig.enableShortcuts ? true : false);
-    } catch (e) {}
+    } catch (e) { }
   }
 
   getFeedbackOptions(feedbackFlow) {

src/GleapHelper.js

@@ -80,6 +80,20 @@ export const truncateString = (str, num) => {
   }
 }
 
+const removeSubDomain = (v) => {
+  try {
+    var parts = v.split('.');
+    var is2ndLevelDomain = false;
+    const secondLevel = parts[parts.length - 2];
+    if (secondLevel === "co" || secondLevel === "com" || secondLevel === "gv" || secondLevel === "ac" || secondLevel === "edu" || secondLevel === "gov" || secondLevel === "mil" || secondLevel === "net" || secondLevel === "org") {
+      is2ndLevelDomain = true;
+    }
+    parts = parts.slice(is2ndLevelDomain ? -3 : -2);
+    return parts.join('.');
+  } catch (exp) { }
+  return v;
+}
+
 export const loadFromGleapCache = (key) => {
   try {
     const cachedData = localStorage.getItem(`gleap-widget-${key}`);
@@ -102,6 +116,39 @@ export const saveToGleapCache = (key, data) => {
   }
 };
 
+export const setGleapCookie = (name, value, days) => {
+  try {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    const host = removeSubDomain(window.location.host.split(":")[0]);
+    document.cookie = name + "=" + (value || "") + expires + "; path=/; domain=" + host;
+  } catch (exp) { }
+}
+
+export const getGleapCookie = (name) => {
+  try {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+  } catch (exp) { }
+  return null;
+}
+
+export const eraseGleapCookie = (name) => {
+  try {
+    const host = removeSubDomain(window.location.host.split(":")[0]);
+    document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Domain=' + host;
+  } catch (exp) { }
+}
+
 export const getDOMElementDescription = (element, html = true) => {
   var innerText = truncateString(element.innerText || '', 40).replace(/(\r\n|\n|\r)/gm, "").replace(/ +(?= )/g, '');
   var elementId = "";

src/GleapNetworkIntercepter.js

@@ -425,24 +425,31 @@ class GleapNetworkIntercepter {
     const open = XMLHttpRequest.prototype.open;
     const send = XMLHttpRequest.prototype.send;
 
-    XMLHttpRequest.prototype.wrappedSetRequestHeader =
-      XMLHttpRequest.prototype.setRequestHeader;
-    XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
-      if (!this.requestHeaders) {
-        this.requestHeaders = {};
-      }
+    // Only override open and send if they haven't been overridden already.
+    if (XMLHttpRequest.prototype.gleapSetRequestHeader === undefined) {
+      XMLHttpRequest.prototype.gleapSetRequestHeader =
+        XMLHttpRequest.prototype.setRequestHeader;
+    }
+
+    if (XMLHttpRequest.prototype.gleapSetRequestHeader) {
+      XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+        if (!this.requestHeaders) {
+          this.requestHeaders = {};
+        }
 
-      if (this.requestHeaders && this.requestHeaders.hasOwnProperty(header)) {
-        return;
-      }
+        if (this.requestHeaders && this.requestHeaders.hasOwnProperty(header)) {
+          return;
+        }
 
-      if (!this.requestHeaders[header]) {
-        this.requestHeaders[header] = [];
-      }
+        if (!this.requestHeaders[header]) {
+          this.requestHeaders[header] = [];
+        }
+
+        this.requestHeaders[header].push(value);
+        this.gleapSetRequestHeader(header, value);
+      };
+    }
 
-      this.requestHeaders[header].push(value);
-      this.wrappedSetRequestHeader(header, value);
-    };
     XMLHttpRequest.prototype.open = function () {
       this["bbRequestId"] = ++self.requestId;
       callback.onOpen && callback.onOpen(this, arguments);

src/GleapNotificationBadge.js

@@ -0,0 +1,48 @@
+/**
+ * Add notification badge (pill) to favicon in browser tab
+ * @url stackoverflow.com/questions/65719387/
+ */
+export default class GleapNotificationBadge {
+    _value = 0;
+
+    constructor() {
+
+    }
+
+    getCleanTitle() {
+        var title = "";
+        try {
+            title = document.title;
+
+            // Remove last value in title.
+            if (title.indexOf("(") === 0 && title.indexOf(")") > 0) {
+                title = title.substring(title.indexOf(") ") + 2, title.length);
+            }
+        } catch (e) { }
+
+        console.log("title", title);
+
+        return title;
+    }
+
+    update() {
+        if (this.value === 0) {
+            document.title = this.getCleanTitle();
+        } else {
+            document.title = `(${this._value}) ${this.getCleanTitle()}`;
+        }
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(val) {
+        try {
+            this._value = val;
+            this.update();
+        } catch (e) {
+            console.log(e);
+        }
+    }
+}

src/GleapNotificationManager.js

@@ -4,6 +4,7 @@ import Gleap, {
   GleapFrameManager,
   GleapSession,
 } from "./Gleap";
+import GleapNotificationBadge from './GleapNotificationBadge';
 import { loadFromGleapCache, saveToGleapCache } from "./GleapHelper";
 import { loadIcon } from "./UI";
 
@@ -12,6 +13,9 @@ export default class GleapNotificationManager {
   notifications = [];
   unreadCount = 0;
   unreadNotificationsKey = "unread-notifications";
+  badgeManager = null;
+  isTabActive = true;
+  showNotificationBadge = true;
 
   // GleapNotificationManager singleton
   static instance;
@@ -22,6 +26,27 @@ export default class GleapNotificationManager {
     return this.instance;
   }
 
+  constructor() {
+    if (typeof window !== "undefined") {
+      try {
+        this.badgeManager = new GleapNotificationBadge();
+        this.badgeManager.value = 0;
+      } catch (exp) {
+        this.badgeManager = null;
+      }
+    }
+  }
+
+  updateTabBarNotificationCount() {
+    if (this.badgeManager) {
+      if (this.showNotificationBadge) {
+        this.badgeManager.value = this.unreadCount;
+      } else {
+        this.badgeManager.value = 0;
+      }
+    }
+  }
+
   /**
    * Injects the feedback button into the current DOM.
    */
@@ -53,11 +78,14 @@ export default class GleapNotificationManager {
   setNotificationCount(unreadCount) {
     if (GleapFrameManager.getInstance().isOpened()) {
       this.unreadCount = 0;
+      this.updateTabBarNotificationCount();
       return;
     } else {
       this.unreadCount = unreadCount;
     }
 
+    this.updateTabBarNotificationCount();
+
     // Update the badge counter.
     GleapFeedbackButtonManager.getInstance().updateNotificationBadge(
       this.unreadCount
@@ -126,17 +154,15 @@ export default class GleapNotificationManager {
       };
       elem.className = "gleap-notification-item";
       elem.innerHTML = `
-            ${
-              notification.data.sender &&
-              notification.data.sender.profileImageUrl &&
-              `<img src="${notification.data.sender.profileImageUrl}" />`
-            }
+            ${notification.data.sender &&
+        notification.data.sender.profileImageUrl &&
+        `<img src="${notification.data.sender.profileImageUrl}" />`
+        }
             <div class="gleap-notification-item-container">
-                ${
-                  notification.data.sender
-                    ? `<div  class="gleap-notification-item-sender">${notification.data.sender.name}</div>`
-                    : ""
-                }
+                ${notification.data.sender
+          ? `<div  class="gleap-notification-item-sender">${notification.data.sender.name}</div>`
+          : ""
+        }
                 <div class="gleap-notification-item-content">${content}</div>
             </div>`;
       this.notificationContainer.appendChild(elem);
@@ -172,9 +198,9 @@ export default class GleapNotificationManager {
     this.notificationContainer.classList.remove(classNoButton);
     if (
       flowConfig.feedbackButtonPosition ===
-        GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_LEFT ||
+      GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_LEFT ||
       flowConfig.feedbackButtonPosition ===
-        GleapFeedbackButtonManager.FEEDBACK_BUTTON_BOTTOM_LEFT
+      GleapFeedbackButtonManager.FEEDBACK_BUTTON_BOTTOM_LEFT
     ) {
       this.notificationContainer.classList.add(classLeft);
     }