@capillarytech/creatives-library 6.8.8 → 6.9.1

package/v2Containers/Email/index.js

@@ -33,7 +33,6 @@ import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
 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) {
@@ -179,24 +178,36 @@ 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();
     }
-    if (!_.isEmpty(this.props.Templates.edmTemplate)) {
-      if (this.props.Templates.edmTemplate.versions.base.is_drag_drop) {
+    // const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+
+    //----------------commented by sakshi------------------------
+    // 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('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('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'create', undefined, isEdmSupport);
+    //   }
+    // }
+    // --------till here commented by sakshi------------------------
+    if (!_.isEmpty(this.props.Templates.BEETemplate) ) {
+      if (this.props.Templates.BEETemplate.versions.base.is_drag_drop) {
         this.setState({isDragDrop: true});
       }
       if (this.props.params.id) {
-        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'open', undefined, isEdmSupport);
+        this.props.actions.getCmsSetting('BEE', this.props.Templates.BEETemplate._id, 'open', undefined, isBEESupport);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'create', undefined, isEdmSupport);
+        this.props.actions.getCmsSetting('BEE', this.props.Templates.BEETemplate._id, 'create', undefined, isBEESupport);
       }
     }
-
-    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData}, () => {
-      // this.injectEvents(this.state.schema);
-    });
+    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
 
     // setTimeout(() => {
     //     // this.getFormData();
@@ -216,7 +227,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       this.showNext();
     }
   }
