@capillarytech/creatives-library 8.0.272 → 8.0.273

package/package.json

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

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/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/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -1897,6 +1897,117 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('Template content extraction (lines 291-309)', () => {
+    it('extracts content and subject from templateDataProp.base branch', async () => {
+      const ref = React.createRef();
+      const templateData = {
+        base: {
+          'template-content': '<p>Base branch content</p>',
+          "subject": 'Base branch subject',
+        },
+      };
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            params={{ id: '123' }}
+            templateData={templateData}
+            Email={{
+              templateDetails: { _id: '123' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+      await waitFor(() => {
+        const content = ref.current.getContentForPreview();
+        const formData = ref.current.getFormDataForPreview();
+        expect(content).toBe('<p>Base branch content</p>');
+        expect(formData['template-subject']).toBe('Base branch subject');
+      }, { timeout: 3000 });
+    });
+
+    it('extracts content and subject from templateDataProp.versions.base branch with activeTab', async () => {
+      const ref = React.createRef();
+      const templateData = {
+        versions: {
+          base: {
+            activeTab: 'en',
+            en: {
+              'template-content': '<p>Versions base en content</p>',
+              "html_content": '<p>fallback html_content</p>',
+            },
+            subject: 'Versions base subject',
+            emailSubject: 'Fallback email subject',
+          },
+        },
+      };
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            params={{ id: '123' }}
+            templateData={templateData}
+            Email={{
+              templateDetails: { _id: '123' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+      await waitFor(() => {
+        const content = ref.current.getContentForPreview();
+        const formData = ref.current.getFormDataForPreview();
+        expect(content).toBe('<p>Versions base en content</p>');
+        expect(formData['template-subject']).toBe('Versions base subject');
+      }, { timeout: 3000 });
+    });
+
+    it('extracts content and subject from flat templateDataProp (else branch)', async () => {
+      const ref = React.createRef();
+      const templateData = {
+        'template-content': '<p>Flat content</p>',
+        "emailSubject": 'Flat email subject',
+        "html_content": '<p>flat html_content</p>',
+        "subject": 'Flat subject',
+      };
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            params={{ id: '123' }}
+            templateData={templateData}
+            Email={{
+              templateDetails: { _id: '123' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+      await waitFor(() => {
+        const content = ref.current.getContentForPreview();
+        const formData = ref.current.getFormDataForPreview();
+        expect(content).toBe('<p>Flat content</p>');
+        expect(formData['template-subject']).toBe('Flat email subject');
+      }, { timeout: 3000 });
+    });
+  });
+
   describe('setIsLoadingContent callback', () => {
     it('should call setIsLoadingContent when uploaded content is available', async () => {
       const setIsLoadingContent = jest.fn();
@@ -1933,6 +2044,37 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('location.query and tagList (lines 127, 129, 185)', () => {
+    it('should handle missing location.query (destructure from empty object)', () => {
+      renderWithIntl({
+        location: {},
+        supportedTags: [],
+        metaEntities: { tags: { standard: [{ name: 'standard.tag' }] } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('should handle null location (query defaults to {})', () => {
+      renderWithIntl({
+        location: null,
+        supportedTags: [],
+        metaEntities: { tags: { standard: [] } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('should use tagList from supportedTags when type=embedded, module=library and no getDefaultTags (line 129)', () => {
+      const supportedTags = [{ name: 'custom.a' }, { name: 'custom.b' }];
+      renderWithIntl({
+        location: { query: { type: 'embedded', module: 'library' } },
+        getDefaultTags: null,
+        supportedTags,
+        metaEntities: { tags: { standard: [{ name: 'standard.only' }] } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+  });
+
   describe('tags useMemo (lines 125-132)', () => {
     it('should use supportedTags when in EMBEDDED mode with LIBRARY module and no getDefaultTags', () => {
       const supportedTags = [{ name: 'custom.tag1' }, { name: 'custom.tag2' }];
@@ -2050,7 +2192,7 @@ describe('EmailHTMLEditor', () => {
       expect(formData).toBeDefined();
       expect(formData['0']).toBeDefined();
       expect(formData['0'].fr).toBeDefined(); // Uses base_language 'fr'
-      expect(formData['0'].fr['is_drag_drop']).toBe(false);
+      expect(formData['0'].fr.is_drag_drop).toBe(false);
       expect(formData['0'].activeTab).toBe('fr');
       expect(formData['0'].selectedLanguages).toEqual(['fr']);
       expect(formData['0'].base).toBe(true);

package/v2Containers/MobilePush/Create/index.js

@@ -114,7 +114,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.iosCtasData && isEmpty(this.state.templateCta)) {
       this.setState({showIosCtaTable: true});
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema)) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema) && isEmpty(this.state.formData)) {
       const schema = this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.imageSchema;
       const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
       const isIosSupported = get(this, "props.Templates.selectedWeChatAccount.configs.ios") === '1';

package/v2Containers/MobilePush/Edit/index.js

@@ -167,8 +167,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       };
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
-      this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema) && _.isEmpty(this.state.formData)) {
+      this.setState({ fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {} }, () => {
         this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
         const templateId = get(this, "props.params.id");
         if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
@@ -388,11 +388,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     } else {
-      selectedAccount = accounts[0];
+      selectedAccount = accounts?.[0];
       formData['mobilepush-accounts'] = selectedAccount?.id;
     }
     this.props.actions.setWeChatAccount(selectedAccount);
-    this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
+    this.setState({ formData, accountsOptions: accounts?.map((acc) => ({ key: acc.id, label: acc.name, value: acc.id })) });
   };
 
   createDefinition = (account) => ({
@@ -2018,12 +2018,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
     }
+    if (this.props.supportedTags) {
+      tags = this.props.supportedTags;
+    }
     return (
       <div className="creatives-mobilepush-edit mobilepush-wrapper">
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              {!this.props.isLoadingMetaEntities && <FormBuilder
+              <FormBuilder
+                key={!_.isEmpty(schema) ? 'has-schema' : 'no-schema'}
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2058,7 +2062,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
-              />}
+              />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox