@capillarytech/creatives-library 8.0.276 → 8.0.278

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.276",
+  "version": "8.0.278",
   "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/CreativesContainer/SlideBoxContent.js

@@ -643,6 +643,7 @@ export function SlideBoxContent(props) {
             {isEmailCreate && (
       <EmailWrapper
         key="creatives-email-wrapper"
+        isEditEmail={false}
         date={new Date().getMilliseconds()}
         setIsLoadingContent={setIsLoadingContent}
         onEmailModeChange={onEmailModeChange}
@@ -723,6 +724,7 @@ export function SlideBoxContent(props) {
           return (
             <EmailWrapper
               key="cretives-container-email-edit-wrapper"
+              isEditEmail
               setIsLoadingContent={setIsLoadingContent}
               onEmailModeChange={onEmailModeChange}
               emailCreateMode="editor"

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -8,6 +8,7 @@ import messages from './messages';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
 import { PREVIEW } from './constants';
 import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
+import { hasSupportCKEditor } from '../../utils/common';
 
 function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
   if (isCreatingTemplate) {
@@ -72,8 +73,10 @@ function SlideBoxFooter(props) {
   const isBEEEditor = selectedEmailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
     || (emailCreateMode === EMAIL_CREATE_MODES.EDITOR && !isHTMLEditorMode)
     || (isEditMode && !isHtmlEditorValidationStateActive);
+  const isSupportCKEditor = hasSupportCKEditor();
   // Only check validation for HTML Editor mode, not for BEE/DragDrop editor
-  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor;
+  // In upload mode the legacy Email (CK) component does not report validation state, so do not disable buttons
+  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor && !isSupportCKEditor;
   const isContentEmpty = shouldCheckValidation ? (htmlEditorValidationState?.isContentEmpty ?? true) : false;
   // Check if validation has completed
   const validationComplete = shouldCheckValidation ? (htmlEditorValidationState?.validationComplete ?? false) : true;
@@ -123,7 +126,7 @@ function SlideBoxFooter(props) {
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
 
-  const shouldShowErrorInfoNote = hasBEEEditorErrors;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (

package/v2Containers/CreativesContainer/index.js

@@ -1781,16 +1781,20 @@ export class Creatives extends React.Component {
     const {
       slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppEditorType, weChatTemplateType,
     } = this.state;
+    const { isFullMode } = this.props;
+    const channel = currentChannel?.toUpperCase?.() || '';
+    // In library/embedded mode show Continue only for EMAIL and MOBILE_PUSH; hide for other channels
+    if (!isFullMode && channel !== constants.EMAIL && channel !== constants.MOBILE_PUSH) {
+      return false;
+    }
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
-    const channel = currentChannel.toUpperCase();
     // Check if supportCKEditor is false (new flow)
     const supportCKEditor = commonUtil.hasSupportCKEditor(); // Default to legacy flow
     if (channel === constants.EMAIL || channel === constants.SMS) {
-      // New flow: Show Continue button when supportCKEditor is false and in modeSelection
-      // Always show it (even if disabled) - visibility is separate from enabled state
+      // New flow: Show Continue button when supportCKEditor is false and in modeSelection (full mode only)
       if (!supportCKEditor && currentStep === 'modeSelection' && slidBoxContent === 'createTemplate') {
-        return true; // Return early to ensure visibility
+        return true;
       }
 
       // Legacy flow: Original logic (only when supportCKEditor is true)
@@ -1799,9 +1803,9 @@ export class Creatives extends React.Component {
         isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || (emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
         isShowContinueFooter = isEmailCreate && emailCreateMode;
       }
-    } else if (currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
+    } else if (channel === constants.MOBILE_PUSH) {
       isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
-    } else if (currentChannel.toUpperCase() === constants.WECHAT) {
+    } else if (channel === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
     }
 

package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js

@@ -11,6 +11,11 @@ import {
   } from '../../../utils/test-utils';
 import SlideBoxFooter from "../SlideBoxFooter";
 
+jest.mock('../../../utils/common', () => ({
+  ...jest.requireActual('../../../utils/common'),
+  hasSupportCKEditor: jest.fn(),
+}));
+
 const ComponentToRender = injectIntl(SlideBoxFooter);
 const renderComponent = props => {
   const store = configureStore({}, initialReducer, history);
@@ -21,49 +26,168 @@ const renderComponent = props => {
   );
 };
 
+const baseFooterProps = {
+  shouldShowDoneFooter: () => true,
+  shouldShowContinueFooter: () => false,
+  shouldShowFooter: () => true,
+  shouldShowHeader: () => true,
+  shouldShowTemplateName: () => true,
+  onSave: jest.fn(),
+  isFullMode: true,
+  messages: {},
+  slidBoxContent: 'editTemplate',
+  templateStep: 'modeSelection',
+  isTemplateNameEmpty: false,
+  isCreatingTemplate: false,
+};
+
 describe("test for empty email empty template name", () => {
     it("check the error message and disabled button", async () => {
-        const shouldShowDoneFooter = jest.fn();
-        shouldShowDoneFooter.mockReturnValue(true);
+        const { hasSupportCKEditor } = require('../../../utils/common');
+        hasSupportCKEditor.mockReturnValue(true);
+        const shouldShowDoneFooter = jest.fn().mockReturnValue(true);
         const shouldShowContinueFooter = jest.fn();
-        const shouldShowFooter = jest.fn();
-        const shouldShowHeader = jest.fn();
-        const shouldShowTemplateName = jest.fn();
-        const onSave = jest.fn();
-        const props={
-        shouldShowDoneFooter,
-        shouldShowContinueFooter,
-        shouldShowFooter,
-        shouldShowHeader,
-        shouldShowTemplateName,
-        onSave,
-        isFullMode: true,
-        messages: {
-        },
-        slidBoxContent: "editTemplate",
-        currentChannel: "EMAIL",
-        templateStep: "modeSelection",
-        isTemplateNameEmpty: true,
-        htmlEditorValidationState: {
-          isContentEmpty: false,
-          issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
-        },
-        isCreatingTemplate: false,
-      }
-      renderComponent(props);
-      const errorMessage = await screen.findByText(/template name cannot be empty/i);
-      expect(errorMessage).toBeInTheDocument();
-      const updateBtn = screen.getByRole('button',{name:/update/i});
-      expect(updateBtn).toBeDisabled();
-      renderComponent({
-        ...props,
-        isTemplateNameEmpty: false,
-        htmlEditorValidationState: {
-          isContentEmpty: false,
-          issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
-        },
-      })
-      const updateBtns = screen.getAllByRole('button',{name:/update/i});
-      expect(updateBtns[1]).toBeEnabled();
+        const props = {
+          ...baseFooterProps,
+          shouldShowDoneFooter,
+          shouldShowContinueFooter,
+          currentChannel: "EMAIL",
+          isTemplateNameEmpty: true,
+          htmlEditorValidationState: {
+            isContentEmpty: false,
+            issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+          },
+        };
+        renderComponent(props);
+        const errorMessage = await screen.findByText(/template name cannot be empty/i);
+        expect(errorMessage).toBeInTheDocument();
+        const updateBtn = screen.getByRole('button', { name: /update/i });
+        expect(updateBtn).toBeDisabled();
+        renderComponent({
+          ...props,
+          isTemplateNameEmpty: false,
+          htmlEditorValidationState: {
+            isContentEmpty: false,
+            issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+          },
+        });
+        const updateBtns = screen.getAllByRole('button', { name: /update/i });
+        expect(updateBtns[1]).toBeEnabled();
+    });
+});
+
+describe('shouldCheckValidation (line 79)', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('disables Save when shouldCheckValidation is true and validation has errors not acknowledged (HTML Editor, EMAIL, no CK)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: true,
+        hasErrors: true,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 1, label: 0, liquid: 0, total: 1 },
+      },
+    });
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeDisabled();
+  });
+
+  it('enables Save when shouldCheckValidation is true and validation complete with no blocking errors', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: true,
+        hasErrors: false,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+      },
+    });
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeEnabled();
+  });
+
+  it('does not disable Save based on validation when currentChannel is not EMAIL (shouldCheckValidation false)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'SMS',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: true,
+        hasErrors: true,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 1, label: 0, liquid: 0, total: 1 },
+      },
+    });
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeEnabled();
+  });
+
+  it('does not disable Save based on validation when htmlEditorValidationState is not provided (shouldCheckValidation false)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: null,
+    });
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeEnabled();
+  });
+
+  it('does not disable Save based on validation when hasSupportCKEditor is true (shouldCheckValidation false)', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(true);
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'editTemplate',
+      htmlEditorValidationState: {
+        validationComplete: true,
+        hasErrors: true,
+        errorsAcknowledged: false,
+        isContentEmpty: false,
+        issueCounts: { html: 1, label: 0, liquid: 0, total: 1 },
+      },
+    });
+    const updateBtn = screen.getByRole('button', { name: /update/i });
+    expect(updateBtn).toBeEnabled();
+  });
+
+  it('disables Save when shouldCheckValidation true and content empty in create mode', () => {
+    const { hasSupportCKEditor } = require('../../../utils/common');
+    hasSupportCKEditor.mockReturnValue(false);
+    renderComponent({
+      ...baseFooterProps,
+      currentChannel: 'EMAIL',
+      slidBoxContent: 'createTemplate',
+      emailCreateMode: 'html_editor',
+      selectedEmailCreateMode: 'html_editor',
+      htmlEditorValidationState: {
+        validationComplete: true,
+        hasErrors: false,
+        errorsAcknowledged: false,
+        isContentEmpty: true,
+        issueCounts: { html: 0, label: 0, liquid: 0, total: 0 },
+      },
     });
+    const saveBtn = screen.getByRole('button', { name: /create/i });
+    expect(saveBtn).toBeDisabled();
+  });
 });

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -10,6 +10,7 @@ exports[`Test SlideBoxContent container Email component isTestAndPreviewMode IIF
     getCmsTemplatesInProgress={false}
     handleCloseTestAndPreview={[MockFunction]}
     handleTestAndPreview={[MockFunction]}
+    isEditEmail={true}
     isLoyaltyModule={false}
     isTestAndPreviewMode={true}
     key="cretives-container-email-edit-wrapper"
@@ -60,6 +61,7 @@ exports[`Test SlideBoxContent container Email component isTestAndPreviewMode IIF
     getCmsTemplatesInProgress={false}
     handleCloseTestAndPreview={[MockFunction]}
     handleTestAndPreview={[MockFunction]}
+    isEditEmail={true}
     isLoyaltyModule={false}
     isTestAndPreviewMode={false}
     key="cretives-container-email-edit-wrapper"
@@ -110,6 +112,7 @@ exports[`Test SlideBoxContent container Email component isTestAndPreviewMode IIF
     getCmsTemplatesInProgress={false}
     handleCloseTestAndPreview={[MockFunction]}
     handleTestAndPreview={[MockFunction]}
+    isEditEmail={true}
     isLoyaltyModule={false}
     isTestAndPreviewMode={true}
     key="cretives-container-email-edit-wrapper"
@@ -159,6 +162,7 @@ exports[`Test SlideBoxContent container Email component isTestAndPreviewMode IIF
     getCmsTemplatesInProgress={false}
     handleCloseTestAndPreview={[MockFunction]}
     handleTestAndPreview={[MockFunction]}
+    isEditEmail={true}
     isLoyaltyModule={false}
     isTestAndPreviewMode={false}
     key="cretives-container-email-edit-wrapper"
@@ -1277,6 +1281,7 @@ exports[`Test SlideBoxContent container Should render correctly with isTestAndPr
   <Connect(UserIsAuthenticated(Component))
     date={0}
     getCmsTemplatesInProgress={false}
+    isEditEmail={false}
     isTestAndPreviewMode={false}
     key="creatives-email-wrapper"
     templateData={
@@ -1352,6 +1357,7 @@ exports[`Test SlideBoxContent container Should render correctly with isTestAndPr
   <Connect(UserIsAuthenticated(Component))
     date={0}
     getCmsTemplatesInProgress={false}
+    isEditEmail={false}
     isTestAndPreviewMode={true}
     key="creatives-email-wrapper"
     templateData={