@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -3,6 +3,7 @@
 exports[`Test SlideBoxContent container campaign message, add creative click rcs 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
+  shouldApplyFooterMargin={false}
   slideBoxWrapperMargin={0}
 >
   <CapSlideBox
@@ -17,6 +18,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -32,6 +34,9 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onHtmlEditorValidationStateChange={[Function]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -89,6 +94,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
 exports[`Test SlideBoxContent container campaign message, add creative click whatsapp 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
+  shouldApplyFooterMargin={false}
   slideBoxWrapperMargin={0}
 >
   <CapSlideBox
@@ -103,6 +109,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -118,6 +125,9 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onHtmlEditorValidationStateChange={[Function]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -175,6 +185,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
 exports[`Test SlideBoxContent container campaign message, whatsapp edit all data 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
+  shouldApplyFooterMargin={false}
   slideBoxWrapperMargin={0}
 >
   <CapSlideBox
@@ -189,6 +200,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -204,6 +216,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onHtmlEditorValidationStateChange={[Function]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -226,20 +241,47 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
     }
     footer={
       <SlideBoxFooter
+        continueButtonLabel={
+          Object {
+            "defaultMessage": "Next",
+            "id": "creatives.containersV2.Creatives.next",
+          }
+        }
         currentChannel="WHATSAPP"
         currentTab="ANDROID"
+        emailCreateMode=""
         errorMessages={
           Object {
             "LIQUID_ERROR_MSG": Array [],
             "STANDARD_ERROR_MSG": Array [],
           }
         }
+        fetchingCmsData={false}
+        htmlEditorValidationState={
+          Object {
+            "errorsAcknowledged": false,
+            "isContentEmpty": true,
+            "issueCounts": Object {
+              "html": 0,
+              "label": 0,
+              "liquid": 0,
+              "total": 0,
+            },
+            "validationComplete": false,
+          }
+        }
+        isContinueButtonDisabled={true}
+        isCreatingTemplate={false}
+        isEmptyContent={false}
+        isFullMode={false}
         isLiquidValidationError={false}
+        isTemplateNameEmpty={false}
         onCreateNextStep={[Function]}
         onDiscard={[Function]}
         onEditTemplate={[Function]}
         onSave={[Function]}
         onTestAndPreview={[Function]}
+        selectedEmailCreateMode={null}
         shouldShowContinueFooter={[Function]}
         shouldShowDoneFooter={[Function]}
         showTestAndPreviewButton={true}
@@ -273,6 +315,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
 exports[`Test SlideBoxContent container campaign message, whatsapp edit min data 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
+  shouldApplyFooterMargin={false}
   slideBoxWrapperMargin={0}
 >
   <CapSlideBox
@@ -287,6 +330,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -302,6 +346,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onHtmlEditorValidationStateChange={[Function]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -324,20 +371,47 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
     }
     footer={
       <SlideBoxFooter
+        continueButtonLabel={
+          Object {
+            "defaultMessage": "Next",
+            "id": "creatives.containersV2.Creatives.next",
+          }
+        }
         currentChannel="WHATSAPP"
         currentTab="ANDROID"
+        emailCreateMode=""
         errorMessages={
           Object {
             "LIQUID_ERROR_MSG": Array [],
             "STANDARD_ERROR_MSG": Array [],
           }
         }
+        fetchingCmsData={false}
+        htmlEditorValidationState={
+          Object {
+            "errorsAcknowledged": false,
+            "isContentEmpty": true,
+            "issueCounts": Object {
+              "html": 0,
+              "label": 0,
+              "liquid": 0,
+              "total": 0,
+            },
+            "validationComplete": false,
+          }
+        }
+        isContinueButtonDisabled={true}
+        isCreatingTemplate={false}
+        isEmptyContent={false}
+        isFullMode={false}
         isLiquidValidationError={false}
+        isTemplateNameEmpty={false}
         onCreateNextStep={[Function]}
         onDiscard={[Function]}
         onEditTemplate={[Function]}
         onSave={[Function]}
         onTestAndPreview={[Function]}
+        selectedEmailCreateMode={null}
         shouldShowContinueFooter={[Function]}
         shouldShowDoneFooter={[Function]}
         showTestAndPreviewButton={true}
@@ -371,6 +445,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
 exports[`Test SlideBoxContent container it should clear the url, on channel change from new whatsapp to another 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
+  shouldApplyFooterMargin={false}
   slideBoxWrapperMargin={0}
 >
   <CapSlideBox
@@ -385,6 +460,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -400,6 +476,9 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onHtmlEditorValidationStateChange={[Function]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -422,20 +501,47 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
     }
     footer={
       <SlideBoxFooter
+        continueButtonLabel={
+          Object {
+            "defaultMessage": "Next",
+            "id": "creatives.containersV2.Creatives.next",
+          }
+        }
         currentChannel="WHATSAPP"
         currentTab="ANDROID"
+        emailCreateMode=""
         errorMessages={
           Object {
             "LIQUID_ERROR_MSG": Array [],
             "STANDARD_ERROR_MSG": Array [],
           }
         }
+        fetchingCmsData={false}
+        htmlEditorValidationState={
+          Object {
+            "errorsAcknowledged": false,
+            "isContentEmpty": true,
+            "issueCounts": Object {
+              "html": 0,
+              "label": 0,
+              "liquid": 0,
+              "total": 0,
+            },
+            "validationComplete": false,
+          }
+        }
+        isContinueButtonDisabled={true}
+        isCreatingTemplate={false}
+        isEmptyContent={false}
+        isFullMode={false}
         isLiquidValidationError={false}
+        isTemplateNameEmpty={false}
         onCreateNextStep={[Function]}
         onDiscard={[Function]}
         onEditTemplate={[Function]}
         onSave={[Function]}
         onTestAndPreview={[Function]}
+        selectedEmailCreateMode={null}
         shouldShowContinueFooter={[Function]}
         shouldShowDoneFooter={[Function]}
         showTestAndPreviewButton={true}

package/v2Containers/Email/actions.js

@@ -66,6 +66,13 @@ export function clearCRUDResponse() {
   };
 }
 
+export function getCmsAccounts(cmsType) {
+  return {
+    type: types.GET_CMS_ACCOUNTS_REQUEST,
+    cmsType,
+  };
+}
+
 export function clearStoreValues() {
   return {
     type: types.CLEAR_ALL_VALUES,

package/v2Containers/Email/constants.js

@@ -36,4 +36,8 @@ export const DUPLICATE_TEMPLATE_REQUEST = 'app/v2Containers/Email/DUPLICATE_TEMP
 export const DUPLICATE_TEMPLATE_SUCCESS = 'app/v2Containers/Email/DUPLICATE_TEMPLATE_SUCCESS';
 export const DUPLICATE_TEMPLATE_FAILURE = 'app/v2Containers/Email/DUPLICATE_TEMPLATE_FAILURE';
 
-export const TRANSFORM_EMAIL_TEMPLATE_REQUEST = 'app/v2Containers/Email/TRANSFORM_EMAIL_TEMPLATE_REQUEST';
+export const TRANSFORM_EMAIL_TEMPLATE_REQUEST = 'app/v2Containers/Email/TRANSFORM_EMAIL_TEMPLATE_REQUEST';
+
+export const GET_CMS_ACCOUNTS_REQUEST = 'app/v2Containers/Email/GET_CMS_ACCOUNTS_REQUEST';
+export const GET_CMS_ACCOUNTS_SUCCESS = 'app/v2Containers/Email/GET_CMS_ACCOUNTS_SUCCESS';
+export const GET_CMS_ACCOUNTS_FAILURE = 'app/v2Containers/Email/GET_CMS_ACCOUNTS_FAILURE';

package/v2Containers/Email/index.js

@@ -207,13 +207,31 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
     const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
     if (!_.isEmpty(this.props.Templates.BEETemplate)) {
-      if (this.props.Templates.BEETemplate.versions.base.is_drag_drop && isBEEAppEnable ) {
+      const isDragDrop = this.props.Templates.BEETemplate.versions?.base?.is_drag_drop;
+      
+      if (isDragDrop && isBEEAppEnable ) {
         this.setState({isDragDrop: true});
       }
       if (this.props.params.id) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'open', undefined, isBEESupport, isBEEAppEnable);
+        // Extract drag_drop_id - check multiple possible paths
+        const activeTab = this.props.Templates.BEETemplate.versions?.base?.activeTab || 'en';
+        const activeTabData = this.props.Templates.BEETemplate.versions?.base?.[activeTab] || {};
+        const dragDropId = activeTabData.drag_drop_id 
+          || activeTabData.id 
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
+          || this.props.Templates.BEETemplate?._id;
+        this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', undefined, isBEESupport, isBEEAppEnable);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'create', undefined, isBEESupport, isBEEAppEnable);
+        // Extract drag_drop_id - check multiple possible paths
+        const activeTab = this.props.Templates.BEETemplate.versions?.base?.activeTab || 'en';
+        const activeTabData = this.props.Templates.BEETemplate.versions?.base?.[activeTab] || {};
+        const dragDropId = activeTabData.drag_drop_id 
+          || activeTabData.id 
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id')
+          || _.get(this.props.Templates.BEETemplate, 'versions.base.id')
+          || this.props.Templates.BEETemplate?._id;
+        this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
     this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
@@ -236,11 +254,52 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (this.props.location.query.type === 'embedded') {
       this.showNext();
     }
+    
+    // Check if BEETemplate was set after componentWillMount but before componentDidMount
+    // This can happen if BEETemplate is set asynchronously
+    if (!_.isEmpty(this.props.Templates.BEETemplate) && !this.state.isDragDrop) {
+      const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+      const beeTemplate = this.props.Templates.BEETemplate;
+      const activeTab = beeTemplate.versions?.base?.activeTab || 'en';
+      const activeTabData = beeTemplate.versions?.base?.[activeTab] || {};
+      const isDragDrop = activeTabData.is_drag_drop 
+        || beeTemplate.versions?.base?.is_drag_drop
+        || beeTemplate.base?.is_drag_drop
+        || beeTemplate.is_drag_drop;
+      
+      if (isDragDrop && isBEEAppEnable) {
+        this.setState({isDragDrop: true});
+        
+        const dragDropId = activeTabData.drag_drop_id 
+          || activeTabData.id 
+          || _.get(beeTemplate, 'versions.base.drag_drop_id')
+          || _.get(beeTemplate, 'versions.base.id')
+          || beeTemplate._id;
+        
+        if (this.props.params.id) {
+          const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
+          this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
+        } else {
+          this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
+        }
+      }
+    }
   }
 
 
-  checkBeeEditorAllowedForLibrary = () => {
-    const { isFullMode = false, editor } = this.props || {};
+  checkBeeEditorAllowedForLibrary = (props = null) => {
+    // Allow passing props for use in componentWillReceiveProps (to use nextProps)
+    const componentProps = props || this.props;
+    const { isFullMode = false, editor, Email } = componentProps || {};
+    // IMPORTANT: For isBEEAppEnable API parameter, use API response if available
+    // This ensures consistent behavior across full mode and library mode
+    // The API response (Email.isBeeEnabled) represents the actual org setting
+    if (Email?.isBeeEnabled !== undefined && Email?.isBeeEnabled !== null) {
+      return Email.isBeeEnabled;
+    }
+    // Fallback to mode-based logic for UI purposes (editor selection, etc.)
+    // But for API calls, this should ideally use the API response
     if ((editor === "BEE" && !isFullMode) || isFullMode) {
       return true;
     }
@@ -341,9 +400,61 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       //   this.props.globalActions.fetchSchemaForEntity(query);
       // }
 
+      // Check if BEETemplate was just set (for new flow when template details load)
+      // This handles the case where BEETemplate is set after componentWillMount
+      const wasBEETemplateEmpty = _.isEmpty(this.props.Templates.BEETemplate);
+      const isBEETemplateNowSet = !_.isEmpty(nextProps.Templates.BEETemplate);
+      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary(nextProps);
+      const isBEESupport = (nextProps.location.query.isBEESupport !== "false") || false;
+
+      if (wasBEETemplateEmpty && isBEETemplateNowSet && isBEEAppEnable) {
+        const beeTemplate = nextProps.Templates.BEETemplate;
+        const isDragDrop = beeTemplate.versions?.base?.is_drag_drop 
+          || beeTemplate.versions?.base?.[beeTemplate.versions?.base?.activeTab || 'en']?.is_drag_drop
+          || beeTemplate.base?.is_drag_drop
+          || beeTemplate.is_drag_drop;
+
+        // Check if we're in edit mode - check multiple sources for id
+        const hasParamsId = nextProps.params?.id 
+          || nextProps.location?.query?.id 
+          || nextProps.location?.params?.id
+          || (nextProps.location?.pathname && nextProps.location.pathname.includes('/edit/'));
+
+        if (isDragDrop) {
+          this.setState({isDragDrop: true});
+          
+          // Extract drag_drop_id - check multiple possible paths
+          // Priority: versions.base[activeTab].drag_drop_id > versions.base[activeTab].id > versions.base.drag_drop_id > _id
+          const activeTab = beeTemplate.versions?.base?.activeTab || 'en';
+          const activeTabData = beeTemplate.versions?.base?.[activeTab] || {};
+          let dragDropId = activeTabData.drag_drop_id 
+            || activeTabData.id 
+            || beeTemplate.versions?.base?.drag_drop_id
+            || beeTemplate.versions?.base?.id
+            || beeTemplate.base?.drag_drop_id
+            || beeTemplate.base?.id
+            || beeTemplate._id;
+          
+          // Call getCmsSetting for BEE template - use 'open' mode if in edit mode
+          // Extract langId from active tab
+          const activeTabForLang = beeTemplate.versions?.base?.activeTab || 'en';
+          if (hasParamsId) {
+            this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'open', activeTabForLang, isBEESupport, isBEEAppEnable);
+          } else if (nextProps.location.query.module !== "library" || (nextProps.location.query.module === "library" && !nextProps.templateData)) {
+            this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
+          }
+        }
+      }
+
       if (this.state.isEdit && !this.state.editDataSet && !_.isEmpty(nextProps.Email.templateDetails) && !_.isEmpty(this.state.schema)) {
         this.setState({editDataSet: true}, () => {
           this.setEditData(nextProps.Email.templateDetails);
+          // Update template name in parent if available
+          if (this.props.isFullMode && this.props.showTemplateName && nextProps.Email.templateDetails.name) {
+            const formData = this.state.formData;
+            formData['template-name'] = nextProps.Email.templateDetails.name;
+            this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+          }
         });
       }
       if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
@@ -382,7 +493,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const formData = _.cloneDeep(this.state.formData);
 
         const schema = _.cloneDeep(this.state.schema);
-        const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
+        const langIndex = formData[this.state.currentTab - 1]?.selectedLanguages?.indexOf(langId);
 
         const temp = (schema.containers || {})[this.state.currentTab - 1];
 
@@ -390,32 +501,91 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (nextProps.Email.CmsSettings.isDragDrop && this.checkBeeEditorAllowedForLibrary()) {
           const beeJson = `BEEeditor${currentTab > 1 ? currentTab : ''}json`;
           const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
-          let beeJsonValue = _.get(nextProps, 'Templates.BEETemplate.versions.base.json-content', '');
+          let beeJsonValue = '';
           const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate.versions.base.drag_drop_id', '');
-          if (this.state.isEdit) {
-            if (this.props.location.query.module === "library") {
-              beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
-            } else {
-              beeJsonValue = _.get(nextProps, `Email.templateDetails.versions.base[${langId}].json-content`, '');
+          
+          // Get beeJsonValue from template data - check multiple sources
+          // First check if it's already in formData (from setEditData)
+          beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+          
+          // Also check formData.base
+          if (!beeJsonValue) {
+            beeJsonValue = _.get(this.state, `formData.base[${langId}].json-content`, '');
+          }
+          
+          // Always check templateDetails and BEETemplate regardless of mode
+          if (!beeJsonValue) {
+            // Check Email.templateDetails first
+            const templateDetails = nextProps.Email.templateDetails;
+            if (templateDetails && templateDetails.versions && templateDetails.versions.base) {
+              const baseVersion = templateDetails.versions.base;
+              // Try language-specific path first (e.g., base.en.json-content)
+              if (baseVersion[langId] && baseVersion[langId]['json-content']) {
+                beeJsonValue = baseVersion[langId]['json-content'];
+              } else if (baseVersion['json-content']) {
+                // Fallback to base-level json-content
+                beeJsonValue = baseVersion['json-content'];
+              }
+            }
+            
+            // If still not found, check BEETemplate
+            if (!beeJsonValue) {
+              const beeTemplate = nextProps.Templates.BEETemplate;
+              if (beeTemplate && beeTemplate.versions && beeTemplate.versions.base) {
+                const beeBase = beeTemplate.versions.base;
+                if (beeBase[langId] && beeBase[langId]['json-content']) {
+                  beeJsonValue = beeBase[langId]['json-content'];
+                } else if (beeBase['json-content']) {
+                  beeJsonValue = beeBase['json-content'];
+                }
+              }
             }
           }
+          // Ensure we have a valid beeJsonValue - if it's a string, try to parse it to verify it's valid JSON
+          let finalBeeJsonValue = beeJsonValue;
+          if (beeJsonValue && typeof beeJsonValue === 'string') {
+            try {
+              // Try to parse to verify it's valid JSON
+              JSON.parse(beeJsonValue);
+            } catch (e) {
+              console.warn('[Email] componentWillReceiveProps - beeJsonValue is not valid JSON, using as-is:', e);
+            }
+          }
+          
+          // Preserve existing formData values, especially template-subject
+          const existingFormData = formData[`${currentTab - 1}`][langId] || {};
           formData[`${currentTab - 1}`][langId] = {
-            ...formData[`${currentTab - 1}`][langId],
+            ...existingFormData,
             is_drag_drop: true,
-            [beeJson]: beeJsonValue,
+            [beeJson]: finalBeeJsonValue,
             [beeToken]: nextProps.Email.CmsSettings.tokenData,
             id: selectedId,
+            // Also store json-content for reference
+            'json-content': finalBeeJsonValue,
           };
-          _.forEach(temp.panes, (pane, index) => {
-            const tempPane = pane;
-            //
-            if (parseInt(index, 10) === parseInt(langIndex, 10)) {
-              //
-              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
-              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+          
+          // Ensure template-subject is preserved at the top level
+          if (formData['template-subject'] === undefined || formData['template-subject'] === '') {
+            const subjectFromEditData = _.get(nextProps, 'Email.templateDetails.versions.base.subject', '');
+            if (subjectFromEditData) {
+              formData['template-subject'] = subjectFromEditData;
             }
-          });
-          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
+          }
+          
+          if (langIndex !== undefined && langIndex !== -1 && temp && temp.panes) {
+            _.forEach(temp.panes, (pane, index) => {
+              const tempPane = pane;
+              //
+              if (parseInt(index, 10) === parseInt(langIndex, 10)) {
+                //
+                if (tempPane.sections && tempPane.sections[0] && tempPane.sections[0].inputFields && tempPane.sections[0].inputFields[0] && tempPane.sections[0].inputFields[0].cols) {
+                  tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
+                  tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+                }
+              }
+            });
+          }
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1, formData});
         } else {
           _.forEach(temp.panes, (pane, index) => {
             const tempPane = pane;
@@ -712,8 +882,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const msgString = JSON.stringify(msg);
       const langId = formData[this.state.currentTab - 1].activeTab;
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
-      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      win.postMessage(msgString, '*');
+      const elementToSelect = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+      if (elementToSelect) {
+        try {
+          const win = elementToSelect.contentWindow;
+          if (win) {
+            win.postMessage(msgString, '*');
+          }
+        } catch (error) {
+          // Handle cross-origin frame access errors
+          console.warn('Failed to access iframe contentWindow (cross-origin restriction):', error);
+        }
+      }
     } else if (data === "unsubscribe" && this.state.editorInstanse) {
       const anchor = `<a href='{{${data}}}'>${data}</a>`;
       this.state.editorInstanse.insertHtml(`${anchor}`);
@@ -894,6 +1074,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
     const formData = _.cloneDeep(this.state.formData);
 
+    // Set template name from editData if available
+    if (editData.name) {
+      formData['template-name'] = editData.name;
+    }
+
     const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone(this.state.schema) : _.cloneDeep(this.state.schema);
     const containers = _.cloneDeep(schema.containers.slice());
     let tabKey = "";
@@ -902,7 +1087,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const type = this.props.location.query.type;
 
     formData['template-name'] = editData.name;
-    formData['template-subject'] = _.get(editData, 'versions.base.subject');
+    const subject = _.get(editData, 'versions.base.subject', '');
+    formData['template-subject'] = subject;
     formData.base = editData.versions.base;
 
     _.forEach(editData.versions.history, (data1, index) => {
@@ -983,8 +1169,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
 
     this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
-      if (this.props.isFullMode) {
-        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode && this.props.showTemplateName) {
+        // Ensure template name is set before showing it
+        const updatedFormData = _.cloneDeep(formData);
+        if (editData.name && !updatedFormData['template-name']) {
+          updatedFormData['template-name'] = editData.name;
+        }
+        this.props.showTemplateName({formData: updatedFormData, onFormDataChange: this.onFormDataChange});
       }
       const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
       _.forEach((editData.versions.base.selectedLanguages), (language) => {
@@ -2659,6 +2850,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       getTemplateDetailsInProgress,
       assetUploading,
       createTemplateInProgress,
+      fetchingCmsSettings,
     } = this.props.Email;
     let isLoading =
       isLoadingMetaEntities ||
@@ -2667,7 +2859,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       ) || (
         assetUploading !== undefined && assetUploading
       ) || (
-        Email && (fetchingCmsData || getTemplateDetailsInProgress)
+        Email && (fetchingCmsData || getTemplateDetailsInProgress || fetchingCmsSettings)
       );
 
     if (!isLoading) {
@@ -2989,6 +3181,19 @@ function mapDispatchToProps(dispatch) {
 const withReducer = injectReducer({ key: 'email', reducer: v2EmailReducer });
 const withEmailSaga = injectSaga({ key: 'email', saga: v2EmailSagas });
 
+// Base Email component without saga registration (for use from EmailWrapper)
+// EmailWrapper already registers the saga, so we don't need to register it here
+export const EmailWithoutSaga = withCreatives({
+  WrappedComponent: Email,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+  sagas: [], // No saga - EmailWrapper registers it
+  reducers: [withReducer],
+});
+
+// Email component with saga registration (for direct use from SlideBoxContent in Edit mode)
+// When Email is used directly (not as child of EmailWrapper), it needs to register the saga
 export default withCreatives({
   WrappedComponent: Email,
   mapStateToProps,