@capillarytech/creatives-library 0.0.4 → 0.0.6

package/containers/Email/index.js

@@ -605,6 +605,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       saveObj: {},
       showEdmEmailTemplates: false,
       editDataSet: false,
+      languageDataSet: false,
+      addLanguageType: '',
     };
 
     this.isTagLoaded = false;
@@ -698,7 +700,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData['template-version'] = "version 1";
     }
     // const formData = _.cloneDeep(this.state.formData);
-    if (this.props.params.id || (this.props.location.query.module === "subscription" && !_.isEmpty(this.props.subscriptionTemplateData))) {
+    if (this.props.params.id || (this.props.location.query.module === "library" && this.props.templateData && !_.isEmpty(this.props.templateData))) {
       this.setState({isEdit: true}, () => {
         if (this.props.params.id) {
           this.props.actions.getTemplateDetails(this.props.params.id, 'email');
@@ -724,25 +726,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     // setTimeout(() => {
     //     // this.getFormData();
-    //   // this.startTemplateCreation();
+    //   this.startTemplateCreation();
     // }, 15000);
   }
 
   componentDidMount() {
     console.log('email container mounted');
-    const type = this.props.location.query.type;
     const query = {
       layout: 'EMAIL',
       type: 'LAYOUT',
     };
     this.props.globalActions.fetchSchemaForEntity(query);
     window.addEventListener("message", this.handleFrameTasks);
-    if (type === 'embedded') {
-      const response = {
-        action: 'startTemplateCreation',
-      };
-      parent.postMessage(JSON.stringify(response), '*');
-    }
     if (this.props.location.query.type === 'embedded') {
       this.showNext();
     }
@@ -754,13 +749,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     //   this.showNext();
     // }
 
-    if (nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
+    if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
       console.log('setting new language content props', nextProps.Templates.selectedEmailLayout);
       this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      console.log('isTagLoaded didMount', this.isTagLoaded);
+      const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
+      console.log('Schema test 1 ', newSchema);
+      this.setState({schema: newSchema});
       const query = {
         layout: 'EMAIL',
         type: 'TAG',
@@ -768,11 +764,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
       };
       setTimeout(() => {
-        this.hideSubject();
+        this.showSubject();
       }, 0);
       this.props.globalActions.fetchSchemaForEntity(query);
     }
-    if (nextProps.location.query.module === 'subscription' && nextProps.isGetFormData) {
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
       nextProps.getFormSubscriptionData(this.getFormData());
     }
     if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details && !_.isEmpty(nextProps.Global.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
@@ -791,7 +787,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       ];
       // console.log('New Form Data Preparing ', this.initFormData());
       formData['template-version'] = "version 1";
-      this.setState({formData});
+      //const that = this;
+      this.setState({formData}, () => {
+        // setTimeout(() => {
+        //     // this.getFormData();
+        //   that.startTemplateCreation();
+        // }, 15000);
+      });
     } else if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details) {
       // this.injectEvents(this.state.schema);
       const baseLanguage = nextProps.Global.currentOrgDetails.basic_details.base_language;
@@ -805,6 +807,20 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.setState({formData});
       }
 
+      if (!_.isEmpty(this.state.schema)) {
+        const schema = _.cloneDeep(this.state.schema);
+        console.log('Schema test 2', schema);
+        const formData = _.cloneDeep(this.state.formData);
+        const container = schema.containers[0];
+        // const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
+        if (baseLanguage === formData[0].activeTab) {
+          container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
+        } else {
+          container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
+        }
+        this.setState({schema});
+      }
+
       // console.log('isTagLoaded', this.isTagLoaded);
       // if (!this.isTagLoaded) {
       //   this.isTagLoaded = true;
@@ -823,8 +839,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           this.setEditData(nextProps.Email.templateDetails);
         });
       }
-      if (this.state.isEdit && nextProps.location.query.module === "subscription" && !_.isEmpty(nextProps.subscriptionTemplateData) && !this.props.params.id) {
-        this.startTemplateCreation(nextProps.subscriptionTemplateData);
+      if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id) {
+        this.startTemplateCreation(nextProps.templateData);
       }
 
       if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings)) {
@@ -861,6 +877,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
             }
           });
+          console.log('Schema test 3', schema);
           this.setState({schema, isSchemaChanged: true});
         } else {
           _.forEach(temp.panes, (pane, index) => {
@@ -870,12 +887,27 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: ""};
             }
           });
+          console.log('Schema test 4', schema);
           this.setState({schema, isSchemaChanged: true});
           let html = decodeURIComponent(nextProps.Email.CmsSettings.htmlContent);
           console.log('Before ', html, nextProps.Email.CmsSettings.htmlContent);
           html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, '"');
           console.log('html content ', html);
           formData[this.state.currentTab - 1][langId]["template-content"] = html;
