@capillarytech/creatives-library 2.0.70 → 2.0.72

package/v2Containers/Email/index.js

@@ -0,0 +1,2703 @@
+/*
+ *
+ * Email
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Row, Col, Popover, Modal } from 'antd';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard } from '@capillarytech/cap-ui-library';
+import { createStructuredSelector } from 'reselect';
+import _ from 'lodash';
+import moment from "moment";
+import FormBuilder from '../../components/FormBuilder';
+import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
+import * as actions from './actions';
+import * as templatesActions from '../Templates/actions';
+import * as globalActions from '../../containers/Cap/actions';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import {makeSelectEmail} from './selectors';
+import { makeSelectTemplates } from '../Templates/selectors';
+import messages from './messages';
+// import PageHeader from '../../components/PageHeader';
+import './_email.scss';
+import {getMessageObject} from '../../utils/messageUtils';
+import EmailPreview from '../../components/EmailPreview';
+
+import Pagination from '../../components/Pagination';
+import * as creativesContainerActions from '../CreativesContainer/actions';
+const {CapCustomCardList} = CapCustomCard;
+export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      loadingStatus: 0,
+      formData: {},
+      tabCount: 1,
+      currentTab: 1,
+      events: {
+        blur: this.onBlur,
+        afterPaste: this.afterPaste,
+        change: this.onChange,
+      },
+      isEdit: false,
+      schema: {},
+      loading: false,
+      isFormValid: true,
+      injectedTags: {},
+      checkValidation: false,
+      saveEdmDataMode: 'save',
+      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,
+      cmsDataCount: 0,
+      targetSaveCount: 0,
+      saveObj: {},
+      showEdmEmailTemplates: false,
+      editDataSet: false,
+      languageDataSet: false,
+      addLanguageType: '',
+      startValidation: false,
+      saveForm: false,
+    };
+
+    this.isTagLoaded = false;
+    this.edmEvent = undefined;
+    this.supportedLanguages = this.getSupportedLanguages(props);
+    this.map = {
+      "template-name": {
+        onChange: this.onTemplateNameChange,
+      },
+      "template-version": {
+        onSelect: this.handleVersionSelect,
+        addVersion: this.addVersion,
+      },
+      "preview-button": {
+        previewTemplate: this.toggleEmailPreview,
+      },
+      "cancel-button": {
+        cancelTemplate: this.cancelTemplate,
+      },
+      "save-button": {
+        saveFormData: this.saveFormData,
+      },
+      "sms-editor": {
+        onChange: this.onTemplateContentChange,
+      },
+      "tagList": {
+        onTagSelect: this.onTagSelect,
+      },
+      "unicode-validity": {
+        onChange: this.onTemplateNameChange,
+      },
+      "add-language-button": {
+        addLanguage: this.addLanguage,
+      },
+      "tab-header": {
+        onChange: this.onVersionNameChange,
+      },
+      "tab-options-popover": {
+        onTabOptionSelect: this.onTabOptionSelect,
+      },
+      "mark-final-version-label": {
+        markFinalVersion: this.markFinalVersion,
+      },
+      "duplicate-version-label": {
+        duplicateVersion: this.duplicateVersion,
+      },
+      "rename-version-label": {
+        renameVersion: this.renameVersion,
+      },
+      "delete-version-label": {
+        deleteVersion: this.deleteVersion,
+      },
+      "switch-editor-label": {
+        switchEditor: this.switchEditor,
+      },
+      "pane": {
+        onTabChange: this.onTabChange,
+      },
+      "insert-image": {
+        onImageSelect: this.onImageSelect,
+      },
+      "template-content": {
+        onContentChange: this.onChange,
+        getEditorInstanse: this.getEditorInstanse,
+      },
+      "delete-language-label": {
+        deleteLanguage: this.deleteLanguage,
+      },
+    };
+  }
+  componentWillMount() {
+    const formData = this.initFormData(this.props, true); //_.cloneDeep(this.state.formData);
+    const isEmpty = _.isEmpty(formData);
+    if (!isEmpty) {
+      formData['template-version-options'] = [
+        {
+          key: 'version 1',
+          label: 'Version 1',
+          value: 'version 1',
+        },
+        {
+          key: 'New Version',
+          label: 'New Version',
+          value: 'New Version',
+        },
+      ];
+      //
+      formData['template-version'] = "version 1";
+    }
+    // const formData = _.cloneDeep(this.state.formData);
+    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');
+        }
+      });
+    }
+    // formData[0] = {
+    //   "template-content": (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
+    // };
+    // if (this.props.Templates.CmsSettings) {}
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    if (this.props.location.query.module === "library" && this.props.templateData) {
+      this.props.templatesActions.resetTemplateData();
+    }
+    if (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.is_drag_drop) {
+      this.setState({isDragDrop: true});
+      if (this.props.params.id) {
+        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'open', undefined, isEdmSupport);
+      } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
+        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'create', undefined, isEdmSupport);
+      }
+    }
+
+    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData}, () => {
+      // this.injectEvents(this.state.schema);
+    });
+
+    // setTimeout(() => {
+    //     // this.getFormData();
+    //   this.startTemplateCreation();
+    // }, 15000);
+  }
+
+  componentDidMount() {
+    const query = {
+      layout: 'EMAIL',
+      type: 'LAYOUT',
+      version: 'v2',
+    };
+    this.props.globalActions.fetchSchemaForEntity(query);
+    window.addEventListener("message", this.handleFrameTasks);
+    if (this.props.location.query.type === 'embedded') {
+      this.showNext();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // if (this.props.location.query.type === 'embedded') {
+    //   this.showNext();
+    // }
+    if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
+      this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
+    }
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
+      const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
+
+      this.setState({schema: newSchema, loadingStatus: this.state.loadingStatus + 1});
+      if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
+        const query = {
+          layout: 'EMAIL',
+          type: 'TAG',
+          context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
+          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+        };
+        if (this.props.getDefaultTags) {
+          query.context = this.props.getDefaultTags;
+        }
+        if (_.isEmpty(this.props.metaEntities.tags)) {
+          this.props.globalActions.fetchSchemaForEntity(query);
+        }
+      }
+      setTimeout(() => {
+        this.showSubject();
+      }, 0);
+    }
+    if (nextProps.currentOrgDetails && nextProps.currentOrgDetails.basic_details && !_.isEmpty(nextProps.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
+      const formData = this.initFormData(nextProps);
+      formData['template-version-options'] = [
+        {
+          key: 'version 1',
+          label: 'Version 1',
+          value: 'version 1',
+        },
+        {
+          key: 'New Version',
+          label: 'New Version',
+          value: 'New Version',
+        },
+      ];
+      //
+      formData['template-version'] = "version 1";
+      //const that = this;
+      this.setState({formData}, () => {
+        // setTimeout(() => {
+        //     this.getFormData();
+        //   that.startTemplateCreation();
+        // }, 15000);
+      });
+    } else if (nextProps.currentOrgDetails && nextProps.currentOrgDetails.basic_details) {
+      // this.injectEvents(this.state.schema);
+      const baseLanguage = nextProps.currentOrgDetails.basic_details.base_language;
+      if (this.state.formData[`${this.state.currentTab - 1}`] && _.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages)) {
+        const formData = _.cloneDeep(this.state.formData);
+        formData[`${this.state.currentTab - 1}`].selectedLanguages = [];
+        formData[`${this.state.currentTab - 1}`].selectedLanguages.push(baseLanguage);
+        formData.base.selectedLanguages = [];
+        formData.base.selectedLanguages.push(baseLanguage);
+        this.setState({formData});
+      }
+
+      if (!_.isEmpty(this.state.schema)) {
+        const schema = _.cloneDeep(this.state.schema);
+
+        const formData = _.cloneDeep(this.state.formData);
+        const container = schema.containers[0];
+        // const baseLanguage = this.props.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, loadingStatus: this.state.loadingStatus + 1});
+      }
+
+      //
+      // if (!this.isTagLoaded) {
+      //   this.isTagLoaded = true;
+      //   const query = {
+      //     layout: 'EMAIL',
+      //     type: 'TAG',
+      //     context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
+      //     embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+      //   };
+      //   this.props.globalActions.fetchSchemaForEntity(query);
+      // }
+
+      if (this.state.isEdit && !this.state.editDataSet && !_.isEmpty(nextProps.Email.templateDetails) && !_.isEmpty(this.state.schema)) {
+        this.setState({editDataSet: true}, () => {
+          this.setEditData(nextProps.Email.templateDetails);
+        });
+      }
+      if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData) {
+        this.startTemplateCreation(nextProps.templateData);
+      }
+      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
+        if (this.props.isFullMode) {
+          let triggerGetFormData = true;
+          let isEdmEditor = false;
+          const formData = this.state.formData;
+          _.forEach(formData[0].selectedLanguages, (language) => {
+            if (formData[0][language].is_drag_drop) {
+              isEdmEditor = true;
+            }
+          });
+          triggerGetFormData = isEdmEditor ? (!nextProps.Email.fetchingCmsData && _.isEmpty(nextProps.Email.cmsData)) : !nextProps.Email.createTemplateInProgress && _.isEmpty(nextProps.Email.createResponse); // if edm editor selected check for getCmsData call in progress or not before triggering save
+          if (triggerGetFormData) {
+            this.getFormData();
+          }
+        } else {
+          if (!_.isEmpty(this.props.Email.cmsData)) {
+            this.props.actions.resetCmsData();
+          }
+          this.getFormData();
+        }
+      }
+
+      if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings)) {
+        const apiLangId = nextProps.Email.CmsSettings.langId;
+        const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.currentOrgDetails.basic_details.base_language;
+
+        const formData = _.cloneDeep(this.state.formData);
+
+        const schema = _.cloneDeep(this.state.schema);
+        const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
+
+        const temp = schema.containers[this.state.currentTab - 1];
+        if (baseLanguage === langId && (apiLangId === "undefined" || apiLangId === formData[this.state.currentTab - 1].activeTab)) {
+          temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
+        } else if (apiLangId === "undefined" || apiLangId === formData[this.state.currentTab - 1].activeTab) {
+          temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
+        }
+
+        if (nextProps.Email.CmsSettings.isDragDrop) {
+          formData[`${this.state.currentTab - 1}`][langId][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`] = nextProps.Email.CmsSettings.url;
+          formData[`${this.state.currentTab - 1}`][langId][`drag_drop_id`] = this.getParameterByName("projectId", nextProps.Email.CmsSettings.url);
+          formData[`${this.state.currentTab - 1}`][langId][`is_drag_drop`] = true;
+          if (formData[`${this.state.currentTab - 1}`].base) {
+            formData.base[langId][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`] = nextProps.Email.CmsSettings.url;
+            formData.base[langId][`drag_drop_id`] = this.getParameterByName("projectId", nextProps.Email.CmsSettings.url);
+            formData.base[langId][`is_drag_drop`] = true;
+          }
+          _.forEach(temp.panes, (pane, index) => {
+            const tempPane = pane;
+            //
+            if (parseInt(index, 10) === parseInt(langIndex, 10)) {
+              //
+              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
+              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+            }
+          });
+
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
+        } else {
+          _.forEach(temp.panes, (pane, index) => {
+            const tempPane = pane;
+            if (parseInt(index, 10) === parseInt(langIndex, 10) ) {
+              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+            }
+          });
+
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
+          let html = decodeURIComponent(nextProps.Email.CmsSettings.htmlContent);
+
+          html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, '"');
+
+          formData[this.state.currentTab - 1][langId]["template-content"] = html;
+          if (window.CKEDITOR && apiLangId !== "undefined") {
+            const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
+
+            _.forEach(window.CKEDITOR.instances, (winInstance) => {
+              const tempInstance = winInstance;
+
+              if (winInstance.name === instanceName) {
+                tempInstance.setData(html);
+              } else if (winInstance.name.indexOf('editor') !== -1) {
+                tempInstance.setData(html);
+              }
+            });
+          }
+        }
+
+        this.setState({ formData }, () => {
+          this.hideEdmOptions(nextProps.Email.CmsSettings.isDragDrop);
+        });
+      }
+      if (nextProps.Email.createTemplateError && !_.isEqual(nextProps.Email.createTemplateError, this.props.Email.createTemplateError)) {
+        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) && !_.isEmpty(nextProps.Email.cmsData)) {
+        const formData = _.cloneDeep(this.state.formData);
+        if (nextProps.Email.langId && nextProps.Email.langId !== 'undefined') {
+          const langId = nextProps.Email.langId;
+          formData[`${this.state.currentTab - 1}`][langId]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          if (formData[`${this.state.currentTab - 1}`].base) {
+            formData.base[langId]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          }
+        } else if (this.state.gettingPreviewData) {
+          this.setState({gettingPreviewData: false});
+          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          if (formData[`${this.state.currentTab - 1}`].base) {
+            formData.base[formData.base.activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          }
+        } else {
+          const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(formData[this.state.currentTab - 1].activeTab);
+          const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
+
+          _.forEach(window.CKEDITOR.instances, (winInstance) => {
+            const temp = winInstance;
+
+            if (winInstance.name === instanceName) {
+              temp.setData(decodeURIComponent(nextProps.Email.cmsData));
+            } else if (winInstance.name.indexOf('editor') !== -1) {
+              temp.setData(decodeURIComponent(nextProps.Email.cmsData));
+            }
+          });
+          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop = false;
+          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id = "";
+          delete formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].edmeditorsrc;
+          if (formData[`${this.state.currentTab - 1}`].base) {
+            formData.base[formData.base.activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+            formData.base[formData.base.activeTab].is_drag_drop = false;
+            formData.base[formData.base.activeTab].drag_drop_id = "";
+            delete formData.base[formData.base.activeTab].edmeditorsrc;
+          }
+        }
+
+        this.setState({ formData }, () => {
+          if (nextProps.Email.langId) {
+            this.shouldStartValidation();
+          }
+        });
+      }
+
+      if ( !_.isEqual(nextProps.Email.uploadAssetSuccess, this.props.Email.uploadAssetSuccess) && nextProps.Email.uploadAssetSuccess) {
+        const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
+        const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+        if (isDragDrop && isEdmSupport) {
+          const evtData = JSON.parse(this.edmEvent.data);
+          if (evtData.action === 'editBackground') {
+            this.edmEvent.source.postMessage(JSON.stringify({
+              _dynId: JSON.parse(this.edmEvent.data)._dynId,
+              action: "setProps",
+              props: {
+                background: {
+                  image: {
+                    src: nextProps.Email.uploadedAssetData.metaInfo.secure_file_path,
+                  },
+                },
+              },
+            }), "*");
+          } else if (evtData.action === 'edit') {
+            this.edmEvent.source.postMessage(JSON.stringify({
+              _dynId: JSON.parse(this.edmEvent.data)._dynId,
+              action: "setProps",
+              props: {
+                src: nextProps.Email.uploadedAssetData.metaInfo.secure_file_path,
+              },
+            }), "*");
+          }
+          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.currentOrgDetails.basic_details.supported_languages, this.props.currentOrgDetails.basic_details.supported_languages)) {
+        this.supportedLanguages = nextProps.currentOrgDetails.basic_details.supported_languages;
+      }
+
+      if (!nextProps.Email.fetchingAllAssets && !_.isEqual(nextProps.Email.fetchingAllAssets, this.props.Email.fetchingAllAssets) && !_.isEmpty(nextProps.Email.assetList) && nextProps.Email.assetList[0] && nextProps.Email.assetList[0].totalCount && this.state.totalCount === 0) {
+        this.setState({totalCount: nextProps.Email.assetList[0].totalCount});
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
+    }
+    this.resetStateValue();
+    window.removeEventListener("message", this.handleFrameTasks);
+    this.props.actions.clearStoreValues();
+    this.props.actions.clearCRUDResponse();
+  }
+
+  onFormDataChange = (updatedFormData, tabCount, currentTab) => {
+    // this.transformFormData(formData);
+    const formData = {...updatedFormData};
+    if (this.props.defaultData && _.isEmpty(formData['template-name']) && this.props.isFullMode) {
+      formData['template-name'] = _.get(this.props, "defaultData['template-name']");
+    }
+    this.setState({formData, tabCount, isSchemaChanged: false}, () => {
+      if (this.props.isFullMode) {
+        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      }
+    });
+    if (currentTab) {
+      this.setState({currentTab});
+    }
+    //this.resetCkEditorInstance(currentTab, formData);
+  }
+
+  onChange = (evt) => {
+    const formData = _.cloneDeep(this.state.formData);
+
+    //if (evt.editor.name.indexOf('editor') === -1) {
+    // _.forEach(window.CKEDITOR.instances, (winInstance) => {
+    //   const temp = winInstance;
+    //   if (winInstance.name === evt.editor.name) {
+    //
+    //     setTimeout(() => {
+    //       //temp.name = id;
+    //     }, 1000);
+    //     //temp.name = id;
+    //
+    //   }
+    // });
+    //}
+    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());
+      }
+
+      this.setState({formData, content: evt.editor.getData()}, () => {
+
+      });
+    }
+  }
+
+  onTabChange(data, formData) {
+    //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.currentOrgDetails.basic_details.base_language;
+    if (baseLanguage === formData[`${data - 1}`].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({currentTab: data, formData, schema, loadingStatus: this.state.loadingStatus + 1});
+  }
+
+  onTemplateNameChange = () => {
+
+  }
+
+  onTagSelect = (data) => {
+    const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
+    const formData = _.cloneDeep(this.state.formData);
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+
+    if (isDragDrop && isEdmSupport) {
+      let msg = {};
+      if (data === "unsubscribe") {
+        const anchor = `<a href='{{${data}}}'>${data}</a>`;
+        msg = {
+          action: "InsertToCursor",
+          content: `${anchor}`,
+        };
+      } else {
+        msg = {
+          action: "InsertToCursor",
+          content: `{{${data}}}`,
+        };
+      }
+      const msgString = JSON.stringify(msg);
+      const langId = formData[this.state.currentTab - 1].activeTab;
+      const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
+      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      win.postMessage(msgString, '*');
+    } else {
+      if (data === "unsubscribe") {
+        const anchor = `<a href='{{${data}}}'>${data}</a>`;
+        this.state.editorInstanse.insertHtml(`${anchor}`);
+      } else {
+        this.state.editorInstanse.insertHtml(`{{${data}}}`);
+      }
+      //this.resetCkEditorInstance(currentTab, formData, true, data);
+    }
+  }
+
+  onImageSelect = () => {
+    this.setState({ showImageSelectionBox: true }, () => {
+      const params = {
+        name: this.state.searchText,
+        sortBy: 'Most Recent',
+      };
+      this.fetchAllAssets({params, resetPage: true});
+      // this.props.actions.getAllAssets("image", params);
+    });
+  }
+  onUpdateTemplateComplete = (createResponse) => {
+    if (createResponse && createResponse.templateId) {
+      // this.resetSchema();
+      let message;
+      if (this.state.isEdit) {
+        message = getMessageObject('success', this.props.intl.formatMessage(messages.emailEditSuccess), true);
+      } else {
+        message = getMessageObject('success', this.props.intl.formatMessage(messages.emailCreateSuccess), true);
+      }
+      this.props.globalActions.addMessageToQueue(message);
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+      if (this.props.isFullMode) {
+        const {versions, ...rest} = createResponse.templateId;
+        this.props.getFormSubscriptionData({ value: versions, ...rest, validity: true});
+      } else {
+        this.props.router.push({
+          pathname: `/email`,
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
+        });
+      }
+    }
+  }
+
+  getSupportedLanguages = (props) => {
+    const {currentOrgDetails} = props;
+    let supportedLanguages = [];
+    if (!_.isEmpty(currentOrgDetails)) {
+      const {basic_details} = currentOrgDetails;
+      supportedLanguages = basic_details.supported_languages || [];
+    }
+    return supportedLanguages;
+  }
+  getValidationData = () => {
+    const that = this;
+    const formData = _.cloneDeep(this.state.formData);
+    if (!this.props.Email.fetchingCmsData) {
+      // checking wheather getCmsData in progress or not cuz getValidationData gets called multiple times from handleEdmSave
+      _.forEach(formData, (val, index) => {
+        if (!isNaN(index)) {
+          _.forEach(val.selectedLanguages, (language) => {
+            if (val[language].is_drag_drop) {
+              that.props.actions.getCmsData('edm', val[language].drag_drop_id, language);
+            }
+          });
+        }
+      });
+    }
+  }
+  setNewLanguageContent = (data) => {
+    const content = _.cloneDeep(data);
+    const formData = _.cloneDeep(this.state.formData);
+    const currentTab = this.state.currentTab - 1;
+    // const schema = _.cloneDeep(this.state.schema);
+
+    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);
+
+  //  this.setState({formData});
+    // const container = schema.containers[this.state.currentTab - 1];
+    // const temp = container;
+    // const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
+    //
+    // 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, ' '));
+  }
+
+  getFormData = (e, value) => {
+    this.setState({getFormDataValue: value, gettingFormData: true}, () => {
+      this.saveValidationData();
+    });
+    //
+    // const response = {
+    //   action: "getFormData",
+    //   postAction: value || 'next',
+    //   value: this.transformFormData(this.state.formData),
+    //   validity: this.state.isFormValid,
+    // };
+    //
+    // this.setState({checkValidation: true});
+    // if (e) {
+    //   e.source.postMessage(JSON.stringify(response), e.origin);
+    // }
+    // return response;
+  }
+
+  setFormValidity = (isFormValid) => {
+    this.setState({isFormValid, startValidation: false});
+  }
+
+  setEditData(editData) {
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    const formData = _.cloneDeep(this.state.formData);
+
+    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone(this.state.schema) : _.cloneDeep(this.state.schema);
+    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['template-subject'] = _.get(editData, 'versions.base.subject');
+    formData.base = editData.versions.base;
+
+    _.forEach(editData.versions.history, (data1, index) => {
+      const data = _.cloneDeep(data1);
+      if (data !== null) {
+        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 = [];
+          // containers[0].isActive = true;
+          _.forEach(firstPane.sections, (section) => {
+            let sect = _.cloneDeep(section);
+
+            if (sect.type === 'col-label') {
+              sect = this.cloneColLabel(sect, index, true);
+            } else if (sect.type === 'multicols') {
+              sect = this.cloneMultiCol(sect, index, true);
+            } else if (sect.type === 'parent') {
+              sect = this.cloneParent(sect, index, true);
+            }
+
+            sections.push(sect);
+            return true;
+          });
+          firstPane.sections = sections;
+          containers[0].panes = [];
+          containers[0].panes.push(firstPane);
+          schema.containers.push(containers[0]);
+
+
+          // _.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;
+          //     }
+          //   }
+          // });
+
+          const newVersionOption = formData['template-version-options'].pop();
+          formData['template-version-options'].push({
+            key: `version ${index + 1}`,
+            label: `Version ${index + 1}`,
+            value: `version ${index + 1}`,
+          });
+          formData['template-version-options'].push(newVersionOption);
+        }
+
+        // data.activeTab = this.props.currentOrgDetails.basic_details.base_language;
+        _.forEach((data.selectedLanguages), (language) => {
+          if (data.tabKey === data[language].tabKey) {
+            data.activeTab = language;
+          }
+        });
+        if (data.constructor === Object) {
+          if (data.tabKey === editData.versions.base.tabKey) {
+            tabKey = data.tabKey;
+            schema.containers[index].isActive = true;
+            formData['template-version'] = formData['template-version-options'][index].key;
+            currentTab = index + 1;
+          } else {
+            schema.containers[index].isActive = false;
+          }
+          // const isLanguageSupport = this.props.location.query.isLanguageSupport;
+
+          _.forEach(data.selectedLanguages, (lang, langIndex) => {
+            if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.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();
+              const firstPane = _.cloneDeep(panes[0]);
+              const sections = [];
+              _.forEach(firstPane.sections, (section) => {
+                let sect = _.cloneDeep(section);
+
+                if (sect.type === 'col-label') {
+                  sect = this.cloneColLabel(sect, (langIndex + 1));
+                } else if (sect.type === 'multicols') {
+                  sect = this.cloneMultiCol(sect, (langIndex + 1));
+                } else if (sect.type === 'parent') {
+                  sect = this.cloneParent(sect, (langIndex + 1));
+                }
+
+                sections.push(sect);
+                return true;
+              });
+              //
+
+              this.map[`template-content${data.selectedLanguages.indexOf(lang) + 1}`] = this.map['template-content'];
+              tabContentSection.id = `${tabContentSection.id}${index + 1}`;
+              tabContentSection.value = `${data[lang].language}`;
+
+              firstPane.sections = sections;
+              firstPane.sectionsHeaders = [tabContent];
+
+              // panes.push(firstPane);
+
+              schema.containers[index].panes.push(firstPane);
+            } else if (lang !== this.props.currentOrgDetails.basic_details.base_language) {
+              delete data[lang];
+              data.selectedLanguages.splice(langIndex, 1);
+            }
+          });
+        }
+        if (data.base) {
+          formData.base = data;
+        }
+        formData[index] = data;
+      }
+    });
+
+    _.forEach(formData.base.selectedLanguages, (language) => {
+      if (formData.base.tabKey === formData.base[language].tabKey) {
+        formData.base.activeTab = language;
+      }
+    });
+
+
+    this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
+      this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      _.forEach((editData.versions.base.selectedLanguages), (language) => {
+        // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
+        //   formData[this.state.currentTab - 1].activeTab = language;
+        // }
+        // if (formData.base.tabKey === formData.base[language].tabKey) {
+        //   formData.base.activeTab = language;
+        // }
+        if (language && editData.versions.base[language].is_drag_drop) {
+          this.props.actions.getCmsSetting('edm', editData.versions.base[language].drag_drop_id, 'open', language, isEdmSupport);
+        }
+      });
+
+      // this.resetCkEditorInstance(this.state.currentTab - 1, formData);
+      // this.setState({formData});
+    });
+  }
+
+  getMappedEvent = (id, event) => this.map[id][event]
+
+  getCurrentWindow = (e) => {
+    const response = {
+      action: e.action,
+      value: 'edit',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  getEditorInstanse = () => {
+    window.CKEDITOR.on( 'instanceReady', ( event ) => {
+      this.setState({editorInstanse: event.editor});
+      event.editor.on( 'focus', () => {
+        this.setState({editorInstanse: event.editor});
+      });
+    });
+    //this.setState({editorInstanse: instance});
+  }
+
+  setModalContent = (type, data) => {
+    let modalContent = {};
+    if (type === 'delete-version') {
+      modalContent = {
+        title: "Alert",
+        body: "Do you really want to delete this version?",
+        type: 'confirm',
+        id: 'email-version-delete-modal',
+      };
+    } else if (type === 'delete-language') {
+      modalContent = {
+        title: "Alert",
+        body: "Do you really want to delete this language?",
+        type: 'confirm',
+        id: 'email-language-delete-modal',
+      };
+    } 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});
+  };
+
+  shouldStartValidation = () => {
+    this.setState((prevState) => ({ cmsDataCount: prevState.cmsDataCount + 1}), () => {
+      if (this.state.targetSaveCount === this.state.cmsDataCount) {
+        this.setState({startValidation: true});
+      }
+    });
+  }
+
+  stopValidation = () => {
+    this.setState({startValidation: false});
+  }
+  saveValidationData = () => {
+    let saveCount = 0;
+    this.setState({saveEdmDataMode: 'validation', saveCount: 0, cmsDataCount: 0}, () => {
+      _.forEach(this.state.formData, (newdata, index) => {
+        if (!isNaN(index)) {
+          _.forEach(newdata.selectedLanguages, (language) => {
+            if (newdata[language].is_drag_drop && ((parseInt(index, 10) + 1) === this.state.currentTab)) {
+              saveCount += 1;
+            }
+          });
+        }
+      });
+      if (saveCount === 0) {
+        this.setState({startValidation: true});
+        return;
+      }
+      this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0}, () => {
+        const data = this.state.formData[this.state.currentTab - 1];
+        _.forEach(data.selectedLanguages, (language, langIndex) => {
+          if (data[language].is_drag_drop) {
+            const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+            win.postMessage("saveProject", '*');
+          }
+        });
+      });
+    });
+  }
+
+  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,
+    }, () => {
+
+    });
+  }
+
+  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 instanceArray = [];
+    _.forEach(window.CKEDITOR.instances, (instance ) => {
+      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);
+      }
+    });
+
+    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;
+    });
+
+    //instanceCount += 1;
+    // if (instanceIdx === langIndex) {
+    const instance = instanceArray[langIndex].instance;
+
+    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 = () => {
+    document.getElementById('filename').click();
+  };
+
+  useEditor = () => {
+    //this.toggleEdmEmailTemplateSelection();
+    this.setState({addLanguageType: "useEditor"}, () => {
+      this.setState({showModal: false}, () => {
+        this.toggleEdmEmailTemplateSelection();
+      });
+    });
+  }
+
+  copyPrimaryLanguage = () => {
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+
+    this.setState({addLanguageType: "copyPrimaryLanguage"}, () => {
+      this.setState({showModal: false});
+      const formData = _.cloneDeep(this.state.formData);
+      const currentTab = this.state.currentTab - 1;
+      const baseLanguage = this.props.currentOrgDetails.basic_details.base_language ? this.props.currentOrgDetails.basic_details.base_language : 'en';
+      if (formData[currentTab][baseLanguage].is_drag_drop) {
+        this.props.actions.getCmsSetting('edm', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
+      }
+    });
+  }
+
+  handleFileUpload = (e, {files}) => {
+    if (files.length === 0) {
+      return;
+    }
+    const fileExtension = files[0].name.split('.').pop();
+    const supportedZipFormats = ['zip'];
+
+    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      this.setState({ addLanguageType: "upload"}, () => {
+        this.props.templatesActions.handleZipUpload(files[0]);
+        document.getElementById("filename").value = "";
+        this.setState({showModal: false});
+      });
+    } else if (fileExtension === 'html' || fileExtension === 'htm') {
+      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');
+    }
+  };
+
+  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);
+    img.onload = function () {
+      const fileParams = {
+        width: this.width,
+        height: this.height,
+      };
+      that.props.actions.uploadAsset(file, 'image', fileParams);
+      that.handleImagePreviewClose();
+    };
+  }
+
+  fetchAllAssets = ({params, getNextPage, resetPage}) => {
+    let queryParams = params;
+    let page = this.state.page;
+    if (!this.props.Email.fetchingAllAssets && (resetPage || (page === 1 && this.state.totalCount === 0) || page <= (this.state.totalCount / this.state.perPageLimit))) {
+      if (getNextPage) {
+        page += 1;
+      }
+      let totalCount = this.state.totalCount;
+      if (resetPage) {
+        page = 1;
+        totalCount = 0;
+      }
+      if ((!params || _.isEmpty(params))) {
+        queryParams = {
+          sortBy: this.state.sortBy,
+        };
+      }
+      if (this.state.searchText !== "") {
+        queryParams = {...queryParams, name: this.state.searchText};
+      }
+      this.setState({page, totalCount}, () => {
+        queryParams.page = page;
+        queryParams.perPage = this.state.perPageLimit;
+        this.props.actions.getAllAssets('image', queryParams);
+      });
+    }
+  };
+
+  searchAsset = (value) => {
+    this.setState({searchText: value}, () => {
+      this.delay(() => {
+        const params = {
+          name: this.state.searchText,
+        };
+        if (this.state.sortBy) {
+          params.sortBy = this.state.sortBy;
+        }
+        this.fetchAllAssets({params, resetPage: true});
+      }, 1000);
+    });
+  }
+
+  delay = (callback, ms) => {
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(callback, ms);
+  }
+
+  deleteLanguage = (passedData, val) => {
+    const formData = _.cloneDeep(passedData);
+
+    const schema = _.cloneDeep(this.state.schema);
+    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});
+  }
+
+  initFormData(props) {
+    let newFormData = {};
+    if (props.currentOrgDetails && props.currentOrgDetails.basic_details) {
+      newFormData = {
+        "0": {},
+        "template-name": "",
+        "base": {},
+      };
+      const baseData = {};
+      const baseLanguage = props.currentOrgDetails.basic_details.base_language;
+      this.supportedLanguages = this.getSupportedLanguages(props);
+      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})];
+      baseData.activeTab = baseLanguage;
+      baseData[languageObject.iso_code] = {};
+      baseData[languageObject.iso_code].is_drag_drop = false;
+      baseData[languageObject.iso_code].lang_id = languageObject.lang_id;
+      baseData[languageObject.iso_code].iso_code = languageObject.iso_code;
+      baseData[languageObject.iso_code].language = languageObject.language;
+      baseData[languageObject.iso_code]["template-content"] = (props.Templates.selectedEmailLayout ? props.Templates.selectedEmailLayout : '');
+    //  if (this.state.isDragDrop) {
+      baseData[languageObject.iso_code].drag_drop_id = "";//props.Templates.edmTemplate.versions.base.drag_drop_id;
+      //}
+      baseData.selectedLanguages = [baseLanguage];
+      newFormData.base = baseData;
+      newFormData[0] = baseData;
+      newFormData[0].base = true;
+    }
+    this.props.templatesActions.resetUploadData();
+    return newFormData;
+  }
+
+  transformFormData = (formData) => {
+    const newFormData = {
+      base: {},
+      secondary_templates: [],
+    };
+    // const baseData = {};
+    _.forEach(formData.base, (content, index) => {
+      if (content && 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;
+        tmpData.iso_code = content.iso_code;
+        tmpData.language = content.language;
+        if (content.is_drag_drop) {
+          tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : "");
+        }
+
+        if (index === this.props.currentOrgDetails.basic_details.base_language) {
+          newFormData.base = _.cloneDeep(tmpData);
+        }
+        newFormData.secondary_templates.push({template_data: 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 === "coupon_expiry" || this.props.location.query.module === "timeline" || this.props.location.query.module === "library")) {
+    newFormData.base.subject = formData['template-subject'];
+    // }
+
+
+    return newFormData;
+  }
+
+  handleFrameTasks = (e) => {
+    const type = this.isValidJson(e.data) ? JSON.parse(e.data) : e.data;
+
+    if (typeof type === 'object') {
+      const action = type.action;
+      switch (action) {
+        case "startTemplateCreation":
+          this.startTemplateCreation(type.value);
+          break;
+        case "edit":
+          this.edmEvent = e;
+          if (type.elementJson.type === "IMAGE") {
+            this.onImageSelect();
+          }
+          break;
+        case "editBackground":
+          this.edmEvent = e;
+          if (type.elementJson.type === "BOX" || type.elementJson.type === "BUTTON" || type.elementJson.type === "GENERAL") {
+            this.onImageSelect();
+          }
+          break;
+        case "create":
+          this.edmEvent = e;
+          break;
+        case "select":
+          //this.edmEvent = e;
+          break;
+        case "startLoading":
+          this.startLoading(type.edit);
+          break;
+        case "getCurrentWindow":
+          this.getCurrentWindow(type);
+          break;
+        case "getFormData":
+          this.getFormData(e, type.value);
+          break;
+        default:
+          break;
+      }
+    } else {
+      switch (type) {
+        case "getFormData":
+          this.getFormData(e);
+          break;
+        case "startTemplateCreation":
+
+          //this.getFormData(e);
+          break;
+        case "moveToTemplates":
+
+          this.moveToTemplates();
+          break;
+        case "validateContent":
+
+          this.validateContent(e);
+          break;
+        case "Save result: success":
+          if (_.isEmpty(this.props.Email.cmsData)) {
+            this.handleEdmSave();
+          }
+          break;
+        case "JsonChanged":
+          this.edmEvent = e;
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  isValidJson = (str) => {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  }
+
+  handleEdmSave = () => {
+    if (this.state.mode === "save") {
+      this.setState((prevState) => ({ saveCount: prevState.saveCount + 1}), () => {
+        if (this.state.targetSaveCount === this.state.saveCount) {
+          if (this.state.saveEdmDataMode === 'validation') {
+            this.getValidationData();
+          } else if (this.state.saveEdmDataMode === 'save') {
+            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') {
+        let schema = _.cloneDeep(this.state.schema);
+        const formData = _.cloneDeep(this.state.formData);
+        _.forEach(schema.containers, (container, index) => {
+          if (parseInt(index, 10) === (this.state.currentTab - 1)) {
+            const temp = container;
+            const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(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"};
+          }
+        });
+        schema = this.showInsertImageButton(schema);
+
+        this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
+          this.injectEvents(schema);
+        });
+      }
+    }
+  }
+
+  handleImagePreviewClose = () => {
+    this.setState({ showImageSelectionBox: false });
+  }
+
+  handleContentChange = (data) => {
+    const formData = _.cloneDeep(this.state.formData);
+    formData[this.state.currentTab][formData[this.state.currentTab - 1].activeTab]["template-content"] = data;
+    this.setState({formData});
+  }
+
+  handleOnHoverItem = (isHovering) => {
+    if (!isHovering) {
+      // const data = _.find(this.props.Email.assetList, {_id: id});
+      //
+      // if (data) {
+      //   if (this.state.isDragDrop) {
+      //
+      //   } else {
+      //     this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.public_url}' alt='Capillary Image'>`);
+      //   }
+      // }
+    }
+  }
+
+  hideEdmOptions = (isDragDrop) => {
+    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 === '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') {
+                const newTabPopoverSection = tabPopoverSection;
+                newTabPopoverSection.cols[0].style.display = isDragDrop ? "" : 'none';
+              }
+            });
+          }
+        });
+      }
+    });
+
+    this.setState({schema, isSchemaChanged: true});
+  }
+
+  showInsertImageButton = (passedSchema) => {
+    const schema = passedSchema || _.cloneDeep(this.state.schema);
+    _.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 = "";
+          }
+        });
+      }
+    });
+
+    this.setState({schema, isSchemaChanged: true});
+  }
+
+  showSubject = () => {
+    const schema = _.cloneDeep(this.state.schema);
+    if (schema.standalone) {
+      if ((this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
+      this.props.location.query.module === "library")) {
+        _.set(schema, 'standalone.sections[0].inputFields[0].style.display', "" );
+        _.set(schema, 'standalone.sections[0].inputFields[0].labelStyle.display', "");
+      }
+      this.setState({schema});
+    }
+  }
+
+  handleOnItemClick = (isSelected, id) => {
+    const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    if (isSelected) {
+      const data = _.find(this.props.Email.assetList, {_id: id});
+
+      if (data) {
+        if (isDragDrop && isEdmSupport) {
+          const evtData = JSON.parse(this.edmEvent.data);
+          if (evtData.action === 'editBackground') {
+            this.edmEvent.source.postMessage(JSON.stringify({
+              _dynId: JSON.parse(this.edmEvent.data)._dynId,
+              action: "setProps",
+              props: {
+                background: {
+                  image: {
+                    src: data.metaInfo.secure_file_path,
+                  },
+                },
+              },
+            }), "*");
+          } else if (evtData.action === 'edit') {
+            this.edmEvent.source.postMessage(JSON.stringify({
+              _dynId: JSON.parse(this.edmEvent.data)._dynId,
+              action: "setProps",
+              props: {
+                src: data.metaInfo.secure_file_path,
+              },
+            }), "*");
+          }
+          this.edmEvent = undefined;
+        } else {
+          this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.secure_file_path}' alt='Capillary Image'>`);
+          //this.resetCkEditorInstance(this.state.currentTab, this.state.formData, true, data, true);
+        }
+      }
+      this.setState({ showImageSelectionBox: false });
+    }
+  }
+
+  toggleEmailPreview = () => {
+    const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
+    if (isDragDrop && !this.state.showEmailPreview) {
+      const activeLangTab = this.state.formData[`${this.state.currentTab - 1}`].activeTab;
+      const langIndex = this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      win.postMessage("saveProject", '*');
+      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'] = "";
+      if (formData[`${this.state.currentTab - 1}`].base) {
+        formData.base[formData.base.activeTab]['template-content'] = "";
+      }
+    }
+    this.setState( (prevState) => ({ showEmailPreview: !prevState.showEmailPreview }));
+  }
+
+  changePreviewDevice = (device) => {
+    this.setState({ device });
+  }
+
+  handleVersionSelect = (status, formData) => {
+    const newFormData = _.cloneDeep(this.state.formData);
+    const schema = _.cloneDeep(this.state.schema);
+    const versionIndex = _.findIndex(formData['template-version-options'], {key: status});
+    newFormData['template-version'] = formData['template-version-options'][versionIndex].key;
+
+    const newContainers = [];
+    _.forEach(schema.containers, (container, index) => {
+      const tmpContainer = _.cloneDeep(container);
+      if (index === versionIndex) {
+        tmpContainer.isActive = true;
+      } else {
+        tmpContainer.isActive = false;
+      }
+      newContainers.push(tmpContainer);
+    });
+    schema.containers = _.cloneDeep(newContainers);
+    this.setState({formData: newFormData, schema, currentTab: (versionIndex + 1), isSchemaChanged: true});
+  }
+
+  afterPaste = () => {
+
+  }
+
+  deleteVersion = (data, currentTab) => {
+    if (this.state.tabCount === 1 || currentTab === 1) {
+      return;
+    }
+    const schema = _.cloneDeep(this.state.schema);
+    const formData = _.cloneDeep(this.state.formData);
+    schema.containers.splice(`${currentTab - 1}`, 1);
+    schema.containers[0].isActive = true;
+    delete formData[`${currentTab - 1}`];
+    formData['template-version-options'].splice(`${currentTab - 1}`, 1);
+    formData['template-version'] = formData['template-version-options'][0].value;
+
+    this.setState({schema, tabCount: (this.state.tabCount - 1), currentTab: 1, isSchemaChanged: true, showModal: false});
+  }
+
+  switchEditor = () => {
+    this.setState({showConfirmationModal: true});
+  }
+
+  renameVersion = () => {
+
+  }
+
+  markFinalVersion = () => {
+    const message = getMessageObject('success', this.props.intl.formatMessage(messages["Template Marked as Final Successfully"]), true);
+    this.props.globalActions.addMessageToQueue(message);
+  }
+
+  duplicateVersion = (formData) => {
+    this.setState({formData}, () => {
+      this.addVersion(this.state.tabCount);
+    });
+  }
+
+  addVersion = () => {
+    if (this.state.schema.containers.length === 5) {
+      alert('You cant have more that 5 versions');
+      return;
+    }
+
+    const schema = _.cloneDeep(this.state.schema);
+    const tabIndex = schema.containers.length + 1; //data + 1;
+    const formData = _.cloneDeep(this.state.formData);
+    const containers = _.cloneDeep(schema.containers.slice());
+    const firstPane = _.cloneDeep(containers[0].panes[0]);
+    const sections = [];
+    containers[0].isActive = true;
+    _.forEach(firstPane.sections, (section) => {
+      let sect = _.cloneDeep(section);
+
+      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);
+      }
+
+      sections.push(sect);
+      return true;
+    });
+    firstPane.sections = sections;
+    containers[0].panes = [];
+    containers[0].panes.push(firstPane);
+    schema.containers.push(containers[0]);
+
+    _.forEach(schema.containers, (container, index) => {
+      schema.containers[index].isActive = ((index + 1) === this.state.currentTab);
+    });
+
+
+    _.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;
+        }
+      }
+    });
+
+    const newVersionOption = formData['template-version-options'].pop();
+
+    formData['template-version-options'].push({
+      key: `version ${tabIndex}`,
+      label: `Version ${tabIndex}`,
+      value: `version ${tabIndex}`,
+    });
+    formData['template-version-options'].push(newVersionOption);
+    formData['template-version'] = `version ${tabIndex}`;
+
+    if (schema) {
+      this.setState({schema, formData, currentTab: (tabIndex), isSchemaChanged: true});
+    }
+  }
+
+  addLanguage = (tempLang, passedData, val, asyncLanguages) => {
+    if (this.state.addLanguageType === "upload") {
+      this.setState({languageDataSet: true}, () => {
+        if (this.props.Templates.selectedEmailLayout && this.props.Templates.selectedEmailLayout !== '') {
+          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 formData = _.cloneDeep(passedData);
+    if (!_.isEmpty(schema)) {
+      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];
+        }
+        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);
+        }
+        const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
+        tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;
+        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);
+          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);
+          }
+          sections.push(sect);
+          return true;
+        });
+        tabContentSection.id = `${tabContentSection.id}${tabIndex}`;
+        tabContentSection.value = `${data.language}`;
+        _.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];
+        // panes.push(firstPane);
+        schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
+        // schema.containers[0].tabContent.sections.push(tabContent);
+      }
+      //this.props.templatesActions.getEdmDefaultTemplates();
+      const container = schema.containers[this.state.currentTab - 1];
+      const temp = container;
+      if (this.state.addLanguageType === "upload") {
+        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});
+        if (this.state.addLanguageType !== "upload") {
+          this.setState({addLanguageType: ''});
+        }
+        //this.toggleEdmEmailTemplateSelection();
+      }
+    }
+  }
+
+  openPreviewMode = (selectedAsset) => {
+    const asset = selectedAsset;
+    asset.showButtons = asset.showButtons ? !asset.showButtons : true;
+    this.setState({selectedAsset: asset});
+  }
+
+  cloneParent = (section, tabIndex, noSuffix) => {
+    const parentsect = section;
+    const childSectionsBeforeCloning = parentsect.childSections.slice();
+    const childSections = [];
+    _.forEach(childSectionsBeforeCloning, (childSection) => {
+      let sect = {};
+      if (childSection.type === 'col-label') {
+        sect = this.cloneColLabel(childSection, tabIndex, noSuffix);
+      } else if (childSection.type === 'multicols') {
+        sect = this.cloneMultiCol(childSection, tabIndex, noSuffix);
+      } else if (childSection.type === 'parent') {
+        sect = this.cloneParent(childSection, tabIndex, noSuffix);
+      }
+
+      childSections.push(sect);
+      return true;
+    });
+
+    parentsect.childSections = childSections;
+
+    return _.cloneDeep(parentsect);
+  }
+
+  cloneColLabel = (sectionObj, tabIndex, noSuffix) => {
+    const section = _.cloneDeep(sectionObj);
+    const inputFields = _.forEach(section.inputFields, (inputField) => {
+      const inputF = inputField;
+      inputF.id = noSuffix ? `${inputField.id}` : `${inputField.id}${tabIndex}`;
+      inputF.paneIndex = tabIndex;
+      return inputF;
+    });
+    section.inputFields = inputFields;
+
+    return section;
+  }
+
+  cloneMultiCol = (sectionObj, tabIndex, noSuffix) => {
+    const section = _.cloneDeep(sectionObj);
+    const inputFields = _.forEach(section.inputFields, (inputField) => {
+      const inputF = inputField;
+      const cols = _.forEach(inputF.cols, (col) => {
+        const colTemp = col;
+        colTemp.id = noSuffix ? `${col.id}` : `${col.id}${tabIndex}`;
+        colTemp.paneIndex = tabIndex;
+        return colTemp;
+      });
+      inputF.cols = cols;
+      return inputF;
+    });
+    section.inputFields = inputFields;
+
+    return section;
+  }
+
+  injectMessages = (elem) => {
+    const temp = elem;
+    if (temp.value && messages[temp.value]) {
+      temp.value = this.props.intl.formatMessage(messages[temp.value]);
+    }
+    if (temp.label && messages[temp.label]) {
+      temp.label = this.props.intl.formatMessage(messages[temp.label]);
+    }
+    if (temp.errorMessage && messages[temp.errorMessage]) {
+      temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+    }
+    if (temp.placeholder && messages[temp.placeholder]) {
+      temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+    }
+    return temp;
+  }
+
+  showNext = () => {
+    const response = {
+      action: "showNext",
+      value: true,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  moveToTemplates = () => {
+    const modalContent = {
+      title: "Alert",
+      body: "Do you really want to go back? All your temporary changes will be lost!",
+      type: 'confirm',
+      id: 'template-back-confirm-modal',
+      show: true,
+    };
+    this.setState({modalContent, showModal: true});
+  }
+
+  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;
+    const isEdmSupport = this.props.location.query.isEdmSupport !== false || false;
+    this.props.router.push({
+      pathname: `/email/`,
+      query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
+    });
+  }
+
+  selectAsset = (asset) => {
+    this.state.editorInstanse.insertHtml(`<img src='${asset}' alt='Capillary Image'>`);
+  }
+
+  prepareImageData() {
+    const data = [];
+    const assetList = this.props.Email.assetList;
+    _.forEach(assetList, (asset) => {
+      const tmpData = {};
+      tmpData.id = asset._id;
+      const updateDateTime = (moment().format('DD-MM-YYYY') === moment(asset.updatedAt).format('DD-MM-YYYY')) ? moment(asset.updatedAt).format('hh:mma') : moment(asset.updatedAt).format('DD-MM-YYYY');
+      tmpData.content = (
+        <div className="image-container">
+          <img style={{width: '100%'}} src={asset.metaInfo.secure_file_path ? asset.metaInfo.secure_file_path : asset.metaInfo.public_url} alt={asset.name} />
+          <div className={asset.showButtons ? 'overlay show-overlay' : 'overlay hide'}>
+            <div>
+              <CapButton type="secondary" className="select-button" onClick={(e) => this.selectAsset(e)}>
+                <FormattedMessage {...messages.select} />
+              </CapButton>
+            </div>
+            <div>
+              {/* <CapButton type="cancel" className="preview-button" onClick={() => this.openEmbeddedPreviewMode(asset)}>
+                <FormattedMessage {...messages.preview} />
+              </CapButton> */}
+            </div>
+          </div>
+        </div>
+      );
+      tmpData.footer = (
+        <div className="card-footer-wrapper">
+          <div className="card-title-container">
+            <div className="card-title-wrapper">
+              <p className="card-title" onClick={() => this.openPreviewMode(asset)}>{asset.name}</p>
+            </div>
+            <div className="more-icon-wrapper">
+              <Popover
+                placement="leftTop"
+                content={<div style={{ cursor: 'pointer'}}><p onClick={() => this.deleteAsset(asset)}>
+                  <FormattedMessage {...messages.delete} />
+                </p></div>} trigger="click">
+                <i className="material-icons creative-icons">more_vert</i>
+              </Popover>
+            </div>
+          </div>
+          <p className="card-detail"><FormattedMessage {...messages.uploadedAt} />: {updateDateTime}</p>
+        </div>
+      );
+      data.push(tmpData);
+    });
+    return data;
+  }
+
+  injectEvents = (schema) => {
+    const type = this.props.location.query.type;
+
+    let temp = _.cloneDeep(schema);
+    temp.standalone.sections = this.injectSections(temp.standalone.sections);
+    _.forEach(temp.containers, (container) => {
+      let tempContainer = container;
+      tempContainer = this.injectContainer(tempContainer);
+      return tempContainer;
+    });
+
+    // if (type !== "embedded" || (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" || type !== "embedded";
+    _.forEach(temp.containers, (container) => {
+      if (container.isActive) {
+        let hideLang = false;
+        _.forEach(container.tabContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
+          const tempEl = containerInputFieldCol;
+          if (containerInputFieldCol.id === "tab-header") {
+            const baseLanguage = this.props.currentOrgDetails && this.props.currentOrgDetails.basic_details && this.props.currentOrgDetails.basic_details.base_language && this.props.currentOrgDetails.basic_details.base_language !== "" ? this.props.currentOrgDetails.basic_details.base_language : 'en';
+            const supportedLanguages = this.getSupportedLanguages(this.props);
+            if (!supportedLanguages) {
+              tempEl.value = 'English';
+              return;
+            }
+            const langObject = supportedLanguages.find( (lang) => lang.iso_code === baseLanguage);
+            if (langObject) {
+              tempEl.value = langObject.language;
+            } else {
+              tempEl.value = 'English';
+            }
+          }
+        });
+        _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
+          if (hideLang && !ifLangSupported) {
+            const newContainerInputFieldCol = containerInputFieldCol;
+            hideLang = false;
+            newContainerInputFieldCol.offset = 16;
+          } else if (hideLang) {
+            const newContainerInputFieldCol = containerInputFieldCol;
+            hideLang = false;
+            newContainerInputFieldCol.offset = 13;
+          }
+          if (containerInputFieldCol.id === 'add-language-button' && !ifLangSupported) {
+            const newContainerInputFieldCol = containerInputFieldCol;
+            if (newContainerInputFieldCol.colStyle.display !== "none") {
+              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;
+            if (newContainerInputFieldCol.colStyle.display !== "none") {
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
+          }
+          // if (containerInputFieldCol.id === "tab-options-popover") {
+          //   const newContainerInputFieldCol = containerInputFieldCol;
+          //   newContainerInputFieldCol.colStyle.display = "none";
+          // }
+        });
+      }
+    });
+    _.forEach(temp.standalone.sections[1].inputFields[0].cols, (inputField) => {
+      if (inputField.id === "template-version") {
+        const iF = inputField;
+        iF.colStyle = {};
+        iF.colStyle.display = "none";
+      }
+    });
+    //}
+    temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
+    this.setState({schema: temp, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1}, () => {
+      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() === 'coupon_expiry' || this.props.location.query.module.toLowerCase() === 'timeline')))) {
+        if ((this.props.route.name === "EmailEdit" || this.props.route.name === "EmailCreate") && (this.props.location.query.module === "dvs" || this.props.location.query.module.toLowerCase() === 'coupon_expiry')) {
+          return;
+        }
+        const response = {
+          action: 'startTemplateCreation',
+        };
+        parent.postMessage(JSON.stringify(response), '*');
+      }
+    });
+    return temp;
+  }
+
+  handleOnTagsContextChange = (data) => {
+    const query = {
+      layout: 'EMAIL',
+      type: 'TAG',
+      context: data.toLowerCase() === 'all' ? 'default' : data.toLowerCase(),
+      embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+    };
+    this.props.globalActions.fetchSchemaForEntity(query);
+  }
+
+  removeStandAlone(schema) {
+    const newSchema = _.cloneDeep(schema);
+    delete newSchema.standalone;
+    newSchema.standalone = {};
+    newSchema.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 === "coupon_expiry" || this.props.location.query.module === "timeline" ||
+      this.props.location.query.module === "library")) {
+      newSchema.standalone.sections.push(_.cloneDeep(schema.standalone.sections[0]));
+    }
+
+    _.forEach(newSchema.containers, (container) => {
+      const temp = container;
+      if (temp.type === 'tabs') {
+        // temp.tabBarExtraContent = {};
+        // temp.tabBarExtraContent.sections = [];
+        const basePane = _.cloneDeep(temp.panes[0]);
+        _.forEach(temp.tabContent.sections, (section) => {
+          _.forEach(section.inputFields, (inputField) => {
+            if (section.type === 'multicols') {
+              _.forEach(inputField.cols, (col, key) => {
+                if (col.id === 'tab-options-popover') {
+                  inputField.cols.splice(key, 1);
+                } else if (col.id === 'tab-header') {
+                  const tempCol = col;
+                  tempCol.style = {padding: '8px 0'};
+                }
+              });
+            }
+          });
+        });
+        _.forEach(temp.tabBarExtraContent.sections, (section) => {
+          _.forEach(section.inputFields, (inputFields) => {
+            if (section.type === "multicols") {
+              _.forEach(inputFields.cols, (col) => {
+                if ((col.id === "tab-options-popover" || col.id === "add-language-button") && this.props.location.query.type === 'embedded' && (this.props.location.query.module === "library")) {
+                  const colStyle = col.colStyle;
+                  colStyle.display = "none";
+                }
+              });
+            }
+          });
+        });
+        temp.panes = [];
+        temp.panes.push(basePane);
+      }
+    });
+    return newSchema;
+  }
+
+  startTemplateCreation(data) {
+    if (_.isEmpty(data)) {
+      return;
+    }
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+
+     //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"}]};
+
+    if (data && data.edit) {
+      // const formData = {'0': {}};
+      const formData = _.cloneDeep(this.state.formData);
+      formData[0].selectedLanguages = [];
+      let tabKey;
+      if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
+        formData['template-subject'] = data.base.subject ? data.base.subject : '';
+        const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
+        let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
+
+        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.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";
+      } else {
+        const additionalLanguages = [];
+        _.forEach(data.secondary_templates, (templates) => {
+          const id = "1";
+          tabKey = id;
+          let languageIndex = _.findIndex(this.supportedLanguages, {language: templates.language});
+          if (languageIndex === -1) {
+            languageIndex = 0;
+          }
+          const tempData = {
+            "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,
+            "template-content": templates.html_content,
+          };
+          if (templates.drag_drop_id) {
+            tempData.drag_drop_id = templates.drag_drop_id;
+            this.props.actions.getCmsSetting('edm', tempData.drag_drop_id, 'open', tempData.iso_code, isEdmSupport);
+          }
+          // formData.usingTabContainer = true;
+          // formData.tabCount = 1;
+
+          // formData[0].tabkey = "1";
+          // formData[0] = {};
+          // formData[0].activeTab = this.props.currentOrgDetails.basic_details.base_language;
+          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 === 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]);
+
+      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, isEdmSupport);
+          }
+        });
+      });
+    } else {
+      this.setState({injectedTags: data.tags});
+    }
+    this.props.globalActions.setInjectedTags(data.tags);
+  }
+
+  startLoading = (ifEdit) => {
+    if (ifEdit) {
+      this.setState({loading: true});
+    }
+  }
+
+  injectContainer = (container) => {
+    const temp = container;
+    if (temp.type === 'tabs') {
+      temp.tabContent.sections = this.injectSections(temp.tabContent.sections);
+      temp.tabBarExtraContent.sections = this.injectSections(temp.tabBarExtraContent.sections);
+      temp.tabContent.sections = this.injectSections(temp.tabContent.sections);
+      temp.injectedEvents = {};
+      _.forEach(temp.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
+      });
+      _.forEach(temp.panes, (pane) => {
+        const tempPane = pane;
+        tempPane.sections = this.injectSections(tempPane.sections);
+      });
+    }
+    return temp;
+  }
+
+  injectMultiColSection = (section) => {
+    _.forEach(section.inputFields, (inputField) => {
+      _.forEach(inputField.cols, (col) => {
+        const temp = col;
+        if (temp.type === 'popover') {
+          temp.content.sections = this.injectSections(temp.content.sections);
+          temp.value.sections = this.injectSections(temp.value.sections);
+          return true;
+        }
+        temp.injectedEvents = {};
+        _.forEach(col.supportedEvents, (event) => {
+          //
+          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        });
+        //
+        if (temp.type === 'icon') {
+          return true;
+        }
+        if (temp.value && messages[temp.value]) {
+          temp.value = this.props.intl.formatMessage(messages[temp.value]);
+        }
+        if (temp.label && messages[temp.label]) {
+          temp.label = this.props.intl.formatMessage(messages[temp.label]);
+        }
+        if (temp.errorMessage && messages[temp.errorMessage]) {
+          temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+        }
+        if (temp.placeholder && messages[temp.placeholder]) {
+          temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+        }
+        return true;
+      });
+    });
+    _.forEach(section.actionFields, (actionField) => {
+      _.forEach(actionField.cols, (col) => {
+        const temp = col;
+        if (temp.type === 'popover') {
+          temp.content.sections = this.injectSections(temp.content.sections);
+          temp.value.sections = this.injectSections(temp.value.sections);
+          return true;
+        }
+        temp.injectedEvents = {};
+        _.forEach(col.supportedEvents, (event) => {
+          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        });
+        //
+        if (temp.type === 'icon') {
+          return true;
+        }
+        if (temp.value && messages[temp.value]) {
+          temp.value = this.props.intl.formatMessage(messages[temp.value]);
+        }
+        if (temp.label && messages[temp.label]) {
+          temp.label = this.props.intl.formatMessage(messages[temp.label]);
+        }
+        if (temp.errorMessage && messages[temp.errorMessage]) {
+          temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+        }
+        if (temp.placeholder && messages[temp.placeholder]) {
+          temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+        }
+        return true;
+      });
+    });
+    return section;
+  }
+
+  injectColLabelSection = (section) => {
+    _.forEach(section.inputFields, (inputField) => {
+      const temp = inputField;
+      if (temp.type === 'popover') {
+        temp.content.sections = this.injectSections(temp.content.sections);
+        temp.value.sections = this.injectSections(temp.value.sections);
+        return true;
+      }
+      temp.injectedEvents = {};
+      _.forEach(inputField.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
+      });
+      //
+      if (temp.type === 'icon') {
+        return true;
+      }
+      if (temp.value && messages[temp.value]) {
+        temp.value = this.props.intl.formatMessage(messages[temp.value]);
+      }
+      if (temp.label && messages[temp.label]) {
+        temp.label = this.props.intl.formatMessage(messages[temp.label]);
+      }
+      if (temp.errorMessage && messages[temp.errorMessage]) {
+        temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+      }
+      if (temp.placeholder && messages[temp.placeholder]) {
+        temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+      }
+      return true;
+    });
+    _.forEach(section.actionFields, (actionField) => {
+      const temp = actionField;
+      if (temp.type === 'popover') {
+        temp.content.sections = this.injectSections(temp.content.sections);
+        temp.value.sections = this.injectSections(temp.value.sections);
+        return true;
+      }
+      temp.injectedEvents = {};
+      _.forEach(actionField.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
+      });
+      //
+      if (temp.type === 'icon') {
+        return true;
+      }
+      if (temp.value && messages[temp.value]) {
+        temp.value = this.props.intl.formatMessage(messages[temp.value]);
+      }
+      if (temp.label && messages[temp.label]) {
+        temp.label = this.props.intl.formatMessage(messages[temp.label]);
+      }
+      if (temp.errorMessage && messages[temp.errorMessage]) {
+        temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+      }
+      if (temp.placeholder && messages[temp.placeholder]) {
+        temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+      }
+      return true;
+    });
+    return section;
+  }
+
+  injectSections = (sections) => {
+    _.forEach(sections, (section) => {
+      let temp = section;
+      if (temp.type === 'col-label') {
+        temp = this.injectColLabelSection(temp);
+      } else if (section.type === 'multicols') {
+        temp = this.injectMultiColSection(temp);
+      } else if (section.type === 'parent') {
+        temp = this.injectSections(temp.childSections);
+      }
+    });
+    return sections;
+  }
+
+  injectParentSection = (section) => {
+    _.forEach(section.childSections, (childSection) => {
+      let temp = childSection;
+      if (temp.type === 'col-label') {
+        temp = this.injectColLabelSection(temp);
+      } else if (section.type === 'multicols') {
+        temp = this.injectMultiColSection(temp);
+      } else if (section.type === 'parent') {
+        temp = this.injectParentSection(temp);
+      }
+    });
+    return section;
+  }
+
+  saveFormData = (passedData) => {
+    //Logic to save in db etc
+    // const isValidated = this.validateFormData(formData);
+    //
+    // if (!isValidated) {
+    //   return;
+    // }
+    //if (!this.state.startValidation) {
+    //  this.saveValidationData();
+    //  return;
+    //}
+
+    if (this.state.gettingFormData && !this.props.isFullMode) {
+      const response = {
+        action: "getFormData",
+        postAction: this.state.getFormDataValue || 'next',
+        value: this.transformFormData(passedData),
+        validity: this.state.isFormValid,
+        type: 'EMAIL',
+      };
+
+      this.setState({checkValidation: true});
+      if (this.props.location.query.module === 'library' && this.props.isGetFormData) {
+        this.props.getFormSubscriptionData(response);
+      }
+      parent.postMessage(JSON.stringify(response), "*");
+      this.setState({gettingFormData: false, startValidation: false, loading: true});
+      return;
+    }
+    const formData = _.cloneDeep(passedData);
+
+    const obj = {};
+    obj.versions = {
+      base: {},
+      history: [],
+    };
+    if (this.state.isEdit) {
+      obj._id = this.props.Email.templateDetails._id;
+    }
+    obj.type = 'EMAIL';
+    const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
+    let baseKey = -1;
+    //let saveCount = 0;
+
+    _.forEach(formData, (data, index) => {
+      const newdata = data;
+
+      if (!isNaN(index) && newdata) {
+        const baseLangTabKey = newdata[baseLanguage].tabKey;
+        newdata.tabKey = baseLangTabKey;
+        newdata.activeTab = baseLanguage;
+        if (newdata.base) {
+          baseKey = baseLangTabKey;
+        }
+        _.forEach(newdata.selectedLanguages, (language) => {
+          //
+          // if (newdata[language].is_drag_drop && ((parseInt(index, 10) + 1) === this.state.currentTab)) {
+          //
+          //   saveCount += 1;
+          // }
+          if (newdata[language].is_drag_drop) {
+            delete newdata[language].edmeditorsrc;
+          }
+        });
+        obj.versions.history.push(newdata);
+      }
+    });
+    //const data = formData[`${this.state.currentTab - 1}`];
+    obj.name = formData['template-name'];
+    obj.versions.base = formData.base;
+    obj.versions.base.tabKey = baseKey;
+    obj.versions.base.subject = formData['template-subject'];
+    obj.versions.base.activeTab = baseLanguage;
+    _.forEach(obj.versions.base.selectedLanguages, (language) => {
+      if (obj.versions.base[language].is_drag_drop) {
+        delete obj.versions.base[language].edmeditorsrc;
+      }
+    });
+
+    // if (saveCount === 0) {
+
+    this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
+    // } else {
+    //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
+    //     _.forEach(data.selectedLanguages, (language, langIndex) => {
+    //       if (data[language].is_drag_drop) {
+    //
+    //         const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+    //         win.postMessage("saveProject", '*');
+    //       }
+    //     });
+    //   });
+    // }
+  }
+  handleOk = () => {
+    const formData = _.cloneDeep(this.state.formData);
+    const activeLangTab = formData[`${this.state.currentTab - 1}`].activeTab;
+    const langIndex = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+
+    this.setState({mode: "switchEditor"}, () => {
+      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+      win.postMessage("saveProject", '*');
+    });
+  }
+
+  handleCancel = () => {
+    this.setState({ showConfirmationModal: false });
+  }
+
+  handleCancelModal = () => {
+    this.setState({showModal: false});
+  }
+
+  openFileDialog() {
+    document.getElementById("fileName").click();
+  }
+  getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip}) => {
+    const currentChannel = 'gallery';
+    const cardDataList = templates.length ? _.map(templates, (template) => {
+      const templateData =
+        {
+          key: `${currentChannel}-card-${template.name}`,
+          title: <span title={template.name} >{template.name}</span>,
+        };
+      templateData.hoverOption = <CapButton onClick={(e) => handlers.onItemClick(e, template._id)}><FormattedMessage {...messages.select} /></CapButton>;
+      const secureFilePath = _.get(template, 'metaInfo.secure_file_path');
+      templateData.url = secureFilePath || _.get(template, 'metaInfo.public_url');
+      return templateData;
+    }) : [];
+    return (<div>
+      {filterContent}
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        {!_.isEmpty(templates) && <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
+        </div>}
+      </CapSpin>
+
+    </div>);
+  }
+  toggleEdmEmailTemplateSelection = () => {
+    this.setState( (prevState) => ({
+      showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
+      if (this.state.showEdmEmailTemplates) {
+        this.props.templatesActions.getEdmDefaultTemplates();
+      }
+    });
+  };
+  handleEdmDefaultTemplateSelection = (isSelected, id) => {
+    if (isSelected) {
+      const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
+      // 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) ? this.props.location.query.isLanguageSupport : true;
+      // const isEdmSupport = (this.props.location.query.isEdmSupport) ? this.props.location.query.isEdmSupport : true;
+      // let getQuery = '';
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+
+      this.props.actions.getCmsSetting('edm', data.versions.base.drag_drop_id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
+      // this.props.templatesActions.setEdmTemplate(data);
+      this.toggleEdmEmailTemplateSelection();
+      // if (type && type.toLowerCase() === 'email') {
+      //   getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
+      // } else {
+      //   getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
+      // }
+      // this.props.router.push({
+      //   pathname: `/${this.state.channel.toLowerCase()}/create`,
+      //   query: getQuery,
+      // });
+    }
+  };
+  isEmailLoading = () => {
+    //let {isLoading} = this.props;
+    let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
+
+    if (!isLoading) {
+      isLoading = this.state.loadingStatus < 2;
+    }
+    // if (isLoading) {
+    //   this.props.creativesContainerActions.hideCreativesContanerLoader();
+    // }
+    if (!isLoading && this.props.setIsLoadingContent) {
+      this.props.setIsLoadingContent(isLoading);
+    }
+    return isLoading;
+  }
+  renderConfirmationModal() {
+    const modal = (
+      <Modal
+        visible={this.state.showConfirmationModal}
+        title={this.props.intl.formatMessage(messages.switchEditor)}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+        footer={[
+          <CapButton key="back" onClick={this.handleCancel}>
+            {this.props.intl.formatMessage(messages.cancel)}
+          </CapButton>,
+          <CapButton key="submit" type="primary" onClick={this.handleOk}>
+            {this.props.intl.formatMessage(messages.yes)}
+          </CapButton>,
+        ]}
+      >
+        <p>{this.props.intl.formatMessage(messages.edmSwtichMessage)}</p>
+        <p>{this.props.intl.formatMessage(messages.edmSwitchAcceptText)}</p>
+      </Modal>);
+    return modal;
+  }
+  getFilterContent = () => (
+    <div className="action-container" style={{ display: 'inline-flex', width: '100%'}}>
+      <div style={{ marginTop: '8px', width: '50%'}}>
+        <CapInput
+          className="search-text"
+          style={{width: '210px'}}
+          placeholder="Search"
+          prefix={<i className="material-icons" style={{color: '#707070', fontSize: '16px'}}>search</i>}
+          value={this.state.searchText}
+          onChange={(e) => this.searchAsset(e.target.value)}
+        />
+      </div>
+      <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', marginRight: '24px'}}>
+            <FormattedMessage {...messages.upload} />
+          </CapButton>
+        </form>
+      </div>
+    </div>
+  );
+  getImagePreviewContent = () => (
+    <div key="creatives-email-add-image-container">
+      <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
+        {/* <CardGrid
+          listItem={this.prepareImageData()}
+          filterContent={filterContent}
+          onHoverItem={this.handleOnHoverItem}
+          onItemClick={this.handleOnItemClick}
+          colNumber={2}
+          enablePagination
+          isLoading={}
+        /> */}
+        {this.props.Email.assetList && this.props.Email.assetList.length && this.getTemplateDataForGrid({
+          isLoading: this.props.Email.fetchingAllAssets,
+          loadingTip: <FormattedMessage {...messages.loadingImages}/>,
+          channel: this.state.channel,
+          templates: this.props.Email.assetList,
+          filterContent: this.getFilterContent(),
+          handlers: {onItemClick: this.handleOnItemClick}})
+        }
+
+      </Pagination>
+    </div>
+  );
+
+  render() {
+    // const pageHeading = (this.state.isEdit) ? this.props.intl.formatMessage(messages.editHeading) : this.props.intl.formatMessage(messages.createHeading);
+    // const actionComponents = '';
+    const schema = this.state.schema;
+    const isLoading = this.isEmailLoading();
+    const previewHeader = (<h3>Email Preview</h3>);
+    const imagePreviewHeader = (<h3>Image Selection</h3>);
+    const imagePreviewContent = this.getImagePreviewContent();
+    if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
+      return (<div>Loading...</div>);
+    }
+
+    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);
+    }
+    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
+      tags = this.props.supportedTags;
+    }
+    return (
+      <div className="email-container">
+
+        {/* <PageHeader pageHeading={pageHeading} /> */}
+        <CapSpin tip={loaderText} spinning={isLoading}>
+
+          <Row>
+            <Col>
+              { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?
+                <FormBuilder
+                  isFullMode={this.props.isFullMode}
+                  schema={schema}
+                  onSubmit={this.saveFormData}
+                  onChange={this.onFormDataChange}
+                  currentTab={this.state.currentTab}
+                  parent={this}
+                  formData={_.cloneDeep(this.state.formData)}
+                  location={this.props.location}
+                  tabKey={this.state.tabKey}
+                  tags={tags}
+                  tagModule={this.props.getDefaultTags}
+                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                  onFormValidityChange={this.setFormValidity}
+                  handleCancelModal={this.handleCancelModal}
+                  usingTabContainer
+                  checkValidation={this.state.checkValidation}
+                  onContextChange={this.handleOnTagsContextChange}
+                  tabCount={this.state.tabCount}
+                  isNewVersionFlow
+                  modal={this.state.modalContent}
+                  showModal={this.state.showModal}
+                  isEdit={this.state.isEdit}
+                  iframeParent={parent}
+                  router={this.props.router}
+                  baseLanguage={this.props.currentOrgDetails.basic_details.base_language}
+                  supportedLanguages={this.getSupportedLanguages(this.props)}
+                  isSchemaChanged={this.state.isSchemaChanged}
+                  cmsTemplates={this.props.Templates.cmsTemplates}
+                  getCmsTemplatesInProgress={this.props.Templates.getCmsTemplatesInProgress}
+                  showEdmEmailTemplates={this.state.showEdmEmailTemplates}
+                  toggleEdmEmailTemplateSelection={this.toggleEdmEmailTemplateSelection}
+                  handleEdmDefaultTemplateSelection={this.handleEdmDefaultTemplateSelection}
+                  setModalContent={this.setModalContent}
+                  addLanguageType={this.state.addLanguageType}
+                  startValidation={this.state.startValidation}
+                  getValidationData={this.saveValidationData}
+                  saveForm={this.state.saveForm}
+                  stopValidation={this.stopValidation}
+              /> : ''}
+            </Col>
+          </Row>
+        </CapSpin>
+        {!_.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] ? 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}
+          changePreviewDevice={this.changePreviewDevice}
+        />}
+        <CapSlideBox
+          header={imagePreviewHeader}
+          content={imagePreviewContent}
+          show={this.state.showImageSelectionBox}
+          handleClose={this.handleImagePreviewClose}
+          isLoading={this.props.Email.fetchingAllAssets}
+          size="size-l"
+        />
+        {this.state.showConfirmationModal && this.renderConfirmationModal()}
+      </div>
+    );
+  }
+}
+
+Email.propTypes = {
+  actions: PropTypes.object.isRequired,
+  Email: PropTypes.object,
+  params: PropTypes.object,
+  router: PropTypes.object,
+  Templates: PropTypes.object,
+  globalActions: PropTypes.object,
+  location: PropTypes.object,
+  intl: intlShape.isRequired,
+  metaEntities: PropTypes.object,
+  templatesActions: PropTypes.object,
+  route: PropTypes.object,
+  templateData: PropTypes.object,
+  isGetFormData: PropTypes.bool,
+  getFormSubscriptionData: PropTypes.func,
+  supportedTags: PropTypes.array,
+  getDefaultTags: PropTypes.string,
+  currentOrgDetails: PropTypes.object,
+  isLoadingMetaEntities: PropTypes.bool,
+  // creativesContainerActions: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
+  injectedTags: PropTypes.object,
+  defaultData: PropTypes.object,
+  showTemplateName: PropTypes.func,
+};
+
+const mapStateToProps = (state, props) => createStructuredSelector({
+  Email: makeSelectEmail(),
+  Templates: makeSelectTemplates(),
+  metaEntities: makeSelectMetaEntities(),
+  currentOrgDetails: props.cap ? () => props.cap.currentOrgDetails : selectCurrentOrgDetails(),
+  isLoadingMetaEntities: isLoadingMetaEntities(),
+  Global: makeSelectAuthenticated(),
+  injectedTags: setInjectedTags(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+    templatesActions: bindActionCreators(templatesActions, dispatch),
+    creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));
+