-
   componentWillReceiveProps(nextProps) {
     // if (this.props.location.query.type === 'embedded') {
     //   this.showNext();
@@ -316,16 +326,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;
-          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
+          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
           if (triggerGetFormData) {
             this.getFormData();
           }
@@ -335,6 +345,9 @@ 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,16 +361,26 @@ 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) {
-          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;
+          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[`${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;
             //
@@ -367,7 +390,6 @@ 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) => {
@@ -384,7 +406,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") {
+          if (window.CKEDITOR && apiLangId !== "undefined" && !this.props.Email.fetchingCmsSettings && !this.props.Email.getTemplateDetailsInProgress) {
             const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
 
             _.forEach(window.CKEDITOR.instances, (winInstance) => {
@@ -422,23 +444,26 @@ 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 {
+        } else if (!nextProps.Email.getTemplateDetailsInProgress) {
           const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(formData[this.state.currentTab - 1].activeTab);
           const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
 
-          _.forEach(window.CKEDITOR.instances, (winInstance) => {
-            const temp = winInstance;
+          if (window.CKEDITOR) {
+            _.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;
@@ -456,8 +481,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 isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-        if (isDragDrop && isEdmSupport) {
+        const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+        if (isDragDrop && isBEESupport) {
           const evtData = JSON.parse(this.edmEvent.data);
           if (evtData.action === 'editBackground') {
             this.edmEvent.source.postMessage(JSON.stringify({
@@ -501,6 +526,12 @@ 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() {
@@ -585,9 +616,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 isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
 
-    if (isDragDrop && isEdmSupport) {
+    if (isDragDrop && isBEESupport) {
       let msg = {};
       if (data === "unsubscribe") {
         const anchor = `<a href='{{${data}}}'>${data}</a>`;
@@ -628,10 +659,12 @@ 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', false);
-    let editorType = 'ckEditor';
-    if ( isDragDrop ) {
+    const isDragDrop = _.get(base[base.activeTab], 'is_drag_drop');
+    let editorType = '';
+    if ( isDragDrop === true) {
       editorType = 'edmEditor';
+    } else if (isDragDrop === false) {
+      editorType = 'ckEditor';
     }
     GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
       category: 'Creatives',
@@ -650,14 +683,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 isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+      const isBEESupport = (this.props.location.query.isBEESupport !== "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, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isBEESupport} : {module, isLanguageSupport, isBEESupport},
         });
       }
     }
@@ -675,6 +708,10 @@ 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
@@ -682,7 +719,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('edm', val[language].drag_drop_id, language);
+              that.props.actions.getCmsData('BEE', id, language);
             }
           });
         }
@@ -747,7 +784,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   setEditData(editData) {
-    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    const isBEESupport = (this.props.location.query.isBEESupport !== "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);
@@ -890,7 +927,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('edm', editData.versions.base[language].drag_drop_id, 'open', language, isEdmSupport);
+          this.props.actions.getCmsSetting('BEE', editData._id, 'open', language, isBEESupport);
         }
       });
 
@@ -907,7 +944,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       value: 'edit',
       direction: e.value,
     };
-    parent.postMessage(JSON.stringify(response), '*');
   }
 
   getEditorInstanse = () => {
@@ -987,16 +1023,18 @@ 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}, () => {
         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", '*');
-          }
-        });
+        // will remove once bee gets tested end to end
+        // _.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", '*');
+          // }
+          // if (data[language].is_drag_drop) {
+          // }
+        // });
       });
     });
   }
@@ -1111,7 +1149,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('edm', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
+        this.props.actions.getCmsSetting('BEE', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
       }
     });
   }
@@ -1240,7 +1278,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 = false;
+      baseData[languageObject.iso_code].is_drag_drop = undefined;
       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;
@@ -1270,12 +1308,14 @@ 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.is_drag_drop) {
-          tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : "");
+          // tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : "");
+          tmpData.id = content.id;
         }
 
         if (index === this.props.currentOrgDetails.basic_details.base_language) {
@@ -1313,9 +1353,10 @@ 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;
@@ -1383,10 +1424,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       });
     } else if (this.state.mode === 'preview' || this.state.mode === 'switchEditor') {
-      this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
+      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', 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;
@@ -1528,10 +1573,12 @@ 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) {
-      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", '*');
+        // will remove once bee gets tested end to end
+      // 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 && win.postMessage("saveProject", '*');
+      this.handleEdmSave();
       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);
@@ -1737,7 +1784,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();
+      //this.props.templatesActions.getDefaultBeeTemplates();
       const container = schema.containers[this.state.currentTab - 1];
       const temp = container;
       if (this.state.addLanguageType === "upload") {
@@ -1838,7 +1885,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       action: "showNext",
       value: true,
     };
-    parent.postMessage(JSON.stringify(response), '*');
+    // will remove once bee gets tested end to end
+    // parent && parent.postMessage(JSON.stringify(response), '*');
   }
 
   moveToTemplates = () => {
@@ -1993,7 +2041,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const response = {
           action: 'startTemplateCreation',
         };
-        parent.postMessage(JSON.stringify(response), '*');
+        parent && parent.postMessage(JSON.stringify(response), '*');
       }
     });
     return temp;
@@ -2086,6 +2134,8 @@ 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) {
@@ -2114,7 +2164,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('edm', tempData.drag_drop_id, 'open', tempData.iso_code, isEdmSupport);
+            this.props.actions.getCmsSetting('BEE', tempData._id, 'open', tempData.iso_code, isEdmSupport);
           }
           // formData.usingTabContainer = true;
           // formData.tabCount = 1;
@@ -2140,7 +2190,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('edm', formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
+            this.props.actions.getCmsSetting('BEE', formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
           }
         });
       });
@@ -2332,8 +2382,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   saveFormData = (passedData) => {
-    //saveFormData gets called only when validation result is true
 
+    //saveFormData gets called only when validation result is true
     if (this.state.gettingFormData && !this.props.isFullMode) {
       const response = {
         action: "getFormData",
@@ -2347,12 +2397,14 @@ 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), "*");
+      // parent && 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: {},
@@ -2422,8 +2474,9 @@ 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"}, () => {
-      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      win.postMessage("saveProject", '*');
+      this.handleEdmSave();
+      // const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      // win && win.postMessage("saveProject", '*');
     });
   }
 
@@ -2465,7 +2518,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.getEdmDefaultTemplates();
+        this.props.templatesActions.getDefaultBeeTemplates();
       }
     });
   };
@@ -2479,7 +2532,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('edm', data.versions.base.drag_drop_id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
+      this.props.actions.getCmsSetting('BEE', data._id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
       // this.props.templatesActions.setEdmTemplate(data);
       this.toggleEdmEmailTemplateSelection();
       // if (type && type.toLowerCase() === 'email') {
@@ -2495,7 +2548,22 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   };
   isEmailLoading = () => {
     //let {isLoading} = this.props;
-    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);
+    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)
+      );
 
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
@@ -2503,7 +2571,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // if (isLoading) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
     // }
-    if (!isLoading && this.props.setIsLoadingContent) {
+    if (!isLoading && setIsLoadingContent) {
       this.props.setIsLoadingContent(isLoading);
     }
     return isLoading;
@@ -2552,30 +2620,35 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       </div>
     </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>
-  );
+  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">
+          {/* <CardGrid
+            listItem={this.prepareImageData()}
+            filterContent={filterContent}
+            onHoverItem={this.handleOnHoverItem}
+            onItemClick={this.handleOnItemClick}
+            colNumber={2}
+            enablePagination
+            isLoading={}
+          /> */}
+          {(!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>
+    );
+  };
 
   showTestAndPreviewIcons = (action) => {
     const { formData = [] } = this.state;
@@ -2602,6 +2675,29 @@ 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);
@@ -2611,7 +2707,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 } = this.props;
+    const { selectedOfferDetails, getDefaultTags, Email: { CmsSettings = {} } = {} } = this.props;
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2672,6 +2768,11 @@ 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>
@@ -2690,8 +2791,9 @@ 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-l"
+          size="size-xl"
         />
+        {/* <div id="bee-plugin-container" style={{ height: '600px'}}></div> */}
         {this.state.showConfirmationModal && this.renderConfirmationModal()}
       </div>
     );