@capillarytech/creatives-library 8.0.272 → 8.0.274

package/package.json

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

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

@@ -26,7 +26,7 @@ import * as globalActions from '../Cap/actions';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
-import { getDecodedFileName ,hasLiquidSupportFeature} from '../../utils/common';
+import { getDecodedFileName, hasLiquidSupportFeature, hasSupportCKEditor } from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -325,6 +325,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
+      this.applyTabOptionIconVisibility(newSchema);
 
       this.setState({schema: newSchema, loadingStatus: this.state.loadingStatus + 1});
       if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
@@ -1752,6 +1753,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                 newTabPopoverSection.cols[0].style.display = isDragDrop ? "" : "none";
               }
             });
+            // Hide tab-option-icon (switch editor trigger) when SUPPORT_CK_EDITOR is disabled
+            if (containerInputFieldCol.value && containerInputFieldCol.value.sections) {
+              _.forEach(containerInputFieldCol.value.sections[0].inputFields, (valueInputField) => {
+                _.forEach(valueInputField.cols, (valueCol) => {
+                  if (valueCol.id === 'tab-option-icon') {
+                    valueCol.colStyle = { ...valueCol.colStyle, display: hasSupportCKEditor() ? 'flex' : 'none' };
+                  }
+                });
+              });
+            }
           }
         });
       }
@@ -1760,6 +1771,28 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({schema, isSchemaChanged: true});
   }
 
+  /**
+   * Hides the tab-option-icon (switch editor trigger) in schema when SUPPORT_CK_EDITOR is disabled,
+   * so users cannot switch editor if the feature is not enabled.
+   */
+  applyTabOptionIconVisibility = (schema) => {
+    if (!schema || !schema.containers) return;
+    _.forEach(schema.containers, (container) => {
+      if (!container.isActive || !container.tabBarExtraContent?.sections?.[0]?.inputFields?.[0]?.cols) return;
+      _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (col) => {
+        if (col.id === 'tab-options-popover' && col.value?.sections?.[0]?.inputFields) {
+          _.forEach(col.value.sections[0].inputFields, (inputField) => {
+            _.forEach(inputField.cols, (c) => {
+              if (c.id === 'tab-option-icon') {
+                c.colStyle = { ...(c.colStyle || {}), display: hasSupportCKEditor() ? 'flex' : 'none' };
+              }
+            });
+          });
+        }
+      });
+    });
+  };
+
   showInsertImageButton = (passedSchema) => {
     const schema = passedSchema || _.cloneDeep(this.state.schema);
     _.forEach(schema.containers, (container) => {

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