@capillarytech/creatives-library 8.0.276-alpha.0 → 8.0.276

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.276-alpha.0",
+  "version": "8.0.276",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -8,7 +8,6 @@ import messages from './messages';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
 import { PREVIEW } from './constants';
 import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
-import { hasSupportCKEditor } from '../../utils/common';
 
 function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
   if (isCreatingTemplate) {
@@ -73,10 +72,8 @@ function SlideBoxFooter(props) {
   const isBEEEditor = selectedEmailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP
     || (emailCreateMode === EMAIL_CREATE_MODES.EDITOR && !isHTMLEditorMode)
     || (isEditMode && !isHtmlEditorValidationStateActive);
-  const isSupportCKEditor = hasSupportCKEditor();
   // Only check validation for HTML Editor mode, not for BEE/DragDrop editor
-  // In upload mode the legacy Email (CK) component does not report validation state, so do not disable buttons
-  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor && !isSupportCKEditor;
+  const shouldCheckValidation = isEmailChannel && htmlEditorValidationState && isHTMLEditorMode && !isBEEEditor;
   const isContentEmpty = shouldCheckValidation ? (htmlEditorValidationState?.isContentEmpty ?? true) : false;
   // Check if validation has completed
   const validationComplete = shouldCheckValidation ? (htmlEditorValidationState?.validationComplete ?? false) : true;
@@ -126,7 +123,7 @@ function SlideBoxFooter(props) {
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
 
-  const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors;
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (

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, hasSupportCKEditor } from '../../utils/common';
+import { getDecodedFileName ,hasLiquidSupportFeature} from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -235,12 +235,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
-    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 } : {}),
-    });
+    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
 
     // setTimeout(() => {
     //     // this.getFormData();
@@ -291,12 +286,6 @@ 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) }));
-    }
   }
 
 
@@ -324,10 +313,11 @@ 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 Done is clicked in full mode, trigger the same chain as library
-      // so that FormBuilder validation and saveFormData run reliably (getFormData -> saveValidationData -> startValidation).
+      //only for ck editor
+      //when create button is clicked in full mode
+      // Don't start validation if we're in Test & Preview mode
       if (!nextProps.isTestAndPreviewMode) {
-        this.getFormData();
+        this.startValidation(true);
       }
     }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
@@ -335,7 +325,6 @@ 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);
 
       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)) {
@@ -1571,12 +1560,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       newFormData[0] = baseData;
       newFormData[0].base = true;
     }
-    // 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();
-    }
+    this.props.templatesActions.resetUploadData();
     return newFormData;
   }
 
@@ -1768,16 +1752,6 @@ 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' };
-                  }
-                });
-              });
-            }
           }
         });
       }
@@ -1786,28 +1760,6 @@ 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) => {
@@ -2917,25 +2869,6 @@ 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 (typeof window !== 'undefined' && this.state.loadingStatus < 2) {
-        console.log('[UPLOAD-DEBUG] Email isEmailLoading (upload path)', {
-          loadingStatus: this.state.loadingStatus,
-          hasContentInFormData: !!content,
-          isLoadingResult: isLoading,
-          hasSelectedEmailLayout: !!this.props.Templates?.selectedEmailLayout,
-        });
-      }
-    }
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -198,13 +198,12 @@ const EmailWrapperView = ({
   const isEditModeForEditor = hasParamsIdForEditor;
   const isBEEFromProps = emailProps?.editor === 'BEE' && emailProps?.selectedEditorMode === null;
   const isDragDropFromCreateMode = emailCreateMode === EMAIL_CREATE_MODES.DRAG_DROP;
-  const isExplicitlyBEEEditor = isBEEFromProps || isDragDropFromCreateMode ||  (emailProps?.editor === "BEE" && !isFullMode);
+  const isExplicitlyBEEEditor = isBEEFromProps || isDragDropFromCreateMode;
   let isHTMLEditorMode = false;
 
   if (supportCKEditor) {
-    // 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
+    // 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;
   } else if (isEditModeForEditor) {
     isHTMLEditorMode = !isExplicitlyBEEEditor;
   } else {

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

@@ -1897,117 +1897,6 @@ 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();
@@ -2044,37 +1933,6 @@ 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' }];
@@ -2192,7 +2050,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,141 +517,4 @@ 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

@@ -643,7 +643,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) || (!isFullMode && isBeeEnabled)) {
+          if (isDragDrop && isBeeEnabled) {
             editorType = 'BEE';
             selectedEditorMode = null; // BEE uses existing flow
           } else {

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -732,7 +732,8 @@ describe('useEmailWrapper', () => {
 
         await waitFor(() => {
           const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('BEE');
+          expect(emailProps.editor).toBe('HTML');
+          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
         });
       });
 
@@ -761,7 +762,8 @@ describe('useEmailWrapper', () => {
 
         await waitFor(() => {
           const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('BEE');
+          expect(emailProps.editor).toBe('HTML');
+          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
         });
       });
     });

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: 0;
+    bottom: 20px;
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};

package/v2Containers/Line/Container/_lineCreate.scss

@@ -40,7 +40,6 @@
 .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: 0;
+      bottom: 20px;
       width: 100%;
       margin-left: -32px;
       padding: ${CAP_SPACE_32} ${CAP_SPACE_24};

package/v2Containers/MobilePush/Edit/index.js

@@ -167,7 +167,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       };
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema) && _.isEmpty(this.state.formData)) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
       this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
         this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
         const templateId = get(this, "props.params.id");
@@ -388,11 +388,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     } else {
-      selectedAccount = accounts?.length > 0 ? accounts[0] : {};
+      selectedAccount = accounts[0];
       formData['mobilepush-accounts'] = selectedAccount?.id;
     }
     this.props.actions.setWeChatAccount(selectedAccount);
-    this.setState({formData, accountsOptions: accounts?.length > 0 ? accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id})) : []});
+    this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
   };
 
   createDefinition = (account) => ({
@@ -2023,8 +2023,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              <FormBuilder
-                key={!_.isEmpty(schema) ? 'has-schema' : 'no-schema'}
+              {!this.props.isLoadingMetaEntities && <FormBuilder
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2059,7 +2058,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
-              />
+              />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox

package/v2Containers/SmsTrai/Create/index.scss

@@ -98,5 +98,5 @@
 }
 
 .create-dlt-msg {
-  margin-left: 170px;
+  margin-left: 120px;
 }

package/v2Containers/SmsTrai/Edit/index.js

@@ -106,6 +106,7 @@ export const SmsTraiEdit = (props) => {
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
     position: fixed;
     bottom: 2rem;
+    margin-left: -2rem;
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -687,24 +688,17 @@ export const SmsTraiEdit = (props) => {
           <CapButton
             onClick={handleTestAndPreview}
             type="secondary"
-            className="create-msg"
+            className="create-msg create-dlt-msg"
           >
             <FormattedMessage {...messages.testAndPreviewButtonLabel} />
           </CapButton>
           <CapButton
             onClick={isLiquidSupportFeatureEnabled ? onSubmitWrapper : onDoneCallback}
-            className="create-msg create-dlt-msg"
+            className="create-msg"
             disabled={isTagValidationError || (isLiquidSupportFeatureEnabled && !isObject(metaEntities?.tagLookupMap))}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
-          <CapButton
-            onClick={handleClose}
-            className="cancel-dlt-msg"
-            type="secondary"
-          >
-            <FormattedMessage {...messages.cancelButtonLabel} />
-          </CapButton>
         </SMSTraiFooter>
         <TestAndPreviewSlidebox
           show={showTestAndPreviewSlidebox}