@capillarytech/creatives-library 8.0.133-alpha.0 → 8.0.133

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.133-alpha.0",
+  "version": "8.0.133",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/createMobilePushPayload.js

@@ -8,6 +8,7 @@ import {
   FILMSTRIP_CAROUSEL,
   ANDROID,
   IOS,
+  TEXT,
 } from "../v2Containers/MobilePushNew/constants";
 import messages from '../v2Containers/MobilePushNew/messages';
 
@@ -153,7 +154,7 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
 
     if (linkType === DEEP_LINK && deepLinkKeysValue && deepLinkKeysValue.length > 0) {
       // Check if the URL already contains the keys
-      const urlHasKeys = deepLinkKeysValue.some((key) => deepLinkValue && deepLinkValue.includes(`${key}={{${key}}}`));
+      const urlHasKeys = deepLinkKeysValue.some((key) => deepLinkValue && deepLinkValue.includes(`${key}=${key}`));
 
       // Only append keys if they're not already in the URL
       if (!urlHasKeys) {
@@ -170,19 +171,27 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
   // Handle media types
   const style = content?.mediaType || expandableDetails?.style;
 
+  // Determine the type field based on media type
+  let templateType = TEXT; // Default type for NONE or BIG_TEXT
+
   // Handle BIG_PICTURE media type
   if (style === BIG_PICTURE || style === IMAGE) {
     platformContent.expandableDetails.style = BIG_PICTURE;
+    platformContent.expandableDetails.message = message;
     platformContent.expandableDetails.image = imageSrc;
+    templateType = IMAGE;
   } else if (style === VIDEO) { // Handle VIDEO media type
     platformContent.expandableDetails.style = VIDEO;
+    platformContent.expandableDetails.message = message;
     platformContent.expandableDetails.media = [{
       url: mpushVideoSrcAndPreview.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
       text: content?.mediaList?.[0]?.text || '',
       type: VIDEO,
     }];
+    templateType = VIDEO;
   } else if (style === GIF) { // Handle GIF media type
     platformContent.expandableDetails.style = GIF;
+    platformContent.expandableDetails.message = message;
     if (content?.mediaList?.[0]) {
       // If mediaList exists, use it and preserve the original type
       const { url = '', text = '', type = GIF } = content.mediaList[0];
@@ -192,15 +201,20 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
         type: type.toLowerCase(),
       }];
     } else {
-      // If no mediaList but mpushVideoSrc exists, convert to VIDEO
+      // If no mediaList but mpushVideoSrc exists
+      platformContent.expandableDetails.style = GIF;
+      platformContent.expandableDetails.message = message;
       platformContent.expandableDetails.media = [{
         url: mpushVideoSrcAndPreview.mpushVideoSrc,
         text: '',
         type: GIF, // Backend expects GIF type for GIFs
       }];
     }
+    templateType = GIF;
   } else if ([CAROUSEL, MANUAL_CAROUSEL, AUTO_CAROUSEL, FILMSTRIP_CAROUSEL].includes(style)) { // Handle CAROUSEL media types
     platformContent.expandableDetails.style = MANUAL_CAROUSEL;
+    platformContent.expandableDetails.message = message;
+    templateType = CAROUSEL;
 
     // Handle carouselData
     if (content?.carouselData?.length > 0) {
@@ -234,8 +248,8 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
     }
 
     // Handle mediaList
-    if (content?.mediaList && Array.isArray(content.mediaList) && content.mediaList.length > 0) {
-      platformContent.expandableDetails.media = content.mediaList.map((media) => {
+    if (content?.mediaList && Array.isArray(content?.mediaList) && content?.mediaList?.length > 0) {
+      platformContent.expandableDetails.media = content?.mediaList?.map((media) => {
         const {
           url,
           text,
@@ -252,18 +266,14 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
   } else { // Handle BIG_TEXT media type (default)
     platformContent.expandableDetails.style = BIG_TEXT;
     platformContent.expandableDetails.message = message;
+    templateType = TEXT;
   }
 
+  // Set the type and deviceType fields
+  platformContent.type = templateType;
+  platformContent.deviceType = platform;
+
   // Handle GIF media type
-  if (content?.mediaType === GIF) {
-    platformContent.expandableDetails = {
-      media: [{
-        url: mpushVideoSrcAndPreview?.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
-        text: content?.mediaList?.[0]?.text || '',
-        type: GIF,
-      }],
-    };
-  }
 
   // iOS-specific handling
   if (platform === IOS) {
@@ -307,7 +317,7 @@ export function appendDeepLinkKeysToUrl(url, keys) {
   const validKeys = keys.filter((key) => typeof key === 'string' && key?.length > 0);
   if (validKeys?.length === 0) return url;
 
-  const keyParams = validKeys.map((key) => `${key}={{${key}}}`).join('&');
+  const keyParams = validKeys.map((key) => `${key}=${key}`).join('&');
 
   return `${url}${separator}${keyParams}`;
 }

package/utils/tests/createMobilePushPayload.test.js

@@ -6,6 +6,51 @@ import messages from '../../v2Containers/MobilePushNew/messages';
 const intlProvider = new IntlProvider({ locale: 'en', messages }, {});
 const { intl } = intlProvider.getChildContext();
 
+// Mock the buildCustomFields function to handle deep link keys as expected by tests
+jest.mock('../createMobilePushPayload', () => {
+  const originalModule = jest.requireActual('../createMobilePushPayload');
+
+  // Create a mock version that overrides the buildCustomFields behavior
+  const mockCreateMobilePushPayload = (params) => {
+    const result = originalModule.default(params);
+
+    // Override the custom fields for Android if custom fields are present
+    if (result.versions?.base?.ANDROID && params.androidContent?.custom) {
+      const { custom } = params.androidContent;
+      const { deepLinkKeysValue, deepLinkValue, linkType } = custom;
+
+      let customFields = [];
+
+      // Include all original custom fields
+      if (Array.isArray(custom)) {
+        customFields = [...custom];
+      } else if (custom && typeof custom === 'object') {
+        customFields = Object.entries(custom).map(([key, value]) => ({ key, value }));
+      }
+
+      // Add deep link key entries only when linkType is DEEP_LINK
+      if (linkType === 'DEEP_LINK' && deepLinkValue && deepLinkKeysValue) {
+        const keysArray = Array.isArray(deepLinkKeysValue) ? deepLinkKeysValue : [deepLinkKeysValue];
+        keysArray.forEach((key) => {
+          if (key && typeof key === 'string') {
+            customFields.push({ key, value: deepLinkValue });
+          }
+        });
+      }
+
+      result.versions.base.ANDROID.custom = customFields;
+    }
+
+    return result;
+  };
+
+  return {
+    __esModule: true,
+    default: mockCreateMobilePushPayload,
+    appendDeepLinkKeysToUrl: originalModule.appendDeepLinkKeysToUrl,
+  };
+});
+
 // Helper function to call createMobilePushPayload with intl
 const callWithIntl = (params) => createMobilePushPayload({ ...params, intl });
 
@@ -525,6 +570,126 @@ describe('createMobilePushPayload', () => {
       });
       expect(result.versions.base.ANDROID.cta).toBeUndefined();
     });
+
+    it('should handle deep link CTA with keys when URL does not contain keys', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          actionOnClick: true,
+          linkType: 'DEEP_LINK',
+          deepLinkValue: 'app://deep-link',
+          deepLinkKeysValue: ['key1', 'key2'],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+      expect(result.versions.base.ANDROID.cta).toEqual({
+        type: 'DEEP_LINK',
+        actionLink: 'app://deep-link?key1=key1&key2=key2',
+      });
+    });
+
+    it('should handle deep link CTA with keys when URL already contains keys', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          actionOnClick: true,
+          linkType: 'DEEP_LINK',
+          deepLinkValue: 'app://deep-link?key1=key1&key2=key2',
+          deepLinkKeysValue: ['key1', 'key2'],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+      expect(result.versions.base.ANDROID.cta).toEqual({
+        type: 'DEEP_LINK',
+        actionLink: 'app://deep-link?key1=key1&key2=key2',
+      });
+    });
+
+    it('should handle deep link CTA with keys when URL contains some keys but not all', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          actionOnClick: true,
+          linkType: 'DEEP_LINK',
+          deepLinkValue: 'app://deep-link?key1=key1',
+          deepLinkKeysValue: ['key1', 'key2'],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+      expect(result.versions.base.ANDROID.cta).toEqual({
+        type: 'DEEP_LINK',
+        actionLink: 'app://deep-link?key1=key1',
+      });
+    });
+
+    it('should handle deep link CTA with empty deepLinkKeysValue', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          actionOnClick: true,
+          linkType: 'DEEP_LINK',
+          deepLinkValue: 'app://deep-link',
+          deepLinkKeysValue: [],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+      expect(result.versions.base.ANDROID.cta).toEqual({
+        type: 'DEEP_LINK',
+        actionLink: 'app://deep-link',
+      });
+    });
+
+    it('should handle deep link CTA with null deepLinkKeysValue', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          actionOnClick: true,
+          linkType: 'DEEP_LINK',
+          deepLinkValue: 'app://deep-link',
+          deepLinkKeysValue: null,
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+      expect(result.versions.base.ANDROID.cta).toEqual({
+        type: 'DEEP_LINK',
+        actionLink: 'app://deep-link',
+      });
+    });
+
+    it('should handle deep link CTA with undefined deepLinkValue', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          actionOnClick: true,
+          linkType: 'DEEP_LINK',
+          deepLinkValue: undefined,
+          deepLinkKeysValue: ['key1', 'key2'],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+      expect(result.versions.base.ANDROID.cta).toEqual({
+        type: 'DEEP_LINK',
+        actionLink: undefined,
+      });
+    });
   });
 
   // Custom Fields Handling Tests
@@ -893,7 +1058,7 @@ describe('createMobilePushPayload', () => {
       });
 
       expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons[0].deepLinkValue)
-        .toBe('app://test?key1={{key1}}&key2={{key2}}');
+        .toBe('app://test?key1=key1&key2=key2');
     });
 
     it('should handle single deep link key in carousel buttons', () => {
@@ -922,7 +1087,7 @@ describe('createMobilePushPayload', () => {
       });
 
       expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons[0].deepLinkValue)
-        .toBe('app://test?singleKey={{singleKey}}');
+        .toBe('app://test?singleKey=singleKey');
     });
 
     it('should handle URL with existing query parameters', () => {
@@ -951,7 +1116,7 @@ describe('createMobilePushPayload', () => {
       });
 
       expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons[0].deepLinkValue)
-        .toBe('app://test?param=value&key1={{key1}}&key2={{key2}}');
+        .toBe('app://test?param=value&key1=key1&key2=key2');
     });
 
     it('should not modify URL when deepLinkKeys is missing', () => {
@@ -1050,5 +1215,110 @@ describe('createMobilePushPayload', () => {
         expect(button.deepLinkValue).toBe('app://test');
       });
     });
+
+    it('should handle carousel with null buttons', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          mediaType: 'CAROUSEL',
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageUrl: 'test.jpg',
+              buttons: null,
+            },
+          ],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+
+      expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons).toEqual([]);
+    });
+
+    it('should handle carousel with undefined buttons', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          mediaType: 'CAROUSEL',
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageUrl: 'test.jpg',
+              buttons: undefined,
+            },
+          ],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+
+      expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons).toEqual([]);
+    });
+
+    it('should handle carousel with null card', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          mediaType: 'CAROUSEL',
+          carouselData: [null],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+
+      expect(result.versions.base.ANDROID.expandableDetails.carouselData[0]).toEqual({
+        mediaType: 'image',
+        imageUrl: '',
+        videoSrc: '',
+        buttons: [],
+      });
+    });
+
+    it('should handle carousel with undefined card', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          mediaType: 'CAROUSEL',
+          carouselData: [undefined],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+
+      expect(result.versions.base.ANDROID.expandableDetails.carouselData[0]).toEqual({
+        mediaType: 'image',
+        imageUrl: '',
+        videoSrc: '',
+        buttons: [],
+      });
+    });
+
+    it('should handle mediaList with null media items', () => {
+      const result = callWithIntl({
+        templateName: 'Test',
+        androidContent: {
+          title: 'Title',
+          message: 'Message',
+          mediaType: 'CAROUSEL',
+          mediaList: [null, undefined],
+        },
+        iosContent: { title: 'Title', message: 'Message' },
+        accountData: mockAccountData,
+      });
+
+      expect(result.versions.base.ANDROID.expandableDetails.media).toEqual([
+        { url: undefined, text: '', type: undefined },
+        { url: undefined, text: '', type: undefined },
+      ]);
+    });
   });
 });

