@capillarytech/creatives-library 8.0.253 → 8.0.254

package/constants/unified.js

@@ -45,7 +45,6 @@ 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 +168,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,7 +15,6 @@ 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,
@@ -34,5 +33,4 @@ 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.253",
+  "version": "8.0.254",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -465,11 +465,6 @@ 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,9 +720,4 @@ 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,8 +26,6 @@ import {
   updateMetaConfig,
   getMediaDetails,
   getAssetStatus,
-  getBeePopupBuilderToken,
-  getCmsAccounts,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -975,35 +973,3 @@ 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/utils/common.js

@@ -22,7 +22,6 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
-  SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
@@ -96,10 +95,6 @@ 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,30 +173,20 @@ 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];
     }
-    
-    // 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) => {
+    let liquidErrors;
+    if (result && Array.isArray(result?.errors)) {
+      liquidErrors = result?.errors?.map((error) => {
         const message = typeof error?.message === "string"
           ? error.message
           : somethingWrongMsg;
         return message;
       });
-    } 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
+    } else {
       liquidErrors = [somethingWrongMsg];
     }
-    
     onError({
       standardErrors,
       liquidErrors,
@@ -408,20 +398,7 @@ 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, 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
+  const { title, message, ctas } = platformData;
   return [
     title,
     message,

package/utils/tests/commonUtil.test.js

@@ -1376,228 +1376,4 @@ 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');
-    });
-  });
 });
-

package/utils/transformTemplateConfig.js

@@ -101,6 +101,7 @@ 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;
   }
 
@@ -108,19 +109,24 @@ 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 })
@@ -139,6 +145,7 @@ 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 => {
@@ -150,6 +157,7 @@ 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}`);
@@ -161,6 +169,7 @@ 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}`);
@@ -176,6 +185,7 @@ 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/v2Components/CapDeviceContent/index.js