+          if (window.CKEDITOR && apiLangId !== "undefined") {
+            const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
+            console.log('email switch data name', instanceName);
+            _.forEach(window.CKEDITOR.instances, (winInstance) => {
+              const tempInstance = winInstance;
+              console.log('email switch data instance', winInstance, winInstance.name);
+              if (winInstance.name === instanceName) {
+                console.log('setting instance name after loading', winInstance, name);
+                tempInstance.setData(html);
+              } else if (winInstance.name.indexOf('editor') !== -1) {
+                tempInstance.setData(html);
+              }
+            });
+          }
         }
 
         this.setState({ formData }, () => {
@@ -895,13 +927,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.clearCRUDResponse();
         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;
         this.props.router.push({
           pathname: `/email`,
-          query: type === 'embedded' ? {type: 'embedded', module} : {module},
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {module, isLanguageSupport},
         });
       }
       if (nextProps.Email.createTemplateError && !_.isEqual(nextProps.Email.createTemplateError, this.props.Email.createTemplateError)) {
-        const message = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
+        const message = getMessageObject('error', (nextProps.Email.createTemplateErrorMessage && nextProps.Email.createTemplateErrorMessage !== '') ? nextProps.Email.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
         this.props.globalActions.addMessageToQueue(message);
       }
       if (!nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData)) {
@@ -914,6 +947,19 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
         } else {
           console.log('email switch data ', this.state.currentTab, formData, formData[`${this.state.currentTab - 1}`].activeTab);
+          const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(formData[this.state.currentTab - 1].activeTab);
+          const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
+          console.log('email switch data name', instanceName);
+          _.forEach(window.CKEDITOR.instances, (winInstance) => {
+            const temp = winInstance;
+            console.log('email switch data instance', winInstance, winInstance.name);
+            if (winInstance.name === instanceName) {
+              console.log('setting instance name after loading', winInstance, name);
+              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 = "";
@@ -951,7 +997,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
       if ( !_.isEqual(nextProps.Email.uploadAssetSuccess, this.props.Email.uploadAssetSuccess) && nextProps.Email.uploadAssetSuccess) {
         console.log('Post on will receive props');
-        if (this.state.isDragDrop) {
+        const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
+        if (isDragDrop) {
           console.log('Handle EDM ', this.edmEvent, JSON.parse(this.edmEvent.data)._dynId, nextProps.Email.uploadedAssetData.metaInfo.secure_file_path);
           const evtData = JSON.parse(this.edmEvent.data);
           if (evtData.action === 'editBackground') {
@@ -977,11 +1024,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           this.edmEvent = undefined;
         } else {
-          this.state.editorInstanse.insertHtml(`<img src='${nextProps.Email.uploadedAssetData.metaInfo.secure_file_path}' alt='Capillary Image'>`);
+          this.resetCkEditorInstance(this.state.currentTab, this.state.formData, true, nextProps.Email.uploadedAssetData, true);
         }
         this.setState({showImageSelectionBox: false});
       }
 
+      if ( !_.isEqual(nextProps.Email.assetUploading, this.props.Email.assetUploading) && !nextProps.Email.assetUploading && !nextProps.Email.uploadAssetSuccess) {
+        const message = getMessageObject('error', this.props.intl.formatMessage(messages.assetUploadFailed), true);
+        this.props.globalActions.addMessageToQueue(message);
+      }
+
       if (!_.isEqual(nextProps.Global.currentOrgDetails.basic_details.supported_languages, this.props.Global.currentOrgDetails.basic_details.supported_languages)) {
         this.supportedLanguages = nextProps.Global.currentOrgDetails.basic_details.supported_languages;
       }
@@ -994,6 +1046,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   componentWillUnmount() {
     console.log('removed listener create');
+    this.resetStateValue();
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.clearStoreValues();
   }
@@ -1005,22 +1058,35 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (currentTab) {
       this.setState({currentTab});
     }
+    //this.resetCkEditorInstance(currentTab, formData);
   }
 
-  onChange = (evt) => {
-    // console.log('Dark Knight ', this.state);
+  onChange = (evt, id) => {
     const formData = _.cloneDeep(this.state.formData);
-    console.log('onChange ');
-    formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(this.state.editorInstanse.getData());
-    if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
-      formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(this.state.editorInstanse.getData());
+    console.log('oncontentchange onChange ', evt, evt.editor.getData());
+    if (evt.editor.name.indexOf('editor') === -1) {
+      _.forEach(window.CKEDITOR.instances, (winInstance) => {
+        const temp = winInstance;
+        if (winInstance.name === evt.editor.name) {
+          console.log('setting instance name after loading', winInstance, name);
+          // setTimeout(() => {
+          //   //temp.name = id;
+          // }, 1000);
+          temp.name = id;
+          console.log('setting instance name after loading 2', winInstance, name);
+        }
+      });
+    }
+    if (!formData[this.state.currentTab - 1][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop) {
+      formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
+      if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
+        formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
+      }
+      console.log("Modified Form Data ", formData);
+      this.setState({formData, content: evt.editor.getData()}, () => {
+        console.log('Dark Knight ', this.state.content);
+      });
     }
-    console.log("Modified Form Data ", formData);
-    this.setState({formData, content: this.state.editorInstanse.getData()}, () => {
-      console.log('Dark Knight ', this.state.content);
-    });//CKEDITOR.instances.editor1
-    console.log('onChange fired with event new', window.CKEDITOR.instances.editor1, window.CKEDITOR.instances.editor1.getData() );
-    console.log("onChange fired with event info: ", evt, "and data: ", this.state.editorInstanse.getData(), this.state.editorInstanse);
   }
 
   onBlur = (evt) => {
@@ -1029,24 +1095,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   onTabChange(data, formData) {
     console.log('inside parent ontabchange', data, this.state);
-    const currentLang = formData[`${data - 1}`].selectedLanguages.indexOf(formData[`${data - 1}`].activeTab);
-    const langIndex = formData[`${data - 1}`].selectedLanguages.indexOf(formData[`${data - 1}`].activeTab);
-    let instance1 = window.CKEDITOR.instances[`editor${currentLang + 1}`];
-    let instanceCount = 0;
-    _.forEach(window.CKEDITOR.instances, (instance, index) => {
-      console.log('all ck instances ', instance, index, instanceCount, langIndex);
-      instanceCount += 1;
-      if (instanceCount === (langIndex + 1)) {
-        console.log('setting instance as ', instance);
-        instance1 = instance;
-      }
-    });
+    this.resetCkEditorInstance(data, formData);
     const schema = _.cloneDeep(this.state.schema);
     const container = schema.containers[`${data - 1}`];
     if (formData[`${data - 1}`][formData[`${data - 1}`].activeTab].is_drag_drop) {
       container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: ""};
+      container.tabBarExtraContent.sections[0].inputFields[0].cols[2].style.display = "none";
     } else {
       container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
+      container.tabBarExtraContent.sections[0].inputFields[0].cols[2].style.display = "";
     }
     const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
     if (baseLanguage === formData[`${data - 1}`].activeTab) {
@@ -1054,7 +1111,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
     }
-    this.setState({currentTab: data, formData, editorInstanse: instance1, schema});
+    this.setState({currentTab: data, formData, schema});
   }
 
   onTemplateNameChange = (name) => {
@@ -1064,17 +1121,19 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   onTagSelect = (data, currentTab, value) => {
     console.log('On Tag selection ', data, currentTab, value);
     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);
     if (isDragDrop) {
       const msg = {
         action: "InsertToCursor",
         content: `{{${data}}}`,
       };
       const msgString = JSON.stringify(msg);
-    //  const win = document.getElementById(`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}`).contentWindow;
-      this.edmEvent.source.postMessage(msgString, '*');
+      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, '*');
     } else {
-      //window.CKEDITOR.instances.editor1.insertHtml(`{{${data}}}`);
-      this.state.editorInstanse.insertHtml(`{{${data}}}`);
+      this.resetCkEditorInstance(currentTab, formData, true, data);
     }
   }
 
@@ -1090,6 +1149,35 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
 
+  setNewLanguageContent = (data) => {
+    const content = _.cloneDeep(data);
+    const formData = _.cloneDeep(this.state.formData);
+    const currentTab = this.state.currentTab - 1;
+    // const schema = _.cloneDeep(this.state.schema);
+    console.log('Setting new language content', formData, this.state.settingLanguage);
+    const currentTabData = formData[currentTab][this.state.settingLanguage.iso_code];
+    currentTabData.is_drag_drop = false;
+    currentTabData.drag_drop_id = "";
+    const newActiveTab = this.state.settingLanguage.iso_code;
+    currentTabData["template-content"] = content;
+    formData[currentTab].activeTab = newActiveTab;
+    if (currentTabData.edmeditorsrc) {
+      delete currentTabData.edmeditorsrc;
+    }
+    formData[currentTab].selectedLanguages.push(newActiveTab);
+    console.log('setting new language content final', formData);
+  //  this.setState({formData});
+    // const container = schema.containers[this.state.currentTab - 1];
+    // const temp = container;
+    // const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
+    // console.log('switch language Tab ', langTab, this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages, this.state.formData[`${this.state.currentTab - 1}`].activeTab);
+    // temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+    // temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+    // temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
+    this.props.templatesActions.resetUploadData();
+    this.setState({formData, languageDataSet: false, addLanguageType: ''});
+  }
+
   getParameterByName = (name, url) => {
     const match = RegExp(`[?&]${name}=([^&]*)`).exec(url);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
@@ -1109,7 +1197,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       e.source.postMessage(JSON.stringify(response), e.origin);
     }
     return response;
-  };
+  }
 
   setFormValidity = (isFormValid) => {
     this.setState({isFormValid});
@@ -1120,10 +1208,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const formData = _.cloneDeep(this.state.formData);
 
     const tabIndex = this.state.currentTab + 1;
-    const schema = _.cloneDeep(this.state.schema);
+    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone() : _.cloneDeep(this.state.schema);
     const containers = _.cloneDeep(schema.containers.slice());
     let tabKey = "";
     let currentTab = _.cloneDeep(this.state.currentTab);
+    const isLanguageSupport = this.props.location.query.isLanguageSupport;
+    const type = this.props.location.query.type;
 
     formData['template-name'] = editData.name;
     formData.base = editData.versions.base;
@@ -1131,7 +1221,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     _.forEach(editData.versions.history, (data1, index) => {
       const data = _.cloneDeep(data1);
       if (data !== null) {
-        if (index > 0) {
+        if (index > 0 && (isLanguageSupport || this.props.location.query.type !== 'embedded')) {
           const firstPane = _.cloneDeep(containers[0].panes[0]);
           // schema.containers[this.state.currentTab - 1].isActive = false;
           const sections = [];
@@ -1193,11 +1283,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             schema.containers[index].isActive = false;
             console.log('Dummy Random ', schema.containers[index].isActive, index);
           }
-
+          // const isLanguageSupport = this.props.location.query.isLanguageSupport;
           console.log('Schema Test ', schema, schema.containers[index]);
           _.forEach(data.selectedLanguages, (lang, langIndex) => {
             console.log('Language ', lang, langIndex);
-            if (lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
+            if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
               const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
               const tabContentSection = tabContent.inputFields[0].cols[0];
               const panes = containers[0].panes.slice();
@@ -1229,14 +1319,20 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               // panes.push(firstPane);
               console.log('initial panes', JSON.stringify(this.state.schema.containers));
               schema.containers[index].panes.push(firstPane);
+            } else if (lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
+              delete data[lang];
+              data.selectedLanguages.splice(langIndex, 1);
             }
           });
         }
+        if (data.base) {
+          formData.base = data;
+        }
         formData[index] = data;
       }
     });
 
-    _.forEach((editData.versions.base.selectedLanguages), (language) => {
+    _.forEach(formData.base.selectedLanguages, (language) => {
       if (formData.base.tabKey === formData.base[language].tabKey) {
         formData.base.activeTab = language;
       }
@@ -1258,6 +1354,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       });
       console.log('final form data edit', formData);
+      // this.resetCkEditorInstance(this.state.currentTab - 1, formData);
       // this.setState({formData});
     });
   }
@@ -1277,35 +1374,207 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     parent.postMessage(JSON.stringify(response), '*');
   }
 
-  getEditorInstanse = (instance) => {
-    console.log('Got editor Instance ', instance);
-    this.setState({editorInstanse: instance});
+  getEditorInstanse = (instance, id) => {
+    console.log('Got editor Instance ', instance, id);
+    //this.setState({editorInstanse: instance});
   }
 
-  setModalContent = (type) => {
+  setModalContent = (type, data) => {
+    let modalContent = {};
     if (type === 'delete-version') {
-      const modalContent = {
+      modalContent = {
         title: "Alert",
         body: "Do you really want to delete this version?",
         type: 'confirm',
         id: 'email-version-delete-modal',
       };
-      this.setState({modalContent, showModal: true});
     } else if (type === 'delete-language') {
-      const modalContent = {
+      modalContent = {
         title: "Alert",
         body: "Do you really want to delete this language?",
         type: 'confirm',
         id: 'email-language-delete-modal',
       };
-      this.setState({modalContent, showModal: true});
+    } else if (type === 'add-language') {
+      const jsx = (
+        <div>
+          <div><CapButton type="secondary" style={{width: "100%", marginBottom: "8px"}} onClick={this.uploadFile}>Upload File</CapButton>
+            <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
+          </div>
+          <div><CapButton type="secondary" style={{width: "100%", marginBottom: "8px"}} onClick={this.useEditor}>Use Editor</CapButton></div>
+          <div><CapButton type="secondary" style={{width: "100%", marginBottom: "8px"}} onClick={this.copyPrimaryLanguage}>Copy primary Language</CapButton></div>
+        </div>);
+      modalContent = {
+        title: "New Language",
+        type: "action",
+        jsx,
+        id: 'email-add-language-options',
+      };
+      this.setState({settingLanguage: data});
     }
+    this.setState({ modalContent, showModal: true});
+  };
+
+  resetStateValue = () => {
+    this.setState({
+      formData: {},
+      tabCount: 1,
+      currentTab: 1,
+      isEdit: false,
+      schema: {},
+      loading: false,
+      isFormValid: true,
+      injectedTags: {},
+      checkValidation: false,
+      tabKey: '',
+      showEmailPreview: false,
+      device: "desktop",
+      editorInstanse: undefined,
+      showImageSelectionBox: false,
+      isDragDrop: false,
+      showConfirmationModal: false,
+      modalContent: {title: "Alert", body: "Do you really want to delete this language?", type: 'confirm', id: 'email-language-delete-modal'},
+      showModal: false,
+      page: 1,
+      perPageLimit: 25,
+      totalCount: 0,
+      searchText: '',
+      saveCount: 0,
+      targetSaveCount: 0,
+      saveObj: {},
+      showEdmEmailTemplates: false,
+      editDataSet: false,
+    }, () => {
+      console.log('Unmount value cleared', this.state);
+    });
+  }
+
+  resetCkEditorInstance = (data, formData, onInsert, value, isImage) => {
+    const currentLang = formData[`${data - 1}`].selectedLanguages.indexOf(formData[`${data - 1}`].activeTab);
+    const langIndex = formData[`${data - 1}`].selectedLanguages.indexOf(formData[`${data - 1}`].activeTab);
+    let instance1 = window.CKEDITOR.instances[`editor${currentLang + 1}`];
+    const instanceCount = 0;
+    const instanceArray = [];
+    _.forEach(window.CKEDITOR.instances, (instance, index) => {
+      console.log('all ck instances ', instance, index, instanceCount, langIndex);
+      const name = instance.name;
+      if (instance.status === "destroyed") {
+        return;
+      }
+      let instanceIdx = 0;
+      if (name.indexOf('template-content') > -1 && name !== 'template-content') {
+        instanceIdx = parseInt(name.replace('template-content', ''), 10) - 1;
+        const obj = {
+          idx: instanceIdx,
+          instance,
+        };
+        instanceArray.push(obj);
+      } else {
+        const obj = {
+          idx: 0,
+          instance,
+        };
+        instanceArray.push(obj);
+      }
+    });
+    console.log('sorted instance array before sort', instanceArray);
+    instanceArray.sort( (a, b) => {
+      const idxA = a.idx;
+      const idxB = b.idx;
+      if (idxA < idxB) {
+        return -1;
+      } else if (idxA > idxB) {
+        return 1;
+      }
+      return 0;
+    });
+    console.log('sorted instance array after sort', instanceArray);
+    //instanceCount += 1;
+    // if (instanceIdx === langIndex) {
+    const instance = instanceArray[langIndex].instance;
+    console.log('setting instance as ', instance, instance.name);
+    instance1 = instance;
+    this.setState({editorInstanse: instance1}, () => {
+      if (onInsert && !isImage) {
+        this.state.editorInstanse.insertHtml(`{{${value}}}`);
+      } else if (onInsert) {
+        this.state.editorInstanse.insertHtml(`<img src='${value.metaInfo.secure_file_path}' alt='Capillary Image'>`);
+      }
+    });
   }
 
+  uploadFile = () => {
+    console.log('uploadFile');
+    document.getElementById('filename').click();
+    console.log('Upload File initiated');
+  };
+
+  useEditor = () => {
+    console.log('useEditor');
+    //this.toggleEdmEmailTemplateSelection();
+    this.setState({addLanguageType: "useEditor"}, () => {
+      this.setState({showModal: false}, () => {
+        this.toggleEdmEmailTemplateSelection();
+      });
+    });
+  }
+
+  copyPrimaryLanguage = () => {
+    console.log('copy primary language');
+    this.setState({addLanguageType: "copyPrimaryLanguage"}, () => {
+      this.setState({showModal: false});
+      const formData = _.cloneDeep(this.state.formData);
+      const currentTab = this.state.currentTab - 1;
+      const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.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);
+      }
+    });
+  }
+
+  handleFileUpload = (e, {files}) => {
+    if (files.length === 0) {
+      return;
+    }
+    const fileExtension = files[0].name.split('.').pop();
+    const supportedZipFormats = ['zip'];
+    console.log('File Params ', fileExtension);
+    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      this.setState({ addLanguageType: "upload"}, () => {
+        console.log('Zip Format got');
+        this.props.templatesActions.handleZipUpload(files[0]);
+        document.getElementById("filename").value = "";
+        this.setState({showModal: false});
+      });
+    } else if (fileExtension === 'html' || fileExtension === 'htm') {
+      console.log('html Format got');
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.setState({ addLanguageType: "upload"}, () => {
+          const text = reader.result;
+          this.props.templatesActions.handleHtmlUpload(text);
+          document.getElementById("filename").value = "";
+          this.setState({showModal: false});
+        });
+      };
+      reader.readAsText(files[0]);
+    } else {
+      alert('Invalid file type added! Please Give a proper zip/html file');
+      console.log('Invalid file type added! Please Give a proper zip/html file');
+    }
+  };
+
   uploadImages(e, {files}) {
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
     const file = files[0];
+    const fileSize = (file.size / ( 1024 * 1024 ));
+    if (fileSize > 5) {
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.uploadSizeError), true);
+      this.props.globalActions.addMessageToQueue(message);
+      document.getElementById("fileName").value = "";
+      return;
+    }
     const img = new Image();
     const that = this;
     img.src = _URL.createObjectURL(file);
@@ -1315,6 +1584,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         height: this.height,
       };
       that.props.actions.uploadAsset(file, 'image', fileParams);
+      that.handleImagePreviewClose();
     };
   }
 
