@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.2

package/constants/unified.js

@@ -45,6 +45,7 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
+export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';
@@ -168,7 +169,7 @@ export const JAPANESE_HIDE_DATE_TAGS = [
   "dd.mm.yy",
   "dd Mon",
   "dd/m/yyyy",
-]; 
+];
 
 export const LIQUID_SUPPORTED_CHANNELS = [EMAIL, SMS, MOBILE_PUSH, INAPP];
 

package/initialReducer.js

@@ -15,6 +15,7 @@ import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
 import previewAndTestReducer from './v2Components/TestAndPreviewSlidebox/reducer';
+import inAppReducer from './v2Containers/InApp/reducer';
 
 export const initialReducer = {
   language: languageProviderReducer,
@@ -33,4 +34,5 @@ export const initialReducer = {
   gallery: galleryReducer,
   navigationConfig: CapCollapsibleLeftNavigationReducer,
   previewAndTest: previewAndTestReducer,
+  inApp: inAppReducer,
 };

package/package.json

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

package/sagas/__tests__/assetPolling.test.js

@@ -1,6 +1,6 @@
 import { expectSaga, testSaga } from 'redux-saga-test-plan';
 import * as matchers from 'redux-saga-test-plan/matchers';
-import { throwError } from 'redux-saga-test-plan/providers';
+import { throwError, dynamic } from 'redux-saga-test-plan/providers';
 import { call, put } from 'redux-saga/effects';
 import { pollAssetStatus } from '../assetPolling';
 import { getAssetStatus } from '../../services/api';
@@ -299,15 +299,25 @@ describe('assetPolling saga', () => {
 
     it('should handle different asset types', () => {
       const videoConfig = createMockConfig({ type: 'video' });
+      const videoAsset = {
+        ...mockAsset,
+        type: 'VIDEO',
+        metaInfo: {
+          video_file_path_preview: 'https://example.com/video-preview.jpg',
+        },
+      };
       
       return expectSaga(pollAssetStatus, videoConfig)
+        .provide({
+          call: delayProvider,
+        })
         .provide([
           [
             matchers.call.fn(getAssetStatus),
             {
               response: {
                 status: 'completed',
-                asset: { ...mockAsset, type: 'VIDEO' },
+                asset: videoAsset,
               },
             },
           ],
@@ -316,13 +326,74 @@ describe('assetPolling saga', () => {
           type: 'ASSET_COMPLETED',
           payload: {
             assetId: mockAssetId,
-            asset: { ...mockAsset, type: 'VIDEO' },
+            asset: videoAsset,
             duration: 0, // Date.now() - startTime = 0 when mocked
           },
         })
         .run({ timeout: 15000 });
     });
 
+    it('should continue polling for video assets without video_file_path_preview even when status is completed', () => {
+      const videoConfig = createMockConfig({ 
+        type: 'video',
+        maxDuration: 50000, // Longer timeout for multiple polls
+      });
+      const videoAssetWithoutPreview = {
+        ...mockAsset,
+        type: 'VIDEO',
+        metaInfo: {}, // No video_file_path_preview
+      };
+      const videoAssetWithPreview = {
+        ...mockAsset,
+        type: 'VIDEO',
+        metaInfo: {
+          video_file_path_preview: 'https://example.com/video-preview.jpg',
+        },
+      };
+      
+      // Create responses array that will be consumed sequentially  
+      const responses = [
+        {
+          response: {
+            status: 'completed',
+            asset: videoAssetWithoutPreview,
+          },
+        },
+        {
+          response: {
+            status: 'completed',
+            asset: videoAssetWithPreview,
+          },
+        },
+      ];
+      
+      let callIndex = 0;
+      
+      return expectSaga(pollAssetStatus, videoConfig)
+        .provide({
+          call: delayProvider,
+        })
+        .provide([
+          [
+            matchers.call.fn(getAssetStatus),
+            dynamic(() => {
+              const response = responses[callIndex] || responses[responses.length - 1];
+              callIndex++;
+              return response;
+            }),
+          ],
+        ])
+        .put({
+          type: 'ASSET_COMPLETED',
+          payload: {
+            assetId: mockAssetId,
+            asset: videoAssetWithPreview,
+            duration: 0, // Date.now() - startTime = 0 when mocked
+          },
+        })
+        .run({ timeout: 20000 });
+    });
+
     it('should handle API response with success: false', () => {
       const config = createMockConfig();
       const errorMessage = 'API request failed';

package/sagas/assetPolling.js

@@ -18,6 +18,7 @@
 import { call, put } from 'redux-saga/effects';
 import { getAssetStatus } from '../services/api';
 import { ASSET_STATUS } from '../utils/assetStatusConstants';
+import { VIDEO } from '../constants/unified';
 
 /**
  * Delay utility function compatible with redux-saga 0.16.2
@@ -118,7 +119,13 @@ export function* pollAssetStatus(config) {
       }
 
       if (statusData.status === ASSET_STATUS.COMPLETED) {
-        // Asset completed successfully
+        // For video assets, continue polling until video_file_path_preview is available
+        // Even though status is COMPLETED, video preview generation may still be in progress
+        if (statusData?.asset?.type === VIDEO.toUpperCase() && 
+            !statusData?.asset?.metaInfo?.video_file_path_preview) {
+          continue;
+        }
+
         if (onCompleted) {
           const completedAction = onCompleted({
             assetId,

package/services/api.js

@@ -287,11 +287,6 @@ export const createMobilePushTemplateV2 = (template) => {
   return request(url, getAPICallObject('POST', template));
 };
 
-export const createWebPushTemplate = (template) => {
-  const url = `${API_ENDPOINT}/templates/WEBPUSH`;
-  return request(url, getAPICallObject('POST', template));
-};
-
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));
@@ -470,6 +465,11 @@ export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, is
   return API.get(url);
 };
 
+export const getCmsAccounts = (cmsType) => {
+  const url = `${API_ENDPOINT}/cms/accounts?type=${cmsType}`;
+  return API.get(url);
+};
+
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
@@ -725,4 +725,9 @@ export const getAssetStatus = (type, assetId) => {
   return request(url, getAPICallObject('GET'));
 };
 
+export const getBeePopupBuilderToken = () => {
+  const url = `${API_ENDPOINT}/common/getInappTokenData`;
+  return request(url, getAPICallObject('GET'));
+};
+
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -26,6 +26,7 @@ import {
   updateMetaConfig,
   getMediaDetails,
   getAssetStatus,
+  getBeePopupBuilderToken,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -973,3 +974,20 @@ describe('getAssetStatus', () => {
     expect(callArgs[0]).toContain('/assets/video/asset-456/status');
   });
 });
+
+describe('getBeePopupBuilderToken', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await getBeePopupBuilderToken();
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+});

package/translations/en.json

@@ -2022,7 +2022,6 @@
   "creatives.containersV2.Whatsapp.vietnamese": "Vietnamese",
   "creatives.containersV2.Whatsapp.whatsappCreateNotification": "{name} has been sent for approval",
   "creatives.containersV2.Whatsapp.zulu": "Zulu",
-  "creatives.containersV2.WebPush.addLabels": "Add labels",
   "creatives.containersV2.addLabels": "Add labels",
   "creatives.containersV2.appName": "App Name",
   "creatives.containersV2.applyNow": "Apply now",

package/utils/common.js

@@ -22,6 +22,7 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
+  SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
@@ -95,6 +96,10 @@ export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
   LIQUID_SUPPORT,
 );
 
+export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
+  null,
+  SUPPORT_CK_EDITOR,
+);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,

package/utils/commonUtils.js

@@ -398,7 +398,20 @@ export const validateMobilePushContent = async (formData, options) => {
 // Helper function to extract content for a platform
 export const extractContent = (platformData) => {
   if (!platformData) return '';
-  const { title, message, ctas } = platformData;
+  const { title, message, ctas, isBEEeditor, beeHtml } = platformData;
+  
+  // For BEE editor, extract content from beeHtml
+  if (isBEEeditor && beeHtml) {
+    // beeHtml can be an object with value property or a string
+    const beeHtmlContent = typeof beeHtml === 'string' ? beeHtml : (beeHtml?.value || '');
+    return [
+      title,
+      beeHtmlContent,
+      ...((ctas?.map((cta) => cta?.text || cta?.actionLink)) || []),
+    ].filter(Boolean).join(' ');
+  }
+  
+  // For regular content
   return [
     title,
     message,

package/utils/tests/commonUtil.test.js

@@ -1376,4 +1376,228 @@ describe("validateCarouselCards", () => {
       expect(result.isValid).toBe(true);
     });
   });
+
+  describe('extractContent BEE Editor Logic (L404-L412)', () => {
+    it('extracts content from beeHtml as string', () => {
+      const platformData = {
+        title: 'Test Title',
+        isBEEeditor: true,
+        beeHtml: '<p>BEE HTML Content</p>',
+        ctas: [
+          { text: 'Click Here', actionLink: 'https://example.com' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Test Title');
+      expect(result).toContain('<p>BEE HTML Content</p>');
+      expect(result).toContain('Click Here');
+    });
+
+    it('extracts content from beeHtml as object with value property', () => {
+      const platformData = {
+        title: 'Test Title',
+        isBEEeditor: true,
+        beeHtml: { value: '<p>BEE HTML from Object</p>' },
+        ctas: [
+          { text: 'Button Text' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Test Title');
+      expect(result).toContain('<p>BEE HTML from Object</p>');
+      expect(result).toContain('Button Text');
+    });
+
+    it('handles beeHtml as object without value property', () => {
+      const platformData = {
+        title: 'Test Title',
+        isBEEeditor: true,
+        beeHtml: { someOtherProperty: 'data' },
+        ctas: [],
+      };
+
+      const result = extractContent(platformData);
+
+      // Should extract title and empty beeHtml (since value is undefined)
+      expect(result).toContain('Test Title');
+      expect(result).not.toContain('someOtherProperty');
+    });
+
+    it('extracts ctas with text property', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '<p>Content</p>',
+        ctas: [
+          { text: 'CTA Text 1' },
+          { text: 'CTA Text 2' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('CTA Text 1');
+      expect(result).toContain('CTA Text 2');
+    });
+
+    it('extracts ctas with actionLink when text is missing', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '<p>Content</p>',
+        ctas: [
+          { actionLink: 'https://link1.com' },
+          { actionLink: 'https://link2.com' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('https://link1.com');
+      expect(result).toContain('https://link2.com');
+    });
+
+    it('filters out falsy values with filter(Boolean)', () => {
+      const platformData = {
+        title: '',
+        isBEEeditor: true,
+        beeHtml: null,
+        ctas: [
+          { text: null, actionLink: null },
+          { text: 'Valid Text' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      // Should only contain 'Valid Text' after filtering
+      expect(result).toBe('Valid Text');
+    });
+
+    it('handles empty ctas array', () => {
+      const platformData = {
+        title: 'Title Only',
+        isBEEeditor: true,
+        beeHtml: '<p>BEE Content</p>',
+        ctas: [],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title Only');
+      expect(result).toContain('<p>BEE Content</p>');
+    });
+
+    it('handles undefined ctas', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '<p>Content</p>',
+        ctas: undefined,
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title');
+      expect(result).toContain('<p>Content</p>');
+    });
+
+    it('joins all content with spaces', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: 'HTML',
+        ctas: [
+          { text: 'CTA1' },
+          { text: 'CTA2' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toBe('Title HTML CTA1 CTA2');
+    });
+
+    it('falls back to regular content when not BEE editor', () => {
+      const platformData = {
+        title: 'Title',
+        message: 'Message',
+        isBEEeditor: false,
+        beeHtml: '<p>Should be ignored</p>',
+        ctas: [
+          { text: 'CTA' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title');
+      expect(result).toContain('Message');
+      expect(result).toContain('CTA');
+      expect(result).not.toContain('<p>Should be ignored</p>');
+    });
+
+    it('handles null beeHtml', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: null,
+        ctas: [{ text: 'CTA' }],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toContain('Title');
+      expect(result).toContain('CTA');
+    });
+
+    it('handles undefined beeHtml', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: undefined,
+        ctas: [],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toBe('Title');
+    });
+
+    it('handles complex ctas with both text and actionLink', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: 'Content',
+        ctas: [
+          { text: 'CTA Text', actionLink: 'https://example.com' },
+        ],
+      };
+
+      const result = extractContent(platformData);
+
+      // Should prefer text over actionLink
+      expect(result).toContain('CTA Text');
+      expect(result).toContain('Title');
+      expect(result).toContain('Content');
+    });
+
+    it('handles empty string beeHtml', () => {
+      const platformData = {
+        title: 'Title',
+        isBEEeditor: true,
+        beeHtml: '',
+        ctas: [{ text: 'CTA' }],
+      };
+
+      const result = extractContent(platformData);
+
+      expect(result).toBe('Title CTA');
+    });
+  });
 });
+

package/utils/transformTemplateConfig.js

@@ -101,7 +101,6 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
   const contentType = detectMediaContentType(templateConfig);
 
   if (contentType === MEDIA_CONTENT_TYPE.NONE) {
-    console.log('No media content detected, returning original config');
     return templateConfig;
   }
 
@@ -109,24 +108,19 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
   let transformDirection;
   if (forceDirection) {
     transformDirection = forceDirection;
-    console.log(`Forced transformation direction: ${transformDirection}`);
   } else {
     // Auto-detect based on content
     if (contentType === MEDIA_CONTENT_TYPE.URLS) {
       transformDirection = TRANSFORM_DIRECTION.FORWARD; // URLs → tags
-      console.log('Detected URLs, applying forward transformation (URLs → tags)');
     } else if (contentType === MEDIA_CONTENT_TYPE.TAGS) {
       transformDirection = TRANSFORM_DIRECTION.REVERSE; // tags → URLs
-      console.log('Detected media_content tags, applying reverse transformation (tags → URLs)');
     } else if (contentType === MEDIA_CONTENT_TYPE.MIXED) {
       transformDirection = TRANSFORM_DIRECTION.SMART; // Handle mixed content intelligently
-      console.log('Detected mixed content, applying smart transformation');
     }
   }
 
   const newConfig = cloneDeep(templateConfig);
   try {
-    console.log(`Fetching media details for ${transformDirection} transformation, ID: ${mediaDetailsId}`);
 
     // Fetch media details mapping from API
     const response = await getMediaDetails({ id: mediaDetailsId })
@@ -145,7 +139,6 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
       idToUrlMapping[mediaId] = url;
     });
 
-    console.log(`Processing ${Object.keys(urlToIdMapping).length} media mappings`);
 
     // Apply transformations based on direction
     newConfig?.cards?.forEach(card => {
@@ -157,7 +150,6 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
           // Forward transformation: URL → tag
           const mediaDetailId = urlToIdMapping[currentUrl];
           if (mediaDetailId) {
-            console.log(`Forward: ${currentUrl} → {{media_content(${mediaDetailId})}}`);
             card.media.url = `{{media_content(${mediaDetailId})}}`;
           } else {
             console.warn(`No media detail ID found for URL: ${currentUrl}`);
@@ -169,7 +161,6 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
           if (mediaId) {
             const actualUrl = idToUrlMapping[mediaId];
             if (actualUrl) {
-              console.log(`Reverse: {{media_content(${mediaId})}} → ${actualUrl}`);
               card.media.url = actualUrl;
             } else {
               console.warn(`No URL found for media ID: ${mediaId}`);
@@ -185,7 +176,6 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
     console.error('Failed to fetch media details for transformation:', error);
 
     // Fallback: try to extract/convert what we can without API
-    console.log('Falling back to URL extraction method');
     newConfig.cards.forEach(card => {
       if (card.media && card.media.url) {
         if (transformDirection === TRANSFORM_DIRECTION.FORWARD) {

package/utils/transformerUtils.js

@@ -10,7 +10,6 @@ import {
   RCS,
   LINE,
   VIBER,
-  WEBPUSH,
   EMF,
   VENENO,
   TEXT,
@@ -64,8 +63,6 @@ export const transformChannelPayload = (data, options = {}) => {
       return transformLinePayload(data, options);
     case VIBER:
       return transformViberPayload(data, options);
-    case WEBPUSH:
-      return transformWebpushPayload(data, options);
     default:
       return data; // Return unchanged for unsupported channels
   }
@@ -320,45 +317,6 @@ const transformViberPayload = (viberData, options = {}) => {
   return payload;
 };
 
-/**
- * Transforms WebPush data to the required payload format
- * @param {Object} webpushData - Current WebPush data
- * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
- * @returns {Object} - Transformed WebPush payload
- */
-const transformWebpushPayload = (webpushData, options = {}) => {
-  const { loyaltyMetaData = {} } = options;
-  const { transformedMessageDetails = {} } = loyaltyMetaData;
-  const { webpushDeliverySettings = {} } = transformedMessageDetails || {};
-  
-  // Get base payload structure
-  const payload = createBasePayload(WEBPUSH, loyaltyMetaData);
-  
-  // Extract webpush content from messageContent.content.content structure
-  const webpushContent = webpushData?.messageContent?.content?.content || {};
-  const accountId = webpushData?.messageContent?.content?.accountId || 0;
-  
-  // Add WebPush-specific properties
-  payload.centralCommsPayload.webpushMessageContent = {
-    channel: WEBPUSH,
-    accountId,
-    isDefault: webpushData?.messageContent?.content?.isDefault || false,
-    storeType: webpushData?.messageContent?.content?.storeType || 'REGISTERED_STORE',
-    content: {
-      title: webpushContent?.title || '',
-      message: webpushContent?.message || '',
-      ...(webpushContent?.iconImageUrl && { iconImageUrl: webpushContent.iconImageUrl }),
-      ...(webpushContent?.cta && { cta: webpushContent.cta }),
-      ...(webpushContent?.expandableDetails && { expandableDetails: webpushContent.expandableDetails }),
-    },
-    messageSubject: webpushData?.messageSubject || "",
-    offers: webpushData?.messageContent?.content?.offers || [],
-  };
-  payload.centralCommsPayload.webpushDeliverySettings = webpushDeliverySettings;
-  
-  return payload;
-};
-
 // Checks if the template has changed
 export const getTemplateDiffState = (channel, oldData, newData) => {
   switch (channel.toUpperCase()) {