@capillarytech/creatives-library 8.0.236-beta.0 → 8.0.236

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
@@ -11,15 +11,10 @@ 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 { CAP_COLOR_06, CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
-import { EmailWithoutSaga } from '../../Email';
+import Email 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);
 
@@ -32,23 +27,9 @@ 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
+// Mode selection component that handles the creation mode selection UI
 const ModeSelectionUI = ({
   isFullMode,
   templateName,
@@ -70,7 +51,7 @@ const ModeSelectionUI = ({
         value={templateName}
         labelPosition="top"
         size="default"
-        style={{ width: '68%' }}
+        style={{ width: '68%'}}
       />
     )}
     <CardContainer>
@@ -117,21 +98,15 @@ ModeSelectionUI.propTypes = {
   uploadButtonLabel: PropTypes.node.isRequired,
 };
 
-// Content creation component
+// Content creation component that handles the email or template selection UI
 const ContentCreationUI = ({
   isShowEmailCreate,
   emailProps,
   cmsTemplatesProps,
-  isHTMLEditorMode,
-  htmlEditorProps,
 }) => (
   <>
     {isShowEmailCreate ? (
-      isHTMLEditorMode ? (
-        <EmailHTMLEditor {...htmlEditorProps} />
-      ) : (
-        <EmailWithoutSaga {...emailProps} />
-      )
+      <Email {...emailProps} />
     ) : (
       <CmsTemplatesComponent {...cmsTemplatesProps} />
     )}
@@ -142,8 +117,6 @@ ContentCreationUI.propTypes = {
   isShowEmailCreate: PropTypes.bool.isRequired,
   emailProps: PropTypes.object.isRequired,
   cmsTemplatesProps: PropTypes.object.isRequired,
-  isHTMLEditorMode: PropTypes.bool,
-  htmlEditorProps: PropTypes.object,
 };
 
 // Main EmailWrapper presentational component
@@ -164,130 +137,9 @@ 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;
 
-  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 '';
-  };
+  const isShowTemplateSelection = step === STEPS.MODE_SELECTION || (step === STEPS.TEMPLATE_SELECTION && emailCreateMode === EMAIL_CREATE_MODES.UPLOAD);
 
   return (
     <>
@@ -311,22 +163,9 @@ 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}
-        />
-      )}
     </>
   );
 };
@@ -336,10 +175,6 @@ 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,
@@ -352,27 +187,6 @@ 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,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 = {