@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

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,25 +11,38 @@ 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);
 
 const CardContainer = styled.div`
   margin-top: 16px;
-  .ant-radio-group{
-    .ant-radio-button-wrapper{
-      &:first-child{
-        margin-left: unset;
+
+  .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,20 +64,21 @@ const ModeSelectionUI = ({
         value={templateName}
         labelPosition="top"
         size="default"
-        style={{ width: '68%'}}
+        style={{ width: '68%' }}
       />
     )}
     <CardContainer>
       <CapRadioCardWithLabel
+        style={{ marginLeft: '-6px'}}
         panes={modes}
         onChange={onChange}
         selected={emailCreateMode}
-        label={<FormattedMessage {...messages.createMode} />}
+        label={<FormattedMessage {...messages.editorType} />}
       />
     </CardContainer>
     <>
       {emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && (
-        <div style={{ marginLeft: '8px' }}>
+        <div>
           <CapUploader onChange={useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
             {(isFullMode && isTemplateNameEmpty) && (
               <CapError type="error">
@@ -98,25 +112,36 @@ 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,
-}) => (
-  <>
-    {isShowEmailCreate ? (
-      <Email {...emailProps} />
-    ) : (
-      <CmsTemplatesComponent {...cmsTemplatesProps} />
-    )}
-  </>
-);
+  isHTMLEditorMode,
+  htmlEditorProps,
+}) => {
+  
+  return (
+    <>
+      {isShowEmailCreate ? (
+        isHTMLEditorMode ? (
+          <EmailHTMLEditor {...htmlEditorProps} />
+        ) : (
+          <EmailWithoutSaga {...emailProps} />
+        )
+      ) : (
+        <CmsTemplatesComponent {...cmsTemplatesProps} />
+      )}
+    </>
+  );
+};
 
 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 +162,136 @@ 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,
+  onHtmlEditorValidationStateChange,
+  moduleType,
 }) => {
+  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,
+    // Validation state callback
+    onHtmlEditorValidationStateChange,
+    onValidationFail,
+    // Template name
+    showTemplateName,
+    onFormDataChange: handleFormDataChange,
+    // Module type for unsubscribe tag validation
+    moduleType,
+    // 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 +315,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 +340,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 +356,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>