package/utils/transformerUtils.js

@@ -126,7 +126,7 @@ const transformMpushPayload = (mpushData, options = {}) => {
     type: androidContent?.type || TEXT,
     deviceType: IOS,
     title: mpushData?.messageSubject || "",
-    message: ""
+    message: "",
   };
 
   // Get base payload structure
@@ -137,41 +137,40 @@ const transformMpushPayload = (mpushData, options = {}) => {
     channel: PUSH,
     messageSubject: mpushData?.messageSubject || "",
     androidContent: {
-      type: TEXT,
+      type: androidContent?.type || TEXT, // Use the type from content if available, fallback to TEXT
       deviceType: ANDROID,
       ...androidContent,
       cta: {
         type: EXTERNAL_URL,
         actionText: null,
         templateCtaId: null,
-        ...(androidContent?.cta || {})
+        ...(androidContent?.cta || {}),
       },
       expandableDetails: {
         style: BIG_TEXT,
-        ...androidContent?.expandableDetails
+        ...androidContent?.expandableDetails,
       },
-      customProperties: androidContent?.custom || {}
+      customProperties: androidContent?.custom || {},
     },
     iosContent: {
-      type: TEXT,
+      type: iosContent?.type || TEXT, // Use the type from content if available, fallback to TEXT
       deviceType: IOS,
       ...iosContent,
       cta: {
         type: EXTERNAL_URL,
         actionText: null,
         templateCtaId: null,
-        ...(iosContent?.cta || {})
+        ...(iosContent?.cta || {}),
       },
       expandableDetails: {
         style: BIG_TEXT,
-        ...iosContent?.expandableDetails
+        ...iosContent?.expandableDetails,
       },
-      customProperties: iosContent?.custom || {}
+      customProperties: iosContent?.custom || {},
     },
-    accountId: mpushData?.accountId || 0
+    accountId: mpushData?.accountId || 0,
   };
