@capillarytech/creatives-library 8.0.271 → 8.0.273

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';
@@ -169,7 +170,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.271",
+  "version": "8.0.273",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -470,6 +470,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 +730,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,8 @@ import {
   updateMetaConfig,
   getMediaDetails,
   getAssetStatus,
+  getBeePopupBuilderToken,
+  getCmsAccounts,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -973,3 +975,35 @@ 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',
+    });
+  });
+});
+
+describe('getCmsAccounts', () => {
+  it('should return a promise (line 473-476)', () => {
+    // Similar to other API tests, just verify it returns a Promise
+    const result = getCmsAccounts('bee');
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it('should be callable with cmsType parameter', () => {
+    // Verify function exists and can be called
+    expect(typeof getCmsAccounts).toBe('function');
+    const result = getCmsAccounts('bee');
+    expect(result).toBeInstanceOf(Promise);
+  });
+});

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -17,6 +17,7 @@ import { initialReducer } from '../../../initialReducer';
 import { mockInitialState } from './mocks/initialState';
 import TemplatesV2 from '../../../v2Containers/TemplatesV2';
 import globalMessages from '../../../v2Containers/Cap/messages';
+import rcsMessages from '../../../v2Containers/Rcs/messages';
 import * as helper from './helper';
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
@@ -147,13 +148,16 @@ describe("Creatives testing template creation", () => {
     fireEvent.change(templateNameInput, {
       target: { value: 'rcs_test_template' },
     });
-    const imageRadioBtn = creativesScreen.getByText(/image/i);
+    const richCardOption = await creativesScreen.findByText(/rich card/i);
+    fireEvent.click(richCardOption);
+    const imageRadioBtn = await creativesScreen.findByRole('radio', {
+      name: /image/i,
+    });
     fireEvent.click(imageRadioBtn);
-    const imageUploader = await creativesScreen.findByText(/drag and drop image here/i);
+    const imageUploader = await creativesScreen.findByText(
+      /drag and drop image here/i,
+    );
     expect(imageUploader).toBeInTheDocument();
-    const noneRadioBtn = await creativesScreen.findByText(/none/i);
-    fireEvent.click(noneRadioBtn);
-    expect(imageUploader).not.toBeInTheDocument();
 
     // Enter the template title
     const templateTitleInput = await creativesScreen.findByTestId(
@@ -175,7 +179,7 @@ describe("Creatives testing template creation", () => {
 
     // click on Done button
     const doneButton = creativesScreen.getByRole('button', {
-      name: globalMessages.done.defaultMessage,
+      name: rcsMessages.sendForApprovalButtonLabel.defaultMessage,
     });
     await userEvent.click(doneButton);
     expect(createButton).toBeInTheDocument();
@@ -188,11 +192,13 @@ describe("Creatives testing template creation", () => {
       name: /rcs/i,
     });
     await userEvent.click(rcs);
-    const createButton = creativesScreen.getByRole('button', {
+    const createButton = await creativesScreen.findByRole('button', {
       name: /create new/i,
     });
     await waitFor(() => expect(createButton).toBeEnabled(),{ timeout: 5000, interval: 100 });
     await userEvent.click(createButton);
+    const richCardOption = await creativesScreen.findByText(/rich card/i);
+    fireEvent.click(richCardOption);
     const templateNameInput = await creativesScreen.findByTestId(
       /template_name/,
       {},
@@ -217,38 +223,14 @@ describe("Creatives testing template creation", () => {
     fireEvent.change(templateTextInput, {
       target: { value: 'rcs_template_text' },
     });
-    const ctaCheckBox = creativesScreen.getByText(/call to action/i);
-    fireEvent.click(ctaCheckBox);
-    const doneButton = creativesScreen.getByRole('button', {
-      name: globalMessages.done.defaultMessage,
+    const addButton = creativesScreen.getByRole('button', {
+      name: /add button/i,
     });
-    //done button will be disabled cta button is not configured
-    expect(doneButton).toBeDisabled();
-
-    //configuring cta button
-    //accessing cta button textBox by char limit
-    const textLimit = creativesScreen.getByText(/0 \/ 20/i);
-    const ctaBtnText = textLimit.parentElement.previousSibling;
-
-    //configuring CTA button text and URL
+    fireEvent.click(addButton);
+    const ctaBtnText = creativesScreen.getByPlaceholderText(/enter button text/i);
     fireEvent.change(ctaBtnText, {
       target: { value: 'cta_button' },
     });
-    const ctaLink = await creativesScreen.findByTestId(
-      /cta_btn_link/,
-      {},
-    );
-    fireEvent.change(ctaLink, {
-      target: { value: 'invalid url' },
-    });
-    const urlError = creativesScreen.getByText(/button url is not valid/i);
-    expect(urlError).toBeInTheDocument();
-    fireEvent.change(ctaLink, {
-      target: { value: 'https://capillarytech.com/' },
-    });
-    expect(urlError).not.toBeInTheDocument();
-    //saving the template
-    fireEvent.click(doneButton);
     expect(createButton).toBeInTheDocument();
   });
 

package/tests/integration/TemplateCreation/api-response.js

@@ -1558,6 +1558,25 @@ export const whatsappAccount = {
   response: []
 };
 
+export const rcsAccount = {
+  success: true,
+  status: {
+    isError: false,
+    code: 200,
+    message: "success",
+  },
+  message: "WeCRM Account details fetched",
+  response: [
+    {
+      name: "RCS Account",
+      sourceAccountIdentifier: "rcs_account",
+      configs: {
+        accessToken: "rcs_access_token",
+      },
+    },
+  ],
+};
+
 export const mpushAccount = {
   success: true,
   status: {
@@ -1716,7 +1735,18 @@ export const emailTemplates = {
 
 export const domainProperties = {
   entity:{
-    WHATSAPP:[]
+    WHATSAPP:[],
+    RCS: [
+      {
+        domainProperties: {
+          hostName: "rcs-host",
+          connectionProperties: {
+            sourceAccountIdentifier: "rcs_account",
+            account_sid: "rcs_account",
+          },
+        },
+      },
+    ],
   },
   warnings:[]
 };

package/tests/integration/TemplateCreation/msw-handler.js

@@ -36,6 +36,8 @@ export const server = setupServer(
   rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) => {
     const sourceName = req.url.searchParams.get('source_name');
     switch (sourceName) {
+      case 'RCS':
+        return res(ctx.status(200), ctx.json(apiResponse.rcsAccount));
       case 'WHATSAPP':
         return res(ctx.status(200), ctx.json(apiResponse.whatsappAccount));
       case 'VIBER':

package/utils/common.js

@@ -23,6 +23,7 @@ import {
   ENABLE_WECHAT,
   ENABLE_WEBPUSH,
   LIQUID_SUPPORT,
+  SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
@@ -96,6 +97,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

@@ -173,20 +173,30 @@ export const validateLiquidTemplateContent = async (
   // Handle API errors or empty content
   if (result?.errors?.length > 0 || !validString || isError) {
     let standardErrors = [];
+    let liquidErrors = [];
+    
+    // Empty content errors are NOT from liquid endpoints, so they go to standardErrors
     if (!validString) {
       standardErrors = [emptyBodyError];
     }
-    let liquidErrors;
-    if (result && Array.isArray(result?.errors)) {
-      liquidErrors = result?.errors?.map((error) => {
+    
+    // IMPORTANT: Errors from extractTags and liquidValidation endpoints should ALWAYS be categorized as liquidErrors
+    // These endpoints are: /extractTags and /ask-aira-service/creatives_ai/liquidValidation
+    // Only errors from these endpoints should appear in Liquid Issues tab
+    if (result && Array.isArray(result?.errors) && result.errors.length > 0) {
+      // Errors from extractTags or liquidValidation endpoints
+      liquidErrors = result.errors.map((error) => {
         const message = typeof error?.message === "string"
           ? error.message
           : somethingWrongMsg;
         return message;
       });
-    } else {
+    } else if (isError) {
+      // If isError is true, it means the API call to extractTags/liquidValidation failed
+      // This is also a liquid endpoint error, so categorize as liquidErrors
       liquidErrors = [somethingWrongMsg];
     }
+    
     onError({
       standardErrors,
       liquidErrors,
@@ -398,7 +408,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/imageUrlUpload.js

@@ -1,6 +1,6 @@
 /**
  * Utility functions for uploading images from URLs
- * 
+ *
  * NOTE: CORS-limited; will be replaced with backend implementation.
  * Flow currently hidden (not removed) from frontend.
  */
@@ -13,14 +13,14 @@ import {
 
 /**
  * Fetches an image from a URL
- * 
+ *
  * @param {string} url - The image URL to fetch
  * @returns {Promise<Response>} - The fetch response object
  * @throws {Error} - If the fetch fails (network/CORS error)
  */
 export const fetchImageFromUrl = async (url) => {
   const trimmedUrl = url?.trim() || '';
-  
+
   if (!trimmedUrl) {
     throw new Error('URL is required');
   }
@@ -42,7 +42,7 @@ export const fetchImageFromUrl = async (url) => {
 /**
  * Helper function to upload image from URL
  * Fetches image, validates content type and size, converts to File, and uploads via uploadAsset
- * 
+ *
  * @param {string} url - The image URL to upload
  * @param {Function} formatMessage - React Intl formatMessage function
  * @param {Object} messages - React Intl messages object
@@ -51,7 +51,7 @@ export const fetchImageFromUrl = async (url) => {
  * @param {number} maxSize - Maximum file size in bytes
  * @param {string[]} allowedContentTypes - Array of allowed MIME types (defaults to DEFAULT_ALLOWED_CONTENT_TYPES)
  * @returns {Promise<{success: boolean, error: string}>} - Result object with success status and error message
- * 
+ *
  * @example
  * const result = await uploadImageFromUrlHelper(
  *   'https://example.com/image.jpg',
@@ -73,14 +73,14 @@ export const uploadImageFromUrlHelper = async (
   allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
 ) => {
   const trimmedUrl = url?.trim() || '';
-  
+
   try {
     const response = await fetchImageFromUrl(trimmedUrl);
 
     // Validate Content-Type
     const contentType = response.headers?.get('Content-Type') || '';
     const normalizedContentType = contentType.split(';')[0].toLowerCase().trim();
-    
+
     if (!allowedContentTypes.includes(normalizedContentType)) {
       return {
         success: false,
@@ -89,7 +89,7 @@ export const uploadImageFromUrlHelper = async (
     }
 
     const blob = await response.blob();
-    
+
     if (blob.size > maxSize) {
       return {
         success: false,
@@ -101,7 +101,7 @@ export const uploadImageFromUrlHelper = async (
     return new Promise((resolve) => {
       const img = new Image();
       const objectUrl = URL.createObjectURL(blob);
-      
+
       img.onload = () => {
         const extension = MIME_TYPE_TO_EXTENSION[normalizedContentType] || DEFAULT_IMAGE_EXTENSION;
         const fileName = `${fileNamePrefix}.${extension}`;
@@ -111,16 +111,16 @@ export const uploadImageFromUrlHelper = async (
           height: img.height,
           error: false,
         };
-        
+
         uploadAssetFn(file, 'image', fileParams);
         URL.revokeObjectURL(objectUrl);
-        
+
         resolve({
           success: true,
           error: '',
         });
       };
-      
+
       img.onerror = () => {
         URL.revokeObjectURL(objectUrl);
         resolve({
@@ -128,7 +128,7 @@ export const uploadImageFromUrlHelper = async (
           error: formatMessage(messages.imageLoadError),
         });
       };
-      
+
       img.src = objectUrl;
     });
   } catch (error) {
@@ -138,4 +138,3 @@ export const uploadImageFromUrlHelper = async (
     };
   }
 };
-

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(platformData.title);
+      expect(result).toContain(platformData.beeHtml);
+      expect(result).toContain(platformData.ctas[0].text);
+    });
+
+    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(platformData.title);
+      expect(result).toContain(platformData.beeHtml.value);
+      expect(result).toContain(platformData.ctas[0].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');
+    });
+  });
 });
+