Merge pull request #332 from CleverTap/develop

Fixed Web Inbox Init & Updated SW_Webpush

CHANGELOG.md

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

package.json

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

src/modules/web-inbox/WebInbox.js

@@ -395,7 +395,7 @@ export class Inbox extends HTMLElement {
    */
   checkForWebInbox (e) {
     const config = StorageManager.readFromLSorCookie(WEBINBOX_CONFIG) || {}
-    return this.inboxSelector.contains(e.target) ||
+    return this.inboxSelector?.contains(e.target) ||
      document.getElementById(config.inboxSelector).contains(e.target)
   }
 

src/modules/web-inbox/helper.js

@@ -70,55 +70,75 @@ export const saveInboxMessages = (messages) => {
 
 export const initializeWebInbox = (logger) => {
   return new Promise((resolve, reject) => {
-    // Adding this as a band-aid for SUC-126380
-    // Adds ct-web-inbox element in dom which is not visible if Web Inbox Config in LS
-    document.addEventListener('readystatechange', function () {
-      if (document.readyState === 'complete') {
+    const retryUntil = (condition, interval = 500, maxRetries = 20) => {
+      return new Promise((resolve, reject) => {
+        let attempts = 0
+        const retry = setInterval(() => {
+          logger.debug(`Retry attempt: ${attempts + 1}`)
+          if (condition()) {
+            clearInterval(retry)
+            resolve() // Success
+          } else if ($ct.inbox !== null) {
+            clearInterval(retry)
+            resolve() // Inbox already initialized
+          } else if (attempts >= maxRetries) {
+            clearInterval(retry)
+            reject(new Error('Condition not met within max retries'))
+          }
+          attempts++
+        }, interval)
+      })
+    }
+
+    const addInboxSafely = () => {
+      if ($ct.inbox === null) {
         addWebInbox(logger)
-        resolve()
       }
-    })
-    if (document.readyState === 'complete') {
-      addWebInbox(logger)
-      resolve()
-    } else {
+    }
+
+    const checkElementCondition = () => {
       const config = StorageManager.readFromLSorCookie(WEBINBOX_CONFIG) || {}
-      const onLoaded = () => {
-        /**
-         * We need this null check here because $ct.inbox could be initialised via init method too on document load.
-         * In that case we don't need to call addWebInbox method
-         */
-        if ($ct.inbox === null) {
-          addWebInbox(logger)
-        }
-        resolve()
+      if (!config.inboxSelector) {
+        logger.error('Inbox selector is not configured')
+        return false
+      }
+      return document.getElementById(config.inboxSelector) && $ct.inbox === null
+    }
+
+    const onFailure = () => {
+      logger.debug('Failed to add inbox')
+    }
+
+    let retryStarted = false // Guard flag
+    const startRetry = () => {
+      if (!retryStarted) {
+        retryStarted = true
+        retryUntil(checkElementCondition, 500, 20)
+          .then(() => {
+            addInboxSafely()
+            resolve()
+          })
+          .catch(onFailure)
       }
-      window.addEventListener('load', () => {
-        /**
-         * Scripts can be loaded layzily, we may not get element from dom as it may not be mounted yet
-         * We will to check element for 10 seconds and give up
-         */
-        if (document.getElementById(config.inboxSelector)) {
-          onLoaded()
-        } else {
-          // check for element for next 10 seconds
-          let count = 0
-          if (count < 20) {
-            const t = setInterval(() => {
-              if (document.getElementById(config.inboxSelector)) {
-                onLoaded()
-                clearInterval(t)
-                resolve()
-              } else if (count >= 20) {
-                clearInterval(t)
-                logger.debug('Failed to add inbox')
-              }
-              count++
-            }, 500)
+    }
+
+    const setupEventListeners = () => {
+      if (document.readyState === 'complete') {
+        startRetry()
+      } else {
+        window.addEventListener('load', startRetry)
+        document.addEventListener(
+          'readystatechange',
+          () => {
+            if (document.readyState === 'complete') {
+              startRetry()
+            }
           }
-        }
-      })
+        )
+      }
     }
+
+    setupEventListeners()
   })
 }
 

sw_webpush.js

@@ -71,35 +71,34 @@ self.addEventListener('push', function (event) {
 })
 
 function onClick (event, redirectPath, notificationData) {
-  var finalDeepLink = redirectPath
-  var silentRequest = true // are opening up a new window or sending a quiet get request from here?
+  let finalDeepLink = ''
+  let trackingUrl = redirectPath
   if (event.action === 'action1') {
     // button 1 was clicked
     if (typeof notificationData.notificationOptions.actions[0].deepLink !== 'undefined') {
-      finalDeepLink += '&r=' + encodeURIComponent(notificationData.notificationOptions.actions[0].deepLink)
-      silentRequest = false
+      trackingUrl += '&r=' + encodeURIComponent(notificationData.notificationOptions.actions[0].deepLink)
+      finalDeepLink = notificationData.notificationOptions.actions[0].deepLink
     }
-    finalDeepLink += '&b=' + encodeURIComponent('button1')
+    trackingUrl += '&b=' + encodeURIComponent('button1')
   } else if (event.action === 'action2') {
     // the second button was clicked
     if (typeof notificationData.notificationOptions.actions[1].deepLink !== 'undefined') {
-      finalDeepLink += '&r=' + encodeURIComponent(notificationData.notificationOptions.actions[1].deepLink)
-      silentRequest = false
+      trackingUrl += '&r=' + encodeURIComponent(notificationData.notificationOptions.actions[1].deepLink)
+      finalDeepLink = notificationData.notificationOptions.actions[1].deepLink
     }
-    finalDeepLink += '&b=' + encodeURIComponent('button2')
+    trackingUrl += '&b=' + encodeURIComponent('button2')
   } else {
     // general click
     if (typeof notificationData.deepLink !== 'undefined') {
-      finalDeepLink += '&r=' + encodeURIComponent(notificationData.deepLink)
-      silentRequest = false
+      trackingUrl += '&r=' + encodeURIComponent(notificationData.deepLink)
+      finalDeepLink = notificationData.deepLink
     }
 
-    finalDeepLink += '&b=' + encodeURIComponent('button0')
+    trackingUrl += '&b=' + encodeURIComponent('button0')
   }
 
-  if (silentRequest) {
-    fireSilentRequest(finalDeepLink)
-  } else {
+  fireSilentRequest(trackingUrl)
+  if (finalDeepLink) {
     clients.openWindow(finalDeepLink)
   }
   event.notification.close()