@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

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/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 = {