@@ -69,7 +69,7 @@ const CapDeviceContent = (props) => {
     templateDescErrorHandler,
     templateTitleError,
     setTemplateTitleError,
-    isAiContentBotDisabled,
+    isAiContentBotDisabled
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -167,22 +167,21 @@ const CapDeviceContent = (props) => {
   return (
     <>
       <CapRow className="creatives-device-content">
-        <CapLink
+       <CapLink
           title={isAndroid
-            ? formatMessage(messages.copyContentFromIOS)
-            : formatMessage(messages.copyCotentFromAndroid)}
+              ? formatMessage(messages.copyContentFromIOS)
+              : formatMessage(messages.copyCotentFromAndroid)}
           className="inapp-copy-content"
           onClick={onCopyTitleAndContent}
-        />
+          />
         <CapRow className="creatives-inapp-title">
           <CapColumn
-            className="inapp-content-main"
+           className="inapp-content-main"
           >
             <CapHeading type="h5" className="inapp-title">
               {formatMessage(messages.title)}
             </CapHeading>
-            {getTagList(0)}
-            {/* here 0 signifies the tags for template title */}
+            {getTagList(0)} {/* here 0 signifies the tags for template title */}
           </CapColumn>
           <CapInput
             id="inapp-title-name-input"
@@ -214,7 +213,7 @@ const CapDeviceContent = (props) => {
         </CapRow>
         <CapRow className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
           <CapColumn
-            className="inapp-message-header"
+           className="inapp-message-header"
           >
             <CapHeading type="h5" className="inapp-message-header-style">
               {formatMessage(messages.message)}
@@ -223,37 +222,37 @@ const CapDeviceContent = (props) => {
             {/* here 1 signifies the tags for template message */}
           </CapColumn>
           <div className="inapp-create-template-message-input-wrapper">
-            <TextArea
-              id="inapp-create-template-message-input"
-              className="inapp-create-template-message-input"
-              placeholder={formatMessage(messages.textAreaInputPlaceholder)}
-              onChange={onTemplateMessageChange}
-              value={templateMessage || ""}
-              autosize={{ minRows: 5, maxRows: 5 }}
-              errorMessage={
-                templateMessageError && (
-                  <CapError className="inapp-template-message-error">
-                    {templateMessageError}
-                  </CapError>
-                )
-              }
+          <TextArea
+            id="inapp-create-template-message-input"
+            className="inapp-create-template-message-input"
+            placeholder={formatMessage(messages.textAreaInputPlaceholder)}
+            onChange={onTemplateMessageChange}
+            value={templateMessage || ""}
+            autosize={{ minRows: 5, maxRows: 5 }}
+            errorMessage={
+              templateMessageError && (
+                <CapError className="inapp-template-message-error">
+                  {templateMessageError}
+                </CapError>
+              )
+            }
+          />
+          {!isAiContentBotDisabled && (
+            <CapAskAira.ContentGenerationBot
+              text={templateMessage || ""}
+              setText={(text) => {
+                onTemplateMessageChange({ target: { value: text } }); 
+              }}
+              iconPlacement="float-br"
+              iconSize="1.6rem"
+              rootStyle={{
+                bottom: "0.2rem",
+                right: "0.2rem",
+                left: "auto",
+                position: "absolute",
+              }}
             />
-            {!isAiContentBotDisabled && (
-              <CapAskAira.ContentGenerationBot
-                text={templateMessage || ""}
-                setText={(text) => {
-                  onTemplateMessageChange({ target: { value: text } });
-                }}
-                iconPlacement="float-br"
-                iconSize="1.6rem"
-                rootStyle={{
-                  bottom: "0.2rem",
-                  right: "0.2rem",
-                  left: "auto",
-                  position: "absolute",
-                }}
-              />
-            )}
+          )}
           </div>
           {isMediaTypeImage && (
             <>
@@ -280,16 +279,14 @@ const CapDeviceContent = (props) => {
         </CapRow>
       </CapRow>
       <CapRow className="inapp-action-link">
-        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink} />
+        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink}/>
         <CapRow className="inapp-render-heading">
           <CapHeader
-            title={(
-              <CapRow type="flex">
-                <CapHeading type="h4">
-                  {formatMessage(messages.addActionLink)}
-                </CapHeading>
-              </CapRow>
-            )}
+            title={<CapRow type="flex">
+              <CapHeading type="h4">
+                {formatMessage(messages.addActionLink)}
+              </CapHeading>
+            </CapRow>}
             description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
           />
           {addActionLink && (
@@ -313,21 +310,19 @@ const CapDeviceContent = (props) => {
       <CapRow className="inapp-cta-button">
         <CapHeader
           className="inapp-render-heading-cta-button"
-          title={(
-            <CapRow type="flex">
-              <CapHeading type="h4">
-                {formatMessage(messages.btnLabel)}
-              </CapHeading>
-              <CapHeading
-                type="h6"
-                className="inapp-optional-label"
-              >
-                {formatMessage(messages.optional)}
-              </CapHeading>
-            </CapRow>
-          )}
+          title={<CapRow type="flex">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+            <CapHeading
+              type="h6"
+              className="inapp-optional-label"
+            >
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapRow>}
           description={<CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>}
-        />
+          />
         <CapRadioGroup
           options={BUTTON_RADIO_OPTIONS}
           value={buttonType}

package/v2Components/CapTagList/index.js

@@ -227,10 +227,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
 
   togglePopoverVisibility = (visible) => {
     this.setState({visible});
-    // Call onVisibleChange callback if provided (for triggering API calls when popover opens)
-    if (this.props.onVisibleChange) {
-      this.props.onVisibleChange(visible);
-    }
   };
 
   renderDynamicTagFlow = () => {
@@ -472,7 +468,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
             trigger="click"
-            placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
+            placement={channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop"}
           >
             <CapTooltip
               title={
@@ -539,7 +535,6 @@ CapTagList.propTypes = {
   channel: PropTypes.string,
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
-  popoverPlacement: PropTypes.string,
 };
 
 CapTagList.defaultValue = {