@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
@@ -11,10 +11,15 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapError from '@capillarytech/cap-ui-library/CapError';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import Email from '../../Email';
+import { CAP_COLOR_06, CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
+import { EmailWithoutSaga } from '../../Email';
 import CmsTemplatesComponent from '../../../v2Components/CmsTemplatesComponent';
+import EmailHTMLEditor from './EmailHTMLEditor';
+import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
+import { EMAIL } from '../../CreativesContainer/constants';
 import messages from '../messages';
 import { EMAIL_CREATE_MODES, STEPS } from '../constants';
+import { hasSupportCKEditor } from '../../../utils/common';
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 
@@ -27,9 +32,23 @@ const CardContainer = styled.div`
       }
     }
   }
+
+  .ant-radio-group.cap-radioCard-v2 {
+    .ant-radio-button-wrapper {
+      &.ant-radio-button-wrapper-checked {
+        .icon-container {
+          background-color: ${CAP_COLOR_06};
+          .anticon,
+          .cap-icon {
+            color: ${CAP_WHITE};
+          }
+        }
+      }
+    }
+  }
 `;
 
-// Mode selection component that handles the creation mode selection UI
+// Mode selection component
 const ModeSelectionUI = ({
   isFullMode,
   templateName,
@@ -51,7 +70,7 @@ const ModeSelectionUI = ({
         value={templateName}
         labelPosition="top"
         size="default"
-        style={{ width: '68%'}}
+        style={{ width: '68%' }}
       />
     )}
     <CardContainer>
@@ -98,15 +117,21 @@ ModeSelectionUI.propTypes = {
   uploadButtonLabel: PropTypes.node.isRequired,
 };
 
-// Content creation component that handles the email or template selection UI
+// Content creation component
 const ContentCreationUI = ({
   isShowEmailCreate,
   emailProps,
   cmsTemplatesProps,
+  isHTMLEditorMode,
+  htmlEditorProps,
 }) => (
   <>
     {isShowEmailCreate ? (
-      <Email {...emailProps} />
+      isHTMLEditorMode ? (
+        <EmailHTMLEditor {...htmlEditorProps} />
+      ) : (
+        <EmailWithoutSaga {...emailProps} />
+      )
     ) : (
       <CmsTemplatesComponent {...cmsTemplatesProps} />
     )}
@@ -117,6 +142,8 @@ ContentCreationUI.propTypes = {
   isShowEmailCreate: PropTypes.bool.isRequired,
   emailProps: PropTypes.object.isRequired,
   cmsTemplatesProps: PropTypes.object.isRequired,
+  isHTMLEditorMode: PropTypes.bool,
+  htmlEditorProps: PropTypes.object,
 };
 
 // Main EmailWrapper presentational component
@@ -137,9 +164,130 @@ const EmailWrapperView = ({
   isShowEmailCreate,
   emailProps,
   cmsTemplatesProps,
+  metaEntities,
+  loadingTags,
+  injectedTags,
+  globalActions,
+  supportedTags,
+  getDefaultTags,
+  location,
+  currentOrgDetails,
+  forwardedTags,
+  selectedOfferDetails,
+  eventContextTags,
+  getFormdata,
+  isGetFormData,
+  getLiquidTags,
+  showLiquidErrorInFooter,
+  onValidationFail,
+  emailActions,
+  Email,
+  templateData: templateDataProp,
+  params,
+  fetchingLiquidTags,
+  createTemplateInProgress,
+  fetchingCmsData,
+  setIsLoadingContent,
+  showTestAndPreviewSlidebox,
+  handleCloseTestAndPreview,
+  showTemplateName,
 }) => {
+  const htmlEditorRef = useRef(null);
+  const supportCKEditor = hasSupportCKEditor();
+  const hasParamsIdForEditor = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
+  const isEditModeForEditor = hasParamsIdForEditor;
+  const isBEEFromProps = emailProps?.editor === 'BEE' && emailProps?.selectedEditorMode === null;
+  const isDragDropFromCreateMode = emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP;
+  const isExplicitlyBEEEditor = isBEEFromProps || isDragDropFromCreateMode;
+  let isHTMLEditorMode = false;
 
-  const isShowTemplateSelection = step === STEPS.MODE_SELECTION || (step === STEPS.TEMPLATE_SELECTION && emailCreateMode === EMAIL_CREATE_MODES.UPLOAD);
+  if (supportCKEditor) {
+    isHTMLEditorMode = false; // Legacy flow: use Email component
+  } else if (isEditModeForEditor) {
+    isHTMLEditorMode = !isExplicitlyBEEEditor;
+  } else {
+    if (isExplicitlyBEEEditor || isBEEFromProps || isDragDropFromCreateMode) {
+      isHTMLEditorMode = false;
+    } else {
+      isHTMLEditorMode = emailProps?.selectedEditorMode === EMAIL_CREATE_MODES.HTML_EDITOR ||
+        emailCreateMode === EMAIL_CREATE_MODES.HTML_EDITOR;
+    }
+  }
+
+  const isShowTemplateSelection = step === STEPS.MODE_SELECTION;
+
+  // Create onFormDataChange callback for template name updates (similar to Email component)
+  // This allows CreativesContainer to update the template name when user clicks "Edit name"
+  // When user edits the name in CreativesContainer header, it calls this callback
+  // which updates the template name in EmailWrapper, and then CreativesContainer
+  // will call showTemplateName again with the updated formData
+  const handleFormDataChange = useCallback((updatedFormData) => {
+    const newTemplateName = updatedFormData?.['template-name'] || templateName;
+    if (newTemplateName !== templateName && onTemplateNameChange) {
+      // Update template name in parent (useEmailWrapper hook)
+      onTemplateNameChange({ target: { value: newTemplateName } });
+    }
+    // Note: CreativesContainer will call showTemplateName again after this callback
+    // (it stores the callback in templateContainerDetails and calls it after state updates)
+  }, [templateName, onTemplateNameChange]);
+
+  const htmlEditorProps = isHTMLEditorMode ? {
+    // Location and params
+    location,
+    params,
+    // Tag-related props
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    globalActions,
+    loadingTags,
+    eventContextTags,
+    forwardedTags,
+    selectedOfferDetails,
+    currentOrgDetails,
+    // Email Redux state and actions
+    Email,
+    emailActions,
+    // Full mode props
+    isFullMode,
+    templateName,
+    isGetFormData,
+    getFormdata,
+    // Library mode props
+    templateData: templateDataProp,
+    // Uploaded content from zip file
+    EmailLayout,
+    // Liquid validation
+    getLiquidTags,
+    showLiquidErrorInFooter,
+    onValidationFail,
+    // Template name
+    showTemplateName,
+    onFormDataChange: handleFormDataChange,
+    // Loading states
+    fetchingLiquidTags: fetchingLiquidTags || false,
+    createTemplateInProgress: createTemplateInProgress || false,
+    fetchingCmsData: fetchingCmsData || false,
+    // Parent loading control
+    setIsLoadingContent,
+    ref: htmlEditorRef,
+  } : {};
+
+  // Get formData for TestAndPreviewSlidebox when needed
+  const getFormDataForPreview = () => {
+    if (htmlEditorRef.current && htmlEditorRef.current.getFormDataForPreview) {
+      return htmlEditorRef.current.getFormDataForPreview();
+    }
+    return {};
+  };
+
+  const getContentForPreview = () => {
+    if (htmlEditorRef.current && htmlEditorRef.current.getContentForPreview) {
+      return htmlEditorRef.current.getContentForPreview();
+    }
+    return '';
+  };
 
   return (
     <>
@@ -163,9 +311,22 @@ const EmailWrapperView = ({
             isShowEmailCreate={isShowEmailCreate}
             emailProps={emailProps}
             cmsTemplatesProps={cmsTemplatesProps}
+            isHTMLEditorMode={isHTMLEditorMode}
+            htmlEditorProps={htmlEditorProps}
           />
         )}
       </CapSpin>
+      {/* Render TestAndPreviewSlidebox for HTML Editor (similar to legacy Email component) */}
+      {isHTMLEditorMode && showTestAndPreviewSlidebox && (
+        <TestAndPreviewSlidebox
+          show={showTestAndPreviewSlidebox}
+          onClose={handleCloseTestAndPreview}
+          formData={getFormDataForPreview()}
+          content={getContentForPreview()}
+          currentChannel={EMAIL}
+          currentTab={1}
+        />
+      )}
     </>
   );
 };
@@ -175,6 +336,10 @@ EmailWrapperView.propTypes = {
   emailCreateMode: PropTypes.string,
   step: PropTypes.string,
   isFullMode: PropTypes.bool,
+  getFormdata: PropTypes.func,
+  isGetFormData: PropTypes.bool,
+  getLiquidTags: PropTypes.func,
+  showLiquidErrorInFooter: PropTypes.func,
   templateName: PropTypes.string,
   onTemplateNameChange: PropTypes.func.isRequired,
   isTemplateNameEmpty: PropTypes.bool,
@@ -187,6 +352,27 @@ EmailWrapperView.propTypes = {
   isShowEmailCreate: PropTypes.bool.isRequired,
   emailProps: PropTypes.object.isRequired,
   cmsTemplatesProps: PropTypes.object.isRequired,
+  metaEntities: PropTypes.object,
+  loadingTags: PropTypes.bool,
+  injectedTags: PropTypes.object,
+  globalActions: PropTypes.object,
+  supportedTags: PropTypes.array,
+  getDefaultTags: PropTypes.string,
+  location: PropTypes.object,
+  currentOrgDetails: PropTypes.object,
+  forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  eventContextTags: PropTypes.array,
+  emailActions: PropTypes.object,
+  Email: PropTypes.object,
+  templateData: PropTypes.object,
+  params: PropTypes.object,
+  fetchingLiquidTags: PropTypes.bool,
+  createTemplateInProgress: PropTypes.bool,
+  fetchingCmsData: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
+  showTestAndPreviewSlidebox: PropTypes.bool,
+  handleCloseTestAndPreview: PropTypes.func,
 };
 
 export default EmailWrapperView;

package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js

@@ -24,24 +24,20 @@ const HTMLEditorTesting = () => {
       // Show/Hide editor
       show: () => {
         setIsVisible(true);
-        console.log('✅ HTMLEditor test mode activated');
       },
 
       hide: () => {
         setIsVisible(false);
-        console.log('✅ HTMLEditor test mode deactivated');
       },
 
       toggle: () => {
-        setIsVisible(prev => !prev);
-        console.log(`✅ HTMLEditor test mode ${!isVisible ? 'activated' : 'deactivated'}`);
+        setIsVisible((prev) => !prev);
       },
 
       // Variant control
       setVariant: (newVariant) => {
         if (['email', 'inapp'].includes(newVariant)) {
           setVariant(newVariant);
-          console.log(`✅ Variant set to: ${newVariant}`);
         } else {
           console.error('❌ Invalid variant. Use: "email" or "inapp"');
         }
@@ -52,7 +48,6 @@ const HTMLEditorTesting = () => {
         const validLayouts = Object.values(LAYOUT_TYPES);
         if (validLayouts.includes(layout)) {
           setLayoutType(layout);
-          console.log(`✅ Layout set to: ${layout}`);
         } else {
           console.error(`❌ Invalid layout. Use: ${validLayouts.join(', ')}`);
         }
@@ -61,58 +56,22 @@ const HTMLEditorTesting = () => {
       // Content control
       setContent: (newContent) => {
         setContent(newContent);
-        console.log('✅ Content updated');
       },
 
       getContent: () => {
-        console.log('Current content:', content);
         return content;
       },
 
       // Status
       status: () => {
-        console.log('📊 HTMLEditor Test Status:');
-        console.log(`  Visible: ${isVisible}`);
-        console.log(`  Variant: ${variant}`);
-        console.log(`  Layout: ${layoutType}`);
-        console.log(`  Content size: ${content.length} chars`);
       },
 
       // Help
       help: () => {
-        console.log(`
-🚀 HTMLEditor Testing Console Commands:
-
-📱 Basic Controls:
-  htmlEditorTest.show()           - Show the editor
-  htmlEditorTest.hide()           - Hide the editor
-  htmlEditorTest.toggle()         - Toggle editor visibility
-
-⚙️ Configuration:
-  htmlEditorTest.setVariant('email')     - Set to email variant
-  htmlEditorTest.setVariant('inapp')     - Set to inapp variant
-  htmlEditorTest.setLayout('POPUP')      - Set layout (inapp only)
-                                      - Valid: POPUP, HEADER, FOOTER, FULLSCREEN
-
-📝 Content:
-  htmlEditorTest.setContent('<h1>Test</h1>')  - Set editor content
-  htmlEditorTest.getContent()                  - Get current content
-
-📊 Status:
-  htmlEditorTest.status()         - Show current status
-  htmlEditorTest.help()           - Show this help
-
-💡 Example Usage:
-  htmlEditorTest.show()
-  htmlEditorTest.setVariant('inapp')
-  htmlEditorTest.setLayout('HEADER')      // Top banner
-  htmlEditorTest.setLayout('FOOTER')      // Bottom banner
-        `);
-      }
+      },
     };
 
     // Show help on first load
-    console.log('🚀 HTMLEditor Testing Ready! Type htmlEditorTest.help() for commands');
 
     // Cleanup on unmount
     return () => {
@@ -128,32 +87,40 @@ const HTMLEditorTesting = () => {
   }
 
   return (
-    <div style={{
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-      zIndex: 9999,
-      display: 'flex',
-      flexDirection: 'column',
-      padding: '20px'
-    }}>
-      {/* Header */}
-      <div style={{
-        backgroundColor: '#fff',
-        padding: '10px 20px',
-        borderRadius: '8px 8px 0 0',
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        zIndex: 9999,
         display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderBottom: '1px solid #ddd'
+        flexDirection: 'column',
+        padding: '20px',
       }}>
+      {/* Header */}
+      <div
+        style={{
+          backgroundColor: '#fff',
+          padding: '10px 20px',
+          borderRadius: '8px 8px 0 0',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          borderBottom: '1px solid #ddd',
+        }}>
         <div>
           <strong>HTMLEditor Testing Mode</strong>
           <span style={{ marginLeft: '20px', color: '#666' }}>
-            Variant: {variant} | Layout: {layoutType}
+            Variant:
+            {' '}
+            {variant}
+            {' '}
+| Layout:
+            {' '}
+            {layoutType}
           </span>
         </div>
         <button
@@ -164,7 +131,7 @@ const HTMLEditorTesting = () => {
             border: 'none',
             padding: '5px 15px',
             borderRadius: '4px',
-            cursor: 'pointer'
+            cursor: 'pointer',
           }}
         >
           Close
@@ -172,12 +139,13 @@ const HTMLEditorTesting = () => {
       </div>
 
       {/* Editor Container */}
-      <div style={{
-        flex: 1,
-        backgroundColor: '#fff',
-        borderRadius: '0 0 8px 8px',
-        overflow: 'hidden'
-      }}>
+      <div
+        style={{
+          flex: 1,
+          backgroundColor: '#fff',
+          borderRadius: '0 0 8px 8px',
+          overflow: 'hidden',
+        }}>
         <IntlProvider locale="en" messages={{}}>
           <HTMLEditor
             variant={variant}
@@ -185,10 +153,8 @@ const HTMLEditorTesting = () => {
             initialContent={content}
             onContentChange={(newContent) => {
               setContent(newContent);
-              console.log('📝 Content changed:', newContent.substring(0, 100) + '...');
             }}
-            onSave={(savedContent) => {
-              console.log('💾 Content saved:', savedContent);
+            onSave={() => {
             }}
           />
         </IntlProvider>

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

@@ -47,8 +47,8 @@ describe('HTMLEditorTesting', () => {
   beforeEach(() => {
     // Mock console methods
     consoleSpy = {
-      log: jest.spyOn(console, 'log').mockImplementation(() => {}),
-      error: jest.spyOn(console, 'error').mockImplementation(() => {})
+      log: jest.spyOn(console, 'log').mockImplementation(() => { }),
+      error: jest.spyOn(console, 'error').mockImplementation(() => { })
     };
 
     // Clear any existing window.htmlEditorTest
@@ -88,14 +88,6 @@ describe('HTMLEditorTesting', () => {
       expect(typeof window.htmlEditorTest.status).toBe('function');
       expect(typeof window.htmlEditorTest.help).toBe('function');
     });
-
-    it('logs help message on initial load', () => {
-      render(<HTMLEditorTesting />);
-
-      expect(consoleSpy.log).toHaveBeenCalledWith(
-        '🚀 HTMLEditor Testing Ready! Type htmlEditorTest.help() for commands'
-      );
-    });
   });
 
   describe('Visibility Control', () => {
@@ -107,7 +99,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('mock-html-editor')).toBeInTheDocument();
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode activated');
     });
 
     it('hides editor when hide() is called', () => {
@@ -124,7 +115,6 @@ describe('HTMLEditorTesting', () => {
         window.htmlEditorTest.hide();
       });
       expect(screen.queryByTestId('mock-html-editor')).not.toBeInTheDocument();
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode deactivated');
     });
 
     it('toggles editor visibility with toggle()', () => {
@@ -135,14 +125,11 @@ describe('HTMLEditorTesting', () => {
         window.htmlEditorTest.toggle();
       });
       expect(screen.getByTestId('mock-html-editor')).toBeInTheDocument();
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode activated');
-
       // Toggle to hide
       act(() => {
         window.htmlEditorTest.toggle();
       });
       expect(screen.queryByTestId('mock-html-editor')).not.toBeInTheDocument();
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode deactivated');
     });
 
     it('closes editor when close button is clicked', () => {
@@ -169,7 +156,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-variant')).toHaveTextContent('email');
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Variant set to: email');
     });
 
     it('sets variant to inapp', () => {
@@ -181,7 +167,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-variant')).toHaveTextContent('inapp');
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Variant set to: inapp');
     });
 
     it('rejects invalid variant', () => {
@@ -215,7 +200,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.MODAL);
-      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.MODAL}`);
     });
 
     it('sets layout to HEADER', () => {
@@ -227,7 +211,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.HEADER);
-      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.HEADER}`);
     });
 
     it('sets layout to FOOTER', () => {
@@ -239,7 +222,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.FOOTER);
-      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.FOOTER}`);
     });
 
     it('sets layout to FULLSCREEN', () => {
@@ -251,7 +233,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-layout')).toHaveTextContent(LAYOUT_TYPES.FULLSCREEN);
-      expect(consoleSpy.log).toHaveBeenCalledWith(`✅ Layout set to: ${LAYOUT_TYPES.FULLSCREEN}`);
     });
 
     it('rejects invalid layout', () => {
@@ -289,7 +270,6 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-content')).toHaveTextContent(newContent);
-      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Content updated');
     });
 
     it('gets current content', () => {
@@ -298,7 +278,6 @@ describe('HTMLEditorTesting', () => {
       const result = window.htmlEditorTest.getContent();
 
       expect(result).toBe('<h1>Test HTML Editor</h1><p>This is a test integration.</p>');
-      expect(consoleSpy.log).toHaveBeenCalledWith('Current content:', result);
     });
 
     it('starts with default content', () => {
@@ -322,8 +301,6 @@ describe('HTMLEditorTesting', () => {
 
       const changeButton = screen.getByTestId('trigger-content-change');
       fireEvent.click(changeButton);
-
-      expect(consoleSpy.log).toHaveBeenCalledWith('📝 Content changed:', '<p>Changed content</p>...');
     });
 
     it('handles save callback', () => {
@@ -335,46 +312,6 @@ describe('HTMLEditorTesting', () => {
 
       const saveButton = screen.getByTestId('trigger-save');
       fireEvent.click(saveButton);
-
-      expect(consoleSpy.log).toHaveBeenCalledWith('💾 Content saved:', '<p>Saved content</p>');
-    });
-  });
-
-  describe('Status and Help', () => {
-    it('shows status information', () => {
-      render(<HTMLEditorTesting />);
-
-      act(() => {
-        window.htmlEditorTest.show();
-        window.htmlEditorTest.setVariant('inapp');
-        window.htmlEditorTest.setLayout(LAYOUT_TYPES.HEADER);
-      });
-
-      // Clear previous console calls
-      consoleSpy.log.mockClear();
-
-      act(() => {
-        window.htmlEditorTest.status();
-      });
-
-      expect(consoleSpy.log).toHaveBeenCalledWith('📊 HTMLEditor Test Status:');
-      expect(consoleSpy.log).toHaveBeenCalledWith('  Visible: true');
-      expect(consoleSpy.log).toHaveBeenCalledWith('  Variant: inapp');
-      expect(consoleSpy.log).toHaveBeenCalledWith('  Layout: HEADER');
-      expect(consoleSpy.log).toHaveBeenCalledWith('  Content size: 59 chars');
-    });
-
-    it('shows help information', () => {
-      render(<HTMLEditorTesting />);
-
-      act(() => {
-        window.htmlEditorTest.help();
-      });
-
-      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('🚀 HTMLEditor Testing Console Commands:'));
-      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('htmlEditorTest.show()'));
-      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('htmlEditorTest.setVariant(\'email\')'));
-      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('htmlEditorTest.setLayout(\'POPUP\')'));
     });
   });
 
@@ -470,8 +407,6 @@ describe('HTMLEditorTesting', () => {
       act(() => {
         window.htmlEditorTest.status();
       });
-
-      expect(consoleSpy.log).toHaveBeenCalledWith(`  Content size: ${customContent.length} chars`);
     });
 
     it('handles multiple rapid operations', () => {

package/v2Containers/EmailWrapper/constants.js

@@ -8,6 +8,8 @@ export const DEFAULT_ACTION = "app/EmailWrapper/DEFAULT_ACTION";
 export const EMAIL_CREATE_MODES = {
   UPLOAD: "upload",
   EDITOR: "editor",
+  HTML_EDITOR: "html_editor",
+  DRAG_DROP: "drag_drop",
 };
 
 export const STEPS = {