@@ -1365,10 +1635,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.delayTimer = setTimeout(callback, ms);
   }
 
-  deleteLanguage = (formData, val) => {
+  deleteLanguage = (passedData, val) => {
+    const formData = _.cloneDeep(passedData);
     console.log('Delete Language ', formData, val);
     const schema = _.cloneDeep(this.state.schema);
-    schema.containers[0].panes.splice(val, 1);
+    schema.containers[this.state.currentTab - 1].panes.splice(val, 1);
+    schema.containers[this.state.currentTab - 1].tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
+    this.resetCkEditorInstance(this.state.currentTab, formData);
     this.setState({schema, formData, showModal: false});
     console.log('Schema ', schema, formData, val);
   }
@@ -1400,7 +1673,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       baseData.selectedLanguages = [baseLanguage];
       newFormData.base = baseData;
       newFormData[0] = baseData;
+      newFormData[0].base = true;
     }
+    this.props.templatesActions.resetUploadData();
     return newFormData;
   }
 
@@ -1415,6 +1690,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       console.log('Type test ', content.constructor);
       if (content.constructor === Object) {
         const tmpData = {};
+        if (_.isEmpty(content)) {
+          return;
+        }
         tmpData.html_content = content['template-content'];
         tmpData.is_drag_drop = content.is_drag_drop;
         tmpData.lang_id = content.lang_id;
@@ -1431,7 +1709,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         console.log('Tranforming data for embedded mode', tmpData);
       }
     });
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "subscription" )) {
+    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "library")) {
       newFormData.base.subject = formData['template-subject'];
     }
 
