@capillarytech/creatives-library 8.0.276 → 8.0.278

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';
@@ -95,6 +95,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     this.isTagLoaded = false;
     this.edmEvent = undefined;
+    // When schema is set after CmsSettings (e.g. library create BEE), allow BEE init to run once
+    this.schemaJustFilledForBee = false;
     this.supportedLanguages = this.getSupportedLanguages(props);
     this.map = {
       "template-name": {
@@ -235,7 +237,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
-    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
+    const hasUploadedContent = !this.props.params?.id && this.props.Templates?.selectedEmailLayout && !_.isEmpty(formData);
+    this.setState({
+      content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
+      formData,
+      ...(hasUploadedContent ? { loadingStatus: 2 } : {}),
+    });
 
     // setTimeout(() => {
     //     // this.getFormData();
@@ -286,6 +293,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       }
     }
+
+    // When SUPPORT_CK_EDITOR: after zip/HTML upload we show with selectedEmailLayout. Ensure spinner stops
+    // even if formData was empty on first mount (e.g. currentOrgDetails not yet available).
+    if (!this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
+      this.setState((prev) => ({ loadingStatus: Math.max(prev.loadingStatus, 2) }));
+    }
   }
 
 
@@ -313,11 +326,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // }
     const {isFullMode, isGetFormData} = nextProps;
     if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData) && !this.state.isDragDrop) {
-      //only for ck editor
-      //when create button is clicked in full mode
-      // Don't start validation if we're in Test & Preview mode
+      // Only for CK editor: when Done is clicked in full mode, trigger the same chain as library
+      // so that FormBuilder validation and saveFormData run reliably (getFormData -> saveValidationData -> startValidation).
       if (!nextProps.isTestAndPreviewMode) {
-        this.startValidation(true);
+        this.getFormData();
       }
     }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
@@ -325,7 +337,9 @@ 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);
+      // So BEE init can run when CmsSettings already arrived (e.g. library create after default template selected)
+      this.schemaJustFilledForBee = true;
       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)) {
         const query = {
@@ -487,7 +501,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       }
 
-      if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema)) {
+      const cmsSettingsChanged = !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings);
+      const hasCmsSettingsAndSchema = !_.isEmpty(nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema);
+      const shouldRunBeeInit = hasCmsSettingsAndSchema && (cmsSettingsChanged || this.schemaJustFilledForBee);
+      if (shouldRunBeeInit) {
+        this.schemaJustFilledForBee = false;
         const apiLangId = nextProps.Email.CmsSettings.langId;
         const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.currentOrgDetails.basic_details.base_language;
 
@@ -1560,7 +1578,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       newFormData[0] = baseData;
       newFormData[0].base = true;
     }
-    this.props.templatesActions.resetUploadData();
+    // Don't clear selectedEmailLayout when we're in create mode with uploaded content -
+    // EmailWrapper uses it to keep isShowEmailCreate true. Clearing it would unmount Email and show wrong UI.
+    const isCreateWithUpload = !props.params?.id && props.Templates?.selectedEmailLayout;
+    if (!isCreateWithUpload) {
+      this.props.templatesActions.resetUploadData();
+    }
     return newFormData;
   }
 
