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

package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js

@@ -24,20 +24,24 @@ 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);
+        setIsVisible(prev => !prev);
+        console.log(`✅ HTMLEditor test mode ${!isVisible ? 'activated' : 'deactivated'}`);
       },
 
       // 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"');
         }
@@ -48,6 +52,7 @@ 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(', ')}`);
         }
@@ -56,22 +61,58 @@ 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 () => {
@@ -87,40 +128,32 @@ const HTMLEditorTesting = () => {
   }
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        zIndex: 9999,
+    <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',
         display: 'flex',
-        flexDirection: 'column',
-        padding: '20px',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderBottom: '1px solid #ddd'
       }}>
-      {/* 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
@@ -131,7 +164,7 @@ const HTMLEditorTesting = () => {
             border: 'none',
             padding: '5px 15px',
             borderRadius: '4px',
-            cursor: 'pointer',
+            cursor: 'pointer'
           }}
         >
           Close
@@ -139,13 +172,12 @@ 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}
@@ -153,8 +185,10 @@ const HTMLEditorTesting = () => {
             initialContent={content}
             onContentChange={(newContent) => {
               setContent(newContent);
+              console.log('📝 Content changed:', newContent.substring(0, 100) + '...');
             }}
-            onSave={() => {
+            onSave={(savedContent) => {
+              console.log('💾 Content saved:', savedContent);
             }}
           />
         </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,6 +88,14 @@ 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', () => {
@@ -99,6 +107,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('mock-html-editor')).toBeInTheDocument();
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ HTMLEditor test mode activated');
     });
 
     it('hides editor when hide() is called', () => {
@@ -115,6 +124,7 @@ 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()', () => {
@@ -125,11 +135,14 @@ 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', () => {
@@ -156,6 +169,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-variant')).toHaveTextContent('email');
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Variant set to: email');
     });
 
     it('sets variant to inapp', () => {
@@ -167,6 +181,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-variant')).toHaveTextContent('inapp');
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Variant set to: inapp');
     });
 
     it('rejects invalid variant', () => {
@@ -200,6 +215,7 @@ 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', () => {
@@ -211,6 +227,7 @@ 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', () => {
@@ -222,6 +239,7 @@ 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', () => {
@@ -233,6 +251,7 @@ 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', () => {
@@ -270,6 +289,7 @@ describe('HTMLEditorTesting', () => {
       });
 
       expect(screen.getByTestId('editor-content')).toHaveTextContent(newContent);
+      expect(consoleSpy.log).toHaveBeenCalledWith('✅ Content updated');
     });
 
     it('gets current content', () => {
@@ -278,6 +298,7 @@ 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', () => {
@@ -301,6 +322,8 @@ 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', () => {
@@ -312,6 +335,46 @@ 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\')'));
     });
   });
 
@@ -407,6 +470,8 @@ 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,8 +8,6 @@ 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 = {