@capillarytech/creatives-library 8.0.236-alpha.7 → 8.0.236

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -45,7 +45,6 @@ export function SlideBoxHeader(props) {
   const isZaloEdit = channel.toLowerCase() === ZALO && slidBoxContent === 'editTemplate';
   const zaloOverview = isZaloEdit && isFullMode;
   const whatsappOverview = isWhatsappEdit && isFullMode;
-  const shouldShowInAppEditHeader = isInAppEdit && !isFullMode;
   const headerMessage = whatsappOverview ? messages.whatsappOverview : zaloOverview ? messages.zaloOverview : messages.editMessageContent;
   const {
     whatsappTemplateName,
@@ -110,7 +109,7 @@ export function SlideBoxHeader(props) {
             }
           />
         )}
-      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (shouldShowInAppEditHeader || !isInAppCreate) && (
+      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
         <CapHeader
           className="support-video-elements"
           title={<FormattedMessage {...headerMessage} values={{ channel: getChannelLabel(channel) }} />}

package/v2Containers/CreativesContainer/constants.js

@@ -24,7 +24,6 @@ export const INAPP = "INAPP";
 export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 export const JOURNEY = "journey";
-export const HTML = "HTML";
 
 export const LOYALTY_SUPPORTED_ACTION = "SEND_COMMUNICATION_ACTION";
 

package/v2Containers/CreativesContainer/index.js

@@ -43,7 +43,7 @@ import {
   IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
 } from '../Line/Container/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
-import { RCS_STATUSES } from '../Rcs/constants';
+import {RCS_STATUSES} from '../Rcs/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import {
@@ -64,7 +64,6 @@ import {
   // getTemplateDiffState
 } from "../../utils/transformerUtils";
 import { MANUAL_CAROUSEL } from '../MobilePushNew/constants';
-import { BIG_HTML } from '../InApp/constants';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -96,7 +95,6 @@ export class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
-      inAppEditorType: null,
       isLiquidValidationError: false,
       errorMessages: [],
       liquidErrorMessage: {
@@ -138,7 +136,7 @@ export class Creatives extends React.Component {
     if (!this.props?.isFullMode) {
       this.props?.templateActions.getCdnTransformationConfig();
     }
-
+    
     // Store loyalty tag props if loyaltyTagFetchingDependencies is provided
     const { loyaltyTagFetchingDependencies } = this.props;
     if (loyaltyTagFetchingDependencies) {
@@ -164,9 +162,9 @@ export class Creatives extends React.Component {
     const isEmptyTemplateName = !value.trim();
 
     // 1. IMMEDIATE: Update local state for instant UI feedback
-    this.setState({
+    this.setState({ 
       isTemplateNameEmpty: isEmptyTemplateName,
-      localTemplateName: value
+      localTemplateName: value 
     });
 
     // 2. DEBOUNCED: Only debounce the expensive onFormDataChange call
@@ -263,10 +261,6 @@ export class Creatives extends React.Component {
     this.setState({ inAppCreateMode: mode });
   }
 
-  onInAppEditorTypeChange = (editorType) => {
-    this.setState({ inAppEditorType: editorType });
-  }
-
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode });
   }
@@ -310,7 +304,7 @@ export class Creatives extends React.Component {
       }
       return buttonObj;
     });
-    const { url, previewUrl } = media || {};
+    const {url, previewUrl} = media || {};
     return {
       bodyText: bodyTemplate,
       varMap: cardVarMapped,
@@ -439,35 +433,14 @@ export class Creatives extends React.Component {
         }
         case constants.INAPP: {
           const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type') || '';
-
-          // Check if this is a BEE editor template (identified by special title 'bee free template')
-          const isAndroidBeeEditor = templateData?.androidContent?.type === constants.HTML
-            && templateData?.androidContent?.title?.toLowerCase() === 'bee free template';
-          const isIosBeeEditor = templateData?.iosContent?.type === constants.HTML
-            && templateData?.iosContent?.title?.toLowerCase() === 'bee free template';
-
           creativesTemplateData = {
             type: channel,
             name: templateData.messageSubject,
             versions: {
               base: {
                 content: {
-                  ANDROID: isAndroidBeeEditor ? {
-                    type: templateData?.androidContent?.type,
-                    bodyType: templateData?.androidContent?.bodyType,
-                    deviceType: constants.ANDROID,
-                    beeHtml: { value: templateData?.androidContent?.message },
-                    beeJson: templateData?.androidContent?.expandableDetails?.message,
-                    isBEEeditor: true,
-                  } : templateData?.androidContent,
-                  IOS: isIosBeeEditor ? {
-                    type: templateData?.iosContent?.type,
-                    bodyType: templateData?.iosContent?.bodyType,
-                    deviceType: constants.IOS,
-                    beeHtml: { value: templateData?.iosContent?.message },
-                    beeJson: templateData?.iosContent?.expandableDetails?.message,
-                    isBEEeditor: true,
-                  } : templateData?.iosContent,
+                  ANDROID: templateData?.androidContent,
+                  IOS: templateData?.iosContent,
                 },
               },
             },
@@ -702,7 +675,7 @@ export class Creatives extends React.Component {
           } = templateData || {};
           const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
           const Status = RCS_STATUSES.approved || '';
-
+        
           creativesTemplateData = {
             type: channel,
             edit: true,
@@ -787,7 +760,7 @@ export class Creatives extends React.Component {
   });
 
   getMobilePushCarouselData = (expandableDetails = []) => {
-    const newExpandableDetails = { ...expandableDetails };
+    const newExpandableDetails = {...expandableDetails};
     newExpandableDetails.style = expandableDetails.style || MANUAL_CAROUSEL;
     newExpandableDetails.message = expandableDetails.message || '';
     newExpandableDetails.ctas = expandableDetails.ctas || [];
@@ -882,24 +855,11 @@ export class Creatives extends React.Component {
               androidContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
-              androidContent.expandableDetails = this.getMobilePushCarouselData({ ...androidContent?.expandableDetails });
-            }
-            if (androidContent?.isBEEeditor && androidContent?.beeHtml?.value) {
-              templateData.androidContent = {};
-              templateData.androidContent.type = constants.HTML;
-              templateData.androidContent.message = androidContent?.beeHtml?.value || '';
-              templateData.androidContent.title = 'bee free template';
-              templateData.androidContent.bodyType = androidContent?.bodyType;
-              templateData.androidContent.deviceType = constants.ANDROID;
-              templateData.androidContent.expandableDetails = {
-                style: BIG_HTML,
-                message: androidContent?.beeJson || '',
-              };
-            } else if (!androidContent?.isBEEeditor) {
-              templateData.androidContent = androidContent;
-              templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
-              templateData.androidContent.deviceType = constants.ANDROID;
+              androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
             }
+            templateData.androidContent = androidContent;
+            templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
+            templateData.androidContent.deviceType = constants.ANDROID;
           }
           const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
           if (!isEmpty(iosContent)) {
@@ -917,24 +877,11 @@ export class Creatives extends React.Component {
               iosContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
-              iosContent.expandableDetails = this.getMobilePushCarouselData({ ...iosContent?.expandableDetails });
-            }
-            if (iosContent?.isBEEeditor && iosContent?.beeHtml?.value) {
-              templateData.iosContent = {};
-              templateData.iosContent.type = constants.HTML;
-              templateData.iosContent.message = iosContent?.beeHtml?.value || '';
-              templateData.iosContent.title = 'bee free template';
-              templateData.iosContent.bodyType = iosContent?.bodyType;
-              templateData.iosContent.deviceType = constants.IOS;
-              templateData.iosContent.expandableDetails = {
-                style: BIG_HTML,
-                message: iosContent?.beeJson || '',
-              };
-            } else if (!iosContent?.isBEEeditor) {
-              templateData.iosContent = iosContent;
-              templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
-              templateData.iosContent.deviceType = constants.IOS;
+              iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
             }
+            templateData.iosContent = iosContent;
+            templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
+            templateData.iosContent.deviceType = constants.IOS;
           }
           templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";
         }
@@ -1149,7 +1096,7 @@ export class Creatives extends React.Component {
             contentType = "",
             cardType = "",
             cardSettings = {},
-          } = get(versions, 'base.content.RCS.rcsContent', {});
+          } = get(versions, 'base.content.RCS.rcsContent',{});
           const rcsContent = {
             contentType,
             cardType,
@@ -1287,7 +1234,7 @@ export class Creatives extends React.Component {
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
-    const { actionName, setMetaData = () => { } } = loyaltyMetaData;
+    const { actionName, setMetaData = () => {} } = loyaltyMetaData;
 
     // const isTemplateModified = getTemplateDiffState(
     //   channel,
@@ -1337,9 +1284,6 @@ export class Creatives extends React.Component {
       if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
         newState = { ...newState, emailCreateMode: null };
       }
-      if (prevState.currentChannel.toUpperCase() === constants.INAPP) {
-        newState = { ...newState, inAppEditorType: null };
-      }
       return newState;
     });
   }
@@ -1385,7 +1329,7 @@ export class Creatives extends React.Component {
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
     const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData, inAppCreateMode,
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
     } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1428,7 +1372,6 @@ export class Creatives extends React.Component {
       showFooter = true;
     }
 
-
     if (showFooter) {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
         || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
@@ -1451,7 +1394,7 @@ export class Creatives extends React.Component {
 
   shouldShowDoneFooter = () => {
     const {
-      slidBoxContent, templateStep, currentChannel, templateData, inAppCreateMode,
+      slidBoxContent, templateStep, currentChannel, templateData,
     } = this.state;
     const { isFullMode } = this.props;
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1492,18 +1435,18 @@ export class Creatives extends React.Component {
   templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
     // Use local state for immediate UI feedback, fallback to prop value
     const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-
+    
     return (
       <CapInput
         value={displayValue}
         suffix={<span />}
-        onBlur={() => {
-          this.setState({
+        onBlur={() => { 
+          this.setState({ 
             isEditName: false,
             localTemplateName: '' // Clear local state on blur
-          }, () => {
-            this.showTemplateName({ formData, onFormDataChange });
-          });
+          }, () => { 
+            this.showTemplateName({ formData, onFormDataChange }); 
+          }); 
         }}
         onChange={(ev) => {
           const { value } = ev.currentTarget;
@@ -1526,7 +1469,7 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({
+        this.setState({ 
           showTemplateNameComponentEdit: true,
           localTemplateName: name || '' // Initialize local state with current value
         });
@@ -1544,7 +1487,7 @@ export class Creatives extends React.Component {
 
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
     const {
-      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppEditorType, weChatTemplateType,
+      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType,
     } = this.state;
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1559,6 +1502,8 @@ export class Creatives extends React.Component {
       isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
     } else if (currentChannel.toUpperCase() === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
+    } else if (currentChannel.toUpperCase() === constants.INAPP) {
+      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentChannel === "modeSelection";
     }
 
     return isShowContinueFooter;
@@ -1604,7 +1549,6 @@ export class Creatives extends React.Component {
       activeFormBuilderTab,
       showTestAndPreviewSlidebox,
       isTestAndPreviewMode,
-      inAppEditorType,
     } = this.state;
     const {
       isFullMode,
@@ -1688,8 +1632,6 @@ export class Creatives extends React.Component {
               onChannelChange={this.onChannelChange}
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
-              onInAppEditorTypeChange={this.onInAppEditorTypeChange}//used when create is clicked in inapp
-              inAppEditorType={inAppEditorType}// htmlEditor || dragDropEditor are values
               templateStep={this.creativesTemplateSteps[templateStep]}
               onCreateNextStep={this.onCreateNextStep}
               onEnterTemplateName={this.onEnterTemplateName}
@@ -1699,8 +1641,6 @@ export class Creatives extends React.Component {
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
-              inAppCreateMode={this.state.inAppCreateMode}
-              onInAppModeChange={this.onInAppModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}
@@ -1771,7 +1711,7 @@ export class Creatives extends React.Component {
               {(() => {
                 const errorsToShow = get(liquidErrorMessage, constants.LIQUID_ERROR_MSG, []);
                 const standardErrorsToShow = get(liquidErrorMessage, constants.STANDARD_ERROR_MSG, []);
-                return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{ LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow }} />;
+                return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow}} />;
               })()}
             </CapRow>
           )}

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

@@ -1101,17 +1101,25 @@ exports[`Test SlideBoxContent container Should render correct component for what
 
 exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 2`] = `
 <SlideBoxContent__CreativesWrapper>
-  <Connect(Connect(UserIsAuthenticated(InjectIntl(CreativesCommon))))
-    date={0}
+  <ForwardRef
     getDefaultTags=""
-    key="creatives-inapp-wrapper"
+    location={
+      Object {
+        "pathname": "/inapp/create",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
     onCreateComplete={[MockFunction]}
     templateData={
       Object {
         "mode": "create",
       }
     }
-    type=""
   />
 </SlideBoxContent__CreativesWrapper>
 `;

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

@@ -17,7 +17,6 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
-        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -33,8 +32,6 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
-        onInAppEditorTypeChange={[Function]}
-        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -106,7 +103,6 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
-        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -122,8 +118,6 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
-        onInAppEditorTypeChange={[Function]}
-        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -195,7 +189,6 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
-        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -211,8 +204,6 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
-        onInAppEditorTypeChange={[Function]}
-        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -296,7 +287,6 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
-        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -312,8 +302,6 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
-        onInAppEditorTypeChange={[Function]}
-        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -397,7 +385,6 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
-        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -413,8 +400,6 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
-        onInAppEditorTypeChange={[Function]}
-        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}

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>