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

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -1,19 +1,16 @@
-import React, {
-  useState, useEffect, useMemo, useCallback, useRef,
-} from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import find from 'lodash/find';
 import get from 'lodash/get';
+import find from 'lodash/find';
 import { GA } from '@capillarytech/cap-ui-utils';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import { CHANNEL_CREATE_TRACK_MAPPING } from '../../App/constants';
 import { gtmPush } from '../../../utils/gtmTrackers';
 import { EMAIL } from '../../CreativesContainer/constants';
 import messages from '../messages';
-import { STEPS, EMAIL_CREATE_MODES } from '../constants';
+import { STEPS } from '../constants';
+import { EMAIL_CREATE_MODES } from '../constants';
 import { containsBase64Images } from '../../../utils/content';
-import { hasSupportCKEditor } from '../../../utils/common';
 
 /**
  * Custom hook to handle EmailWrapper component business logic
@@ -59,21 +56,12 @@ const useEmailWrapper = ({
   handleTestAndPreview,
   handleCloseTestAndPreview,
   isTestAndPreviewMode,
-  // Props for BEE enabled check
-  location,
-  emailActions,
-  Email,
-  templateData,
-  params,
 }) => {
   // State management
   const [templateName, setTemplateName] = useState('');
   const [isTemplateNameEmpty, setIsTemplateNameEmpty] = useState(true);
   const [selectedCreateMode, setSelectedCreateMode] = useState('');
   const [modeContent, setModeContent] = useState({});
-  const [isBeeEditorEnabled, setIsBeeEditorEnabled] = useState(null); // null = not checked yet, true/false = checked
-  const beeStatusCheckRef = useRef(false); // Track if we've made the API call for current step
-  const defaultTemplatesFetchedRef = useRef(false);
   const [routeParams] = useState({
     pathname: `/email/create`,
     query: { module: 'library', type: 'embedded' },
@@ -88,7 +76,7 @@ const useEmailWrapper = ({
   }, [onResetStep, templatesActions]);
 
   // Event handlers
-  const onTemplateNameChange = useCallback(({ target: { value } }) => {
+  const onTemplateNameChange = useCallback(({target: {value}}) => {
     const isEmptyTemplateName = !value?.trim();
     setTemplateName(value);
     setIsTemplateNameEmpty(isEmptyTemplateName);
@@ -100,123 +88,9 @@ const useEmailWrapper = ({
     }
   }, [onEnterTemplateName, onRemoveTemplateName]);
 
-  // Check BEE enabled status from API response
-  // BEE is enabled if isDragDrop is true in the API response
-  // This should work for both full mode and library mode
-  const checkBeeEditorEnabled = useCallback(() => {
-    // If we have checked the API and got a response, use that
-    if (isBeeEditorEnabled !== null) {
-      return isBeeEditorEnabled;
-    }
-    // If we haven't checked yet, return false (disabled) until API responds
-    return false;
-  }, [isBeeEditorEnabled]);
-
-  // Helper function to convert numeric templateStep to string step
-  const getStepFromTemplateStep = useCallback((templateStepValue) => {
-    // templateStep is numeric: 1 = modeSelection, 2 = templateSelection, 3 = createTemplateContent
-    if (typeof templateStepValue === 'number') {
-      switch (templateStepValue) {
-        case 1:
-          return STEPS.MODE_SELECTION;
-        case 2:
-          return STEPS.TEMPLATE_SELECTION;
-        case 3:
-          return STEPS.CREATE_TEMPLATE_CONTENT;
-        default:
-          return STEPS.MODE_SELECTION;
-      }
-    }
-    // If it's already a string, return as-is
-    return templateStepValue || STEPS.MODE_SELECTION;
-  }, []);
-
-  // Convert step to string format if it's numeric
-  const currentStep = useMemo(() => getStepFromTemplateStep(step), [step, getStepFromTemplateStep]);
-
-  // Effect to check BEE enabled status via new API when entering MODE_SELECTION step
-  useEffect(() => {
-    const supportCKEditor = hasSupportCKEditor();
-    // Only check BEE enabled status for new flow (when supportCKEditor is false)
-    // Reset the ref when step changes to MODE_SELECTION to allow API call
-    if (currentStep === STEPS.MODE_SELECTION) {
-      beeStatusCheckRef.current = false;
-    }
-
-    // Only check BEE enabled status for new flow (when supportCKEditor is false)
-    // Check all conditions
-    const shouldMakeCall = !supportCKEditor
-      && currentStep === STEPS.MODE_SELECTION
-      && !beeStatusCheckRef.current
-      && emailActions;
-
-    if (shouldMakeCall) {
-      // Mark that we've made the API call
-      beeStatusCheckRef.current = true;
-
-      // Make API call to check BEE enabled status using new endpoint
-      emailActions.getCmsAccounts('BEE_PLUGIN');
-    }
-  }, [currentStep, emailActions]);
-
-  // Effect to update isBeeEditorEnabled based on new API response
-  // This effect watches for isBeeEnabled from the new API response
-  useEffect(() => {
-    // Only process if we're in MODE_SELECTION step (when we're checking BEE status)
-    // Also check if we've made the API call (beeStatusCheckRef.current === true)
-    if (currentStep === STEPS.MODE_SELECTION && beeStatusCheckRef.current) {
-      // Use isBeeEnabled from the new API response
-      if (Email?.isBeeEnabled !== undefined) {
-        setIsBeeEditorEnabled(Email.isBeeEnabled);
-      }
-    }
-    // If API call fails, treat as disabled
-    if (Email?.fetchingCmsAccountsError && beeStatusCheckRef.current) {
-      setIsBeeEditorEnabled(false);
-    }
-  }, [Email?.isBeeEnabled, Email?.fetchingCmsAccountsError, currentStep]);
-
   const onChange = useCallback((e) => {
-    const { target: { value } } = e;
-    // Prevent selection if Drag & Drop is selected but BEE editor is not enabled
-    if (value === EMAIL_CREATE_MODES.DRAG_DROP && !checkBeeEditorEnabled()) {
-      return; // Ignore selection if BEE editor is disabled
-    }
-
-    // CRITICAL: When DRAG_DROP is selected, set selectedCreateMode to DRAG_DROP
-    // This ensures emailProps will have editor: 'BEE' and selectedEditorMode: null
-    if (value === EMAIL_CREATE_MODES.DRAG_DROP) {
-      setSelectedCreateMode(EMAIL_CREATE_MODES.DRAG_DROP);
-    } else {
-      setSelectedCreateMode(value);
-    }
-
-    const supportCKEditor = hasSupportCKEditor();
-
-    // Map new modes to existing modes for backwards compatibility
-    let mappedValue = value;
-
-    if (!supportCKEditor) {
-      // New flow: Handle HTML Editor, Drag & Drop, and Upload Zip
-      // Don't auto-navigate - wait for Next button click
-      if (value === EMAIL_CREATE_MODES.HTML_EDITOR) {
-        // HTML Editor: Map to EDITOR but skip template selection
-        mappedValue = EMAIL_CREATE_MODES.EDITOR;
-        setModeContent({ skipTemplateSelection: true });
-      } else if (value === EMAIL_CREATE_MODES.DRAG_DROP) {
-        // Drag & Drop: Map to EDITOR and show template selection
-        mappedValue = EMAIL_CREATE_MODES.EDITOR;
-      } else if (value === EMAIL_CREATE_MODES.UPLOAD) {
-        // Upload Zip: Keep as UPLOAD
-        mappedValue = EMAIL_CREATE_MODES.UPLOAD;
-      }
-    } else if (value === EMAIL_CREATE_MODES.EDITOR && showNextStep) {
-      // Legacy flow: Auto-navigate immediately (existing behavior)
-      showNextStep();
-    }
-
-    onEmailModeChange(mappedValue, value); // Pass both mapped value and original selected mode
-  }, [onEmailModeChange, showNextStep, checkBeeEditorEnabled]);
+    onEmailModeChange(e.target.value);
+  }, [onEmailModeChange]);
 
   const handleZipUploadError = useCallback(() => {
     const message = {
@@ -320,12 +194,8 @@ const useEmailWrapper = ({
     const data = find(CmsTemplates, { _id: id });
     templatesActions.setEdmTemplate(data);
     templatesActions.setBEETemplate(data);
-    // Don't override selectedCreateMode - preserve DRAG_DROP or EDITOR mode
-    // Only set if not already set
-    if (!selectedCreateMode) {
-      setSelectedCreateMode(EMAIL_CREATE_MODES.EDITOR);
-    }
-  }, [CmsTemplates, templatesActions, selectedCreateMode]);
+    setSelectedCreateMode(EMAIL_CREATE_MODES.EDITOR);
+  }, [CmsTemplates, templatesActions]);
 
   const useFileUpload = useCallback(({ file }) => {
     setModeContent({});
@@ -339,73 +209,41 @@ const useEmailWrapper = ({
 
   // Main logic effect - MOVED AFTER function declarations
   useEffect(() => {
-    const supportCKEditor = hasSupportCKEditor();
+    // Skip if user has already made a selection
+    if (selectedCreateMode) return;
 
     // Handle different steps
-    switch (currentStep) {
+    switch (step) {
       case STEPS.MODE_SELECTION:
         if (emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && !EmailLayout) {
           // Commented out: document.getElementById('upload-email-template').click();
         }
         break;
 
-      case STEPS.TEMPLATE_SELECTION: {
-        // Template selection is needed for:
-        // 1. Legacy EDITOR mode (when supportCKEditor is true)
-        // 2. New DRAG_DROP mode (when supportCKEditor is false)
-        // NOT needed for HTML_EDITOR (goes directly to editor)
-
-        let needsTemplates = false;
-        if (supportCKEditor) {
-          // Legacy flow: only for EDITOR mode
-          needsTemplates = emailCreateMode === EMAIL_CREATE_MODES.EDITOR
-            && !CmsTemplates
-            && !getCmsTemplatesInProgress;
-        } else {
-          // New flow: for DRAG_DROP only (not HTML_EDITOR)
-          needsTemplates = selectedCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
-            && !CmsTemplates
-            && !getCmsTemplatesInProgress;
-        }
+      case STEPS.TEMPLATE_SELECTION:
+        const needsTemplates = emailCreateMode === EMAIL_CREATE_MODES.EDITOR
+          && !CmsTemplates
+          && !getCmsTemplatesInProgress;
 
-        if (needsTemplates && !defaultTemplatesFetchedRef.current) {
+        if (needsTemplates) {
           templatesActions.getDefaultBeeTemplates();
-          defaultTemplatesFetchedRef.current = true;
         }
         break;
-      }
 
-      case STEPS.CREATE_TEMPLATE_CONTENT: {
+      case STEPS.CREATE_TEMPLATE_CONTENT:
         if (emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && !isEmpty(EmailLayout)) {
           setSelectedCreateMode(EMAIL_CREATE_MODES.UPLOAD);
-        } else if (emailCreateMode === EMAIL_CREATE_MODES.EDITOR
-          || emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
-          || selectedCreateMode === EMAIL_CREATE_MODES.EDITOR
-          || selectedCreateMode === EMAIL_CREATE_MODES.DRAG_DROP) {
-          if (!supportCKEditor && selectedCreateMode === EMAIL_CREATE_MODES.HTML_EDITOR) {
-            // HTML Editor mode: Skip template selection, go directly to editor
-            setSelectedCreateMode(EMAIL_CREATE_MODES.HTML_EDITOR);
-          } else if (isEmpty(SelectedEdmDefaultTemplate) && modeContent.id) {
-            // Legacy EDITOR or DRAG_DROP: Need template selection
-            handleEdmDefaultTemplateSelection(modeContent.id);
-          } else if (!supportCKEditor && selectedCreateMode === EMAIL_CREATE_MODES.DRAG_DROP) {
-            // CRITICAL: Template already selected for DRAG_DROP - ensure selectedCreateMode is DRAG_DROP
-            // This ensures emailProps will have editor: 'BEE' and selectedEditorMode: null
-            setSelectedCreateMode(EMAIL_CREATE_MODES.DRAG_DROP);
-          } else {
-            // Template already selected for legacy EDITOR
-            setSelectedCreateMode(EMAIL_CREATE_MODES.EDITOR);
-          }
+        } else if (emailCreateMode === EMAIL_CREATE_MODES.EDITOR && isEmpty(SelectedEdmDefaultTemplate)) {
+          handleEdmDefaultTemplateSelection(modeContent.id);
         }
         break;
-      }
 
       default:
         // No operation for other steps
         break;
     }
   }, [
-    currentStep,
+    step,
     selectedCreateMode,
     emailCreateMode,
     EmailLayout,
@@ -414,155 +252,58 @@ const useEmailWrapper = ({
     modeContent.id,
     SelectedEdmDefaultTemplate,
     templatesActions,
-    handleEdmDefaultTemplateSelection,
+    handleEdmDefaultTemplateSelection
   ]);
 
-  // CRITICAL: Reset selectedCreateMode when templateData is cleared (new template creation)
-  // This ensures that when user creates a new template after editing, selectedCreateMode is reset
-  useEffect(() => {
-    // If templateData is cleared/null and we're not in edit mode, reset selectedCreateMode
-    const hasParamsId = params?.id
-      || location?.query?.id
-      || location?.params?.id
-      || location?.pathname?.includes('/edit/');
-    const hasTemplateData = templateData && !isEmpty(templateData);
-    const isEditMode = hasParamsId || hasTemplateData;
-
-    // If we're creating a new template (no templateData and no params.id), reset selectedCreateMode
-    // BUT only if we're in MODE_SELECTION step (navigating back to start)
-    // DO NOT reset in CREATE_TEMPLATE_CONTENT - that's where we need selectedCreateMode to render the editor!
-    // Also DO NOT reset if emailCreateMode is set - it means user has made a selection
-    if (!isEditMode && !hasTemplateData && selectedCreateMode && currentStep === STEPS.MODE_SELECTION && !emailCreateMode) {
-      // Reset only when returning to MODE_SELECTION step
-      // This preserves user selection while in content creation
-      setSelectedCreateMode('');
-    }
-  }, [templateData, params?.id, location?.query?.id, location?.params?.id, location?.pathname, selectedCreateMode, templateName, currentStep, emailCreateMode]);
-
   // Derived state
-  const supportCKEditorFlag = hasSupportCKEditor();
-
-  // Prepare props for Email component - MOVED BEFORE isShowEmailCreate to avoid circular dependency
-  const emailProps = useMemo(() => {
-    // Determine editor type and mode based on selectedCreateMode
-    let editorType = editor;
-    let selectedEditorMode = null;
-
-    if (!supportCKEditorFlag) {
-      // CRITICAL: Check selectedCreateMode FIRST to prioritize user's explicit selection
-      // This ensures DRAG_DROP selection takes precedence over edit mode detection
-      // even if templateDetails persists from a previous template
-      if (selectedCreateMode === EMAIL_CREATE_MODES.DRAG_DROP) {
-        // CRITICAL: DRAG_DROP mode always uses BEE editor
-        // This takes precedence over edit mode detection
-        editorType = 'BEE';
-        selectedEditorMode = null; // BEE uses existing flow (null indicates BEE editor)
-      } else if (selectedCreateMode === EMAIL_CREATE_MODES.HTML_EDITOR) {
-        // HTML_EDITOR mode: Always use HTML editor
-        editorType = 'HTML';
-        selectedEditorMode = EMAIL_CREATE_MODES.HTML_EDITOR;
-      } else {
-        // Check if we're editing an existing template
-        // CRITICAL: Only treat as edit mode if we have params.id (actual edit URL)
-        // Don't use templateDetails existence alone, as it might persist from previous template
-        const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-        const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
-        const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
-        // CRITICAL: Only consider it edit mode if we have params.id (actual edit URL)
-        // This prevents false edit mode detection when templateDetails persists in Redux from previous template
-        const isEditMode = hasParamsId && (hasTemplateDetails || hasBEETemplate);
-
-        if (isEditMode) {
-          // Edit mode: Determine editor based on template data
-          // Check if template was created in BEE editor
-          const editTemplateData = Email?.templateDetails || Email?.BEETemplate || templateData;
-          const isDragDrop = get(editTemplateData, 'versions.base.is_drag_drop', false)
-            || get(editTemplateData, 'base.is_drag_drop', false)
-            || get(editTemplateData, 'is_drag_drop', false)
-            || get(editTemplateData, 'versions.base[0].is_drag_drop', false);
-
-          // Check if BEE is enabled for org (equivalent to checkBeeEditorAllowedForLibrary)
-          // For library mode: BEE is enabled if editor prop is "BEE"
-          // For full mode: BEE is always enabled
-          const isBeeEnabled = isFullMode || (editor === "BEE" && !isFullMode) || checkBeeEditorEnabled();
-
-          // If template was created in BEE AND BEE is enabled → open in BEE editor
-          // Otherwise → open in HTML editor (fallback)
-          // IMPORTANT: When supportCKEditor is false, default to HTML editor unless explicitly BEE
-          if (isDragDrop && isBeeEnabled) {
-            editorType = 'BEE';
-            selectedEditorMode = null; // BEE uses existing flow
-          } else {
-            // Fallback to HTML editor if BEE not enabled or template not created in BEE
-            // This ensures HTML editor is used when supportCKEditor is false
-            editorType = 'HTML';
-            selectedEditorMode = EMAIL_CREATE_MODES.HTML_EDITOR;
-          }
-        } else if (selectedCreateMode === EMAIL_CREATE_MODES.EDITOR) {
-          // EDITOR mode: Check if selected template is a BEE template
-          // When a default template is selected, it's stored in Templates.BEETemplate
-          const beeTemplate = Email?.BEETemplate || SelectedEdmDefaultTemplate;
-          const isBEETemplate = beeTemplate && (
-            get(beeTemplate, 'versions.base.is_drag_drop') === true
-            || get(beeTemplate, 'base.is_drag_drop') === true
-            || beeTemplate.is_drag_drop === true
-          );
-
-          if (isBEETemplate && checkBeeEditorEnabled()) {
-            // Template is BEE and BEE is enabled → use BEE editor
-            editorType = 'BEE';
-            selectedEditorMode = null; // BEE uses existing flow
-          } else {
-            // Template is not BEE or BEE is disabled → use HTML editor
-            editorType = 'HTML';
-            selectedEditorMode = EMAIL_CREATE_MODES.HTML_EDITOR;
-          }
-        } else {
-          // Default: When supportCKEditor is false and no mode selected, use HTML editor
-          editorType = 'HTML';
-          selectedEditorMode = EMAIL_CREATE_MODES.HTML_EDITOR;
-        }
-      }
-      // UPLOAD mode uses existing editor prop
-    }
-    // Legacy flow (supportCKEditor is true): Use existing editor prop as-is - no changes
+  const isShowEmailCreate = !isEmpty(selectedCreateMode) && (!isEmpty(EmailLayout) || SelectedEdmDefaultTemplate);
 
-    return {
-      setIsLoadingContent,
-      key: "email-create-template",
-      location: routeParams,
-      route: { name: 'email' },
-      params: {},
-      isGetFormData,
-      getFormdata,
-      getFormSubscriptionData: getFormdata,
-      getDefaultTags: type,
-      isFullMode,
-      defaultData: { 'template-name': templateName },
-      cap,
-      showTemplateName,
-      showLiquidErrorInFooter,
-      onValidationFail,
-      forwardedTags,
-      selectedOfferDetails,
-      onPreviewContentClicked,
-      onTestContentClicked,
-      editor: editorType,
-      selectedEditorMode, // Pass selected mode to Email component (only for HTML_EDITOR)
-      moduleType,
-      eventContextTags,
-      isLoyaltyModule,
-      showTestAndPreviewSlidebox,
-      handleTestAndPreview,
-      handleCloseTestAndPreview,
-      isTestAndPreviewMode,
-    };
-  }, [
+  // Memoize static data
+  const modes = useMemo(() => [
+    {
+      title: formatMessage(messages.zipUpload),
+      content: formatMessage(messages.zipUploadDesc),
+      value: EMAIL_CREATE_MODES.UPLOAD,
+    },
+    {
+      title: formatMessage(messages.useEditor),
+      content: formatMessage(messages.useEditorDesc),
+      value: EMAIL_CREATE_MODES.EDITOR,
+    },
+  ], [formatMessage]);
+
+  // Prepare props for Email component
+  const emailProps = useMemo(() => ({
+    setIsLoadingContent,
+    key: "email-create-template",
+    location: routeParams,
+    route: { name: 'email' },
+    params: {},
+    isGetFormData,
+    getFormdata,
+    getFormSubscriptionData: getFormdata,
+    getDefaultTags: type,
+    isFullMode,
+    defaultData: { 'template-name': templateName },
+    cap,
+    showTemplateName,
+    showLiquidErrorInFooter,
+    onValidationFail,
+    forwardedTags,
+    selectedOfferDetails,
+    onPreviewContentClicked,
+    onTestContentClicked,
+    editor,
+    moduleType,
+    eventContextTags,
+    isLoyaltyModule,
+    showTestAndPreviewSlidebox,
+    handleTestAndPreview,
+    handleCloseTestAndPreview,
+    isTestAndPreviewMode,
+  }), [
     setIsLoadingContent,
     routeParams,
-    Email?.BEETemplate,
-    SelectedEdmDefaultTemplate,
-    checkBeeEditorEnabled,
     isGetFormData,
     getFormdata,
     type,
@@ -584,118 +325,8 @@ const useEmailWrapper = ({
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
-    selectedCreateMode,
-    supportCKEditorFlag,
-    checkBeeEditorEnabled,
-    Email,
-    location,
-    params,
-    editor,
-    isFullMode,
-    templateData,
   ]);
 
-  const isShowEmailCreate = useMemo(() => {
-    // Check if we're in edit mode (templateDetails or BEETemplate exists, or params.id exists)
-    const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
-    const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
-    const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-    const isEditMode = hasTemplateDetails || hasBEETemplate || hasParamsId;
-
-    // In edit mode with HTML editor (when supportCKEditor is false), always show editor
-    if (!supportCKEditorFlag && isEditMode) {
-      // Check if it's explicitly BEE editor
-      const isExplicitlyBEE = emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
-        || (emailProps?.editor === 'BEE' && emailProps?.selectedEditorMode === null);
-      // If not BEE, show HTML editor
-      if (!isExplicitlyBEE) {
-        return true;
-      }
-    }
-
-    if (!selectedCreateMode) return false;
-
-    // For HTML Editor (new flow): Always show editor directly without template selection
-    // This takes precedence over step check to ensure HTML Editor is shown even if step is temporarily TEMPLATE_SELECTION
-    if (!supportCKEditorFlag && selectedCreateMode === EMAIL_CREATE_MODES.HTML_EDITOR) {
-      return true;
-    }
-
-    // CRITICAL: For DRAG_DROP mode, show template selection first (CmsTemplatesComponent)
-    // Only show editor (Email component with BEE) after template is selected
-    if (emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP || selectedCreateMode === EMAIL_CREATE_MODES.DRAG_DROP) {
-      // If we're in TEMPLATE_SELECTION step, show template selection (not email editor)
-      if (currentStep === STEPS.TEMPLATE_SELECTION) {
-        return false;
-      }
-      // After template selection, show editor when template is selected
-      return !isEmpty(SelectedEdmDefaultTemplate);
-    }
-
-    // If we're in TEMPLATE_SELECTION step, show template selection (not email editor)
-    // This applies to legacy Editor modes
-    if (currentStep === STEPS.TEMPLATE_SELECTION) {
-      return false;
-    }
-
-    // For Upload: Show editor when EmailLayout exists
-    if (emailCreateMode === EMAIL_CREATE_MODES.UPLOAD) {
-      return !isEmpty(EmailLayout);
-    }
-
-    // For Editor: Show editor when template is selected
-    return !isEmpty(SelectedEdmDefaultTemplate);
-  }, [currentStep, selectedCreateMode, supportCKEditorFlag, emailCreateMode, EmailLayout, SelectedEdmDefaultTemplate, Email?.templateDetails, Email?.BEETemplate, params?.id, location?.query?.id, location?.params?.id, location?.pathname, emailProps?.editor, emailProps?.selectedEditorMode]);
-
-  // Memoize static data
-  const modes = useMemo(() => {
-    const supportCKEditor = hasSupportCKEditor();
-    const isBeeEditorEnabledValue = checkBeeEditorEnabled();
-
-    if (supportCKEditor) {
-      // Legacy flow: Show only 2 options (Upload Zip, Use Editor)
-      return [
-        {
-          title: formatMessage(messages.zipUpload),
-          content: formatMessage(messages.zipUploadDesc),
-          value: EMAIL_CREATE_MODES.UPLOAD,
-        },
-        {
-          title: formatMessage(messages.useEditor),
-          content: formatMessage(messages.useEditorDesc),
-          value: EMAIL_CREATE_MODES.EDITOR,
-        },
-      ];
-    }
-
-    // New flow: Show 3 options (HTML Editor, Drag & Drop, Upload Zip)
-    return [
-      {
-        title: formatMessage(messages.htmlEditorTitle),
-        content: formatMessage(messages.htmlEditorDesc),
-        value: EMAIL_CREATE_MODES.HTML_EDITOR,
-        icon: <CapIcon type="code" />,
-      },
-      {
-        title: formatMessage(messages.dragDropEditorTitle),
-        content: formatMessage(messages.dragDropEditorDesc),
-        value: EMAIL_CREATE_MODES.DRAG_DROP,
-        icon: <CapIcon type="draggable" svgProps={{ fill: 'currentColor' }} />,
-        disabled: !isBeeEditorEnabledValue,
-        tooltipProps: !isBeeEditorEnabledValue ? {
-          title: formatMessage(messages.beeEditorDisabledTooltip),
-          placement: 'top',
-        } : undefined,
-      },
-      {
-        title: formatMessage(messages.uploadZipTitle),
-        content: formatMessage(messages.uploadZipDesc),
-        value: EMAIL_CREATE_MODES.UPLOAD,
-        icon: <CapIcon type="file" />,
-      },
-    ];
-  }, [formatMessage, checkBeeEditorEnabled]);
-
   // Prepare props for CmsTemplatesComponent
   const cmsTemplatesProps = useMemo(() => ({
     cmsTemplates: CmsTemplates,