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

package/index.js

@@ -103,12 +103,6 @@ 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';
@@ -187,6 +181,4 @@ export { CapContainer,
   RcsContainer,
   ZaloContainer,
   InAppContainer,
-  convertMediaTagsToUrls,
-  convertUrlsToMediaTags,
 };

package/package.json

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

package/services/api.js

@@ -329,11 +329,6 @@ 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,6 +8,7 @@ import {
   FILMSTRIP_CAROUSEL,
   ANDROID,
   IOS,
+  TEXT,
 } from "../v2Containers/MobilePushNew/constants";
 import messages from '../v2Containers/MobilePushNew/messages';
 
@@ -137,6 +138,7 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
     linkType,
     deepLinkValue,
     externalLinkValue,
+    deepLinkKeysValue = [],
   } = content || {};
 
   const platformContent = {
@@ -148,28 +150,48 @@ 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 ? deepLinkValue : externalLinkValue,
+      actionLink: linkType === DEEP_LINK ? finalDeepLinkValue : 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];
@@ -179,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) {
@@ -221,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,
@@ -239,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) {
@@ -273,31 +296,11 @@ function buildCustomFields(content) {
   if (Array.isArray(custom)) {
     customFields = [...custom];
   } else if (custom && typeof custom === 'object') {
-    // If it's an object, map to array
-    customFields = Object.entries(custom).map(([key, value]) => ({ key, value }));
+    // 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 }));
   }
-  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;
 }
 
@@ -307,14 +310,14 @@ function buildCustomFields(content) {
  * @param {Array} keys - Deep link keys
  * @returns {string} URL with appended keys
  */
-function appendDeepLinkKeysToUrl(url, keys) {
+export 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,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/CapMpushCTA/index.js

@@ -242,17 +242,6 @@ export const CapMpushCTA = (props) => {
                             {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
                         </CapColumn>
                         <CapColumn>
-                            {urlType === DEEP_LINK && deepLinkKeysFromSelectionArray?.length > 0 && (ctaData[index]?.deepLinkKeys || selectedDeepLink?.keys) ? (
-                                <CapLabel type="label2" className="inapp-saved-cta-deep-link-keys">
-                                    {(() => {
-                                        const keys = selectedDeepLink?.keys || ctaData[index]?.deepLinkKeys;
-                                        if (Array.isArray(keys)) {
-                                            return keys.join(', ');
-                                        }
-                                        return keys;
-                                    })()}
-                                </CapLabel>
-                            ) : ''}
                         </CapColumn>
                         {(
                             <CapRow className="cta-action-grp">

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}
           />
         )
       )}