@capillarytech/creatives-library 8.0.276 → 8.0.277

package/v2Containers/Email/index.js

@@ -26,7 +26,7 @@ import * as globalActions from '../Cap/actions';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
-import { getDecodedFileName ,hasLiquidSupportFeature} from '../../utils/common';
+import { getDecodedFileName, hasLiquidSupportFeature, hasSupportCKEditor } from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -95,6 +95,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     this.isTagLoaded = false;
     this.edmEvent = undefined;
+    // When schema is set after CmsSettings (e.g. library create BEE), allow BEE init to run once
+    this.schemaJustFilledForBee = false;
     this.supportedLanguages = this.getSupportedLanguages(props);
     this.map = {
       "template-name": {
@@ -235,7 +237,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
-    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
+    const hasUploadedContent = !this.props.params?.id && this.props.Templates?.selectedEmailLayout && !_.isEmpty(formData);
+    this.setState({
+      content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
+      formData,
+      ...(hasUploadedContent ? { loadingStatus: 2 } : {}),
+    });
 
     // setTimeout(() => {
     //     // this.getFormData();
@@ -286,6 +293,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       }
     }
+
+    // When SUPPORT_CK_EDITOR: after zip/HTML upload we show with selectedEmailLayout. Ensure spinner stops
+    // even if formData was empty on first mount (e.g. currentOrgDetails not yet available).
+    if (!this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
+      this.setState((prev) => ({ loadingStatus: Math.max(prev.loadingStatus, 2) }));
+    }
   }
 
 
@@ -313,11 +326,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // }
     const {isFullMode, isGetFormData} = nextProps;
     if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData) && !this.state.isDragDrop) {
-      //only for ck editor
-      //when create button is clicked in full mode
-      // Don't start validation if we're in Test & Preview mode
+      // Only for CK editor: when Done is clicked in full mode, trigger the same chain as library
+      // so that FormBuilder validation and saveFormData run reliably (getFormData -> saveValidationData -> startValidation).
       if (!nextProps.isTestAndPreviewMode) {
-        this.startValidation(true);
+        this.getFormData();
       }
     }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
@@ -325,7 +337,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-
+      this.applyTabOptionIconVisibility(newSchema);
+      // So BEE init can run when CmsSettings already arrived (e.g. library create after default template selected)
+      this.schemaJustFilledForBee = true;
       this.setState({schema: newSchema, loadingStatus: this.state.loadingStatus + 1});
       if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
         const query = {
@@ -487,7 +501,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       }
 
-      if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema)) {
+      const cmsSettingsChanged = !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings);
+      const hasCmsSettingsAndSchema = !_.isEmpty(nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema);
+      const shouldRunBeeInit = hasCmsSettingsAndSchema && (cmsSettingsChanged || this.schemaJustFilledForBee);
+      if (shouldRunBeeInit) {
+        this.schemaJustFilledForBee = false;
         const apiLangId = nextProps.Email.CmsSettings.langId;
         const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.currentOrgDetails.basic_details.base_language;
 
@@ -1560,7 +1578,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       newFormData[0] = baseData;
       newFormData[0].base = true;
     }
-    this.props.templatesActions.resetUploadData();
+    // Don't clear selectedEmailLayout when we're in create mode with uploaded content -
+    // EmailWrapper uses it to keep isShowEmailCreate true. Clearing it would unmount Email and show wrong UI.
+    const isCreateWithUpload = !props.params?.id && props.Templates?.selectedEmailLayout;
+    if (!isCreateWithUpload) {
+      this.props.templatesActions.resetUploadData();
+    }
     return newFormData;
   }
 
@@ -1752,6 +1775,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                 newTabPopoverSection.cols[0].style.display = isDragDrop ? "" : "none";
               }
             });
+            // Hide tab-option-icon (switch editor trigger) when SUPPORT_CK_EDITOR is disabled
+            if (containerInputFieldCol.value && containerInputFieldCol.value.sections) {
+              _.forEach(containerInputFieldCol.value.sections[0].inputFields, (valueInputField) => {
+                _.forEach(valueInputField.cols, (valueCol) => {
+                  if (valueCol.id === 'tab-option-icon') {
+                    valueCol.colStyle = { ...valueCol.colStyle, display: hasSupportCKEditor() ? 'flex' : 'none' };
+                  }
+                });
+              });
+            }
           }
         });
       }
