@capillarytech/creatives-library 8.0.271 → 8.0.273

package/utils/tests/imageUrlUpload.test.js

@@ -0,0 +1,298 @@
+/**
+ * Tests for imageUrlUpload utils: fetchImageFromUrl and uploadImageFromUrlHelper
+ */
+
+import { fetchImageFromUrl, uploadImageFromUrlHelper } from '../imageUrlUpload';
+
+describe('imageUrlUpload', () => {
+  const formatMessage = jest.fn((msg) => msg?.id ?? msg?.defaultMessage ?? 'formatted');
+  const messages = {
+    imageTypeInvalid: { id: 'imageTypeInvalid' },
+    imageSizeInvalid: { id: 'imageSizeInvalid' },
+    imageLoadError: { id: 'imageLoadError' },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    formatMessage.mockImplementation((msg) => (msg && typeof msg === 'object' && msg.id) ? msg.id : 'formatted');
+  });
+
+  describe('fetchImageFromUrl', () => {
+    const validUrl = 'https://example.com/image.jpg';
+
+    it('throws when url is missing', async () => {
+      await expect(fetchImageFromUrl()).rejects.toThrow('URL is required');
+      await expect(fetchImageFromUrl(null)).rejects.toThrow('URL is required');
+    });
+
+    it('throws when url is empty string', async () => {
+      await expect(fetchImageFromUrl('')).rejects.toThrow('URL is required');
+    });
+
+    it('throws when url is only whitespace', async () => {
+      await expect(fetchImageFromUrl('   ')).rejects.toThrow('URL is required');
+    });
+
+    it('trims url before fetching', async () => {
+      const mockResponse = { ok: true, headers: new Headers() };
+      global.fetch = jest.fn().mockResolvedValue(mockResponse);
+
+      await fetchImageFromUrl('  https://example.com/img.png  ');
+      expect(global.fetch).toHaveBeenCalledWith(
+        'https://example.com/img.png',
+        expect.objectContaining({ method: 'GET', redirect: 'follow', mode: 'cors' })
+      );
+    });
+
+    it('returns response when fetch is ok', async () => {
+      const mockResponse = { ok: true, status: 200, headers: new Headers() };
+      global.fetch = jest.fn().mockResolvedValue(mockResponse);
+
+      const result = await fetchImageFromUrl(validUrl);
+      expect(result).toBe(mockResponse);
+      expect(global.fetch).toHaveBeenCalledWith(
+        validUrl,
+        expect.objectContaining({ method: 'GET', redirect: 'follow', mode: 'cors' })
+      );
+    });
+
+    it('throws when response is not ok', async () => {
+      const mockResponse = { ok: false, status: 404, statusText: 'Not Found' };
+      global.fetch = jest.fn().mockResolvedValue(mockResponse);
+
+      await expect(fetchImageFromUrl(validUrl)).rejects.toThrow(
+        'Failed to fetch image: 404 Not Found'
+      );
+    });
+
+    it('throws on network or CORS error', async () => {
+      global.fetch = jest.fn().mockRejectedValue(new Error('Network error'));
+
+      await expect(fetchImageFromUrl(validUrl)).rejects.toThrow('Network error');
+    });
+  });
+
+  describe('uploadImageFromUrlHelper', () => {
+    const uploadAssetFn = jest.fn();
+    const fileNamePrefix = 'test-image';
+    const maxSize = 5000000;
+
+    it('returns error when content type is not allowed', async () => {
+      const response = {
+        ok: true,
+        headers: new Headers({ 'Content-Type': 'text/html' }),
+        blob: jest.fn().mockResolvedValue(new Blob()),
+      };
+      global.fetch = jest.fn().mockResolvedValue(response);
+
+      const result = await uploadImageFromUrlHelper(
+        'https://example.com/page',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize,
+        ['image/jpeg', 'image/png']
+      );
+
+      expect(result).toEqual({ success: false, error: 'imageTypeInvalid' });
+      expect(formatMessage).toHaveBeenCalledWith(messages.imageTypeInvalid);
+      expect(uploadAssetFn).not.toHaveBeenCalled();
+    });
+
+    it('normalizes content type by stripping charset and trimming', async () => {
+      const response = {
+        ok: true,
+        headers: new Headers({ 'Content-Type': '  image/PNG; charset=utf-8  ' }),
+        blob: jest.fn().mockResolvedValue(new Blob(['x'], { type: 'image/png' })),
+      };
+      global.fetch = jest.fn().mockResolvedValue(response);
+
+      const OriginalImage = global.Image;
+      global.Image = class MockImage {
+        constructor() {
+          this.width = 10;
+          this.height = 10;
+          setTimeout(() => { if (this.onload) this.onload(); }, 0);
+        }
+
+        get src() { return this._src; }
+
+        set src(v) { this._src = v; }
+      };
+
+      const result = await uploadImageFromUrlHelper(
+        'https://example.com/img.png',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize,
+        ['image/png']
+      );
+
+      global.Image = OriginalImage;
+
+      expect(result.success).toBe(true);
+      expect(uploadAssetFn).toHaveBeenCalledWith(
+        expect.any(File),
+        'image',
+        expect.objectContaining({ width: 10, height: 10, error: false })
+      );
+      const file = uploadAssetFn.mock.calls[0][0];
+      expect(file.name).toMatch(/\.png$/);
+    });
+
+    it('returns error when blob size exceeds maxSize', async () => {
+      const largeBlob = new Blob([new ArrayBuffer(maxSize + 1)]);
+      const response = {
+        ok: true,
+        headers: new Headers({ 'Content-Type': 'image/jpeg' }),
+        blob: jest.fn().mockResolvedValue(largeBlob),
+      };
+      global.fetch = jest.fn().mockResolvedValue(response);
+
+      const result = await uploadImageFromUrlHelper(
+        'https://example.com/large.jpg',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize
+      );
+
+      expect(result).toEqual({ success: false, error: 'imageSizeInvalid' });
+      expect(formatMessage).toHaveBeenCalledWith(messages.imageSizeInvalid);
+      expect(uploadAssetFn).not.toHaveBeenCalled();
+    });
+
+    it('returns error when image fails to load (invalid image data)', async () => {
+      const blob = new Blob(['not-an-image'], { type: 'image/jpeg' });
+      const response = {
+        ok: true,
+        headers: new Headers({ 'Content-Type': 'image/jpeg' }),
+        blob: jest.fn().mockResolvedValue(blob),
+      };
+      global.fetch = jest.fn().mockResolvedValue(response);
+
+      const OriginalImage = global.Image;
+      global.Image = class MockImage {
+        constructor() {
+          setTimeout(() => {
+            if (this.onerror) this.onerror(new Event('error'));
+          }, 0);
+        }
+
+        get src() { return this._src; }
+
+        set src(v) { this._src = v; }
+      };
+
+      const result = await uploadImageFromUrlHelper(
+        'https://example.com/bad.jpg',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize
+      );
+
+      global.Image = OriginalImage;
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('imageLoadError');
+      expect(formatMessage).toHaveBeenCalledWith(messages.imageLoadError);
+      expect(uploadAssetFn).not.toHaveBeenCalled();
+    });
+
+    it('returns error on fetch failure and uses imageLoadError message', async () => {
+      global.fetch = jest.fn().mockRejectedValue(new Error('CORS'));
+
+      const result = await uploadImageFromUrlHelper(
+        'https://example.com/image.jpg',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize
+      );
+
+      expect(result).toEqual({ success: false, error: 'imageLoadError' });
+      expect(formatMessage).toHaveBeenCalledWith(messages.imageLoadError);
+      expect(uploadAssetFn).not.toHaveBeenCalled();
+    });
+
+    it('trims url before processing', async () => {
+      const response = {
+        ok: true,
+        headers: new Headers({ 'Content-Type': 'image/jpeg' }),
+        blob: jest.fn().mockResolvedValue(new Blob()),
+      };
+      global.fetch = jest.fn().mockResolvedValue(response);
+
+      await uploadImageFromUrlHelper(
+        '  https://example.com/img.jpg  ',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize
+      );
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        'https://example.com/img.jpg',
+        expect.any(Object)
+      );
+    });
+
+    it('calls uploadAssetFn with file, type and fileParams on success', async () => {
+      const blob = new Blob([new ArrayBuffer(100)], { type: 'image/png' });
+      const response = {
+        ok: true,
+        headers: new Headers({ 'Content-Type': 'image/png' }),
+        blob: jest.fn().mockResolvedValue(blob),
+      };
+      global.fetch = jest.fn().mockResolvedValue(response);
+
+      const OriginalImage = global.Image;
+      global.Image = class MockImage {
+        constructor() {
+          this.width = 100;
+          this.height = 80;
+          setTimeout(() => {
+            if (this.onload) this.onload();
+          }, 0);
+        }
+
+        get src() { return this._src; }
+
+        set src(v) { this._src = v; }
+      };
+
+      const result = await uploadImageFromUrlHelper(
+        'https://example.com/valid.png',
+        formatMessage,
+        messages,
+        uploadAssetFn,
+        fileNamePrefix,
+        maxSize
+      );
+
+      global.Image = OriginalImage;
+
+      expect(result).toEqual({ success: true, error: '' });
+      expect(uploadAssetFn).toHaveBeenCalledTimes(1);
+      const [file, type, fileParams] = uploadAssetFn.mock.calls[0];
+      expect(file).toBeInstanceOf(File);
+      expect(file.name).toMatch(new RegExp(`^${fileNamePrefix}\\.png$`));
+      expect(type).toBe('image');
+      expect(fileParams).toEqual(
+        expect.objectContaining({
+          width: 100,
+          height: 80,
+          error: false,
+        })
+      );
+    });
+  });
+});

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/v2Components/CapDeviceContent/index.js