@@ -1752,6 +1775,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 +1793,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) => {
@@ -2869,6 +2924,17 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
+
+    // When SUPPORT_CK_EDITOR: after zip/HTML upload we show Email component with selectedEmailLayout.
+    // Don't show spinner once we have uploaded content in formData (create mode, no params.id).
+    if (isLoading && !this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
+      const content = this.state.formData?.[0]?.['template-content']
+        || _.get(this.state.formData, 'base.template-content')
+        || (this.state.formData?.base && this.state.formData.base[this.state.formData.base?.activeTab]?.['template-content']);
+      if (content) {
+        isLoading = false;
+      }
+    }
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -73,6 +73,7 @@ const EmailHTMLEditor = (props) => {
     getFormdata,
     // Library mode props
     templateData: templateDataProp,
+    isEditEmail = true,
     // Uploaded content from zip file
     EmailLayout,
     // Liquid validation
@@ -174,11 +175,13 @@ const EmailHTMLEditor = (props) => {
   // Check if liquid support is enabled
   const isLiquidEnabled = hasLiquidSupportFeature();
 
-  // Detect edit mode
+  // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-  const currentTemplateId = templateDataProp?._id || params?.id || location?.query?.id || location?.params?.id
-    || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1];
-  const isEditMode = !!currentTemplateId || !!hasParamsId;
+  const currentTemplateId = isEditEmail
+    ? (templateDataProp?._id || params?.id || location?.query?.id || location?.params?.id
+      || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1])
+    : (params?.id || location?.query?.id || location?.params?.id || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1]);
+  const isEditMode = isEditEmail && (!!currentTemplateId || !!hasParamsId);
 
   // Load tags on component mount
   useEffect(() => {
@@ -685,9 +688,10 @@ const EmailHTMLEditor = (props) => {
       return;
     }
 
-    // 2. Validate Unsubscribe Tag (if mandatory)
-    // Check if unsubscribe tag is mandatory and if it exists in content
-    if (isEmailUnsubscribeTagMandatory() && moduleType === OUTBOUND) {
+    // 2. Validate Unsubscribe Tag when feature is OFF (when flag is false we require unsubscribe)
+    // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is true: do NOT validate for unsubscribe (aligned with FormBuilder).
+    // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
+    if (!isEmailUnsubscribeTagMandatory() && moduleType === OUTBOUND) {
       // Check if content contains unsubscribe tag (either {{unsubscribe}} or {{unsubscribe(#...)})
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
@@ -706,7 +710,7 @@ const EmailHTMLEditor = (props) => {
         if (onValidationFail) {
           onValidationFail();
         }
-        // Block save - unsubscribe tag is mandatory
+        // Block save - unsubscribe tag is required when validation is enabled
         return;
       }
     }
@@ -1204,6 +1208,7 @@ EmailHTMLEditor.propTypes = {
   onValidationFail: PropTypes.func,
   moduleType: PropTypes.string,
   onHtmlEditorValidationStateChange: PropTypes.func,
+  isEditEmail: PropTypes.bool,
 };
 
 EmailHTMLEditor.defaultProps = {
@@ -1239,6 +1244,7 @@ EmailHTMLEditor.defaultProps = {
   onValidationFail: null,
   moduleType: null,
   onHtmlEditorValidationStateChange: null,
+  isEditEmail: true,
 };
 
 const EmailHTMLEditorWithIntl = injectIntl(EmailHTMLEditor);

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -182,6 +182,7 @@ const EmailWrapperView = ({
   Email,
   templateData: templateDataProp,
   params,
+  isEditEmail = true,
   fetchingLiquidTags,
   createTemplateInProgress,
   fetchingCmsData,
@@ -202,8 +203,9 @@ const EmailWrapperView = ({
   let isHTMLEditorMode = false;
 
   if (supportCKEditor) {
-    // Legacy flow: use HTML editor for UPLOAD so zip/HTML content (EmailLayout) is shown; use Email component for EDITOR
-    isHTMLEditorMode = emailCreateMode === EMAIL_CREATE_MODES.UPLOAD;
+    // UPLOAD mode should use Email component (CKEditor), NOT HTML editor
+    // This ensures consistency between create and edit flows when SUPPORT_CK_EDITOR is enabled
+    isHTMLEditorMode = false; // Always use Email component (CKEditor) in legacy flow
   } else if (isEditModeForEditor) {
     isHTMLEditorMode = !isExplicitlyBEEEditor;
   } else {
@@ -257,6 +259,7 @@ const EmailWrapperView = ({
     getFormdata,
     // Library mode props
     templateData: templateDataProp,
+    isEditEmail,
     // Uploaded content from zip file
     EmailLayout,
     // Liquid validation
@@ -372,6 +375,7 @@ EmailWrapperView.propTypes = {
   Email: PropTypes.object,
   templateData: PropTypes.object,
   params: PropTypes.object,
+  isEditEmail: PropTypes.bool,
   fetchingLiquidTags: PropTypes.bool,
   createTemplateInProgress: PropTypes.bool,
   fetchingCmsData: PropTypes.bool,

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -386,6 +386,7 @@ const defaultProps = {
   isGetFormData: false,
   getFormdata: jest.fn(),
   templateData: null,
+  isEditEmail: true,
   EmailLayout: null,
   getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
   showLiquidErrorInFooter: jest.fn(),
@@ -642,6 +643,45 @@ describe('EmailHTMLEditor', () => {
       // Should trigger fetch for new template ID
       expect(emailActions.getTemplateDetails).toHaveBeenCalled();
     });
+
+    it('does not fetch template details when isEditEmail is false even if templateData has _id (create flow)', async () => {
+      const emailActions = {
+        ...defaultProps.emailActions,
+        getTemplateDetails: jest.fn(),
+      };
+      renderWithIntl({
+        isEditEmail: false,
+        templateData: { _id: 'stale-template-id', name: 'Stale' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+        Email: { templateDetails: null, getTemplateDetailsInProgress: false, fetchingCmsData: false },
+        emailActions,
+      });
+
+      await waitFor(() => {
+        expect(emailActions.getTemplateDetails).not.toHaveBeenCalled();
+      }, { timeout: 500 });
+    });
+
+    it('uses templateData._id for currentTemplateId and fetches when isEditEmail is true', async () => {
+      const emailActions = {
+        ...defaultProps.emailActions,
+        getTemplateDetails: jest.fn(),
+      };
+      const templateId = 'edit-template-id';
+      renderWithIntl({
+        isEditEmail: true,
+        templateData: { _id: templateId, name: 'Edit Template' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+        Email: { templateDetails: null, getTemplateDetailsInProgress: false, fetchingCmsData: false },
+        emailActions,
+      });
+
+      await waitFor(() => {
+        expect(emailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+      }, { timeout: 500 });
+    });
   });
 
   describe('Subject Handling', () => {
@@ -976,8 +1016,9 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
-    it('blocks save when unsubscribe tag is mandatory and missing', async () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(true);
+    it('blocks save when unsubscribe validation is on (flag false) and tag is missing', async () => {
+      // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false we validate and require unsubscribe
+      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
       const onValidationFail = jest.fn();
       const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
 
@@ -1005,15 +1046,15 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
-    it('allows save when unsubscribe tag is present', () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(true);
+    it('allows save when unsubscribe validation is on and tag is present', () => {
+      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
       renderWithIntl({
         isGetFormData: true,
         subject: 'Valid Subject',
         htmlContent: '<p>Content {{unsubscribe}}</p>',
         moduleType: 'OUTBOUND',
       });
-      // Should proceed with save
+      // Should proceed with save (validation passes)
     });
 
     it('blocks save for non-liquid orgs when tag validation fails', async () => {
@@ -1897,6 +1938,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 +2085,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 +2233,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/EmailWrapper/components/__tests__/EmailWrapperView.test.js

@@ -517,4 +517,141 @@ describe('EmailWrapperView', () => {
       // Should handle gracefully if ref methods don't exist
     });
   });
+
+  describe('Issue 1: Beefree template should open in Beefree editor in Edit mode', () => {
+    beforeEach(() => {
+      const { hasSupportCKEditor } = require('../../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false); // New flow
+    });
+
+    it('should render Email component (not HTML editor) when editing Beefree template', () => {
+      const emailPropsWithBEE = {
+        ...defaultProps.emailProps,
+        editor: 'BEE',
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithBEE,
+        emailCreateMode: EMAIL_CREATE_MODES.DRAG_DROP,
+        params: { id: 'beefree-template-1' },
+        location: { query: {}, pathname: '/email/edit/beefree-template-1' },
+      });
+
+      // Should render Email component (BEE editor), not HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+      // Email component would be rendered (we're using EmailWithoutSaga which doesn't have a testid)
+    });
+
+    it('should render HTML editor when editing non-Beefree template', () => {
+      const emailPropsWithHTML = {
+        ...defaultProps.emailProps,
+        editor: 'HTML',
+        selectedEditorMode: EMAIL_CREATE_MODES.HTML_EDITOR,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithHTML,
+        emailCreateMode: EMAIL_CREATE_MODES.HTML_EDITOR,
+        params: { id: 'html-template-1' },
+        location: { query: {}, pathname: '/email/edit/html-template-1' },
+      });
+
+      // Should render HTML editor for non-Beefree template
+      expect(screen.getByTestId('email-html-editor')).toBeInTheDocument();
+    });
+
+    it('should render Email component when emailCreateMode is DRAG_DROP in create mode', () => {
+      const emailPropsWithBEE = {
+        ...defaultProps.emailProps,
+        editor: 'BEE',
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithBEE,
+        emailCreateMode: EMAIL_CREATE_MODES.DRAG_DROP,
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (BEE editor), not HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Issue 2: Upload Zip should open in CKEditor when SUPPORT_CK_EDITOR is enabled', () => {
+    beforeEach(() => {
+      const { hasSupportCKEditor } = require('../../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(true); // Legacy flow
+    });
+
+    it('should render Email component (CKEditor) for UPLOAD mode in create flow', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined, // Default CKEditor
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: { html: '<p>Uploaded content</p>' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+
+    it('should render Email component (CKEditor) for UPLOAD mode in edit flow', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined,
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: { html: '<p>Edited uploaded content</p>' },
+        params: { id: 'uploaded-template-1' },
+        location: { query: {}, pathname: '/email/edit/uploaded-template-1' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+
+    it('should NOT render HTML editor for EDITOR mode when SUPPORT_CK_EDITOR is enabled', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined,
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+  });
 });