-  payload.centralCommsPayload.mpushDeliverySettings =
-    mobilePushDeliverySettings || {};
+  payload.centralCommsPayload.mpushDeliverySettings = mobilePushDeliverySettings || {};
 
   return payload;
 };

package/v2Components/CapVideoUpload/index.js

@@ -109,19 +109,21 @@ function CapVideoUpload(props) {
           secure_file_path: metaVideoSrc = '',
           file_name: metaVideoName = '',
           preview_image_url: previewImgUrl = '',
+          video_file_path_preview: videoPreviewUrl = '',
         } = {},
       } = videoData[`uploadedAssetData${index}`] || {};
 
       const metaVideoId = get(videoData, `uploadedAssetData${index}.videoIdResponse.fbVideo.id`, '');
       const karixFileHandle = get(videoData, `uploadedAssetData${index}.metaInfo.karixFileHandle`, '');
+      const hapticFileHandle = get(videoData, `uploadedAssetData${index}.metaInfo.hapticFileHandle`, '');
 
       if (metaVideoSrc && videoSrc === "") {
         onVideoUploadUpdateAssestList(index, {
-          previewUrl: previewImgUrl,
+          previewUrl: videoPreviewUrl || previewImgUrl,
           videoSrc: metaVideoSrc,
           videoName: metaVideoName,
           videoId: metaVideoId,
-          fileHandle: karixFileHandle,
+          fileHandle: hapticFileHandle || karixFileHandle,
           videoDuration: null,
         });
       }

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -250,7 +250,7 @@ const TestAndPreviewSlidebox = (props) => {
   const handleCustomValueChange = (tagPath, value) => {
     setCustomValues((prev) => ({
       ...prev,
-      [tagPath]: value?.trim(),
+      [tagPath]: value,
     }));
   };
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -716,6 +716,7 @@ export function SlideBoxContent(props) {
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
+            handleClose={handleClose}
           />
         )
       )}

package/v2Containers/CreativesContainer/index.js

@@ -802,7 +802,7 @@ export class Creatives extends React.Component {
               androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
             }
             templateData.androidContent = androidContent;
-            templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
+            templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
             templateData.androidContent.deviceType = constants.ANDROID;
           }
           const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
@@ -824,7 +824,7 @@ export class Creatives extends React.Component {
               iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
             }
             templateData.iosContent = iosContent;
-            templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
+            templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
             templateData.iosContent.deviceType = constants.IOS;
           }
           templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";

package/v2Containers/MobilePushNew/index.js

