Preview web custom html

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [1.13.1] 26th Feb, 2025
+- Added support to preview html for custom native html
+
 ## [1.13.1] 21st Feb, 2025
 - Added search parameter ctActionMode to handle all url query parameter
 

clevertap.js

@@ -214,6 +214,7 @@
   const OLD_SOFT_PROMPT_SELCTOR_ID = 'wzrk_wrapper';
   const NEW_SOFT_PROMPT_SELCTOR_ID = 'pnWrapper';
   const POPUP_LOADING = 'WZRK_POPUP_LOADING';
+  const CUSTOM_HTML_PREVIEW = 'ctCustomHtmlPreview';
   const SYSTEM_EVENTS = ['Stayed', 'UTM Visited', 'App Launched', 'Notification Sent', NOTIFICATION_VIEWED, NOTIFICATION_CLICKED];
   const KEYS_TO_ENCRYPT = [KCOOKIE_NAME, LRU_CACHE, PR_COOKIE];
 
@@ -11233,7 +11234,7 @@
         case WVE_QUERY_PARAMS.SDK_CHECK:
           if (parentWindow) {
             logger.debug('SDK version check');
-            const sdkVersion = '1.13.1';
+            const sdkVersion = '1.13.2';
             parentWindow.postMessage({
               message: 'SDKVersion',
               accountId,
@@ -11996,7 +11997,9 @@
       wzrk_id: wzrkId,
       wzrk_pivot: wzrkPivot
     } = targetingMsgJson || {};
-    const divId = display.divId || {};
+    const {
+      divId
+    } = display || {};
     const details = display.details[0];
     const html = details.html;
 
@@ -12056,6 +12059,42 @@
     document.dispatchEvent(jsonEvent);
   };
 
+  function handleCustomHtmlPreviewPostMessageEvent(event, logger) {
+    const eventData = JSON.parse(event.data);
+    const inAppNotifs = eventData.inapp_notifs;
+    const msgContent = inAppNotifs[0].msgContent;
+
+    if (eventData && msgContent && msgContent.templateType === 'custom-html' && msgContent.type === 5) {
+      renderCustomHtml(inAppNotifs[0], logger);
+    }
+  }
+
+  const checkCustomHtmlNativeDisplayPreview = logger => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const ctType = searchParams.get('ctActionMode');
+
+    if (ctType) {
+      const parentWindow = window.opener;
+
+      switch (ctType) {
+        case CUSTOM_HTML_PREVIEW:
+          if (parentWindow) {
+            parentWindow.postMessage('ready', '*');
+
+            const eventHandler = event => handleCustomHtmlPreviewPostMessageEvent(event, logger);
+
+            window.addEventListener('message', eventHandler, false);
+          }
+
+          break;
+
+        default:
+          logger.debug("unknown unknown query param ".concat(ctType));
+          break;
+      }
+    }
+  };
+
   const invokeExternalJs = (jsFunc, targetingMsgJson) => {
     const func = window.parent[jsFunc];
 
@@ -14620,7 +14659,7 @@
       let proto = document.location.protocol;
       proto = proto.replace(':', '');
       dataObject.af = { ...dataObject.af,
-        lib: 'web-sdk-v1.13.1',
+        lib: 'web-sdk-v1.13.2',
         protocol: proto,
         ...$ct.flutterVersion
       }; // app fields
@@ -16180,6 +16219,7 @@
       }
 
       handleActionMode(_classPrivateFieldLooseBase(this, _logger)[_logger], _classPrivateFieldLooseBase(this, _account)[_account].id);
+      checkCustomHtmlNativeDisplayPreview(_classPrivateFieldLooseBase(this, _logger)[_logger]);
       _classPrivateFieldLooseBase(this, _session)[_session].cookieName = SCOOKIE_PREFIX + '_' + _classPrivateFieldLooseBase(this, _account)[_account].id;
 
       if (region) {
@@ -16366,7 +16406,7 @@
     }
 
     getSDKVersion() {
-      return 'web-sdk-v1.13.1';
+      return 'web-sdk-v1.13.2';
     }
 
     defineVariable(name, defaultValue) {

package.json

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

src/clevertap.js

@@ -46,6 +46,7 @@ import VariableStore from './modules/variables/variableStore'
 import { addAntiFlicker, handleActionMode } from './modules/visualBuilder/pageBuilder'
 import { setServerKey } from './modules/webPushPrompt/prompt'
 import encryption from './modules/security/Encryption'
+import { checkCustomHtmlNativeDisplayPreview } from './util/campaignRender/nativeDisplay'
 
 export default class CleverTap {
   #logger
@@ -657,6 +658,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

@@ -1,5 +1,6 @@
 import { CTWebPersonalisationBanner } from '../web-personalisation/banner'
 import { CTWebPersonalisationCarousel } from '../web-personalisation/carousel'
+import { CUSTOM_HTML_PREVIEW } from '../constants'
 
 export const renderPersonalisationBanner = (targetingMsgJson) => {
   if (customElements.get('ct-web-personalisation-banner') === undefined) {
@@ -44,7 +45,7 @@ export const handleKVpairCampaign = (targetingMsgJson) => {
 export const renderCustomHtml = (targetingMsgJson, logger) => {
   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
 
@@ -98,3 +99,32 @@ export const handleJson = (targetingMsgJson) => {
   const jsonEvent = new CustomEvent('CT_web_native_display_json', { detail: inaObj })
   document.dispatchEvent(jsonEvent)
 }
+
+function handleCustomHtmlPreviewPostMessageEvent (event, logger) {
+  const eventData = JSON.parse(event.data)
+  const inAppNotifs = eventData.inapp_notifs
+  const msgContent = inAppNotifs[0].msgContent
+  if (eventData && msgContent && msgContent.templateType === 'custom-html' && msgContent.type === 5) {
+    renderCustomHtml(inAppNotifs[0], logger)
+  }
+}
+
+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 CUSTOM_HTML_PREVIEW:
+        if (parentWindow) {
+          parentWindow.postMessage('ready', '*')
+          const eventHandler = (event) => handleCustomHtmlPreviewPostMessageEvent(event, logger)
+          window.addEventListener('message', eventHandler, false)
+        }
+        break
+      default:
+        logger.debug(`unknown unknown query param ${ctType}`)
+        break
+    }
+  }
+}

src/util/constants.js

@@ -64,6 +64,7 @@ export const TIMER_FOR_NOTIF_BADGE_UPDATE = 300
 export const OLD_SOFT_PROMPT_SELCTOR_ID = 'wzrk_wrapper'
 export const NEW_SOFT_PROMPT_SELCTOR_ID = 'pnWrapper'
 export const POPUP_LOADING = 'WZRK_POPUP_LOADING'
+export const CUSTOM_HTML_PREVIEW = 'ctCustomHtmlPreview'
 
 export const SYSTEM_EVENTS = [
   'Stayed',