@@ -1760,6 +1793,28 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({schema, isSchemaChanged: true});
   }
 
+  /**
+   * Hides the tab-option-icon (switch editor trigger) in schema when SUPPORT_CK_EDITOR is disabled,
+   * so users cannot switch editor if the feature is not enabled.
+   */
+  applyTabOptionIconVisibility = (schema) => {
+    if (!schema || !schema.containers) return;
+    _.forEach(schema.containers, (container) => {
+      if (!container.isActive || !container.tabBarExtraContent?.sections?.[0]?.inputFields?.[0]?.cols) return;
+      _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (col) => {
+        if (col.id === 'tab-options-popover' && col.value?.sections?.[0]?.inputFields) {
+          _.forEach(col.value.sections[0].inputFields, (inputField) => {
+            _.forEach(inputField.cols, (c) => {
+              if (c.id === 'tab-option-icon') {
+                c.colStyle = { ...(c.colStyle || {}), display: hasSupportCKEditor() ? 'flex' : 'none' };
+              }
+            });
+          });
+        }
+      });
+    });
+  };
+
   showInsertImageButton = (passedSchema) => {
     const schema = passedSchema || _.cloneDeep(this.state.schema);
     _.forEach(schema.containers, (container) => {
@@ -2869,6 +2924,17 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
+
+    // When SUPPORT_CK_EDITOR: after zip/HTML upload we show Email component with selectedEmailLayout.
+    // Don't show spinner once we have uploaded content in formData (create mode, no params.id).
+    if (isLoading && !this.props.params?.id && this.props.Templates?.selectedEmailLayout) {
+      const content = this.state.formData?.[0]?.['template-content']
+        || _.get(this.state.formData, 'base.template-content')
+        || (this.state.formData?.base && this.state.formData.base[this.state.formData.base?.activeTab]?.['template-content']);
+      if (content) {
+        isLoading = false;
+      }
+    }
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -73,6 +73,7 @@ const EmailHTMLEditor = (props) => {
     getFormdata,
     // Library mode props
     templateData: templateDataProp,
+    isEditEmail = true,
     // Uploaded content from zip file
     EmailLayout,
     // Liquid validation
@@ -174,11 +175,13 @@ const EmailHTMLEditor = (props) => {
   // Check if liquid support is enabled
   const isLiquidEnabled = hasLiquidSupportFeature();
 
-  // Detect edit mode
+  // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-  const currentTemplateId = templateDataProp?._id || params?.id || location?.query?.id || location?.params?.id
-    || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1];
-  const isEditMode = !!currentTemplateId || !!hasParamsId;
+  const currentTemplateId = isEditEmail
+    ? (templateDataProp?._id || params?.id || location?.query?.id || location?.params?.id
+      || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1])
+    : (params?.id || location?.query?.id || location?.params?.id || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1]);
+  const isEditMode = isEditEmail && (!!currentTemplateId || !!hasParamsId);
 
   // Load tags on component mount
   useEffect(() => {
@@ -1204,6 +1207,7 @@ EmailHTMLEditor.propTypes = {
   onValidationFail: PropTypes.func,
   moduleType: PropTypes.string,
   onHtmlEditorValidationStateChange: PropTypes.func,
+  isEditEmail: PropTypes.bool,
 };
 
 EmailHTMLEditor.defaultProps = {
@@ -1239,6 +1243,7 @@ EmailHTMLEditor.defaultProps = {
   onValidationFail: null,
   moduleType: null,
   onHtmlEditorValidationStateChange: null,
+  isEditEmail: true,
 };
 
 const EmailHTMLEditorWithIntl = injectIntl(EmailHTMLEditor);

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -182,6 +182,7 @@ const EmailWrapperView = ({
   Email,
   templateData: templateDataProp,
   params,
+  isEditEmail = true,
   fetchingLiquidTags,
   createTemplateInProgress,
   fetchingCmsData,
@@ -202,8 +203,9 @@ const EmailWrapperView = ({
   let isHTMLEditorMode = false;
 
   if (supportCKEditor) {
-    // Legacy flow: use HTML editor for UPLOAD so zip/HTML content (EmailLayout) is shown; use Email component for EDITOR
-    isHTMLEditorMode = emailCreateMode === EMAIL_CREATE_MODES.UPLOAD;
+    // UPLOAD mode should use Email component (CKEditor), NOT HTML editor
+    // This ensures consistency between create and edit flows when SUPPORT_CK_EDITOR is enabled
+    isHTMLEditorMode = false; // Always use Email component (CKEditor) in legacy flow
   } else if (isEditModeForEditor) {
     isHTMLEditorMode = !isExplicitlyBEEEditor;
   } else {
@@ -257,6 +259,7 @@ const EmailWrapperView = ({
     getFormdata,
     // Library mode props
     templateData: templateDataProp,
+    isEditEmail,
     // Uploaded content from zip file
     EmailLayout,
     // Liquid validation
@@ -372,6 +375,7 @@ EmailWrapperView.propTypes = {
   Email: PropTypes.object,
   templateData: PropTypes.object,
   params: PropTypes.object,
+  isEditEmail: PropTypes.bool,
   fetchingLiquidTags: PropTypes.bool,
   createTemplateInProgress: PropTypes.bool,
   fetchingCmsData: PropTypes.bool,

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -1897,6 +1897,117 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('Template content extraction (lines 291-309)', () => {
+    it('extracts content and subject from templateDataProp.base branch', async () => {
+      const ref = React.createRef();
+      const templateData = {
+        base: {
+          'template-content': '<p>Base branch content</p>',
+          "subject": 'Base branch subject',
+        },
+      };
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            params={{ id: '123' }}
+            templateData={templateData}
+            Email={{
+              templateDetails: { _id: '123' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+      await waitFor(() => {
+        const content = ref.current.getContentForPreview();
+        const formData = ref.current.getFormDataForPreview();
+        expect(content).toBe('<p>Base branch content</p>');
+        expect(formData['template-subject']).toBe('Base branch subject');
+      }, { timeout: 3000 });
+    });
+
+    it('extracts content and subject from templateDataProp.versions.base branch with activeTab', async () => {
+      const ref = React.createRef();
+      const templateData = {
+        versions: {
+          base: {
+            activeTab: 'en',
+            en: {
+              'template-content': '<p>Versions base en content</p>',
+              "html_content": '<p>fallback html_content</p>',
+            },
+            subject: 'Versions base subject',
+            emailSubject: 'Fallback email subject',
+          },
+        },
+      };
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            params={{ id: '123' }}
+            templateData={templateData}
+            Email={{
+              templateDetails: { _id: '123' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+      await waitFor(() => {
+        const content = ref.current.getContentForPreview();
+        const formData = ref.current.getFormDataForPreview();
+        expect(content).toBe('<p>Versions base en content</p>');
+        expect(formData['template-subject']).toBe('Versions base subject');
+      }, { timeout: 3000 });
+    });
+
+    it('extracts content and subject from flat templateDataProp (else branch)', async () => {
+      const ref = React.createRef();
+      const templateData = {
+        'template-content': '<p>Flat content</p>',
+        "emailSubject": 'Flat email subject',
+        "html_content": '<p>flat html_content</p>',
+        "subject": 'Flat subject',
+      };
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            params={{ id: '123' }}
+            templateData={templateData}
+            Email={{
+              templateDetails: { _id: '123' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+      await waitFor(() => {
+        const content = ref.current.getContentForPreview();
+        const formData = ref.current.getFormDataForPreview();
+        expect(content).toBe('<p>Flat content</p>');
+        expect(formData['template-subject']).toBe('Flat email subject');
+      }, { timeout: 3000 });
+    });
+  });
+
   describe('setIsLoadingContent callback', () => {
     it('should call setIsLoadingContent when uploaded content is available', async () => {
       const setIsLoadingContent = jest.fn();
@@ -1933,6 +2044,37 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('location.query and tagList (lines 127, 129, 185)', () => {
+    it('should handle missing location.query (destructure from empty object)', () => {
+      renderWithIntl({
+        location: {},
+        supportedTags: [],
+        metaEntities: { tags: { standard: [{ name: 'standard.tag' }] } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('should handle null location (query defaults to {})', () => {
+      renderWithIntl({
+        location: null,
+        supportedTags: [],
+        metaEntities: { tags: { standard: [] } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('should use tagList from supportedTags when type=embedded, module=library and no getDefaultTags (line 129)', () => {
+      const supportedTags = [{ name: 'custom.a' }, { name: 'custom.b' }];
+      renderWithIntl({
+        location: { query: { type: 'embedded', module: 'library' } },
+        getDefaultTags: null,
+        supportedTags,
+        metaEntities: { tags: { standard: [{ name: 'standard.only' }] } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+  });
+
   describe('tags useMemo (lines 125-132)', () => {
     it('should use supportedTags when in EMBEDDED mode with LIBRARY module and no getDefaultTags', () => {
       const supportedTags = [{ name: 'custom.tag1' }, { name: 'custom.tag2' }];
@@ -2050,7 +2192,7 @@ describe('EmailHTMLEditor', () => {
       expect(formData).toBeDefined();
       expect(formData['0']).toBeDefined();
       expect(formData['0'].fr).toBeDefined(); // Uses base_language 'fr'
-      expect(formData['0'].fr['is_drag_drop']).toBe(false);
+      expect(formData['0'].fr.is_drag_drop).toBe(false);
       expect(formData['0'].activeTab).toBe('fr');
       expect(formData['0'].selectedLanguages).toEqual(['fr']);
       expect(formData['0'].base).toBe(true);

package/v2Containers/EmailWrapper/components/__tests__/EmailWrapperView.test.js

@@ -517,4 +517,141 @@ describe('EmailWrapperView', () => {
       // Should handle gracefully if ref methods don't exist
     });
   });
+
+  describe('Issue 1: Beefree template should open in Beefree editor in Edit mode', () => {
+    beforeEach(() => {
+      const { hasSupportCKEditor } = require('../../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(false); // New flow
+    });
+
+    it('should render Email component (not HTML editor) when editing Beefree template', () => {
+      const emailPropsWithBEE = {
+        ...defaultProps.emailProps,
+        editor: 'BEE',
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithBEE,
+        emailCreateMode: EMAIL_CREATE_MODES.DRAG_DROP,
+        params: { id: 'beefree-template-1' },
+        location: { query: {}, pathname: '/email/edit/beefree-template-1' },
+      });
+
+      // Should render Email component (BEE editor), not HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+      // Email component would be rendered (we're using EmailWithoutSaga which doesn't have a testid)
+    });
+
+    it('should render HTML editor when editing non-Beefree template', () => {
+      const emailPropsWithHTML = {
+        ...defaultProps.emailProps,
+        editor: 'HTML',
+        selectedEditorMode: EMAIL_CREATE_MODES.HTML_EDITOR,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithHTML,
+        emailCreateMode: EMAIL_CREATE_MODES.HTML_EDITOR,
+        params: { id: 'html-template-1' },
+        location: { query: {}, pathname: '/email/edit/html-template-1' },
+      });
+
+      // Should render HTML editor for non-Beefree template
+      expect(screen.getByTestId('email-html-editor')).toBeInTheDocument();
+    });
+
+    it('should render Email component when emailCreateMode is DRAG_DROP in create mode', () => {
+      const emailPropsWithBEE = {
+        ...defaultProps.emailProps,
+        editor: 'BEE',
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsWithBEE,
+        emailCreateMode: EMAIL_CREATE_MODES.DRAG_DROP,
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (BEE editor), not HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Issue 2: Upload Zip should open in CKEditor when SUPPORT_CK_EDITOR is enabled', () => {
+    beforeEach(() => {
+      const { hasSupportCKEditor } = require('../../../../utils/common');
+      hasSupportCKEditor.mockReturnValue(true); // Legacy flow
+    });
+
+    it('should render Email component (CKEditor) for UPLOAD mode in create flow', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined, // Default CKEditor
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: { html: '<p>Uploaded content</p>' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+
+    it('should render Email component (CKEditor) for UPLOAD mode in edit flow', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined,
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: { html: '<p>Edited uploaded content</p>' },
+        params: { id: 'uploaded-template-1' },
+        location: { query: {}, pathname: '/email/edit/uploaded-template-1' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+
+    it('should NOT render HTML editor for EDITOR mode when SUPPORT_CK_EDITOR is enabled', () => {
+      const emailPropsForCKEditor = {
+        ...defaultProps.emailProps,
+        editor: undefined,
+        selectedEditorMode: null,
+      };
+
+      renderWithIntl({
+        step: STEPS.CREATE_TEMPLATE_CONTENT,
+        isShowEmailCreate: true,
+        emailProps: emailPropsForCKEditor,
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+      });
+
+      // Should render Email component (CKEditor), NOT HTML editor
+      expect(screen.queryByTestId('email-html-editor')).not.toBeInTheDocument();
+    });
+  });
 });

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -66,6 +66,7 @@ const useEmailWrapper = ({
   Email,
   templateData,
   params,
+  isEditEmail = true,
 }) => {
   // State management
   const [templateName, setTemplateName] = useState('');
@@ -194,7 +195,10 @@ const useEmailWrapper = ({
       return;
     }
 
-    // New flow: Fetch template details if we're in edit mode and don't have template data yet
+    // New flow: Fetch template details only when editing (not when creating)
+    if (!isEditEmail) {
+      return;
+    }
     const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
     const hasTemplateDataProp = templateData && !isEmpty(templateData);
@@ -207,7 +211,7 @@ const useEmailWrapper = ({
         emailActions.getTemplateDetails(templateId, 'email');
       }
     }
-  }, [params?.id, location?.query?.id, location?.params?.id, location?.pathname, Email?.templateDetails, Email?.getTemplateDetailsInProgress, templateData, emailActions]);
+  }, [isEditEmail, params?.id, location?.query?.id, location?.params?.id, location?.pathname, Email?.templateDetails, Email?.getTemplateDetailsInProgress, templateData, emailActions]);
 
   // Effect to set BEETemplate when template details are loaded for BEE templates
   // This ensures Email component can properly initialize BEE editor
@@ -643,7 +647,7 @@ const useEmailWrapper = ({
           // 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) {
+          if ((isDragDrop && isBeeEnabled)) {
             editorType = 'BEE';
             selectedEditorMode = null; // BEE uses existing flow
           } else {

package/v2Containers/EmailWrapper/index.js

@@ -85,6 +85,7 @@ const EmailWrapper = (props) => {
     createTemplateInProgress,
     fetchingCmsData,
     onHtmlEditorValidationStateChange,
+    isEditEmail = true,
   } = props;
 
   // Pass destructured props to the custom hook
@@ -143,6 +144,7 @@ const EmailWrapper = (props) => {
     Email,
     templateData,
     params,
+    isEditEmail,
   });
 
   // Render using the presentation component with data from the hook
@@ -195,6 +197,7 @@ const EmailWrapper = (props) => {
         setIsLoadingContent={setIsLoadingContent}
         templateData={templateData}
         params={params}
+        isEditEmail={isEditEmail}
         showTemplateName={showTemplateName}
         fetchingLiquidTags={fetchingLiquidTags}
         createTemplateInProgress={createTemplateInProgress}

package/v2Containers/Facebook/Advertisement/index.js

@@ -73,7 +73,7 @@ export const Advertisement = (props) => {
   const FbAdFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
-    bottom: 20px;
+    bottom: 0;
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};

package/v2Containers/Line/Container/_lineCreate.scss

@@ -40,6 +40,7 @@
 .create-msg,
 .cancel-msg {
   position: fixed;
+  bottom: 20px;
 }
 .cancel-msg {
   margin-left: 100px;

package/v2Containers/Line/Container/style.js

@@ -38,7 +38,7 @@ export default css`
     .action-section {
       background-color: ${CAP_WHITE};
       position: fixed;
-      bottom: 20px;
+      bottom: 0;
       width: 100%;
       margin-left: -32px;
       padding: ${CAP_SPACE_32} ${CAP_SPACE_24};