Merge pull request #337 from CleverTap/develop

[WEB-3387-2] Route Interceptor for Notification Cleanup

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [1.11.16] 17th Dec, 2024
+- Fixed Web Inbox Notification for SPA route changes
+
 ## [1.11.15] 17th Dec, 2024
 - Fixed Custom Web Inbox Init issue
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clevertap-web-sdk",
-  "version": "1.11.15",
+  "version": "1.11.16",
   "description": "",
   "main": "clevertap.js",
   "scripts": {

src/clevertap.js

@@ -28,7 +28,8 @@ import {
   COMMAND_REMOVE,
   COMMAND_DELETE,
   EVT_PUSH,
-  WZRK_FETCH
+  WZRK_FETCH,
+  WEBINBOX_CONFIG
 } from './util/constants'
 import { EMBED_ERROR } from './util/messages'
 import { StorageManager, $ct } from './util/storage'
@@ -687,7 +688,7 @@ export default class CleverTap {
     this.notifications._processOldValues()
   }
 
-  #debounce (func, delay = 300) {
+  #debounce (func, delay = 50) {
     let timeout
     return function () {
       clearTimeout(timeout)
@@ -704,6 +705,26 @@ export default class CleverTap {
     debouncedPageChanged()
   }
 
+  #updateUnviewedBadgePosition () {
+    try {
+      const config = StorageManager.readFromLSorCookie(WEBINBOX_CONFIG) || {}
+      const inboxNode = document.getElementById(config.inboxSelector)
+      const unViewedBadge = document.getElementById('unviewedBadge')
+      if (!inboxNode) {
+        unViewedBadge.style.display = 'none'
+      } else {
+        const { top, right } = inboxNode.getBoundingClientRect()
+        if (Number(unViewedBadge.innerText) > 0) {
+          unViewedBadge.style.display = 'flex'
+        }
+        unViewedBadge.style.top = `${top - 8}px`
+        unViewedBadge.style.left = `${right - 8}px`
+      }
+    } catch (error) {
+      this.#logger.debug('Error updating unviewed badge position:', error)
+    }
+  }
+
   pageChanged () {
     const currLocation = window.location.href
     const urlParams = getURLParams(currLocation.toLowerCase())
@@ -783,6 +804,8 @@ export default class CleverTap {
         }, CONTINUOUS_PING_FREQ_IN_MILLIS)
       }
     }, FIRST_PING_FREQ_IN_MILLIS)
+
+    this.#updateUnviewedBadgePosition()
   }
 
   #pingRequest () {

src/modules/web-inbox/WebInbox.js

@@ -197,9 +197,14 @@ export class Inbox extends HTMLElement {
   }
 
   updateUnviewedBadgePosition () {
-    const { top, right } = this.inboxSelector.getBoundingClientRect()
-    this.unviewedBadge.style.top = `${top - 8}px`
-    this.unviewedBadge.style.left = `${right - 8}px`
+    try {
+      const inboxNode = document.getElementById(this.config.inboxSelector) || this.inboxSelector
+      const { top, right } = inboxNode.getBoundingClientRect()
+      this.unviewedBadge.style.top = `${top - 8}px`
+      this.unviewedBadge.style.left = `${right - 8}px`
+    } catch (error) {
+      this.logger.debug('Error updating unviewed badge position:', error)
+    }
   }
 
   createinbox () {
@@ -390,13 +395,18 @@ export class Inbox extends HTMLElement {
   })()
 
   /**
-   * This function checks if the current Event Node is same as the already stored inboxSelector or the
-   * inboxSelector present in the document
+   * Checks if the current event target is part of the stored inboxSelector or the inboxSelector in the document.
+   *
+   * @param {Event} e - The event object to check.
+   * @returns {boolean} - Returns true if the event target is within the inboxSelector, otherwise false.
    */
   checkForWebInbox (e) {
     const config = StorageManager.readFromLSorCookie(WEBINBOX_CONFIG) || {}
-    return this.inboxSelector?.contains(e.target) ||
-     document.getElementById(config.inboxSelector).contains(e.target)
+    const inboxElement = document.getElementById(config.inboxSelector)
+
+    return (
+      this.inboxSelector?.contains(e.target) || inboxElement?.contains(e.target)
+    )
   }
 
   /**
@@ -475,12 +485,14 @@ export class Inbox extends HTMLElement {
   /**
    * Updates the UI with the number of unviewed messages
    * If there are more than 9 unviewed messages, we show the count as 9+
+   * Only show this badge if the current document has the inboxNode
    */
 
   setBadgeStyle = (msgCount) => {
     if (this.unviewedBadge !== null) {
       this.unviewedBadge.innerText = msgCount > 9 ? '9+' : msgCount
-      this.unviewedBadge.style.display = msgCount > 0 ? 'flex' : 'none'
+      const shouldShowUnviewedBadge = msgCount > 0 && document.getElementById(this.config.inboxSelector)
+      this.unviewedBadge.style.display = shouldShowUnviewedBadge ? 'flex' : 'none'
     }
   }
 

src/modules/web-inbox/helper.js

@@ -99,7 +99,7 @@ export const initializeWebInbox = (logger) => {
     const checkElementCondition = () => {
       const config = StorageManager.readFromLSorCookie(WEBINBOX_CONFIG) || {}
       if (!config.inboxSelector) {
-        logger.error('Inbox selector is not configured')
+        logger.debug('Inbox selector is not configured')
         return false
       }
       return document.getElementById(config.inboxSelector) && $ct.inbox === null