@@ -1467,6 +1745,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         case "create":
           this.edmEvent = e;
           break;
+        case "select":
+          this.edmEvent = e;
+          break;
         case "startLoading":
           this.startLoading(type.edit);
           break;
@@ -1527,6 +1808,27 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           this.props.actions.createTemplate(this.state.saveObj);
         }
       });
+    } 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);
+      if (this.state.mode === 'switchEditor') {
+        const 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;
+            const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(formData[`${this.state.currentTab - 1}`].activeTab);
+            console.log('switch language Tab ', langTab, formData[`${this.state.currentTab - 1}`].selectedLanguages, formData[`${this.state.currentTab - 1}`].activeTab);
+            temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+            temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+            temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
+          }
+        });
+
+        console.log('Handle OK ', schema);
+        this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
+          this.injectEvents(schema);
+        });
+      }
     }
   }
 
@@ -1541,15 +1843,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({formData});
   }
 
-  hideSubject = () => {
-    const schema = _.cloneDeep(this.state.schema);
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "subscription")) {
-      schema.standalone.sections[0].inputFields[0].style.display = "";
-      schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
-    }
-    this.setState({schema});
-  }
-
   handleOnHoverItem = (isHovering, id) => {
     console.log('Card Howering  ', isHovering, id);
     if (!isHovering) {
@@ -1570,6 +1863,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     _.forEach(schema.containers, (container) => {
       if (container.isActive) {
         _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
+          if (containerInputFieldCol.id === 'insert-image') {
+            const newContainerInputFieldCol = containerInputFieldCol;
+            newContainerInputFieldCol.style.display = isDragDrop ? "none" : '';
+          }
           if (containerInputFieldCol.id === 'tab-options-popover') {
             _.forEach(containerInputFieldCol.content.sections[0].inputFields, (tabPopoverSection) => {
               if (tabPopoverSection.cols[0].id === 'switch-editor-label') {
@@ -1585,6 +1882,32 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({schema, isSchemaChanged: true});
   }
 
+  hideMarkAsFinalButton = () => {
+    const schema = _.cloneDeep(this.state.schema);
+    _.forEach(schema.containers, (container) => {
+      if (container.isActive) {
+        _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
+          if (containerInputFieldCol.id === 'mark-final-version-label') {
+            const newContainerInputFieldCol = containerInputFieldCol;
+            newContainerInputFieldCol.style.display = "none";
+          }
+        });
+      }
+    });
+    console.log('HandleHideMarkAsFinal ', JSON.stringify(schema));
+    this.setState({schema, isSchemaChanged: true});
+  }
+
+  showSubject = () => {
+    const schema = _.cloneDeep(this.state.schema);
+    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" ||
+      this.props.location.query.module === "library")) {
+      schema.standalone.sections[0].inputFields[0].style.display = "";
+      schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
+    }
+    this.setState({schema});
+  }
+
   handleOnItemClick = (isSelected, id) => {
     console.log('Dummy ', isSelected, id, event);
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
@@ -1618,7 +1941,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           this.edmEvent = undefined;
         } else {
-          this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.public_url}' alt='Capillary Image'>`);
+          this.resetCkEditorInstance(this.state.currentTab, this.state.formData, true, data, true);
         }
       }
       this.setState({ showImageSelectionBox: false });
@@ -1628,9 +1951,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.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);
-      });
+      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'] = "";
@@ -1771,58 +2099,106 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
   }
 