@@ -69,7 +69,7 @@ const CapDeviceContent = (props) => {
     templateDescErrorHandler,
     templateTitleError,
     setTemplateTitleError,
-    isAiContentBotDisabled
+    isAiContentBotDisabled,
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -167,21 +167,22 @@ 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"
@@ -213,7 +214,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)}
@@ -222,37 +223,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>
-              )
-            }
-          />
-          {!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",
-              }}
+            <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",
+                }}
+              />
+            )}
           </div>
           {isMediaTypeImage && (
             <>
@@ -279,14 +280,16 @@ 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 && (
@@ -310,19 +313,21 @@ 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,6 +227,10 @@ 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 = () => {
@@ -468,7 +472,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
             trigger="click"
-            placement={channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop"}
+            placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
           >
             <CapTooltip
               title={
@@ -535,6 +539,7 @@ CapTagList.propTypes = {
   channel: PropTypes.string,
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CapTagListWithInput/index.js

@@ -48,13 +48,14 @@ export const CapTagListWithInput = (props) => {
     showTagList = true,
     showInput = true,
     inputProps = {},
+    popoverPlacement,
   } = props;
 
   const { formatMessage } = intl;
 
   return (
     <CapColumn style={containerStyle}>
-      <CapRow style={{display: 'flex', flexDirection: 'row'}}>
+      <CapRow align="middle" type="flex">
         {showHeading && headingText && (
           <CapHeading type={headingType} style={headingStyle}>
             {headingText}
@@ -76,6 +77,7 @@ export const CapTagListWithInput = (props) => {
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
             style={tagListStyle}
+            popoverPlacement={popoverPlacement}
           />
         )}
       </CapRow>
@@ -136,6 +138,7 @@ CapTagListWithInput.propTypes = {
   showHeading: PropTypes.bool,
   showTagList: PropTypes.bool,
   showInput: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 
 CapTagListWithInput.defaultProps = {
@@ -164,6 +167,7 @@ CapTagListWithInput.defaultProps = {
   showTagList: true,
   showInput: true,
   inputProps: {},
+  popoverPlacement: undefined,
 };
 
 export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/messages.js

@@ -5,6 +5,6 @@ const prefix = 'creatives.componentsV2.CapTagListWithInput';
 export default defineMessages({
   addLabels: {
     id: `${prefix}.addLabels`,
-    defaultMessage: 'Add labels',
+    defaultMessage: 'Add label',
   },
 });

package/v2Components/CapWhatsappCTA/tests/index.test.js

@@ -4,6 +4,11 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapWhatsappCTA } from '../index';
 
+// Mock the missing reducer
+jest.mock('@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer', () => {
+  return (state = {}) => state;
+}, { virtual: true });
+
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
 const initializeComponent = (

package/v2Components/ErrorInfoNote/constants.js

@@ -0,0 +1 @@
+export const LIQUID_DOC_URL = 'https://docs.capillarytech.com/docs/add-dynamic-content-using-liquid';