@capillarytech/creatives-library 6.9.8 → 6.10.0

package/v2Containers/Email/index.js

@@ -31,8 +31,9 @@ import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN } from '../App/constants';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL } from '../App/constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -178,23 +179,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     //   "template-content": (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
     // };
     // if (this.props.Templates.CmsSettings) {}
-
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     if (this.props.location.query.module === "library" && this.props.templateData) {
       this.props.templatesActions.resetTemplateData();
     }
-    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
-
-    if (!_.isEmpty(this.props.Templates.BEETemplate) ) {
-      if (this.props.Templates.BEETemplate.versions.base.is_drag_drop) {
+    if (!_.isEmpty(this.props.Templates.edmTemplate)) {
+      if (this.props.Templates.edmTemplate.versions.base.is_drag_drop) {
         this.setState({isDragDrop: true});
       }
       if (this.props.params.id) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate._id, 'open', undefined, isBEESupport);
+        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'open', undefined, isEdmSupport);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate._id, 'create', undefined, isBEESupport);
+        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'create', undefined, isEdmSupport);
       }
     }
-    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
+
+    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData}, () => {
+      // this.injectEvents(this.state.schema);
+    });
 
     // setTimeout(() => {
     //     // this.getFormData();
@@ -214,6 +216,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       this.showNext();
     }
   }
+
   componentWillReceiveProps(nextProps) {
     // if (this.props.location.query.type === 'embedded') {
     //   this.showNext();
@@ -313,16 +316,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.startTemplateCreation(nextProps.templateData);
       }
       if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-        const formData = this.state.formData;
-        let isBeeEditor = false;
-        _.forEach(formData[0].selectedLanguages, (language) => {
-          if (formData[0][language].is_drag_drop) {
-            isBeeEditor = true;
-          }
-        });
         if (this.props.isFullMode) {
           let triggerGetFormData = true;
-          triggerGetFormData = isBeeEditor ? (!nextProps.Email.fetchingCmsData && _.isEmpty(nextProps.Email.cmsData)) : !nextProps.Email.createTemplateInProgress && _.isEmpty(nextProps.Email.createResponse); // if edm editor selected check for getCmsData call in progress or not before triggering save
+          let isEdmEditor = false;
+          const formData = this.state.formData;
+          _.forEach(formData[0].selectedLanguages, (language) => {
+            if (formData[0][language].is_drag_drop) {
+              isEdmEditor = true;
+            }
+          });
+          triggerGetFormData = isEdmEditor ? (!nextProps.Email.fetchingCmsData && _.isEmpty(nextProps.Email.cmsData)) : !nextProps.Email.createTemplateInProgress && _.isEmpty(nextProps.Email.createResponse); // if edm editor selected check for getCmsData call in progress or not before triggering save
           if (triggerGetFormData) {
             this.getFormData();
           }
@@ -332,9 +335,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           this.getFormData();
         }
