Preview web custom html

src/clevertap.js

@@ -45,6 +45,7 @@ import { Variable } from './modules/variables/variable'
 import VariableStore from './modules/variables/variableStore'
 import { addAntiFlicker, handleActionMode } from './modules/visualBuilder/pageBuilder'
 import { setServerKey } from './modules/webPushPrompt/prompt'
+import { checkCustomHtmlNativeDisplayPreview } from './util/campaignRender/nativeDisplay'
 
 export default class CleverTap {
   #logger
@@ -92,7 +93,7 @@ export default class CleverTap {
   constructor (clevertap = {}) {
     this.#onloadcalled = 0
     this._isPersonalisationActive = this._isPersonalisationActive.bind(this)
-    this.raiseNotificationClicked = () => { }
+    this.raiseNotificationClicked = () => {}
     this.#logger = new Logger(logLevels.INFO)
     this.#account = new Account(clevertap.account?.[0], clevertap.region || clevertap.account?.[1], clevertap.targetDomain || clevertap.account?.[2], clevertap.token || clevertap.account?.[3])
     this.#device = new DeviceManager({ logger: this.#logger })
@@ -641,6 +642,7 @@ export default class CleverTap {
       this.#logger.debug('CT Initialized with Account ID: ' + this.#account.id)
     }
     handleActionMode(this.#logger, this.#account.id)
+    checkCustomHtmlNativeDisplayPreview(this.#logger)
     this.#session.cookieName = SCOOKIE_PREFIX + '_' + this.#account.id
 
     if (region) {

src/util/campaignRender/nativeDisplay.js

@@ -41,15 +41,15 @@ export const handleKVpairCampaign = (targetingMsgJson) => {
   document.dispatchEvent(kvPairsEvent)
 }
 
-export const renderCustomHtml = (targetingMsgJson, logger) => {
+export const renderCustomHtml = (targetingMsgJson) => {
   const { display, wzrk_id: wzrkId, wzrk_pivot: wzrkPivot } = targetingMsgJson || {}
 
-  const divId = display.divId || {}
+  const { divId } = display || {}
   const details = display.details[0]
   const html = details.html
 
   if (!divId || !html) {
-    logger.error('No div Id or no html found')
+    console.error('No div Id or no html found')
     return
   }
 
@@ -75,7 +75,7 @@ export const renderCustomHtml = (targetingMsgJson, logger) => {
         retryElement.outerHTML = html
         clearInterval(intervalId)
       } else if (++count >= 20) {
-        logger.log(`No element present on DOM with divId '${divId}'.`)
+        console.log(`No element present on DOM with divId '${divId}'.`)
         clearInterval(intervalId)
       }
     }, 500)
@@ -98,3 +98,28 @@ export const handleJson = (targetingMsgJson) => {
   const jsonEvent = new CustomEvent('CT_web_native_display_json', { detail: inaObj })
   document.dispatchEvent(jsonEvent)
 }
+
+export const checkCustomHtmlNativeDisplayPreview = (logger) => {
+  const searchParams = new URLSearchParams(window.location.search)
+  const ctType = searchParams.get('ctActionMode')
+  if (ctType) {
+    const parentWindow = window.opener
+    switch (ctType) {
+      case 'ctCustomHtmlPreview':
+        if (parentWindow) {
+          parentWindow.postMessage('ready', '*')
+          window.addEventListener('message', (event) => {
+            const eventData = JSON.parse(event.data)
+            const inAppNotifs = eventData.inapp_notifs
+            const msgContent = inAppNotifs[0].msgContent
+            if (eventData && msgContent.templateType === 'custom-html' && msgContent.type === 5) {
+              renderCustomHtml(inAppNotifs[0])
+            }
+          }, false)
+        }
+        break
+      default:
+        break
+    }
+  }
+}