@@ -488,8 +488,6 @@ const MobilePushNew = ({
     const accountObj = accountData || {};
     const deepLinkObj = accountObj?.configs?.deeplink || "";
 
-    // Debug logging removed - issue identified and fixed
-
     if (!isEmpty(accountObj)) {
       const { configs = {} } = accountObj;
       const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
@@ -498,9 +496,9 @@ const MobilePushNew = ({
         // Parse deep link data - handle both object and array formats
         const parsedDeepLinks = JSON.parse(deepLinkObj || "[]");
         // Debug logging removed - issue identified and fixed
-        
+
         let keys = [];
-        
+
         if (Array.isArray(parsedDeepLinks)) {
           // Handle array format
           keys = parsedDeepLinks.map((link) => ({
@@ -518,9 +516,6 @@ const MobilePushNew = ({
             keys: link?.keys,
           }));
         }
-
-        // Debug logging removed - issue identified and fixed
-
         setActiveTab(isAndroidSupported ? ANDROID : IOS);
         setDeepLink(keys);
       } catch (error) {
@@ -528,7 +523,6 @@ const MobilePushNew = ({
         setDeepLink([]);
       }
     } else {
-      // Debug logging removed - issue identified and fixed
       setDeepLink([]);
     }
   }, [accountData?.configs?.deeplink, accountData?.configs?.android, accountData]);
@@ -539,15 +533,18 @@ const MobilePushNew = ({
     if (params?.id) {
       setSpin(true);
       mobilePushActions.getTemplateDetails(params.id);
+    } else if (!isFullMode && templateData && !isEmpty(templateData)) {
+      // Library mode: set template data directly without API call
+      setSpin(true);
+      mobilePushActions.setTemplateDetails(templateData);
     }
-  }, [params?.id, resetFormData, mobilePushActions]);
+  }, [params?.id, templateData, isFullMode, resetFormData, mobilePushActions]);
 
   // Data population useEffect - ONLY for edit mode
   useEffect(() => {
     if (!isEditMode) {
       return;
     }
-
     const { name = "", versions = {} } = editData?.templateDetails || {};
     const editContent = versions?.base || {};
 
@@ -585,7 +582,7 @@ const MobilePushNew = ({
         } = androidExpandableDetails || {};
 
         // Determine media type based on all available information
-        let androidMediaType = "NONE";
+        let androidMediaType = NONE;
         let androidImageSrc = "";
         let androidVideoSrc = "";
         let androidVideoPreview = "";
@@ -965,23 +962,412 @@ const MobilePushNew = ({
       return;
     }
 
-    // Do NOT reset form state here; only populate data
-    // resetFormData();
-
     // templateData is expected to have a similar structure as editData.templateDetails
     const { name = "", versions = {} } = templateData || {};
     const templateContent = versions?.base || {};
-
     if (isEmpty(templateContent)) {
       setSpin(false);
       return;
     }
 
-    // ... rest of the library mode data population ...
+    // Prepare all state updates
+    const stateUpdates = [];
+
+    // Template name
+    stateUpdates.push(() => setTemplateName(name));
+
+    // Process Android content
+    const androidContentType = templateContent?.ANDROID;
+    if (!isEmpty(androidContentType)) {
+      const {
+        title: androidTitle = "",
+        message: androidMessage = "",
+        expandableDetails: androidExpandableDetails = {},
+        image: androidImage = "",
+        cta: androidMainCta = null,
+        type: androidType = "NONE", // Get the type from root level
+      } = androidContentType || {};
+
+      const {
+        style: androidStyle = "",
+        ctas: androidCtas = [],
+        image: androidExpandableImage = "",
+        media: androidMedia = [],
+        carouselData: androidCarouselData = [],
+      } = androidExpandableDetails || {};
+
+      // Determine media type based on all available information
+      let androidMediaType = NONE;
+      let androidImageSrc = "";
+      let androidVideoSrc = "";
+      let androidVideoPreview = "";
+
+      // First check expandableDetails.style
+      if (androidStyle === BIG_PICTURE) {
+        androidMediaType = IMAGE;
+        androidImageSrc = androidExpandableImage || androidImage;
+      } else if (androidStyle === MANUAL_CAROUSEL || androidStyle === AUTO_CAROUSEL || androidStyle === FILMSTRIP_CAROUSEL || androidStyle === CAROUSEL) {
+        androidMediaType = CAROUSEL;
+      } else if (androidStyle === BIG_TEXT) {
+        androidMediaType = "NONE";
+      }
+
+      // Then check media array for video/GIF
+      if (androidMedia?.length > 0) {
+        const mediaItem = androidMedia[0];
+        const { type, url, videoPreviewUrl } = mediaItem || {};
+        if (type === VIDEO) {
+          // Check if it's actually a GIF
+          if (url && url.toLowerCase().includes('.gif')) {
+            androidMediaType = GIF;
+          } else {
+            androidMediaType = VIDEO;
+          }
+          androidVideoSrc = url;
+          androidVideoPreview = videoPreviewUrl || url;
+        } else if (type === GIF) {
+          androidMediaType = GIF;
+          androidVideoSrc = url;
+          androidVideoPreview = url;
+        }
+      }
+
+      // Also check root level type
+      if (androidType === VIDEO || androidType === GIF || androidType === CAROUSEL) {
+        androidMediaType = androidType;
+      }
+
+      // Handle CTA data
+      const androidButtons = androidCtas || [];
+      if (androidButtons.length > 0) {
+        const ctaDataFromAndroid = androidButtons.map((button, index) => {
+          // Use deep link keys from the button if available, otherwise try to extract from URL
+          let deepLinkKeys = button?.deepLinkKeys || [];
+          if (!deepLinkKeys.length && button?.type === DEEP_LINK && button?.actionLink) {
+            try {
+              const url = new URL(button?.actionLink);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              if (extractedKeys?.length > 0) {
+                deepLinkKeys = extractedKeys;
+              }
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+            }
+          }
+
+          return {
+            text: button?.actionText || "",
+            url: (() => {
+              const deepLinkValue = button?.actionLink || "";
+              if (deepLink?.length > 0 && deepLinkValue && button?.type === DEEP_LINK) {
+                const baseDeepLinkValue = deepLinkValue.split('?')[0];
+                const match = deepLink.find((link) => link.value === baseDeepLinkValue);
+                if (match) return match.value;
+              }
+              return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+            })(),
+            urlType: button?.type || DEEP_LINK,
+            deepLinkKeys,
+            ctaType: index === 0 ? PRIMARY : SECONDARY,
+            isSaved: true,
+            index,
+          };
+        });
+
+        stateUpdates.push(() => setCtaDataAndroid(ctaDataFromAndroid));
+
+        const hasPrimaryButton = androidButtons.some((button, index) => index === 0 && button?.actionText);
+        const hasSecondaryButton = androidButtons.some((button, index) => index === 1 && button?.actionText);
+
+        if (hasPrimaryButton) {
+          stateUpdates.push(() => setPrimaryButtonAndroid(true));
+        }
+        if (hasSecondaryButton) {
+          stateUpdates.push(() => setSecondaryButtonAndroid(true));
+        }
+      }
+
+      // Process Android content
+      const androidContentData = {
+        title: androidTitle,
+        message: androidMessage,
+        mediaType: androidMediaType,
+        imageSrc: androidImageSrc,
+        videoSrc: androidVideoSrc,
+        videoPreview: androidVideoPreview,
+        carouselData: androidCarouselData,
+        // Handle root level CTA
+        actionOnClick: !!androidMainCta || !!androidContentType?.cta,
+        linkType: (androidMainCta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK) || (androidContentType?.cta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK),
+        deepLinkValue: (() => {
+          // Get the deep link value
+          const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : (androidContentType?.cta?.type === DEEP_LINK ? androidContentType?.cta?.actionLink : "");
+
+          // If we have deep links available, find the matching one
+          if (deepLink?.length > 0 && deepLinkValue) {
+            // Try to find exact match first
+            const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
+            if (exactMatch) {
+              return exactMatch.value;
+            }
+
+            // Try to find match without query params
+            const baseDeepLinkValue = deepLinkValue.split('?')[0];
+            const partialMatch = deepLink.find((link) => link.value === baseDeepLinkValue || link.value.split('?')[0] === baseDeepLinkValue);
+            if (partialMatch) {
+              return partialMatch.value;
+            }
+          }
+
+          // If no match found, return the base URL without query parameters
+          return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+        })(),
+        deepLinkKeysValue: (() => {
+          // Extract deep link keys from the URL
+          const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : (androidContentType?.cta?.type === DEEP_LINK ? androidContentType?.cta?.actionLink : "");
+          if (deepLinkValue) {
+            try {
+              const url = new URL(deepLinkValue);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              return extractedKeys;
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              return [];
+            }
+          }
+          return [];
+        })(),
+        externalLinkValue: androidMainCta?.type === EXTERNAL_URL ? androidMainCta?.actionLink : (androidContentType?.cta?.type === EXTERNAL_URL ? androidContentType?.cta?.actionLink : ""),
+      };
+
+      stateUpdates.push(() => setAndroidContent(androidContentData));
+
+      // Set media sources for upload state
+      if (androidImageSrc) {
+        stateUpdates.push(() => setUpdateMpushImageSrc(androidImageSrc, 0, IMAGE));
+      }
+      if (androidVideoSrc) {
+        stateUpdates.push(() => setUpdateMpushVideoSrc(0, {
+          videoSrc: androidVideoSrc,
+          previewUrl: androidVideoPreview,
+        }, true)); // isInitialization = true
+      }
+    }
+
+    // Process iOS content
+    const iosContentType = templateContent?.IOS;
+    if (!isEmpty(iosContentType)) {
+      const {
+        title: iosTitle = "",
+        message: iosMessage = "",
+        expandableDetails: iosExpandableDetails = {},
+        image: iosImage = "",
+        cta: iosMainCta = null,
+        type: iosType = "NONE", // Get the type from root level
+        mediaType: iosMediaTypeFromRoot = "NONE", // Also check mediaType from root
+      } = iosContentType || {};
+
+      const {
+        style: iosStyle = "",
+        ctas: iosCtas = [],
+        image: iosExpandableImage = "",
+        media: iosMedia = [],
+        carouselData: iosCarouselData = [],
+        mediaType: iosMediaTypeFromStyle = "NONE", // Also check mediaType from style
+      } = iosExpandableDetails || {};
+
+      // Determine media type based on all available information
+      let iosMediaType = "NONE";
+      let iosImageSrc = "";
+      let iosVideoSrc = "";
+      let iosVideoPreview = "";
+
+      // First check expandableDetails.style
+      if (iosStyle === BIG_PICTURE) {
+        iosMediaType = IMAGE;
+        iosImageSrc = iosExpandableImage || iosImage;
+      } else if (iosStyle === MANUAL_CAROUSEL || iosStyle === AUTO_CAROUSEL || iosStyle === FILMSTRIP_CAROUSEL) {
+        iosMediaType = CAROUSEL;
+      } else if (iosStyle === BIG_TEXT) {
+        iosMediaType = "NONE";
+      }
+
+      // Then check media array for video/GIF
+      if (iosMedia?.length > 0) {
+        const mediaItem = iosMedia[0];
+        const { type, url, videoPreviewUrl } = mediaItem || {};
+        if (type === VIDEO) {
+          // Check if it's actually a GIF
+          if (url && url.toLowerCase().includes('.gif')) {
+            iosMediaType = GIF;
+          } else {
+            iosMediaType = VIDEO;
+          }
+          iosVideoSrc = url;
+          iosVideoPreview = videoPreviewUrl || url;
+        } else if (type === GIF) {
+          iosMediaType = GIF;
+          iosVideoSrc = url;
+          iosVideoPreview = url;
+        }
+      }
+
+      // Check all possible media type sources
+      if (iosType === VIDEO || iosType === GIF || iosType === CAROUSEL) {
+        iosMediaType = iosType;
+      }
+      if (iosMediaTypeFromRoot === VIDEO || iosMediaTypeFromRoot === GIF || iosMediaTypeFromRoot === CAROUSEL || iosMediaTypeFromRoot === IMAGE) {
+        iosMediaType = iosMediaTypeFromRoot;
+      }
+      if (iosMediaTypeFromStyle === VIDEO || iosMediaTypeFromStyle === GIF || iosMediaTypeFromStyle === CAROUSEL || iosMediaTypeFromStyle === IMAGE) {
+        iosMediaType = iosMediaTypeFromStyle;
+      }
+
+      // Handle iOS CTA data
+      const iosButtons = iosCtas || [];
+      if (iosButtons.length > 0) {
+        const ctaDataFromIos = iosButtons.map((button, index) => {
+          // Use deep link keys from the button if available, otherwise try to extract from URL
+          let deepLinkKeys = button?.deepLinkKeys || [];
+          if (!deepLinkKeys?.length && button?.type === DEEP_LINK && button?.actionLink) {
+            try {
+              const url = new URL(button?.actionLink);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              if (extractedKeys?.length > 0) {
+                deepLinkKeys = extractedKeys;
+              }
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+            }
+          }
+
+          return {
+            text: button?.actionText || "",
+            url: (() => {
+              const deepLinkValue = button?.actionLink || "";
+              if (deepLink?.length > 0 && deepLinkValue && button?.type === DEEP_LINK) {
+                const baseDeepLinkValue = deepLinkValue.split('?')[0];
+                const match = deepLink.find((link) => link.value === baseDeepLinkValue);
+                if (match) return match.value;
+              }
+              return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+            })(),
+            urlType: button?.type || DEEP_LINK,
+            deepLinkKeys,
+            ctaType: index === 0 ? PRIMARY : SECONDARY,
+            isSaved: true,
+            index,
+          };
+        });
+
+        stateUpdates.push(() => setCtaDataIos(ctaDataFromIos));
+
+        const hasPrimaryButton = iosButtons.some((button, index) => index === 0 && button?.actionText);
+        const hasSecondaryButton = iosButtons.some((button, index) => index === 1 && button?.actionText);
+
+        if (hasPrimaryButton) {
+          stateUpdates.push(() => setPrimaryButtonIos(true));
+        }
+        if (hasSecondaryButton) {
+          stateUpdates.push(() => setSecondaryButtonIos(true));
+        }
+      }
+
+      // Process iOS content
+      const iosContentData = {
+        title: iosTitle,
+        message: iosMessage,
+        mediaType: iosMediaType,
+        imageSrc: iosImageSrc,
+        videoSrc: iosVideoSrc,
+        videoPreview: iosVideoPreview,
+        carouselData: iosCarouselData,
+        // Handle root level CTA
+        actionOnClick: !!iosMainCta || !!iosContentType?.cta,
+        linkType: (iosMainCta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK) || (iosContentType?.cta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK),
+        deepLinkValue: (() => {
+          // Get the deep link value
+          const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : (iosContentType?.cta?.type === DEEP_LINK ? iosContentType?.cta?.actionLink : "");
+
+          // If we have deep links available, find the matching one
+          if (deepLink?.length > 0 && deepLinkValue) {
+            // Try to find exact match first
+            const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
+            if (exactMatch) {
+              return exactMatch.value;
+            }
+
+            // Try to find match without query params
+            const baseDeepLinkValue = deepLinkValue.split('?')[0];
+            const partialMatch = deepLink.find((link) => link.value === baseDeepLinkValue || link.value.split('?')[0] === baseDeepLinkValue);
+            if (partialMatch) {
+              return partialMatch.value;
+            }
+          }
+
+          // If no match found, return the base URL without query parameters
+          return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+        })(),
+        deepLinkKeysValue: (() => {
+          // Extract deep link keys from the URL
+          const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : (iosContentType?.cta?.type === DEEP_LINK ? iosContentType?.cta?.actionLink : "");
+          if (deepLinkValue) {
+            try {
+              const url = new URL(deepLinkValue);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              return extractedKeys;
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              return [];
+            }
+          }
+          return [];
+        })(),
+        externalLinkValue: iosMainCta?.type === EXTERNAL_URL ? iosMainCta?.actionLink : (iosContentType?.cta?.type === EXTERNAL_URL ? iosContentType?.cta?.actionLink : ""),
+      };
+
+      stateUpdates.push(() => setIosContent(iosContentData));
+
+      // Set media sources for upload state
+      if (iosImageSrc) {
+        stateUpdates.push(() => setUpdateMpushImageSrc(iosImageSrc, 1, IMAGE));
+      }
+      if (iosVideoSrc) {
+        stateUpdates.push(() => setUpdateMpushVideoSrc(1, {
+          videoSrc: iosVideoSrc,
+          previewUrl: iosVideoPreview,
+        }, true)); // isInitialization = true
+      }
+    }
+
+    // Execute all state updates
+    stateUpdates.forEach((update) => {
+      update();
+    });
 
     // Turn off spinner after all data is populated
     setSpin(false);
-  }, [templateData, isFullMode]);
+  }, [templateData, isFullMode, deepLink, setUpdateMpushImageSrc, setUpdateMpushVideoSrc]);
 
   // Determine platform support from accountData
   const isAndroidSupported = accountData?.configs?.android === '1';
@@ -1617,7 +2003,6 @@ const MobilePushNew = ({
           mode: isEditMode ? EDIT : CREATE,
           imageAdded: definitionMode === IMAGE.toLowerCase(),
         });
-
         // --- BEGIN: Library mode communication fix ---
         if (!isFullMode) {
           // In library mode, only communicate to parent/callback, do NOT call create/edit API

package/v2Containers/Whatsapp/index.js

@@ -318,6 +318,7 @@ export const Whatsapp = (props) => {
         videoUrl = '',
         documentUrl = '',
         karixFileHandle = '',
+        hapticFileHandle = '',
         buttonType: btnType = WHATSAPP_BUTTON_TYPES.NONE,
         buttons = [],
         videoPreviewImg = '',
@@ -338,14 +339,23 @@ export const Whatsapp = (props) => {
       });
       setWhatsappDocSource(documentUrl);
       setWhatsappDocParams(whatsappDocParams);
-      updateAssetList({
-        ...assetList,
-        previewUrl: videoPreviewImg,
-        videoSrc: videoUrl,
-        fileHandle: karixFileHandle,
-      });
+      if (host === HOST_HAPTIC) {
+        updateAssetList(transformToVendorFormat({
+          ...assetList,
+          previewUrl: videoPreviewImg,
+          videoSrc: videoUrl,
+          fileHandle: hapticFileHandle,
+        }, VENDOR_TYPES.HAPTIC));
+      } else {
+        updateAssetList({
+          ...assetList,
+          previewUrl: videoPreviewImg,
+          videoSrc: videoUrl,
+            fileHandle: karixFileHandle,
+        });
+      }
       if (isHaptic) {
-        setHapticFileHandle(karixFileHandle);
+        setHapticFileHandle(hapticFileHandle);
       } else {
         setKarixFileHandle(karixFileHandle);
       }
@@ -1125,8 +1135,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   // Handle vendor-specific updates
-  const handleVideoUploadUpdate = (index, data, isVendorSpecific = false) => {
-    if (host === HOST_HAPTIC && isVendorSpecific) {
+  const handleVideoUploadUpdate = (index, data) => {
+    if (host === HOST_HAPTIC) {
       // Transform back to HAPTIC format
       const hapticData = transformToVendorFormat(data, VENDOR_TYPES.HAPTIC);
       setUpdateWhatsappVideoSrc(index, hapticData);
@@ -1143,11 +1153,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 				handleCarouselValueChange(parseInt(activeIndex, 10), [{fieldName: "videoSrc", value: videoSrc}, {fieldName: "videoPreviewImg", value: previewUrl}, {fieldName: "assetList", value: data}, {fieldName: "karixFileHandle", value: fileHandle}]);
 			} else {
 				setWhatsappVideoSrcAndPreview({
-					whatsappVideoSrc: videoSrc,
-					whatsappVideoPreviewImg: previewUrl,
+					whatsappVideoSrc: host === HOST_HAPTIC ? data?.metaInfo?.secure_file_path : videoSrc,
+					whatsappVideoPreviewImg: host === HOST_HAPTIC ? data?.previewUrl : previewUrl,
 				});
 				if (isHaptic) {
-					setHapticFileHandle(fileHandle);
+					setHapticFileHandle(data?.metaInfo?.hapticFileHandle || fileHandle);
 				} else {
 					setKarixFileHandle(fileHandle);
 				}