-        if (!nextProps.Email.createTemplateInProgress && isBeeEditor) {
-          this.beeInstance && this.beeInstance.save();
-        }
       }
 
       if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema)) {
@@ -348,26 +348,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
         const temp = schema.containers[this.state.currentTab - 1];
 
-        const { currentTab } = this.state;
+
         if (nextProps.Email.CmsSettings.isDragDrop) {
-          const beeJson = `BEEeditor${currentTab > 1 ? currentTab : ''}json`;
-          const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
-          let beeJsonValue = _.get(nextProps, 'Templates.BEETemplate.versions.base.json-content', '');
-          const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate._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`, '');
-            }
+          formData[`${this.state.currentTab - 1}`][langId][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`] = nextProps.Email.CmsSettings.url;
+          formData[`${this.state.currentTab - 1}`][langId][`drag_drop_id`] = this.getParameterByName("projectId", nextProps.Email.CmsSettings.url);
+          formData[`${this.state.currentTab - 1}`][langId][`is_drag_drop`] = true;
+          if (formData[`${this.state.currentTab - 1}`].base) {
+            formData.base[langId][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`] = nextProps.Email.CmsSettings.url;
+            formData.base[langId][`drag_drop_id`] = this.getParameterByName("projectId", nextProps.Email.CmsSettings.url);
+            formData.base[langId][`is_drag_drop`] = true;
           }
-          formData[`${currentTab - 1}`][langId] = {
-            ...formData[`${currentTab - 1}`][langId],
-            is_drag_drop: true,
-            [beeJson]: beeJsonValue,
-            [beeToken]: nextProps.Email.CmsSettings.tokenData,
-            id: selectedId,
-          };
           _.forEach(temp.panes, (pane, index) => {
             const tempPane = pane;
             //
@@ -377,6 +367,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
             }
           });
+
           this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
         } else {
           _.forEach(temp.panes, (pane, index) => {
@@ -393,7 +384,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, '"');
 
           formData[this.state.currentTab - 1][langId]["template-content"] = html;
-          if (window.CKEDITOR && apiLangId !== "undefined" && !this.props.Email.fetchingCmsSettings && !this.props.Email.getTemplateDetailsInProgress) {
+          if (window.CKEDITOR && apiLangId !== "undefined") {
             const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
 
             _.forEach(window.CKEDITOR.instances, (winInstance) => {
@@ -431,26 +422,23 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           if (formData[`${this.state.currentTab - 1}`].base) {
             formData.base[formData.base.activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
           }
-        } else if (!nextProps.Email.getTemplateDetailsInProgress) {
+        } else {
           const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(formData[this.state.currentTab - 1].activeTab);
           const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
 
-          if (window.CKEDITOR) {
-            _.forEach(window.CKEDITOR.instances, (winInstance) => {
-              const temp = winInstance;
+          _.forEach(window.CKEDITOR.instances, (winInstance) => {
+            const temp = winInstance;
 
-              if (winInstance.name === instanceName) {
-                temp.setData(decodeURIComponent(nextProps.Email.cmsData));
-              } else if (winInstance.name.indexOf('editor') !== -1) {
-                temp.setData(decodeURIComponent(nextProps.Email.cmsData));
-              }
-            });
-          }
+            if (winInstance.name === instanceName) {
+              temp.setData(decodeURIComponent(nextProps.Email.cmsData));
+            } else if (winInstance.name.indexOf('editor') !== -1) {
+              temp.setData(decodeURIComponent(nextProps.Email.cmsData));
+            }
+          });
           formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
           formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop = false;
           formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id = "";
           delete formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].edmeditorsrc;
-         // from edm to ck editor
           if (formData[`${this.state.currentTab - 1}`].base) {
             formData.base[formData.base.activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
             formData.base[formData.base.activeTab].is_drag_drop = false;
@@ -468,8 +456,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
       if ( !_.isEqual(nextProps.Email.uploadAssetSuccess, this.props.Email.uploadAssetSuccess) && nextProps.Email.uploadAssetSuccess) {
         const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
-        const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
-        if (isDragDrop && isBEESupport) {
+        const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+        if (isDragDrop && isEdmSupport) {
           const evtData = JSON.parse(this.edmEvent.data);
           if (evtData.action === 'editBackground') {
             this.edmEvent.source.postMessage(JSON.stringify({
@@ -513,12 +501,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.setState({totalCount: nextProps.Email.assetList[0].totalCount});
       }
     }
-    if (!_.isEmpty(nextProps.Email.templateDetails) && _.isEmpty(this.props.Email.templateDetails) ) {
-      const base = nextProps.Email.templateDetails.versions.base;
-      if (nextProps.Email.templateDetails.versions.base[base.activeTab].is_drag_drop) {
-        this.setState({isDragDrop: true});
-      }
-    }
   }
 
   componentWillUnmount() {
@@ -603,9 +585,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   onTagSelect = (data) => {
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
     const formData = _.cloneDeep(this.state.formData);
-    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
 
-    if (isDragDrop && isBEESupport) {
+    if (isDragDrop && isEdmSupport) {
       let msg = {};
       if (data === "unsubscribe") {
         const anchor = `<a href='{{${data}}}'>${data}</a>`;
@@ -646,12 +628,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   onUpdateTemplateComplete = (createResponse) => {
     const {isEdit, formData = {} } = this.state || {};
     const base = formData.base || {};
-    const isDragDrop = _.get(base[base.activeTab], 'is_drag_drop');
-    let editorType = '';
-    if ( isDragDrop === true) {
+    const isDragDrop = _.get(base[base.activeTab], 'is_drag_drop', false);
+    let editorType = 'ckEditor';
+    if ( isDragDrop ) {
       editorType = 'edmEditor';
-    } else if (isDragDrop === false) {
-      editorType = 'ckEditor';
     }
     GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
       category: 'Creatives',
@@ -670,14 +650,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
-      const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
       if (this.props.isFullMode) {
         const {versions, ...rest} = createResponse.templateId;
         this.props.getFormSubscriptionData({ value: versions, ...rest, validity: true});
       } else {
         this.props.router.push({
           pathname: `/email`,
-          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isBEESupport} : {module, isLanguageSupport, isBEESupport},
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
         });
       }
     }
@@ -695,10 +675,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
   getValidationData = () => {
     const that = this;
-    let id = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate._id', '');
-    if (!id) {
-      id = _.get(formData, `base[${formData.base.activeTab}].id`, '');
-    }
     const formData = _.cloneDeep(this.state.formData);
     if (!this.props.Email.fetchingCmsData) {
       // checking wheather getCmsData in progress or not cuz getValidationData gets called multiple times from handleEdmSave
@@ -706,7 +682,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (!isNaN(index)) {
           _.forEach(val.selectedLanguages, (language) => {
             if (val[language].is_drag_drop) {
-              that.props.actions.getCmsData(BEE_PLUGIN, id, language);
+              that.props.actions.getCmsData('edm', val[language].drag_drop_id, language);
             }
           });
         }
@@ -771,7 +747,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   setEditData(editData) {
-    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     const formData = _.cloneDeep(this.state.formData);
 
     const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone(this.state.schema) : _.cloneDeep(this.state.schema);
@@ -914,7 +890,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         //   formData.base.activeTab = language;
         // }
         if (language && editData.versions.base[language].is_drag_drop) {
-          this.props.actions.getCmsSetting(BEE_PLUGIN, editData._id, 'open', language, isBEESupport);
+          this.props.actions.getCmsSetting('edm', editData.versions.base[language].drag_drop_id, 'open', language, isEdmSupport);
         }
       });
 
@@ -931,6 +907,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       value: 'edit',
       direction: e.value,
     };
+    parent.postMessage(JSON.stringify(response), '*');
   }
 
   getEditorInstanse = () => {
@@ -1010,8 +987,17 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (saveCount === 0) {
         //gets exicuted when ck editor is used
         this.startValidation(true);
+        return;
       }
-      this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0});
+      this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0}, () => {
+        const data = this.state.formData[this.state.currentTab - 1];
+        _.forEach(data.selectedLanguages, (language, langIndex) => {
+          if (data[language].is_drag_drop) {
+            const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+            win.postMessage("saveProject", '*');
+          }
+        });
+      });
     });
   }
 
@@ -1125,7 +1111,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const currentTab = this.state.currentTab - 1;
       const baseLanguage = this.props.currentOrgDetails.basic_details.base_language ? this.props.currentOrgDetails.basic_details.base_language : 'en';
       if (formData[currentTab][baseLanguage].is_drag_drop) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
+        this.props.actions.getCmsSetting('edm', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
       }
     });
   }
@@ -1254,7 +1240,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})] || {iso_code: baseLanguage || 'en', lang_id: -1, language: baseLanguage || "English"};
       baseData.activeTab = baseLanguage;
       baseData[languageObject.iso_code] = {};
-      baseData[languageObject.iso_code].is_drag_drop = undefined;
+      baseData[languageObject.iso_code].is_drag_drop = false;
       baseData[languageObject.iso_code].lang_id = languageObject.lang_id;
       baseData[languageObject.iso_code].iso_code = languageObject.iso_code;
       baseData[languageObject.iso_code].language = languageObject.language;
@@ -1284,13 +1270,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           return;
         }
         tmpData.html_content = content['template-content'];
-        tmpData.json_content = content['json-content'];
         tmpData.is_drag_drop = content.is_drag_drop;
         tmpData.lang_id = content.lang_id;
         tmpData.iso_code = content.iso_code;
         tmpData.language = content.language;
-        if (content.id) {
-          tmpData.id = content.id;
+        if (content.is_drag_drop) {
+          tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : "");
         }
 
         if (index === this.props.currentOrgDetails.basic_details.base_language) {
@@ -1328,10 +1313,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             this.onImageSelect();
           }
           break;
-        case "create": {
+        case "create":
           this.edmEvent = e;
           break;
-        }
         case "select":
           //this.edmEvent = e;
           break;
@@ -1399,14 +1383,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       });
     } else if (this.state.mode === 'preview' || this.state.mode === 'switchEditor') {
-      let id = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate._id', '');
-      const formData = _.cloneDeep(this.state.formData);
-      if (!id) {
-        id = _.get(formData, `base[${formData.base.activeTab}].id`, '');
-      }
-      this.props.actions.getCmsData(BEE_PLUGIN, id);
+      this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
       if (this.state.mode === 'switchEditor') {
         let schema = _.cloneDeep(this.state.schema);
+        const formData = _.cloneDeep(this.state.formData);
         _.forEach(schema.containers, (container, index) => {
           if (parseInt(index, 10) === (this.state.currentTab - 1)) {
             const temp = container;
@@ -1548,8 +1528,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   toggleEmailPreview = () => {
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
     if (isDragDrop && !this.state.showEmailPreview) {
-      this.handleEdmSave();
+      const activeLangTab = this.state.formData[`${this.state.currentTab - 1}`].activeTab;
+      const langIndex = this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      win.postMessage("saveProject", '*');
       this.setState({mode: "preview", gettingPreviewData: true});
+      // this.setState({gettingPreviewData: true}, () => {
+      //   this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
+      // });
     } else if (this.state.showEmailPreview) {
       const formData = _.cloneDeep(this.state.formData);
       formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = "";
@@ -1751,6 +1737,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
         // schema.containers[0].tabContent.sections.push(tabContent);
       }
+      //this.props.templatesActions.getEdmDefaultTemplates();
       const container = schema.containers[this.state.currentTab - 1];
       const temp = container;
       if (this.state.addLanguageType === "upload") {
@@ -1851,7 +1838,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       action: "showNext",
       value: true,
     };
-
+    parent.postMessage(JSON.stringify(response), '*');
   }
 
   moveToTemplates = () => {
@@ -2006,7 +1993,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const response = {
           action: 'startTemplateCreation',
         };
-        parent && parent.postMessage(JSON.stringify(response), '*');
+        parent.postMessage(JSON.stringify(response), '*');
       }
     });
     return temp;
@@ -2099,8 +2086,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           "iso_code": this.supportedLanguages[languageIndex].iso_code,
           "language": this.supportedLanguages[languageIndex].language,
           "template-content": !data.base.is_drag_drop && data.base.is_drag_drop !== 1 ? data.base.html_content : "",
-          "json-content": data.base.json_content,
-          "id": data.base.id,
         };
         const dragDropId = _.get(data, 'base.drag_drop_id');
         if (dragDropId) {
@@ -2129,7 +2114,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           };
           if (templates.drag_drop_id) {
             tempData.drag_drop_id = templates.drag_drop_id;
-            this.props.actions.getCmsSetting(BEE_PLUGIN, tempData._id, 'open', tempData.iso_code, isEdmSupport);
+            this.props.actions.getCmsSetting('edm', tempData.drag_drop_id, 'open', tempData.iso_code, isEdmSupport);
           }
           // formData.usingTabContainer = true;
           // formData.tabCount = 1;
@@ -2155,7 +2140,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         // this.setState({tabKey: ''});
         _.forEach(formData[0].selectedLanguages, (language) => {
           if (formData[0][language].is_drag_drop) {
-            this.props.actions.getCmsSetting(BEE_PLUGIN, formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
+            this.props.actions.getCmsSetting('edm', formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
           }
         });
       });
@@ -2348,6 +2333,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   saveFormData = (passedData) => {
     //saveFormData gets called only when validation result is true
+
     if (this.state.gettingFormData && !this.props.isFullMode) {
       const response = {
         action: "getFormData",
@@ -2361,13 +2347,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (this.props.location.query.module === 'library' && this.props.isGetFormData) {
         this.props.getFormSubscriptionData(response);
       }
+      parent.postMessage(JSON.stringify(response), "*");
       this.setState({gettingFormData: false, startValidation: false, loading: true});
       return;
     }
     const formData = _.cloneDeep(passedData);
-    const { currentTab } = _.cloneDeep(this.state);
-    delete formData[currentTab - 1][formData[currentTab - 1].activeTab][`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
-    delete formData[currentTab - 1][formData[currentTab - 1].activeTab][`BEEeditor${currentTab > 1 ? currentTab : ''}token`];
+
     const obj = {};
     obj.versions = {
       base: {},
@@ -2437,7 +2422,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const langIndex = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
 
     this.setState({mode: "switchEditor"}, () => {
-      this.handleEdmSave();
+      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      win.postMessage("saveProject", '*');
     });
   }
 
@@ -2479,7 +2465,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState( (prevState) => ({
       showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
       if (this.state.showEdmEmailTemplates) {
-        this.props.templatesActions.getDefaultBeeTemplates();
+        this.props.templatesActions.getEdmDefaultTemplates();
       }
     });
   };
@@ -2493,7 +2479,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       // let getQuery = '';
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
 
-      this.props.actions.getCmsSetting(BEE_PLUGIN, data._id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
+      this.props.actions.getCmsSetting('edm', data.versions.base.drag_drop_id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
       // this.props.templatesActions.setEdmTemplate(data);
       this.toggleEdmEmailTemplateSelection();
       // if (type && type.toLowerCase() === 'email') {
@@ -2509,22 +2495,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   };
   isEmailLoading = () => {
     //let {isLoading} = this.props;
-    const { Email, isLoadingMetaEntities, setIsLoadingContent } = this.props;
-    const {
-      fetchingCmsData,
-      getTemplateDetailsInProgress,
-      assetUploading,
-      createTemplateInProgress,
-    } = this.props.Email;
-    let isLoading =
-      isLoadingMetaEntities ||
-      this.state.loading || (
-        Email && "createTemplateInProgress" in Email && createTemplateInProgress
-      ) || (
-        assetUploading !== undefined && assetUploading
-      ) || (
-        Email && (fetchingCmsData || getTemplateDetailsInProgress)
-      );
+    let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
 
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
@@ -2532,7 +2503,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }
-    if (!isLoading && setIsLoadingContent) {
+    if (!isLoading && this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(isLoading);
     }
     return isLoading;
@@ -2581,26 +2552,30 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       </div>
     </div>
   );
-  getImagePreviewContent = () => {
-    const { assetList = [], fetchingAllAssets, fetchAllAssetSuccess } = this.props.Email || {};
-    return (
-      <div key="creatives-email-add-image-container">
-        {this.getFilterContent()}
-        <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
-          {(!fetchingAllAssets && (!fetchAllAssetSuccess || (fetchAllAssetSuccess && !assetList.length))) ? (
-            <FormattedMessage {...messages.noImgInGallery}/>
-          ) : this.getTemplateDataForGrid({
-            isLoading: fetchingAllAssets,
-            loadingTip: <FormattedMessage {...messages.loadingImages}/>,
-            channel: this.state.channel,
-            templates: assetList,
-            handlers: {onItemClick: this.handleOnItemClick}})
-          }
-
-        </Pagination>
-      </div>
-    );
-  };
+  getImagePreviewContent = () => (
+    <div key="creatives-email-add-image-container">
+      {this.getFilterContent()}
+      <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
+        {/* <CardGrid
+          listItem={this.prepareImageData()}
+          filterContent={filterContent}
+          onHoverItem={this.handleOnHoverItem}
+          onItemClick={this.handleOnItemClick}
+          colNumber={2}
+          enablePagination
+          isLoading={}
+        /> */}
+        {this.props.Email.assetList && this.props.Email.assetList.length ? this.getTemplateDataForGrid({
+          isLoading: this.props.Email.fetchingAllAssets,
+          loadingTip: <FormattedMessage {...messages.loadingImages}/>,
+          channel: this.state.channel,
+          templates: this.props.Email.assetList,
+          handlers: {onItemClick: this.handleOnItemClick}})
+         : <FormattedMessage {...messages.noImgInGallery}/>}
+
+      </Pagination>
+    </div>
+  );
 
   showTestAndPreviewIcons = (action) => {
     const { formData = [] } = this.state;
@@ -2627,29 +2602,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       </CapButton>
     );
   };
-  saveBeeInstance = (instance) => {
-    this.beeInstance = instance;
-  }
-  saveBeeData = (json, html) => {
-    this.setState((prevState) => {
-      const { currentTab, formData } = _.cloneDeep(prevState);
-      const activeTab = formData[currentTab - 1].activeTab;
-      formData[currentTab - 1][activeTab]['template-content'] = html;
-      formData[currentTab - 1][activeTab]['json-content'] = json;
-
-      formData.base[activeTab]['template-content'] = html;
-      formData.base[activeTab]['json-content'] = json;
-
-      return {
-        ...prevState,
-        formData,
-      };
-    }, () => {
-      this.setState({
-        startValidation: true,
-      });
-    });
-  }
 
   render() {
     // const pageHeading = (this.state.isEdit) ? this.props.intl.formatMessage(messages.editHeading) : this.props.intl.formatMessage(messages.createHeading);
@@ -2659,7 +2611,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const previewHeader = (<h3>{this.props.intl.formatMessage(messages.h3emailPreview)}</h3>);
     const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = this.getImagePreviewContent();
-    const { selectedOfferDetails, getDefaultTags, Email: { CmsSettings = {} } = {} } = this.props;
+    const { selectedOfferDetails, getDefaultTags } = this.props;
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2720,11 +2672,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   saveForm={this.state.saveForm}
                   stopValidation={this.stopValidation}
                   selectedOfferDetails={selectedOfferDetails}
-                  saveBeeInstance={this.saveBeeInstance}
-                  saveBeeData={this.saveBeeData}
-                  uuid={CmsSettings.uuid}
-                  type={CmsSettings.type}
-                  isEmailLoading={isLoading}
               /> : ''}
             </Col>
           </Row>
@@ -2743,9 +2690,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           show={this.state.showImageSelectionBox}
           handleClose={this.handleImagePreviewClose}
           isLoading={this.props.Email.fetchingAllAssets}
-          size="size-xl"
+          size="size-l"
         />
-        {/* <div id="bee-plugin-container" style={{ height: '600px'}}></div> */}
         {this.state.showConfirmationModal && this.renderConfirmationModal()}
       </div>
     );