-  addLanguage = (data, formData, val) => {
-    const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
-    const tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;
-    console.log('adding language', data, formData, val, selectedLanguage, formData[`${this.state.currentTab - 1}`]);
-    const tabIndex = (selectedLanguage) + 1;
+  addLanguage = (tempLang, passedData, val, asyncLanguages) => {
+    if (this.state.addLanguageType === "upload") {
+      this.setState({languageDataSet: true}, () => {
+        console.log('adding from add language 1', this.props.Templates);
+        if (this.props.Templates.selectedEmailLayout && this.props.Templates.selectedEmailLayout !== '') {
+          console.log('adding from add language 2');
+          this.setNewLanguageContent(this.props.Templates.selectedEmailLayout);
+        }
+      });
+    }
+    let addLanguageLength = 1;
+    if (asyncLanguages) {
+      addLanguageLength = asyncLanguages.length;
+    }
+    let data = tempLang;
+    let tabKey = '';
+    let langTab = 0;
     const schema = _.cloneDeep(this.state.schema);
-    const containers = schema.containers.slice();
-    const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
-    const tabContentSection = tabContent.inputFields[0].cols[0];
-    const panes = containers[`${this.state.currentTab - 1}`].panes.slice();
-    const firstPane = _.cloneDeep(panes[0]);
-    const sections = [];
-    _.forEach(firstPane.sections, (section) => {
-      let sect = _.cloneDeep(section);
-      console.log('trying to clone in add version', JSON.stringify(sect), tabIndex);
-      if (sect.type === 'col-label') {
-        sect = this.cloneColLabel(sect, tabIndex);
-      } else if (sect.type === 'multicols') {
-        sect = this.cloneMultiCol(sect, tabIndex);
-      } else if (sect.type === 'parent') {
-        sect = this.cloneParent(sect, tabIndex);
+    const formData = _.cloneDeep(passedData);
+    for (let idx = 0; idx < addLanguageLength; idx += 1) {
+      let newActiveTab = this.state.settingLanguage ? this.state.settingLanguage.iso_code : 'en';
+      if (asyncLanguages) {
+        newActiveTab = asyncLanguages[idx].iso_code;
+        data = asyncLanguages[idx];
       }
-      console.log('returning section', sect);
-      sections.push(sect);
-      return true;
-    });
-    console.log('tabContent.inputFields[0].cols[0]', tabContentSection, this.state.currentTab);
-    tabContentSection.id = `${tabContentSection.id}${tabIndex}`;
-    tabContentSection.value = `${data.language}`;
-    console.log('cloned final sections', sections, tabContent);
-    _.forEach(sections[0].inputFields[0].cols, (inputField) => {
-      if (this.map[inputField.id] === undefined) {
-        if (inputField.id.indexOf('template-content') > -1) {
-          this.map[inputField.id] = this.map['template-content'];
-        } else if (inputField.id.indexOf('edmeditor2') > -1) {
-          this.map[inputField.id] = this.map.edmeditor2;
-        }
+      langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
+      if (langTab === -1) {
+        formData[`${this.state.currentTab - 1}`].selectedLanguages.push(newActiveTab);
+        langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
       }
-    });
-    firstPane.sections = sections;
-    firstPane.sectionsHeaders = [tabContent];
-    console.log('firstPane final version', JSON.stringify(firstPane));
-    // panes.push(firstPane);
-    console.log('initial panes', JSON.stringify(this.state.schema.containers));
-    schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
-    // schema.containers[0].tabContent.sections.push(tabContent);
-    console.log('final schema after adding version', firstPane, schema);
+      const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
+      tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;
+      console.log('adding language', data, formData, val, selectedLanguage, formData[`${this.state.currentTab - 1}`]);
+      const tabIndex = (selectedLanguage) + 1;
+      const containers = schema.containers.slice();
+      const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
+      const tabContentSection = tabContent.inputFields[0].cols[0];
+      const panes = containers[`${this.state.currentTab - 1}`].panes.slice();
+      const firstPane = _.cloneDeep(panes[0]);
+      const sections = [];
+      _.forEach(firstPane.sections, (section) => {
+        let sect = _.cloneDeep(section);
+        console.log('trying to clone in add version', JSON.stringify(sect), tabIndex);
+        if (sect.type === 'col-label') {
+          sect = this.cloneColLabel(sect, tabIndex);
+        } else if (sect.type === 'multicols') {
+          sect = this.cloneMultiCol(sect, tabIndex);
+        } else if (sect.type === 'parent') {
+          sect = this.cloneParent(sect, tabIndex);
+        }
+        console.log('returning section', sect);
+        sections.push(sect);
+        return true;
+      });
+      console.log('tabContent.inputFields[0].cols[0]', tabContentSection, this.state.currentTab);
+      tabContentSection.id = `${tabContentSection.id}${tabIndex}`;
+      tabContentSection.value = `${data.language}`;
+      console.log('cloned final sections', sections, tabContent);
+      _.forEach(sections[0].inputFields[0].cols, (inputField) => {
+        if (this.map[inputField.id] === undefined) {
+          if (inputField.id.indexOf('template-content') > -1) {
+            this.map[inputField.id] = this.map['template-content'];
+          } else if (inputField.id.indexOf('edmeditor2') > -1) {
+            this.map[inputField.id] = this.map.edmeditor2;
+          }
+        }
+      });
+      firstPane.sections = sections;
+      firstPane.sectionsHeaders = [tabContent];
+      console.log('firstPane final version', JSON.stringify(firstPane));
+      // panes.push(firstPane);
+      console.log('initial panes', JSON.stringify(this.state.schema.containers));
+      schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
+      // schema.containers[0].tabContent.sections.push(tabContent);
+      console.log('final schema after adding version', firstPane, schema);
+    }
     //this.props.templatesActions.getEdmDefaultTemplates();
+    const container = schema.containers[this.state.currentTab - 1];
+    const temp = container;
+    console.log('switch language Tab ', langTab, formData[`${this.state.currentTab - 1}`].selectedLanguages, this.state.formData[`${this.state.currentTab - 1}`].activeTab);
+    if (this.state.addLanguageType === "upload") {
+      temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+      temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+      temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
+    }
+    temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
     if (schema) {
       this.setState({schema, isSchemaChanged: true, tabKey});
-      this.toggleEdmEmailTemplateSelection();
+      if (this.state.addLanguageType !== "upload") {
+        this.setState({addLanguageType: ''});
+      }
+      //this.toggleEdmEmailTemplateSelection();
     }
+    // const mode = this.state.addLanguageMode;
+    // switch (mode) {
+    //   case "upload":
+    //
+    //   default:
+    //     break;
+    // }
   }
 
   openPreviewMode = (selectedAsset) => {
@@ -1930,9 +2306,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   cancelTemplate = () => {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
     this.props.router.push({
       pathname: `/email/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {module, isLanguageSupport},
     });
   }
 
@@ -1998,12 +2375,56 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
+    console.log("Lang Test ", this.props.location.query.isLanguageSupport, (this.props.location.query.isLanguageSupport === false));
+    if ( this.props.location.query.type === 'embedded' && ((this.props.location.query.isLanguageSupport === "false" || this.props.location.query.isLanguageSupport === undefined) || this.props.location.query.isLanguageSupport === "true")) {
+      const ifLangSupported = this.props.location.query.isLanguageSupport === "true";
+      _.forEach(temp.containers, (container) => {
+        if (container.isActive) {
+          let hideLang = false;
+          _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
+            if (hideLang && !ifLangSupported) {
+              const newContainerInputFieldCol = containerInputFieldCol;
+              hideLang = false;
+              newContainerInputFieldCol.offset = 18;
+            } else if (hideLang) {
+              const newContainerInputFieldCol = containerInputFieldCol;
+              hideLang = false;
+              newContainerInputFieldCol.offset = 14;
+            }
+            if (containerInputFieldCol.id === 'add-language-button' && !ifLangSupported) {
+              const newContainerInputFieldCol = containerInputFieldCol;
+              newContainerInputFieldCol.colStyle.display = "none";
+              hideLang = true;
+            } else if (containerInputFieldCol.id === 'add-language-button') {
+              hideLang = true;
+            }
+            if (containerInputFieldCol.id === "mark-final-version-label") {
+              const newContainerInputFieldCol = containerInputFieldCol;
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
+            if (containerInputFieldCol.id === "tab-options-popover") {
+              const newContainerInputFieldCol = containerInputFieldCol;
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
+          });
+        }
+      });
+    }
     console.log('final injected schema', schema);
     this.setState({schema, isSchemaChanged: true}, () => {
       const type = this.props.location.query.type;
       if (type === 'embedded') {
         this.removeStandAlone();
       }
+      if (type === 'embedded' && (this.props.route.name === 'EmailView' || (this.props.location.query.module && (this.props.location.query.module.toLowerCase() === 'loyalty' || this.props.location.query.module.toLowerCase() === 'dvs' || this.props.location.query.module.toLowerCase() === 'timeline')))) {
+        if (this.props.route.name === "EmailEdit" && this.props.location.query.module === "dvs") {
+          return;
+        }
+        const response = {
+          action: 'startTemplateCreation',
+        };
+        parent.postMessage(JSON.stringify(response), '*');
+      }
     });
     return schema;
   }
@@ -2024,7 +2445,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     delete schema.standalone;
     schema.standalone = {};
     schema.standalone.sections = [];
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "subscription")) {
+    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" ||
+      this.props.location.query.module === "library")) {
       schema.standalone.sections.push(_.cloneDeep(this.state.schema.standalone.sections[0]));
     }
 
@@ -2053,38 +2475,47 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }
     });
     this.setState({ schema, isSchemaChanged: true });
+    return schema;
   }
 
   startTemplateCreation(data) {
+    console.log('startTemplatecreations', data);
     if (_.isEmpty(data)) {
       return;
     }
 
-    // const data = {"base":{"subject":"deded","html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","secondary_template_id":"9500","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}],"edit":true,"tags":[]};
-    // const data = {edit: true, "base":{"subject":"testsubject","html_content":"<html>  <head>  \t<meta charset=\"utf-8\" />  \t<title>Aster Secure</title>  \t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}  \t</style>  </head>  <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center>  <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t<tbody>  \t\t<tr>  \t\t\t<td>  \t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t\t\t\t<tbody>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><img class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>  \t\t\t\t\t</tr>  \t\t\t\t</tbody>  \t\t\t</table>  \t\t\t</td>  \t\t</tr>  \t</tbody>  </table>  </body>  </html>  ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<html>\r\n<head>\r\n\t<meta charset=\"utf-8\" />\r\n\t<title>Aster Secure</title>\r\n\t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}\r\n\t</style>\r\n</head>\r\n<body>\r\n<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t<tbody>\r\n\t\t<tr>\r\n\t\t\t<td>\r\n\t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><img class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t\t</td>\r\n\t\t</tr>\r\n\t</tbody>\r\n</table>\r\n</body>\r\n</html>\r\n","secondary_template_id":"9584","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}]};
-    console.log('Start template creation ', data);
+     //const data = {"base":{"subject":"deded","html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","is_drag_drop":false,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","secondary_template_id":"9500","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}],"edit":true,"tags":[]};
+  //  const data = {edit: true, "base":{"subject":"testsubject","html_content":"<html>  <head>  \t<meta charset=\"utf-8\" />  \t<title>Aster Secure</title>  \t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}  \t</style>  </head>  <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center>  <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t<tbody>  \t\t<tr>  \t\t\t<td>  \t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t\t\t\t<tbody>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><img class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>  \t\t\t\t\t</tr>  \t\t\t\t</tbody>  \t\t\t</table>  \t\t\t</td>  \t\t</tr>  \t</tbody>  </table>  </body>  </html>  ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<html>\r\n<head>\r\n\t<meta charset=\"utf-8\" />\r\n\t<title>Aster Secure</title>\r\n\t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}\r\n\t</style>\r\n</head>\r\n<body>\r\n<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t<tbody>\r\n\t\t<tr>\r\n\t\t\t<td>\r\n\t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><img class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t\t</td>\r\n\t\t</tr>\r\n\t</tbody>\r\n</table>\r\n</body>\r\n</html>\r\n","secondary_template_id":"9584","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}, {"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","secondary_template_id":"9500","is_base_template":false,"language_name":"Hindi","language":"Hindi","lang_id":"151"},{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":1,"drag_drop_id":"55acf47048a85bbf7681a35a","scope":null,"tag":null,"is_default":null,"html_content":"","secondary_template_id":"9500","is_base_template":0,"language_name":"Japanese","language":"Japanese","lang_id":"100"}]};
+    console.log('Start template creation ', data, this.props.location.query.isLanguageSupport, this.props.location.query.type === 'embedded', this.props.location.query.type === 'embedded' && !this.props.location.query.isLanguageSupport);
     if (data && data.edit) {
       console.log('startTemplateCreation');
       // const formData = {'0': {}};
       const formData = _.cloneDeep(this.state.formData);
       formData[0].selectedLanguages = [];
       let tabKey;
-      if (this.props.location.query.type === 'embedded' && !this.props.location.query.isLanguageSupport) {
+      if (this.props.location.query.type === 'embedded' && (this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
         formData['template-subject'] = data.base.subject ? data.base.subject : '';
-        const languageIndex = 0;
+        const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
+        let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
+        console.log("startTemplatecreation before index", languageIndex, this.supportedLanguages, baseLanguage, formData);
+        if (languageIndex === -1) {
+          languageIndex = 0;
+        }
         const tempData = {
           "is_drag_drop": data.base.is_drag_drop,
           "lang_id": this.supportedLanguages[languageIndex].lang_id,
           "iso_code": this.supportedLanguages[languageIndex].iso_code,
           "language": this.supportedLanguages[languageIndex].language,
-          "template-content": data.base.html_content,
+          "template-content": !data.base.is_drag_drop && data.base.is_drag_drop !== 1 ? data.base.html_content : "",
         };
         formData[0].base = true;
         formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
         formData[0][this.supportedLanguages[languageIndex].iso_code] = tempData;
         formData[0].activeTab = this.supportedLanguages[languageIndex].iso_code;
         tabKey = "2";
+        console.log("start Template creation midway data", formData, languageIndex);
       } else {
+        const additionalLanguages = [];
         _.forEach(data.secondary_templates, (templates) => {
           console.log('creating form data', templates);
           const id = "1";
@@ -2094,7 +2525,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             languageIndex = 0;
           }
           const tempData = {
-            "is_drag_drop": templates.is_drag_drop,
+            "is_drag_drop": templates.is_drag_drop === "1" || false,
             "lang_id": this.supportedLanguages[languageIndex].lang_id,
             "iso_code": this.supportedLanguages[languageIndex].iso_code,
             "language": this.supportedLanguages[languageIndex].language,
@@ -2102,6 +2533,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);
           }
           // formData.usingTabContainer = true;
           // formData.tabCount = 1;
@@ -2112,16 +2544,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           formData[0].base = true;
           formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
           formData[0][this.supportedLanguages[languageIndex].iso_code] = tempData;
-          if (templates.is_base_template) {
+          if (templates.is_base_template === 1) {
             formData[0].activeTab = this.supportedLanguages[languageIndex].iso_code;
             // formData.base = tempData;
+          } else {
+            additionalLanguages.push(this.supportedLanguages[languageIndex]);
           }
         });
+        this.addLanguage(false, formData, false, additionalLanguages);
       }
       formData.base = _.cloneDeep(formData[0]);
       console.log('startTemplateCreation final ', formData);
       this.setState({formData, loading: false, injectedTags: data.tags, tabKey, isDragDrop: (data.base.is_drag_drop !== 0 )}, () => {
         // 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);
+          }
+        });
       });
     } else {
       this.setState({injectedTags: data.tags});
@@ -2318,7 +2758,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     //   return;
     // }
     const formData = _.cloneDeep(passedData);
-    console.log('Saving form data', formData, this.state.tabCount);
+    console.log('Saving form data', JSON.stringify(formData), this.state.tabCount);
     const obj = {};
     obj.versions = {
       base: {},
@@ -2383,22 +2823,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   handleOk = () => {
-    const schema = _.cloneDeep(this.state.schema);
-    this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
-    _.forEach(schema.containers, (container, index) => {
-      if (parseInt(index, 10) === (this.state.currentTab - 1)) {
-        const temp = container;
-        const langTab = this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(this.state.formData[`${this.state.currentTab - 1}`].activeTab);
-        console.log('switch language Tab ', langTab, this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages, this.state.formData[`${this.state.currentTab - 1}`].activeTab);
-        temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-        temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-        temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
-      }
-    });
-
-    console.log('Handle OK ', schema);
-    this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
-      this.injectEvents(schema);
+    const formData = _.cloneDeep(this.state.formData);
+    const activeLangTab = formData[`${this.state.currentTab - 1}`].activeTab;
+    const langIndex = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+    console.log('switching editor midway', activeLangTab, langIndex, formData);
+    this.setState({mode: "switchEditor"}, () => {
+      console.log('posting message for switching editor', `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      win.postMessage("saveProject", '*');
     });
   }
 
@@ -2507,7 +2939,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       </div>
     );
     const schema = this.state.schema;
-    const spinning = this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress); // || (this.props.Email && this.props.Email.createTemplateInProgress);
+    const spinning = 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 previewHeader = (<h3>Email Preview</h3>);
     const imagePreviewHeader = (<h3>Image Selection</h3>);
     const imagePreviewContent = (
@@ -2515,7 +2947,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         <div>
           <form encType="multipart/form-data" id="myForm">
             <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" />
-            <CapButton type={'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+            <CapButton type={'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right', marginRight: '24px'}}>
               <FormattedMessage {...messages.upload} />
             </CapButton>
           </form>
@@ -2532,12 +2964,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         </Pagination>
       </div>
       );
-    console.log('Render Form Data ', this.state.formData, this.supportedLanguages);
+    console.log('Render Form Data ', this.state.formData, this.supportedLanguages, this.state);
     if (!this.props.Global.currentOrgDetails || !this.props.Global.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
     console.log('CMS Data ', this.props.Email.CmsSettings, this.props.Global.currentOrgDetails.basic_details.supported_languages);
-    const loaderText = this.props.Email.createTemplateInProgress ? this.props.intl.formatMessage(messages.saveTemplateLoader) : this.props.intl.formatMessage(messages.templateLoader);
+    let loaderText = this.props.Email.createTemplateInProgress ? this.props.intl.formatMessage(messages.saveTemplateLoader) : this.props.intl.formatMessage(messages.templateLoader);
+    if (this.props.Email.assetUploading) {
+      loaderText = this.props.intl.formatMessage(messages.uploadingImage);
+    }
     return (
       <div className="email-container">
         <Helmet
@@ -2606,13 +3041,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   toggleEdmEmailTemplateSelection={this.toggleEdmEmailTemplateSelection}
                   handleEdmDefaultTemplateSelection={this.handleEdmDefaultTemplateSelection}
                   setModalContent={this.setModalContent}
+                  addLanguageType={this.state.addLanguageType}
               /> : ''}
             </Col>
           </Row>
         </Spin>
         {!_.isEmpty(this.state.formData[(this.state.currentTab - 1)]) && <EmailPreview
           header={previewHeader}
-          content={this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab][`template-content`]}
+          content={this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab] ? this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab][`template-content`] : ''}
           show={this.state.showEmailPreview}
           device={this.state.device}
           handleClose={this.toggleEmailPreview}
@@ -2643,7 +3079,8 @@ Email.propTypes = {
   metaEntities: PropTypes.object,
   Global: PropTypes.object,
   templatesActions: PropTypes.object,
-  subscriptionTemplateData: PropTypes.object,
+  route: PropTypes.object,
+  templateData: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({