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

package/index.js

@@ -103,6 +103,12 @@ import Rcs from './v2Containers/Rcs';
 import rcsReducer from './v2Containers/Rcs/reducer';
 import rcsSaga from './v2Containers/Rcs/sagas';
 
+// Utils
+import {
+  convertMediaTagsToUrls,
+  convertUrlsToMediaTags,
+} from './utils/transformTemplateConfig';
+
 export {default as Ebill} from './v2Containers/Ebill';
 export {default as EbillReducer} from './v2Containers/Ebill/reducer';
 export {default as EbillSaga} from './v2Containers/Ebill/sagas';
@@ -181,4 +187,6 @@ export { CapContainer,
   RcsContainer,
   ZaloContainer,
   InAppContainer,
+  convertMediaTagsToUrls,
+  convertUrlsToMediaTags,
 };

package/package.json

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

package/services/api.js

@@ -329,6 +329,11 @@ export const getTemplateDetails = async ({id, channel}) => {
   return { ...compressedTemplatesData, response: decompressData};
 };
 
+export const getMediaDetails = async ({ id }) => {
+  const url = `${API_ENDPOINT}/media/${id}`;
+  return request(url, getAPICallObject('GET'));
+};
+
 export const getAllTemplates = async ({channel, queryParams = {}}) => {
   const url = getUrlWithQueryParams({
     url: `${API_ENDPOINT}/templates/v1/${channel}?`,

package/utils/createMobilePushPayload.js

@@ -8,7 +8,6 @@ import {
   FILMSTRIP_CAROUSEL,
   ANDROID,
   IOS,
-  TEXT,
 } from "../v2Containers/MobilePushNew/constants";
 import messages from '../v2Containers/MobilePushNew/messages';
 
@@ -138,7 +137,6 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
     linkType,
     deepLinkValue,
     externalLinkValue,
-    deepLinkKeysValue = [],
   } = content || {};
 
   const platformContent = {
@@ -150,48 +148,28 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
 
   // Handle CTA
   if (actionOnClick) {
-    let finalDeepLinkValue = deepLinkValue;
-
-    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}`));
-
-      // Only append keys if they're not already in the URL
-      if (!urlHasKeys) {
-        finalDeepLinkValue = appendDeepLinkKeysToUrl(deepLinkValue, deepLinkKeysValue);
-      }
-    }
-
     platformContent.cta = {
       type: linkType === DEEP_LINK ? DEEP_LINK : EXTERNAL_URL,
-      actionLink: linkType === DEEP_LINK ? finalDeepLinkValue : externalLinkValue,
+      actionLink: linkType === DEEP_LINK ? deepLinkValue : externalLinkValue,
     };
   }
 
   // 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];
@@ -201,20 +179,15 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
         type: type.toLowerCase(),
       }];
     } else {
-      // If no mediaList but mpushVideoSrc exists
-      platformContent.expandableDetails.style = GIF;
-      platformContent.expandableDetails.message = message;
+      // If no mediaList but mpushVideoSrc exists, convert to VIDEO
       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) {
@@ -248,8 +221,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,
@@ -266,14 +239,18 @@ 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) {
@@ -296,11 +273,31 @@ function buildCustomFields(content) {
   if (Array.isArray(custom)) {
     customFields = [...custom];
   } else if (custom && typeof custom === 'object') {
-    // If it's an object, map to array, excluding deepLinkKeys
-    customFields = Object.entries(custom)
-      .filter(([key]) => key !== 'deepLinkKeysValue' && key !== 'deepLinkValue' && key !== 'linkType')
-      .map(([key, value]) => ({ key, value }));
+    // If it's an object, map to array
+    customFields = Object.entries(custom).map(([key, value]) => ({ key, value }));
   }
+  const { deepLinkKeysValue, deepLinkValue, linkType } = custom || {};
+  // Add deepLinkKeys to custom fields if it exists
+  if (deepLinkKeysValue && linkType === DEEP_LINK) {
+    if (Array.isArray(deepLinkKeysValue)) {
+      // Handle array of deep link keys
+      deepLinkKeysValue.forEach((key) => {
+        if (key) {
+          customFields.push({
+            key,
+            value: deepLinkValue,
+          });
+        }
+      });
+    } else {
+      // Handle single deep link key
+      customFields.push({
+        key: deepLinkKeysValue,
+        value: deepLinkValue,
+      });
+    }
+  }
+
   return customFields;
 }
 
@@ -310,14 +307,14 @@ function buildCustomFields(content) {
  * @param {Array} keys - Deep link keys
  * @returns {string} URL with appended keys
  */
-export function appendDeepLinkKeysToUrl(url, keys) {
+function appendDeepLinkKeysToUrl(url, keys) {
   if (!url || !keys || !Array.isArray(keys) || keys?.length === 0) return url;
 
   const separator = url.includes('?') ? '&' : '?';
   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,51 +6,6 @@ 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 });
 
@@ -570,126 +525,6 @@ 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
@@ -1058,7 +893,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', () => {
@@ -1087,7 +922,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', () => {
@@ -1116,7 +951,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', () => {
@@ -1215,110 +1050,5 @@ 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 },
-      ]);
-    });
   });
 });