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

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -1,16 +1,19 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import React, {
+  useState, useEffect, useMemo, useCallback, useRef,
+} from 'react';
 import isEmpty from 'lodash/isEmpty';
-import get from 'lodash/get';
 import find from 'lodash/find';
+import get from 'lodash/get';
 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 } from '../constants';
-import { EMAIL_CREATE_MODES } from '../constants';
+import { STEPS, EMAIL_CREATE_MODES } from '../constants';
 import { containsBase64Images } from '../../../utils/content';
+import { hasSupportCKEditor } from '../../../utils/common';
 
 /**
  * Custom hook to handle EmailWrapper component business logic
@@ -56,12 +59,21 @@ 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' },
@@ -76,7 +88,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);
@@ -88,9 +100,124 @@ 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) => {
-    onEmailModeChange(e.target.value);
-  }, [onEmailModeChange]);
+    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]);
 
   const handleZipUploadError = useCallback(() => {
     const message = {
@@ -168,10 +295,10 @@ const useEmailWrapper = ({
             handleZipUploadError();
             return;
           }
-          
+
           // Check for base64 images in HTML content
-          containsBase64Images({content:text, CapNotification});
-          
+          containsBase64Images({ content: text, CapNotification });
+
           setModeContent({ file });
           templatesActions.handleHtmlUpload(text);
         };
@@ -194,8 +321,12 @@ const useEmailWrapper = ({
     const data = find(CmsTemplates, { _id: id });
     templatesActions.setEdmTemplate(data);
     templatesActions.setBEETemplate(data);
-    setSelectedCreateMode(EMAIL_CREATE_MODES.EDITOR);
-  }, [CmsTemplates, templatesActions]);
+    // 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]);
 
   const useFileUpload = useCallback(({ file }) => {
     setModeContent({});
@@ -207,43 +338,84 @@ const useEmailWrapper = ({
     showNextStep();
   }, [showNextStep]);
 
+  const handleNextClick = useCallback(() => {
+    const supportCKEditor = hasSupportCKEditor();
+    if (!supportCKEditor && selectedCreateMode) {
+      if ([EMAIL_CREATE_MODES.HTML_EDITOR, EMAIL_CREATE_MODES.DRAG_DROP].includes(selectedCreateMode)) {
+        showNextStep();
+      }
+    }
+  }, [selectedCreateMode, showNextStep]);
+
   // Main logic effect - MOVED AFTER function declarations
   useEffect(() => {
-    // Skip if user has already made a selection
-    if (selectedCreateMode) return;
+    const supportCKEditor = hasSupportCKEditor();
 
     // Handle different steps
-    switch (step) {
+    switch (currentStep) {
       case STEPS.MODE_SELECTION:
         if (emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && !EmailLayout) {
           // Commented out: document.getElementById('upload-email-template').click();
         }
         break;
 
-      case STEPS.TEMPLATE_SELECTION:
-        const needsTemplates = emailCreateMode === EMAIL_CREATE_MODES.EDITOR
-          && !CmsTemplates
-          && !getCmsTemplatesInProgress;
+      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;
+        }
 
-        if (needsTemplates) {
+        if (needsTemplates && !defaultTemplatesFetchedRef.current) {
           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 && isEmpty(SelectedEdmDefaultTemplate)) {
-          handleEdmDefaultTemplateSelection(modeContent.id);
+        } 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);
+          }
         }
         break;
+      }
 
       default:
         // No operation for other steps
         break;
     }
   }, [
-    step,
+    currentStep,
     selectedCreateMode,
     emailCreateMode,
     EmailLayout,
@@ -252,58 +424,154 @@ 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
+    if (!isEditMode && !hasTemplateData && selectedCreateMode) {
+      // Only reset if we're actually in create mode (not just initial load)
+      // Check if we have templateName or other create-mode indicators
+      if (templateName || currentStep === STEPS.MODE_SELECTION) {
+        setSelectedCreateMode('');
+      }
+    }
+  }, [templateData, params?.id, location?.query?.id, location?.params?.id, location?.pathname, selectedCreateMode, templateName, currentStep]);
+
   // Derived state
-  const isShowEmailCreate = !isEmpty(selectedCreateMode) && (!isEmpty(EmailLayout) || SelectedEdmDefaultTemplate);
+  const supportCKEditorFlag = hasSupportCKEditor();
 
-  // 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,
-  }), [
+  // 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
+
+    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,
+    };
+  }, [
     setIsLoadingContent,
     routeParams,
+    Email?.BEETemplate,
+    SelectedEdmDefaultTemplate,
+    checkBeeEditorEnabled,
     isGetFormData,
     getFormdata,
     type,
@@ -325,8 +593,118 @@ 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,
@@ -335,6 +713,24 @@ const useEmailWrapper = ({
     currentOrgDetails: currentOrgDetails || cap?.currentOrgDetails,
   }), [CmsTemplates, useEditor, cmsTemplatesLoader, currentOrgDetails, cap]);
 
+  // Check if Next button should be shown (only for new flow)
+  const showNextButton = useMemo(() => !hasSupportCKEditor(), []);
+
+  // Check if Next button should be enabled (for new flow only)
+  const isNextButtonEnabled = useMemo(() => {
+    const supportCKEditor = hasSupportCKEditor();
+    if (supportCKEditor) {
+      // Legacy flow: No Next button, always enabled for auto-navigation
+      return false;
+    }
+    // New flow: Enable only when both template name and editor type are selected
+    // In library mode (isFullMode=false), template name is not required
+    // In full mode (isFullMode=true), template name is required
+    const hasTemplateName = !isFullMode || !isTemplateNameEmpty;
+    const hasEditorSelection = !!selectedCreateMode;
+    return hasTemplateName && hasEditorSelection;
+  }, [isTemplateNameEmpty, isFullMode, selectedCreateMode]);
+
   // Upload button label
   const uploadButtonLabel = formatMessage(messages.upload);
 
@@ -350,12 +746,15 @@ const useEmailWrapper = ({
     emailProps,
     cmsTemplatesProps,
     uploadButtonLabel,
+    showNextButton,
+    isNextButtonEnabled,
 
     // Event handlers
     onTemplateNameChange,
     onChange,
     useFileUpload,
+    handleNextClick,
   };
 };
 
-export default useEmailWrapper;
+export default useEmailWrapper;