@capillarytech/creatives-library 0.1.31 → 1.0.0

package/containers/Email/index.js

@@ -1,3282 +0,0 @@
-/*
- *
- * Email
- *
- */
-
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import Helmet from 'react-helmet';
-import { Row, Col, Spin, Breadcrumb, Popover, Modal, Select } from 'antd';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
-import { createStructuredSelector } from 'reselect';
-import _ from 'lodash';
-import moment from "moment";
-import FormBuilder from '../../components/FormBuilder';
-import { makeSelectMetaEntities, makeSelectAuthenticated } 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 ImagePreview from '../../components/ImagePreview';
-import CardGrid from '../../components/CardGrid';
-import Pagination from '../../components/Pagination';
-const BreadcrumbItem = Breadcrumb.Item;
-
-export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      formData: {},
-      tabCount: 1,
-      currentTab: 1,
-      events: {
-        blur: this.onBlur,
-        afterPaste: this.afterPaste,
-        change: this.onChange,
-      },
-      isEdit: false,
-      schema: {},
-      // schema: {
-      //   standalone: {
-      //     sections: [
-      //       {
-      //         type: "col-label",
-      //         inputFields: [
-      //           {
-      //             id: "template-subject",
-      //             placeholder: "Enter Email Subject",
-      //             type: "input",
-      //             metaType: "text",
-      //             datatype: "string",
-      //             required: true,
-      //             label: "Subject",
-      //             style: {
-      //               fontSize: "20px",
-      //               fontFamily: "proxima-nova,sans-serif",
-      //               fontStyle: "normal",
-      //               fontWeight: 600,
-      //               display: (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs")) ? "" : "none",
-      //             },
-      //             labelStyle: {
-      //               fontSize: "18px",
-      //               fontFamily: "proxima-nova,sans-serif",
-      //               fontStyle: "normal",
-      //               fontWeight: 600,
-      //               display: (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs")) ? "" : "none",
-      //               background: "white",
-      //             },
-      //             styling: "semantic",
-      //             order: 1,
-      //             width: 9,
-      //             customComponent: false,
-      //             standalone: true,
-      //             onlyDisplay: false,
-      //             errorMessage: "Email Subject cannot be empty.",
-      //             // supportedEvents: [
-      //             //   "onChange",
-      //             // ],
-      //           },
-      //         ],
-      //       },
-      //       {
-      //         type: "multicols",
-      //         inputFields: [
-      //           {
-      //             cols: [
-      //               {
-      //                 id: "template-name",
-      //                 placeholder: "Enter template name",
-      //                 type: "input",
-      //                 metaType: "text",
-      //                 datatype: "string",
-      //                 required: true,
-      //                 style: {
-      //                   fontSize: "20px",
-      //                   fontFamily: "proxima-nova,sans-serif",
-      //                   fontStyle: "normal",
-      //                   fontWeight: 600,
-      //                 },
-      //                 styling: "semantic",
-      //                 order: 1,
-      //                 width: 9,
-      //                 customComponent: false,
-      //                 standalone: true,
-      //                 onlyDisplay: false,
-      //                 errorMessage: "Template name cannot be empty.",
-      //                 supportedEvents: [
-      //                   "onChange",
-      //                 ],
-      //               },
-      //               {
-      //                 id: "template-version",
-      //                 type: "select",  //Resembles component to be used
-      //                 options: [],
-      //                 metaType: "text",
-      //                 datatype: "string",
-      //                 required: true,
-      //                 fluid: true,
-      //                 style: {
-      //                   fontSize: '14px',
-      //                   fontFamily: 'open-sans',
-      //                   fontStyle: 'normal',
-      //                   marginBottom: '16px',
-      //                 },
-      //                 styling: "semantic",
-      //                 order: 1,
-      //                 width: 5,
-      //                 customComponent: false,
-      //                 standalone: true,
-      //                 supportedEvents: [
-      //                   'onSelect',
-      //                   'addVersion',
-      //                 ],
-      //               },
-      //               {
-      //                 id: "preview-button",
-      //                 width: 3,
-      //                 offset: 3,
-      //                 metaType: "submit-button",
-      //                 colStyle: {
-      //                   textAlign: "right",
-      //                   paddingRight: "12px",
-      //                 },
-      //                 type: "button",
-      //                 buttonType: "cancel",
-      //                 value: "Preview",
-      //                 customComponent: false,
-      //                 standalone: true,
-      //                 styling: "semantic",
-      //                 order: 3,
-      //                 fluid: false,
-      //                 submitAction: "previewTemplate",
-      //                 onlyDisplay: true,
-      //                 supportedEvents: [
-      //                   "previewTemplate",
-      //                 ],
-      //               },
-      //               {
-      //                 id: "cancel-button",
-      //                 width: 2,
-      //                 metaType: "submit-button",
-      //                 colStyle: {
-      //                   textAlign: "right",
-      //                   width: "9%",
-      //                 },
-      //                 type: "button",
-      //                 buttonType: "cancel",
-      //                 value: "Cancel",
-      //                 customComponent: false,
-      //                 standalone: true,
-      //                 styling: "semantic",
-      //                 order: 3,
-      //                 fluid: false,
-      //                 onlyDisplay: true,
-      //                 submitAction: "cancelTemplate",
-      //                 supportedEvents: [
-      //                   "cancelTemplate",
-      //                 ],
-      //               },
-      //               {
-      //                 id: "save-button",
-      //                 width: 2,
-      //                 metaType: "submit-button",
-      //                 colStyle: {
-      //                   textAlign: "right",
-      //                   width: "7%",
-      //                 },
-      //                 type: "button",
-      //                 buttonType: "primary",
-      //                 value: "Save",
-      //                 customComponent: false,
-      //                 styling: "semantic",
-      //                 order: 3,
-      //                 fluid: false,
-      //                 standalone: true,
-      //                 onlyDisplay: true,
-      //                 submitAction: "saveFormData",
-      //                 supportedEvents: [
-      //                   "saveFormData",
-      //                 ],
-      //               },
-      //             ],
-      //           },
-      //         ],
-      //         actionFields: [],
-      //       },
-      //     ],
-      //   },
-      //   containers: [
-      //     {
-      //       panes: [
-      //         {
-      //           sections: [
-      //             {
-      //               type: "multicols",
-      //               width: 24,
-      //               rowStyle: {
-      //                 // height: "calc(100vh - 142px)",
-      //               },
-      //               actionFields: [],
-      //               inputFields: [
-      //                 {
-      //                   cols: [
-      //                     {
-      //                       id: "template-content",
-      //                       type: "ckeditor",
-      //                       metaType: "text",
-      //                       datatype: "string",
-      //                       required: true,
-      //                       onlyDisplay: false,
-      //                       standalone: false,
-      //                       order: 2,
-      //                       width: 24,
-      //                       events: {
-      //                         blur: this.onBlur,
-      //                         afterPaste: this.afterPaste,
-      //                         // change: this.onChange,
-      //                       },
-      //                       colStyle: {
-      //                         display: (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) ? 'none' : '',
-      //                       },
-      //                       customComponent: true,
-      //                       getEditorInstanse: this.getEditorInstanse,
-      //                       supportedEvents: [
-      //                         "onContentChange",
-      //                       ],
-      //                     },
-      //                     {
-      //                       id: "edmeditor",
-      //                       type: "edmeditor",
-      //                       metaType: "text",
-      //                       datatype: "string",
-      //                       required: true,
-      //                       onlyDisplay: true,
-      //                       standalone: false,
-      //                       width: 24,
-      //                       order: 2,
-      //                       customComponent: true,
-      //                       // getEditorInstanse: this.getEditorInstanse,
-      //                       colStyle: {
-      //                         display: (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) ? '' : 'none',
-      //                       },
-      //                       supportedEvents: [
-      //                         // "onContentChange",
-      //                       ],
-      //                     },
-      //                   ],
-      //                 },
-      //               ],
-      //             },
-      //           ],
-      //         },
-      //       ],
-      //       type: "tabs",
-      //       defaultPanes: 1,
-      //       additionalPanes: 0,
-      //       id: "pane",
-      //       tabBarExtraContent: {
-      //         sections: [
-      //           {
-      //             type: "multicols",
-      //             actionFields: [],
-      //             inputFields: [
-      //               {
-      //                 cols: [
-      //                   {
-      //                     id: "add-language-button",
-      //                     metaType: "submit-button",
-      //                     type: "customPopover",
-      //                     customComponent: true,
-      //                     onlyDisplay: true,
-      //                     styling: "semantic",
-      //                     order: 3,
-      //                     width: 3,
-      //                     colStyle: {
-      //                       color: `rgb(78, 146, 229)`,
-      //                       fontSize: '14px',
-      //                       fontFamily: 'open-sans',
-      //                       lineHeight: '24px',
-      //                       textAlign: 'center',
-      //                       cursor: 'pointer',
-      //                       display: (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "timeline" )) ? 'none' : '',
-      //                     },
-      //                     popOverList: this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details.supported_languages ? this.props.Global.currentOrgDetails.basic_details.supported_languages : [],
-      //                     baseLanguage: this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en',
-      //                     submitAction: "addLanguage",
-      //                     supportedEvents: [
-      //                       "addLanguage",
-      //                     ],
-      //                   },
-      //                   {
-      //                     id: "tagList",
-      //                     label: "Tags",
-      //                     type: "tag-list",  //Resembles component to be used
-      //                     metaType: "List",
-      //                     datatype: "select",
-      //                     required: true,
-      //                     fluid: true,
-      //                     onlyDisplay: true,
-      //                     styling: "semantic",
-      //                     order: 1,
-      //                     style: {
-      //                       border: "none",
-      //                     },
-      //                     customComponent: true,
-      //                     width: 3,
-      //                     offset: 11,
-      //                     supportedEvents: [
-      //                       'onTagSelect',
-      //                     ],
-      //                   },
-      //                   {
-      //                     id: "insert-image",
-      //                     metaType: "label",
-      //                     type: "div",  //Resembles component to be used
-      //                     primitive: true,
-      //                     value: "Insert Image",
-      //                     fluid: true,
-      //                     onlyDisplay: false,
-      //                     styling: "semantic",
-      //                     order: 1,
-      //                     customComponent: false,
-      //                     submitAction: "onImageSelect",
-      //                     style: {
-      //                       color: "#4E92E5",
-      //                       fontSize: "14px",
-      //                       fontFamily: "open-sans",
-      //                       lineHeight: "24px",
-      //                       textAlign: "center",
-      //                       cursor: "pointer",
-      //                     },
-      //                     width: 3,
-      //                     supportedEvents: [
-      //                       "onImageSelect",
-      //                     ],
-      //                   },
-      //                   {
-      //                     id: "mark-final-version-label",
-      //                     metaType: "label",
-      //                     type: "div",
-      //                     primitive: true,
-      //                     value: "Mark as Final",
-      //                     onlyDisplay: true,
-      //                     customComponent: false,
-      //                     order: 3,
-      //                     width: 3,
-      //                     fluid: false,
-      //                     style: {
-      //                       color: "#4E92E5",
-      //                       fontSize: "14px",
-      //                       fontFamily: "open-sans",
-      //                       lineHeight: "24px",
-      //                       textAlign: "center",
-      //                       cursor: "pointer",
-      //                       display: (this.props.location.query.type === 'embedded') ? "none" : "",
-      //                     },
-      //                     submitAction: "markFinalVersion",
-      //                     supportedEvents: [
-      //                       "markFinalVersion",
-      //                     ],
-      //                   },
-      //                   {
-      //                     id: "tab-options-popover",
-      //                     metaType: "display",
-      //                     colStyle: {
-      //                       flex: 0,
-      //                     },
-      //                     type: "popover",
-      //                     customComponent: false,
-      //                     styling: "semantic",
-      //                     order: 3,
-      //                     width: 1,
-      //                     fluid: false,
-      //                     onlyDisplay: true,
-      //                     submitAction: "onTabOptionSelect",
-      //                     supportedEvents: [
-      //                       "onTabOptionSelect",
-      //                     ],
-      //                     content: {
-      //                       sections: [
-      //                         {
-      //                           type: "multicols",
-      //                           inputFields: [
-      //                             {
-      //                               cols: [
-      //                                 {
-      //                                   id: "duplicate-version-label",
-      //                                   metaType: "label",
-      //                                   type: "div",
-      //                                   primitive: true,
-      //                                   value: "Duplicate Version",
-      //                                   onlyDisplay: true,
-      //                                   customComponent: false,
-      //                                   order: 3,
-      //                                   fluid: false,
-      //                                   colStyle: {
-      //                                     display: (this.props.location.query.type === 'embedded') ? "none" : "",
-      //                                   },
-      //                                   className: "version-popover",
-      //                                   submitAction: "duplicateVersion",
-      //                                   supportedEvents: [
-      //                                     "duplicateVersion",
-      //                                   ],
-      //                                 },
-      //                               ],
-      //                             },
-      //                             {
-      //                               cols: [
-      //                                 {
-      //                                   id: "delete-version-label",
-      //                                   metaType: "label",
-      //                                   type: "div",
-      //                                   primitive: true,
-      //                                   value: "Delete Version",
-      //                                   onlyDisplay: true,
-      //                                   customComponent: false,
-      //                                   order: 3,
-      //                                   fluid: false,
-      //                                   colStyle: {
-      //                                     display: (this.props.location.query.type === 'embedded') ? "none" : "",
-      //                                   },
-      //                                   className: "version-popover",
-      //                                   submitAction: "deleteVersion",
-      //                                   supportedEvents: [
-      //                                     "deleteVersion",
-      //                                   ],
-      //                                 },
-      //                               ],
-      //                             },
-      //                             {
-      //                               cols: [
-      //                                 {
-      //                                   id: "delete-language-label",
-      //                                   metaType: "label",
-      //                                   type: "div",
-      //                                   primitive: true,
-      //                                   value: "Delete Language",
-      //                                   onlyDisplay: true,
-      //                                   customComponent: false,
-      //                                   order: 3,
-      //                                   fluid: false,
-      //                                   className: "version-popover",
-      //                                   submitAction: "deleteLanguage",
-      //                                   supportedEvents: [
-      //                                     "deleteLanguage",
-      //                                   ],
-      //                                 },
-      //                               ],
-      //                             },
-      //                             {
-      //                               cols: [
-      //                                 {
-      //                                   id: "switch-editor-label",
-      //                                   metaType: "label",
-      //                                   type: "div",
-      //                                   primitive: true,
-      //                                   value: "Switch Editor",
-      //                                   onlyDisplay: true,
-      //                                   customComponent: false,
-      //                                   order: 4,
-      //                                   fluid: false,
-      //                                   className: "version-popover",
-      //                                   submitAction: "switchEditor",
-      //                                   supportedEvents: [
-      //                                     "switchEditor",
-      //                                   ],
-      //                                   style: {
-      //                                     display: (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) ? '' : 'none',
-      //                                   },
-      //                                 },
-      //                               ],
-      //                             },
-      //                           ],
-      //                           actionFields: [],
-      //                         },
-      //                       ],
-      //                     },
-      //                     value: {
-      //                       sections: [
-      //                         {
-      //                           type: "multicols",
-      //                           inputFields: [
-      //                             {
-      //                               cols: [
-      //                                 {
-      //                                   id: "tab-option-icon",
-      //                                   metaType: "display",
-      //                                   type: "icon",
-      //                                   onlyDisplay: true,
-      //                                   primitive: false,
-      //                                   value: "",
-      //                                   customComponent: false,
-      //                                   order: 3,
-      //                                   fluid: false,
-      //                                 },
-      //                               ],
-      //                             },
-      //                           ],
-      //                           actionFields: [],
-      //                         },
-      //                       ],
-      //                     },
-      //                     trigger: "click",
-      //                     placement: "bottomLeft",
-      //                   },
-      //                 ],
-      //               },
-      //             ],
-      //           },
-      //         ],
-      //       },
-      //       tabContent: {
-      //         sections: [
-      //           {
-      //             type: "multicols",
-      //             inputFields: [
-      //               {
-      //                 rowStyle: {
-      //                   display: "flex",
-      //                   flex: 1,
-      //                 },
-      //                 cols: [
-      //                   {
-      //                     id: "tab-header",
-      //                     metaType: "label",
-      //                     value: "English",
-      //                     primitive: true,
-      //                     dynamicTab: false,
-      //                     type: "div",
-      //                     width: 5,
-      //                     offset: 0,
-      //                     onlyDisplay: true,
-      //                     colStyle: {
-      //                       flex: 1,
-      //                     },
-      //                     supportedEvents: [
-      //                       "onChange",
-      //                     ],
-      //                   },
-      //                 ],
-      //               },
-      //             ],
-      //             actionFields: [],
-      //           },
-      //         ],
-      //       },
-      //       label: "Version",
-      //       onlyDisplay: true,
-      //       supportedEvents: [
-      //         "onTabChange",
-      //       ],
-      //       isActive: true,
-      //     },
-      //   ],
-      //   channel: "EMAIL",
-      // },
-      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.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details.supported_languages ? this.props.Global.currentOrgDetails.basic_details.supported_languages : [];
-    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() {
-    console.log('new log 2');
-    console.log('Dark KNight', this.props.Templates, this.props.Email, this.props.Global, this.supportedLanguages);
-    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',
-        },
-      ];
-      // console.log('New Form Data Preparing ', this.initFormData());
-      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);
-      }
-    }
-    console.log('Form Data ', formData);
-    this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData}, () => {
-      // this.injectEvents(this.state.schema);
-    });
-
-    // setTimeout(() => {
-    //     // this.getFormData();
-    //   this.startTemplateCreation();
-    // }, 15000);
-  }
-
-  componentDidMount() {
-    console.log('email container mounted');
-    const query = {
-      layout: 'EMAIL',
-      type: 'LAYOUT',
-    };
-    this.props.globalActions.fetchSchemaForEntity(query);
-    window.addEventListener("message", this.handleFrameTasks);
-    if (this.props.location.query.type === 'embedded') {
-      this.showNext();
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    console.log('setting new language Next Props email', nextProps, this.state);
-    // 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 )) {
-      console.log('setting new language content props', nextProps.Templates.selectedEmailLayout);
-      this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
-    }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      console.log('Schema test 1 ', newSchema);
-      this.setState({schema: newSchema});
-      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;
-        }
-        this.props.globalActions.fetchSchemaForEntity(query);
-      }
-      setTimeout(() => {
-        this.showSubject();
-      }, 0);
-    }
-    if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details && !_.isEmpty(nextProps.Global.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',
-        },
-      ];
-      // console.log('New Form Data Preparing ', this.initFormData());
-      formData['template-version'] = "version 1";
-      //const that = this;
-      this.setState({formData}, () => {
-        // setTimeout(() => {
-        //     this.getFormData();
-        //   that.startTemplateCreation();
-        // }, 15000);
-      });
-    } else if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details) {
-      // this.injectEvents(this.state.schema);
-      const baseLanguage = nextProps.Global.currentOrgDetails.basic_details.base_language;
-      if (this.state.formData[`${this.state.currentTab - 1}`] && _.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages)) {
-        console.log('Language Empty ', this.state.formData);
-        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);
-        console.log('Schema test 2', schema);
-        const formData = _.cloneDeep(this.state.formData);
-        const container = schema.containers[0];
-        // const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
-        if (baseLanguage === formData[0].activeTab) {
-          container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
-        } else {
-          container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
-        }
-        this.setState({schema});
-      }
-
-      // console.log('isTagLoaded', this.isTagLoaded);
-      // if (!this.isTagLoaded) {
-      //   this.isTagLoaded = true;
-      //   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)) {
-        console.log('setting edit data in email', nextProps.Email.templateDetails);
-        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) {
-        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.Global.currentOrgDetails.basic_details.base_language;
-        console.log('Got src', this.state.currentTab, nextProps.Email.CmsSettings, langId, nextProps.Global.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);
-        console.log('edm trying to set data', langIndex, langId, formData[this.state.currentTab - 1].activeTab, apiLangId);
-        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;
-            // console.log('edm trying to set data', index, langIndex, tempPane);
-            if (parseInt(index, 10) === parseInt(langIndex, 10)) {
-              // console.log('edm trying to set data done', index, langIndex, tempPane);
-              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
-              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
-            }
-          });
-          console.log('Schema test 3', schema);
-          this.setState({schema, isSchemaChanged: true});
-        } else {
-          _.forEach(temp.panes, (pane, index) => {
-            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: ""};
-            }
-          });
-          console.log('Schema test 4', schema);
-          this.setState({schema, isSchemaChanged: true});
-          let html = decodeURIComponent(nextProps.Email.CmsSettings.htmlContent);
-          console.log('Before ', html, nextProps.Email.CmsSettings.htmlContent);
-          html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, '"');
-          console.log('html content ', html);
-          formData[this.state.currentTab - 1][langId]["template-content"] = html;
-          if (window.CKEDITOR && apiLangId !== "undefined") {
-            const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
-            console.log('email switch data name', instanceName);
-            _.forEach(window.CKEDITOR.instances, (winInstance) => {
-              const tempInstance = winInstance;
-              console.log('email switch data instance', winInstance, winInstance.name);
-              if (winInstance.name === instanceName) {
-                console.log('setting instance name after loading', winInstance, name);
-                tempInstance.setData(html);
-              } else if (winInstance.name.indexOf('editor') !== -1) {
-                tempInstance.setData(html);
-              }
-            });
-          }
-        }
-
-        this.setState({ formData }, () => {
-          this.hideEdmOptions(nextProps.Email.CmsSettings.isDragDrop);
-        });
-      }
-
-      if (nextProps.Email.createResponse && nextProps.Email.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);
-        this.props.actions.clearCRUDResponse();
-        const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-        const type = this.props.location.query.type;
-        const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
-        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},
-        });
-      }
-      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)) {
-        const formData = _.cloneDeep(this.state.formData);
-        if (nextProps.Email.langId && nextProps.Email.langId !== 'undefined') {
-          console.log('setting template content', nextProps.Email.cmsData, decodeURIComponent(nextProps.Email.cmsData));
-          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 {
-          console.log('email switch data ', this.state.currentTab, formData, formData[`${this.state.currentTab - 1}`].activeTab);
-          const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(formData[this.state.currentTab - 1].activeTab);
-          const instanceName = `template-content${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`;
-          console.log('email switch data name', instanceName);
-          _.forEach(window.CKEDITOR.instances, (winInstance) => {
-            const temp = winInstance;
-            console.log('email switch data instance', winInstance, winInstance.name);
-            if (winInstance.name === instanceName) {
-              console.log('setting instance name after loading', winInstance, name);
-              temp.setData(decodeURIComponent(nextProps.Email.cmsData));
-            } else if (winInstance.name.indexOf('editor') !== -1) {
-              temp.setData(decodeURIComponent(nextProps.Email.cmsData));
-            }
-          });
-          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
-          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop = false;
-          formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id = "";
-          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;
-          }
-          console.log('ckeditor trying to set ckeditor data');
-        }
-        console.log('setting template content final', formData);
-        this.setState({ formData }, () => {
-          if (nextProps.Email.langId) {
-            this.shouldStartValidation();
-          }
-        });
-      }
-
-      if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
-        let injectedTags = _.cloneDeep(this.state.injectedTags);
-        delete injectedTags["Registration custom fields"];
-        delete injectedTags["Store custom fields"];
-        delete injectedTags["Transaction custom fields"];
-        injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-        console.log('new injected tags', nextProps.metaEntities.tags.custom);
-        if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-          delete injectedTags["Registration custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-          delete injectedTags["Store custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-          delete injectedTags["Transaction custom fields"];
-        }
-        this.setState({injectedTags});
-      }
-
-      if ( !_.isEqual(nextProps.Email.uploadAssetSuccess, this.props.Email.uploadAssetSuccess) && nextProps.Email.uploadAssetSuccess) {
-        console.log('Post on will receive props');
-        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) {
-          console.log('Handle EDM ', this.edmEvent, JSON.parse(this.edmEvent.data)._dynId, nextProps.Email.uploadedAssetData.metaInfo.secure_file_path);
-          const evtData = JSON.parse(this.edmEvent.data);
-          if (evtData.action === 'editBackground') {
-            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.Global.currentOrgDetails.basic_details.supported_languages, this.props.Global.currentOrgDetails.basic_details.supported_languages)) {
-        this.supportedLanguages = nextProps.Global.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() {
-    console.log('removed listener create');
-    this.resetStateValue();
-    window.removeEventListener("message", this.handleFrameTasks);
-    this.props.actions.clearStoreValues();
-  }
-
-  onFormDataChange = (formData, tabCount, currentTab) => {
-    console.log('Form data changed is ', formData, tabCount, currentTab);
-    // this.transformFormData(formData);
-    this.setState({formData, tabCount, isSchemaChanged: false});
-    if (currentTab) {
-      this.setState({currentTab});
-    }
-    //this.resetCkEditorInstance(currentTab, formData);
-  }
-
-  onChange = (evt) => {
-    const formData = _.cloneDeep(this.state.formData);
-    console.log('oncontentchange onChange ', evt, evt.editor.getData());
-    //if (evt.editor.name.indexOf('editor') === -1) {
-    // _.forEach(window.CKEDITOR.instances, (winInstance) => {
-    //   const temp = winInstance;
-    //   if (winInstance.name === evt.editor.name) {
-    //     console.log('setting instance name after loading', winInstance, name);
-    //     setTimeout(() => {
-    //       //temp.name = id;
-    //     }, 1000);
-    //     //temp.name = id;
-    //     console.log('setting instance name after loading 2', winInstance, name);
-    //   }
-    // });
-    //}
-    if (!formData[this.state.currentTab - 1][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop) {
-      formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
-      if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
-        formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
-      }
-      console.log("Modified Form Data ", formData);
-      this.setState({formData, content: evt.editor.getData()}, () => {
-        console.log('Dark Knight ', this.state.content);
-      });
-    }
-  }
-
-  onBlur = (evt) => {
-    console.log("onBlur fired with event info: ", evt);
-  }
-
-  onTabChange(data, formData) {
-    console.log('inside parent ontabchange', data, this.state);
-    //this.resetCkEditorInstance(data, formData);
-    const schema = _.cloneDeep(this.state.schema);
-    const container = schema.containers[`${data - 1}`];
-    if (formData[`${data - 1}`][formData[`${data - 1}`].activeTab].is_drag_drop) {
-      container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: ""};
-      container.tabBarExtraContent.sections[0].inputFields[0].cols[2].style.display = "none";
-    } else {
-      container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
-      container.tabBarExtraContent.sections[0].inputFields[0].cols[2].style.display = "";
-    }
-    const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
-    if (baseLanguage === formData[`${data - 1}`].activeTab) {
-      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});
-  }
-
-  onTemplateNameChange = (name) => {
-    console.log('Template name changed to ', name);
-  }
-
-  onTagSelect = (data, currentTab, value) => {
-    console.log('On Tag selection ', data, currentTab, value);
-    const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
-    const formData = _.cloneDeep(this.state.formData);
-    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-    console.log('isEdmsupport', isEdmSupport);
-    if (isDragDrop && isEdmSupport) {
-      const 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 {
-      console.log('tag', this.state, this.state.editorInstanse);
-      this.state.editorInstanse.insertHtml(`{{${data}}}`);
-      //this.resetCkEditorInstance(currentTab, formData, true, data);
-    }
-  }
-
-  onImageSelect = (data) => {
-    console.log('Calling', data);
-    this.setState({ showImageSelectionBox: true }, () => {
-      const params = {
-        name: this.state.searchText,
-        sortBy: 'Most Recent',
-      };
-      this.fetchAllAssets({params, resetPage: true});
-      // this.props.actions.getAllAssets("image", params);
-    });
-  }
-
-  getValidationData = () => {
-    console.log('all data save getting validation data');
-    const that = this;
-    const formData = _.cloneDeep(this.state.formData);
-    _.forEach(formData, (val, index) => {
-      if (!isNaN(index)) {
-        _.forEach(val.selectedLanguages, (language) => {
-          console.log('all data save language', language, val[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);
-    console.log('Setting new language content', formData, this.state.settingLanguage);
-    const currentTabData = formData[currentTab][this.state.settingLanguage.iso_code];
-    currentTabData.is_drag_drop = false;
-    currentTabData.drag_drop_id = "";
-    const newActiveTab = this.state.settingLanguage.iso_code;
-    currentTabData["template-content"] = content;
-    formData[currentTab].activeTab = newActiveTab;
-    if (currentTabData.edmeditorsrc) {
-      delete currentTabData.edmeditorsrc;
-    }
-    formData[currentTab].selectedLanguages.push(newActiveTab);
-    console.log('setting new language content final', formData);
-  //  this.setState({formData});
-    // const container = schema.containers[this.state.currentTab - 1];
-    // const temp = container;
-    // const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
-    // console.log('switch language Tab ', langTab, this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages, this.state.formData[`${this.state.currentTab - 1}`].activeTab);
-    // temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-    // temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-    // temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
-    this.props.templatesActions.resetUploadData();
-    this.setState({formData, languageDataSet: false, addLanguageType: ''});
-  }
-
-  getParameterByName = (name, url) => {
-    const match = RegExp(`[?&]${name}=([^&]*)`).exec(url);
-    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
-  }
-
-  getFormData = (e, value) => {
-    this.setState({getFormDataValue: value, gettingFormData: true}, () => {
-      this.saveValidationData();
-    });
-    // console.log('posting final result', this.state.formData);
-    // const response = {
-    //   action: "getFormData",
-    //   postAction: value || 'next',
-    //   value: this.transformFormData(this.state.formData),
-    //   validity: this.state.isFormValid,
-    // };
-    // console.log('Get Data', response);
-    // this.setState({checkValidation: true});
-    // if (e) {
-    //   e.source.postMessage(JSON.stringify(response), e.origin);
-    // }
-    // return response;
-  }
-
-  setFormValidity = (isFormValid) => {
-    this.setState({isFormValid});
-  }
-
-  setEditData(editData) {
-    console.log('Edit Data is ', editData);
-    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-    const formData = _.cloneDeep(this.state.formData);
-
-    const tabIndex = this.state.currentTab + 1;
-    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone() : _.cloneDeep(this.state.schema);
-    const containers = _.cloneDeep(schema.containers.slice());
-    let tabKey = "";
-    let currentTab = _.cloneDeep(this.state.currentTab);
-    const isLanguageSupport = this.props.location.query.isLanguageSupport;
-    const type = this.props.location.query.type;
-
-    formData['template-name'] = editData.name;
-    formData.base = editData.versions.base;
-
-    _.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);
-            console.log('trying to clone in add version', JSON.stringify(sect), index);
-            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);
-            }
-            console.log('returning section', sect);
-            sections.push(sect);
-            return true;
-          });
-          firstPane.sections = sections;
-          containers[0].panes = [];
-          containers[0].panes.push(firstPane);
-          schema.containers.push(containers[0]);
-          console.log('Pane Version', containers);
-
-          // _.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.Global.currentOrgDetails.basic_details.base_language;
-        _.forEach((data.selectedLanguages), (language) => {
-          if (data.tabKey === data[language].tabKey) {
-            data.activeTab = language;
-          }
-        });
-        if (data.constructor === Object) {
-          console.log("Edit Data ", data, 'Tab key ', editData.versions.base.tabKey, data.tabKey, index, schema.containers, formData);
-          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;
-            console.log('Dummy Random Tabkey Found ', tabKey, index, schema.containers[index].isActive);
-          } else {
-            schema.containers[index].isActive = false;
-            console.log('Dummy Random ', schema.containers[index].isActive, index);
-          }
-          // const isLanguageSupport = this.props.location.query.isLanguageSupport;
-          console.log('Schema Test ', schema, schema.containers[index]);
-          _.forEach(data.selectedLanguages, (lang, langIndex) => {
-            console.log('Language ', lang, langIndex);
-            if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
-              const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
-              const tabContentSection = tabContent.inputFields[0].cols[0];
-              const panes = containers[0].panes.slice();
-              const firstPane = _.cloneDeep(panes[0]);
-              const sections = [];
-              _.forEach(firstPane.sections, (section) => {
-                let sect = _.cloneDeep(section);
-                console.log('trying to clone in add version', JSON.stringify(sect), tabIndex);
-                if (sect.type === 'col-label') {
-                  sect = this.cloneColLabel(sect, (langIndex + 1));
-                } else if (sect.type === 'multicols') {
-                  sect = this.cloneMultiCol(sect, (langIndex + 1));
-                } else if (sect.type === 'parent') {
-                  sect = this.cloneParent(sect, (langIndex + 1));
-                }
-                console.log('returning section', sect);
-                sections.push(sect);
-                return true;
-              });
-              // console.log('tabContent.inputFields[0].cols[0]', tabContentSection, this.state.currentTab);
-              console.log('Testing language', this.map[tabContentSection.id], tabContentSection.id, data, lang);
-              this.map[`template-content${data.selectedLanguages.indexOf(lang) + 1}`] = this.map['template-content'];
-              tabContentSection.id = `${tabContentSection.id}${index + 1}`;
-              tabContentSection.value = `${data[lang].language}`;
-              console.log('cloned final sections', sections, tabContent);
-              firstPane.sections = sections;
-              firstPane.sectionsHeaders = [tabContent];
-              console.log('firstPane final version', JSON.stringify(firstPane));
-              // panes.push(firstPane);
-              console.log('initial panes', JSON.stringify(this.state.schema.containers));
-              schema.containers[index].panes.push(firstPane);
-            } else if (lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
-              delete data[lang];
-              data.selectedLanguages.splice(langIndex, 1);
-            }
-          });
-        }
-        if (data.base) {
-          formData.base = data;
-        }
-        formData[index] = data;
-      }
-    });
-
-    _.forEach(formData.base.selectedLanguages, (language) => {
-      if (formData.base.tabKey === formData.base[language].tabKey) {
-        formData.base.activeTab = language;
-      }
-    });
-
-    console.log('Edit Form Data ', formData, schema);
-    this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length }, () => {
-      console.log('Form Data Set ', this.state.formData);
-      _.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) {
-          console.log('making edm calls again');
-          this.props.actions.getCmsSetting('edm', editData.versions.base[language].drag_drop_id, 'open', language, isEdmSupport);
-        }
-      });
-      console.log('final form data edit', formData);
-      // this.resetCkEditorInstance(this.state.currentTab - 1, formData);
-      // this.setState({formData});
-    });
-  }
-
-  getMappedEvent = (id, event) => {
-    console.log('Map ', this.map, id, event);
-    return this.map[id][event];
-  }
-
-  getCurrentWindow = (e) => {
-    console.log('in email create', e);
-    const response = {
-      action: e.action,
-      value: 'edit',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  getEditorInstanse = (instance, id) => {
-    console.log('Got editor Instance ', instance, id);
-    window.CKEDITOR.on( 'instanceReady', ( event ) => {
-      this.setState({editorInstanse: event.editor});
-      event.editor.on( 'focus', () => {
-        console.log( 'focused', event.editor, this );
-        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}), () => {
-      console.log('all data save count validating', this.state.saveCount, this.state.cmsDataCount);
-      if (this.state.targetSaveCount === this.state.cmsDataCount) {
-        console.log('validation final starting edm validation');
-        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)) {
-              console.log('all data 4');
-              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) {
-            console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
-            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,
-    }, () => {
-      console.log('Unmount value cleared', this.state);
-    });
-  }
-
-  resetCkEditorInstance = (data, formData, onInsert, value, isImage) => {
-    const currentLang = formData[`${data - 1}`].selectedLanguages.indexOf(formData[`${data - 1}`].activeTab);
-    const langIndex = formData[`${data - 1}`].selectedLanguages.indexOf(formData[`${data - 1}`].activeTab);
-    let instance1 = window.CKEDITOR.instances[`editor${currentLang + 1}`];
-    const instanceCount = 0;
-    const instanceArray = [];
-    _.forEach(window.CKEDITOR.instances, (instance, index) => {
-      console.log('all ck instances ', instance, index, instanceCount, langIndex);
-      const name = instance.name;
-      if (instance.status === "destroyed") {
-        return;
-      }
-      let instanceIdx = 0;
-      if (name.indexOf('template-content') > -1 && name !== 'template-content') {
-        instanceIdx = parseInt(name.replace('template-content', ''), 10) - 1;
-        const obj = {
-          idx: instanceIdx,
-          instance,
-        };
-        instanceArray.push(obj);
-      } else {
-        const obj = {
-          idx: 0,
-          instance,
-        };
-        instanceArray.push(obj);
-      }
-    });
-    console.log('sorted instance array before sort', instanceArray);
-    instanceArray.sort( (a, b) => {
-      const idxA = a.idx;
-      const idxB = b.idx;
-      if (idxA < idxB) {
-        return -1;
-      } else if (idxA > idxB) {
-        return 1;
-      }
-      return 0;
-    });
-    console.log('sorted instance array after sort', instanceArray);
-    //instanceCount += 1;
-    // if (instanceIdx === langIndex) {
-    const instance = instanceArray[langIndex].instance;
-    console.log('setting instance as ', instance, instance.name);
-    instance1 = instance;
-    this.setState({editorInstanse: instance1}, () => {
-      if (onInsert && !isImage) {
-        this.state.editorInstanse.insertHtml(`{{${value}}}`);
-      } else if (onInsert) {
-        this.state.editorInstanse.insertHtml(`<img src='${value.metaInfo.secure_file_path}' alt='Capillary Image'>`);
-      }
-    });
-  }
-
-  uploadFile = () => {
-    console.log('uploadFile');
-    document.getElementById('filename').click();
-    console.log('Upload File initiated');
-  };
-
-  useEditor = () => {
-    console.log('useEditor');
-    //this.toggleEdmEmailTemplateSelection();
-    this.setState({addLanguageType: "useEditor"}, () => {
-      this.setState({showModal: false}, () => {
-        this.toggleEdmEmailTemplateSelection();
-      });
-    });
-  }
-
-  copyPrimaryLanguage = () => {
-    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-    console.log('copy primary language');
-    this.setState({addLanguageType: "copyPrimaryLanguage"}, () => {
-      this.setState({showModal: false});
-      const formData = _.cloneDeep(this.state.formData);
-      const currentTab = this.state.currentTab - 1;
-      const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en';
-      if (formData[currentTab][baseLanguage].is_drag_drop) {
-        this.props.actions.getCmsSetting('edm', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
-      }
-    });
-  }
-
-  handleFileUpload = (e, {files}) => {
-    if (files.length === 0) {
-      return;
-    }
-    const fileExtension = files[0].name.split('.').pop();
-    const supportedZipFormats = ['zip'];
-    console.log('File Params ', fileExtension);
-    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
-      this.setState({ addLanguageType: "upload"}, () => {
-        console.log('Zip Format got');
-        this.props.templatesActions.handleZipUpload(files[0]);
-        document.getElementById("filename").value = "";
-        this.setState({showModal: false});
-      });
-    } else if (fileExtension === 'html' || fileExtension === 'htm') {
-      console.log('html Format got');
-      const reader = new FileReader();
-      reader.onload = () => {
-        this.setState({ addLanguageType: "upload"}, () => {
-          const text = reader.result;
-          this.props.templatesActions.handleHtmlUpload(text);
-          document.getElementById("filename").value = "";
-          this.setState({showModal: false});
-        });
-      };
-      reader.readAsText(files[0]);
-    } else {
-      alert('Invalid file type added! Please Give a proper zip/html file');
-      console.log('Invalid file type added! Please Give a proper zip/html file');
-    }
-  };
-
-  uploadImages(e, {files}) {
-    e.preventDefault();
-    const _URL = window.URL || window.webkitURL;
-    const file = files[0];
-    const fileSize = (file.size / ( 1024 * 1024 ));
-    if (fileSize > 5) {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages.uploadSizeError), true);
-      this.props.globalActions.addMessageToQueue(message);
-      document.getElementById("fileName").value = "";
-      return;
-    }
-    const img = new Image();
-    const that = this;
-    img.src = _URL.createObjectURL(file);
-    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);
-    console.log('Delete Language ', formData, val);
-    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});
-    console.log('Schema ', schema, formData, val);
-  }
-
-  initFormData(props, fromMount) {
-    console.log('init email', props, fromMount);
-    let newFormData = {};
-    if (props.Global.currentOrgDetails && props.Global.currentOrgDetails.basic_details) {
-      console.log('init email actual', props, fromMount);
-      newFormData = {
-        "0": {},
-        "template-name": "",
-        "base": {},
-      };
-      const baseData = {};
-      const baseLanguage = props.Global.currentOrgDetails.basic_details.base_language;
-      this.supportedLanguages = props.Global.currentOrgDetails.basic_details.supported_languages;
-      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) => {
-    console.log('Transforming data ', 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.Global.currentOrgDetails.basic_details.base_language) {
-          newFormData.base = _.cloneDeep(tmpData);
-        }
-        newFormData.secondary_templates.push({template_data: tmpData});
-        console.log('Tranforming data for embedded mode', tmpData);
-      }
-    });
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "coupon_expiry" || this.props.location.query.module === "timeline" || this.props.location.query.module === "library")) {
-      newFormData.base.subject = formData['template-subject'];
-    }
-
-    console.log('This is test subject ', newFormData);
-    return newFormData;
-  }
-
-  handleFrameTasks = (e) => {
-    console.log('data listened to is', e.data);
-    const type = this.isValidJson(e.data) ? JSON.parse(e.data) : e.data;
-    console.log('data type', typeof type);
-    if (typeof type === 'object') {
-      console.log('received something', type);
-      const action = type.action;
-      switch (action) {
-        case "startTemplateCreation":
-          this.startTemplateCreation(type.value);
-          break;
-        case "edit":
-          this.edmEvent = e;
-          if (type.elementJson.type === "IMAGE") {
-            console.log('Data Inside ', type);
-            this.onImageSelect();
-          }
-          break;
-        case "editBackground":
-          this.edmEvent = e;
-          if (type.elementJson.type === "BOX" || type.elementJson.type === "BUTTON" || type.elementJson.type === "GENERAL") {
-            console.log('Data Inside ', type);
-            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 {
-      console.log('Else Type ', type);
-      switch (type) {
-        case "getFormData":
-          this.getFormData(e);
-          break;
-        case "startTemplateCreation":
-          console.log('Starting to create template');
-          //this.getFormData(e);
-          break;
-        case "moveToTemplates":
-          console.log('moving to templates');
-          this.moveToTemplates();
-          break;
-        case "validateContent":
-          console.log('validating Content');
-          this.validateContent(e);
-          break;
-        case "Save result: success":
-          this.handleEdmSave();
-          break;
-        case "JsonChanged":
-          this.edmEvent = e;
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  isValidJson = (str) => {
-    try {
-      JSON.parse(str);
-    } catch (e) {
-      return false;
-    }
-    return true;
-  }
-
-  handleEdmSave = () => {
-    console.log('all data save', this.state.mode, this.state.targetSaveCount, this.state.saveCount);
-    if (this.state.mode === "save") {
-      this.setState((prevState) => ({ saveCount: prevState.saveCount + 1}), () => {
-        console.log('all data save count', this.state.saveCount);
-        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);
-            console.log('switch language Tab ', langTab, formData[`${this.state.currentTab - 1}`].selectedLanguages, formData[`${this.state.currentTab - 1}`].activeTab);
-            temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-            temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-            temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
-          }
-        });
-        schema = this.showInsertImageButton(schema);
-        console.log('Handle OK ', schema);
-        this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
-          this.injectEvents(schema);
-        });
-      }
-    }
-  }
-
-  handleImagePreviewClose = () => {
-    this.setState({ showImageSelectionBox: false });
-  }
-
-  handleContentChange = (data) => {
-    console.log('CKEditor Data changed ', 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, id) => {
-    console.log('Card Howering  ', isHovering, id);
-    if (!isHovering) {
-      // const data = _.find(this.props.Email.assetList, {_id: id});
-      // console.log('Found Data ', data);
-      // if (data) {
-      //   if (this.state.isDragDrop) {
-      //     console.log('Handle EDM ', isHovering, id);
-      //   } 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';
-              }
-            });
-          }
-        });
-      }
-    });
-    console.log('HandleEdmOption ', JSON.stringify(schema));
-    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 = "";
-          }
-        });
-      }
-    });
-    console.log('HandleHideMarkAsFinal ', JSON.stringify(schema));
-    this.setState({schema, isSchemaChanged: true});
-  }
-
-  showSubject = () => {
-    const schema = _.cloneDeep(this.state.schema);
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
-      this.props.location.query.module === "library")) {
-      schema.standalone.sections[0].inputFields[0].style.display = "";
-      schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
-    }
-    this.setState({schema});
-  }
-
-  handleOnItemClick = (isSelected, id) => {
-    console.log('Dummy ', isSelected, id, event);
-    const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
-    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-    if (isSelected) {
-      const data = _.find(this.props.Email.assetList, {_id: id});
-      console.log('Found Data ', data, this.state.isDragDrop);
-      if (data) {
-        if (isDragDrop && isEdmSupport) {
-          console.log('Handle EDM ', isSelected, id, this.edmEvent, JSON.parse(this.edmEvent.data)._dynId, data.metaInfo.secure_file_path);
-          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, val) => {
-    console.log('HandleVersion select', status, val);
-    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;
-    console.log('Selected Version', status, formData, val, versionIndex);
-    const newContainers = [];
-    _.forEach(schema.containers, (container, index) => {
-      console.log('Container Iteration ', 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 = (evt) => {
-    console.log("afterPaste fired with event info: ", evt);
-  }
-
-  deleteVersion = (data, currentTab) => {
-    console.log('deleting version', 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;
-    console.log('Current formData and Schema after delete', formData, schema);
-    this.setState({schema, tabCount: (this.state.tabCount - 1), currentTab: 1, isSchemaChanged: true, showModal: false});
-  }
-
-  switchEditor = () => {
-    console.log('Editor Switched');
-    this.setState({showConfirmationModal: true});
-  }
-
-  renameVersion = (data, currentTab) => {
-    console.log('renaming version', data, currentTab);
-  }
-
-  markFinalVersion = (data, currentTab) => {
-    const message = getMessageObject('success', this.props.intl.formatMessage(messages["Template Marked as Final Successfully"]), true);
-    this.props.globalActions.addMessageToQueue(message);
-    console.log('markFinal version', data, currentTab, this.state.schema);
-  }
-
-  duplicateVersion = (formData, currentTab) => {
-    console.log('duplicate version', formData, currentTab);
-    this.setState({formData}, () => {
-      this.addVersion(this.state.tabCount);
-    });
-  }
-
-  addVersion = (data) => {
-    if (this.state.schema.containers.length === 5) {
-      alert('You cant have more that 5 versions');
-      return;
-    }
-    console.log('adding version', data, this.state.formData);
-    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);
-      console.log('trying to clone in add version', JSON.stringify(sect), tabIndex);
-      if (sect.type === 'col-label') {
-        sect = this.cloneColLabel(sect, tabIndex);
-      } else if (sect.type === 'multicols') {
-        sect = this.cloneMultiCol(sect, tabIndex);
-      } else if (sect.type === 'parent') {
-        sect = this.cloneParent(sect, tabIndex);
-      }
-      console.log('returning section', sect);
-      sections.push(sect);
-      return true;
-    });
-    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);
-    });
-    console.log('Pane ', containers);
-
-    _.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}, () => {
-        console.log('adding from add language 1', this.props.Templates);
-        if (this.props.Templates.selectedEmailLayout && this.props.Templates.selectedEmailLayout !== '') {
-          console.log('adding from add language 2');
-          this.setNewLanguageContent(this.props.Templates.selectedEmailLayout);
-        }
-      });
-    }
-    let addLanguageLength = 1;
-    if (asyncLanguages) {
-      addLanguageLength = asyncLanguages.length;
-    }
-    let data = tempLang;
-    let tabKey = '';
-    let langTab = 0;
-    const schema = _.cloneDeep(this.state.schema);
-    const formData = _.cloneDeep(passedData);
-    for (let idx = 0; idx < addLanguageLength; idx += 1) {
-      let newActiveTab = this.state.settingLanguage ? this.state.settingLanguage.iso_code : 'en';
-      if (asyncLanguages) {
-        newActiveTab = asyncLanguages[idx].iso_code;
-        data = asyncLanguages[idx];
-      }
-      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;
-      console.log('adding language', data, formData, val, selectedLanguage, formData[`${this.state.currentTab - 1}`]);
-      const tabIndex = (selectedLanguage) + 1;
-      const containers = schema.containers.slice();
-      const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
-      const tabContentSection = tabContent.inputFields[0].cols[0];
-      const panes = containers[`${this.state.currentTab - 1}`].panes.slice();
-      const firstPane = _.cloneDeep(panes[0]);
-      const sections = [];
-      _.forEach(firstPane.sections, (section) => {
-        let sect = _.cloneDeep(section);
-        console.log('trying to clone in add version', JSON.stringify(sect), tabIndex);
-        if (sect.type === 'col-label') {
-          sect = this.cloneColLabel(sect, tabIndex);
-        } else if (sect.type === 'multicols') {
-          sect = this.cloneMultiCol(sect, tabIndex);
-        } else if (sect.type === 'parent') {
-          sect = this.cloneParent(sect, tabIndex);
-        }
-        console.log('returning section', sect);
-        sections.push(sect);
-        return true;
-      });
-      console.log('tabContent.inputFields[0].cols[0]', tabContentSection, this.state.currentTab);
-      tabContentSection.id = `${tabContentSection.id}${tabIndex}`;
-      tabContentSection.value = `${data.language}`;
-      console.log('cloned final sections', sections, tabContent);
-      _.forEach(sections[0].inputFields[0].cols, (inputField) => {
-        if (this.map[inputField.id] === undefined) {
-          if (inputField.id.indexOf('template-content') > -1) {
-            this.map[inputField.id] = this.map['template-content'];
-          } else if (inputField.id.indexOf('edmeditor2') > -1) {
-            this.map[inputField.id] = this.map.edmeditor2;
-          }
-        }
-      });
-      firstPane.sections = sections;
-      firstPane.sectionsHeaders = [tabContent];
-      console.log('firstPane final version', JSON.stringify(firstPane));
-      // panes.push(firstPane);
-      console.log('initial panes', JSON.stringify(this.state.schema.containers));
-      schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
-      // schema.containers[0].tabContent.sections.push(tabContent);
-      console.log('final schema after adding version', firstPane, schema);
-    }
-    //this.props.templatesActions.getEdmDefaultTemplates();
-    const container = schema.containers[this.state.currentTab - 1];
-    const temp = container;
-    console.log('switch language Tab ', langTab, formData[`${this.state.currentTab - 1}`].selectedLanguages, this.state.formData[`${this.state.currentTab - 1}`].activeTab);
-    if (this.state.addLanguageType === "upload") {
-      temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-      temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-      temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
-    }
-    temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
-    if (schema) {
-      this.setState({schema, isSchemaChanged: true, tabKey});
-      if (this.state.addLanguageType !== "upload") {
-        this.setState({addLanguageType: ''});
-      }
-      //this.toggleEdmEmailTemplateSelection();
-    }
-    // const mode = this.state.addLanguageMode;
-    // switch (mode) {
-    //   case "upload":
-    //
-    //   default:
-    //     break;
-    // }
-  }
-
-  openPreviewMode = (selectedAsset) => {
-    console.log('Open Preview Mode', selectedAsset);
-    const asset = selectedAsset;
-    asset.showButtons = asset.showButtons ? !asset.showButtons : true;
-    this.setState({selectedAsset: asset});
-  }
-
-  cloneParent = (section, tabIndex, noSuffix) => {
-    console.log('trying to clone', JSON.stringify(section), tabIndex);
-    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);
-      }
-      console.log('returning cloned parent section', sect);
-      childSections.push(sect);
-      return true;
-    });
-    console.log('returning cloned parent section final 1', JSON.stringify(childSections));
-    parentsect.childSections = childSections;
-    console.log('returning cloned parent section final', parentsect);
-    return _.cloneDeep(parentsect);
-  }
-
-  cloneColLabel = (sectionObj, tabIndex, noSuffix) => {
-    console.log('cloning cloneColLabel', sectionObj, tabIndex);
-    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;
-    console.log('cloned ifs are', section);
-    return section;
-  }
-
-  cloneMultiCol = (sectionObj, tabIndex, noSuffix) => {
-    console.log('cloning multicol ', sectionObj, tabIndex);
-    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;
-    console.log('cloned cols are', section);
-    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 = () => {
-    console.log("Inside ShowNext");
-    const response = {
-      action: "showNext",
-      value: true,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  moveToTemplates = () => {
-    console.log('in move to Templates');
-    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() {
-    console.log('Preparing Image Dataa ');
-    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;
-    console.log('now injecting events');
-    const temp = schema;
-    temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    console.log("Lang Test ", this.props.location.query.isLanguageSupport, (this.props.location.query.isLanguageSupport === false));
-    // 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.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details && this.props.Global.currentOrgDetails.basic_details.base_language && this.props.Global.currentOrgDetails.basic_details.base_language !== "" ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en';
-            const supportedLanguages = this.props.Global.currentOrgDetails.basic_details.supported_languages;
-            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;
-            newContainerInputFieldCol.colStyle.display = "none";
-            hideLang = true;
-          } else if (containerInputFieldCol.id === 'add-language-button') {
-            hideLang = true;
-          }
-          if (containerInputFieldCol.id === "mark-final-version-label") {
-            const newContainerInputFieldCol = containerInputFieldCol;
-            newContainerInputFieldCol.colStyle.display = "none";
-          }
-          // if (containerInputFieldCol.id === "tab-options-popover") {
-          //   const newContainerInputFieldCol = containerInputFieldCol;
-          //   newContainerInputFieldCol.colStyle.display = "none";
-          // }
-        });
-      }
-    });
-    _.forEach(temp.standalone.sections[1].inputFields[0].cols, (inputField) => {
-      if (inputField.id === "template-version") {
-        const iF = inputField;
-        iF.colStyle = {};
-        iF.colStyle.display = "none";
-      }
-    });
-    //}
-    console.log('final injected schema', schema);
-    this.setState({schema, isSchemaChanged: true}, () => {
-      if (type === 'embedded') {
-        this.removeStandAlone();
-      }
-      if (type === 'embedded' && (this.props.route.name === 'EmailView' || (this.props.location.query.module && (this.props.location.query.module.toLowerCase() === 'loyalty' || this.props.location.query.module.toLowerCase() === 'dvs' || this.props.location.query.module.toLowerCase() === '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 schema;
-  }
-
-  handleOnTagsContextChange = (data) => {
-    console.log('parent tags context', 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() {
-    const schema = _.cloneDeep(this.state.schema);
-    delete schema.standalone;
-    schema.standalone = {};
-    schema.standalone.sections = [];
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "coupon_expiry" || this.props.location.query.module === "timeline" ||
-      this.props.location.query.module === "library")) {
-      schema.standalone.sections.push(_.cloneDeep(this.state.schema.standalone.sections[0]));
-    }
-
-    _.forEach(schema.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);
-      }
-    });
-    this.setState({ schema, isSchemaChanged: true });
-    return schema;
-  }
-
-  startTemplateCreation(data) {
-    console.log('startTemplatecreations', 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"}]};
-    console.log('Start template creation ', data, this.props.location.query.isLanguageSupport, this.props.location.query.type === 'embedded', this.props.location.query.type === 'embedded' && !this.props.location.query.isLanguageSupport);
-    if (data && data.edit) {
-      console.log('startTemplateCreation');
-      // const formData = {'0': {}};
-      const formData = _.cloneDeep(this.state.formData);
-      formData[0].selectedLanguages = [];
-      let tabKey;
-      if (this.props.location.query.type === 'embedded' && (this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
-        formData['template-subject'] = data.base.subject ? data.base.subject : '';
-        const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
-        let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
-        console.log("startTemplatecreation before index", languageIndex, this.supportedLanguages, baseLanguage, formData);
-        if (languageIndex === -1) {
-          languageIndex = 0;
-        }
-        const tempData = {
-          "is_drag_drop": data.base.is_drag_drop,
-          "lang_id": this.supportedLanguages[languageIndex].lang_id,
-          "iso_code": this.supportedLanguages[languageIndex].iso_code,
-          "language": this.supportedLanguages[languageIndex].language,
-          "template-content": !data.base.is_drag_drop && data.base.is_drag_drop !== 1 ? data.base.html_content : "",
-        };
-        formData[0].base = true;
-        formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
-        formData[0][this.supportedLanguages[languageIndex].iso_code] = tempData;
-        formData[0].activeTab = this.supportedLanguages[languageIndex].iso_code;
-        tabKey = "2";
-        console.log("start Template creation midway data", formData, languageIndex);
-      } else {
-        const additionalLanguages = [];
-        _.forEach(data.secondary_templates, (templates) => {
-          console.log('creating form data', templates);
-          const id = "1";
-          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;
-          console.log('Language Index ', languageIndex, this.supportedLanguages);
-          // formData[0].tabkey = "1";
-          // formData[0] = {};
-          // formData[0].activeTab = this.props.Global.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]);
-      console.log('startTemplateCreation final ', formData);
-      this.setState({formData, loading: false, injectedTags: data.tags, tabKey, isDragDrop: (data.base.is_drag_drop !== 0 )}, () => {
-        // this.setState({tabKey: ''});
-        _.forEach(formData[0].selectedLanguages, (language) => {
-          if (formData[0][language].is_drag_drop) {
-            this.props.actions.getCmsSetting('edm', formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
-          }
-        });
-      });
-    } else {
-      this.setState({injectedTags: data.tags});
-    }
-  }
-
-  startLoading = (ifEdit) => {
-    console.log('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) => {
-          // console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        // console.log('should translate multicol', temp);
-        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);
-        });
-        // console.log('should translate multicol action', temp);
-        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);
-      });
-      // console.log('should translate collabel', temp);
-      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);
-      });
-      // console.log('should translate collabel action', temp);
-      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);
-    // console.log('whyyyy');
-    // if (!isValidated) {
-    //   return;
-    // }
-    //if (!this.state.startValidation) {
-    //  this.saveValidationData();
-    //  return;
-    //}
-    console.log('save form data', passedData, this.state.gettingFormData, this.state.startValidation, this.state);
-    if (this.state.gettingFormData) {
-      console.log('posting final result', passedData);
-      const response = {
-        action: "getFormData",
-        postAction: this.state.getFormDataValue || 'next',
-        value: this.transformFormData(passedData),
-        validity: this.state.isFormValid,
-      };
-      console.log('Get Data', response);
-      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});
-      return;
-    }
-    const formData = _.cloneDeep(passedData);
-    console.log('Saving form data', JSON.stringify(formData), this.state.tabCount);
-    const obj = {};
-    obj.versions = {
-      base: {},
-      history: [],
-    };
-    if (this.state.isEdit) {
-      obj._id = this.props.Email.templateDetails._id;
-    }
-    obj.type = 'EMAIL';
-    const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
-    let baseKey = -1;
-    //let saveCount = 0;
-    console.log('all data', this.state.currentTab);
-    _.forEach(formData, (data, index) => {
-      const newdata = data;
-      console.log('all data 2', newdata, index);
-      if (!isNaN(index) && newdata) {
-        const baseLangTabKey = newdata[baseLanguage].tabKey;
-        newdata.tabKey = baseLangTabKey;
-        newdata.activeTab = baseLanguage;
-        if (newdata.base) {
-          baseKey = baseLangTabKey;
-        }
-        _.forEach(newdata.selectedLanguages, (language) => {
-          // console.log('all data 3', newdata[language], language, this.state.currentTab, index, (index + 1), (index + 1) === this.state.currentTab, newdata[language].is_drag_drop);
-          // if (newdata[language].is_drag_drop && ((parseInt(index, 10) + 1) === this.state.currentTab)) {
-          //   console.log('all data 4');
-          //   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.activeTab = baseLanguage;
-    _.forEach(obj.versions.base.selectedLanguages, (language) => {
-      if (obj.versions.base[language].is_drag_drop) {
-        delete obj.versions.base[language].edmeditorsrc;
-      }
-    });
-    console.log('obj', obj);
-    // if (saveCount === 0) {
-    console.log('final save obj', obj);
-    this.props.actions.createTemplate(obj);
-    // } else {
-    //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
-    //     _.forEach(data.selectedLanguages, (language, langIndex) => {
-    //       if (data[language].is_drag_drop) {
-    //         console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
-    //         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);
-    console.log('switching editor midway', activeLangTab, langIndex, formData);
-    this.setState({mode: "switchEditor"}, () => {
-      console.log('posting message for switching editor', `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
-      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      win.postMessage("saveProject", '*');
-    });
-  }
-
-  handleCancel = () => {
-    this.setState({ showConfirmationModal: false });
-  }
-
-  handleCancelModal = () => {
-    this.setState({showModal: false});
-  }
-
-  openFileDialog() {
-    document.getElementById("fileName").click();
-  }
-
-  toggleEdmEmailTemplateSelection = () => {
-    console.log('toggle Selection ', this.state.showEdmEmailTemplates);
-    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;
-      console.log('Selected EDM Data ', data, this.state.formData[this.state.currentTab - 1].activeTab);
-      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,
-      // });
-    }
-  };
-
-  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;
-  }
-
-  render() {
-    // const pageHeading = (this.state.isEdit) ? this.props.intl.formatMessage(messages.editHeading) : this.props.intl.formatMessage(messages.createHeading);
-    // const actionComponents = '';
-    console.log('supported languages', this.supportedLanguages);
-    const filterContent = (
-      <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 style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
-          <span className="select-font">
-            <FormattedMessage {...messages.sortby} />
-          </span>
-          <Select
-            style={{marginLeft: '8px', width: 120, borderLeft: 'none', borderRight: 'none', borderTop: 'none'}}
-            className="select-font"
-            defaultValue="Most Recent"
-            onChange={this.handleSortingChange}
-          >
-            <Option className="select-font" value="Most Recent">
-              <FormattedMessage {...messages.mostRecent} />
-            </Option>
-            <Option className="select-font" value="Alphabetically">
-              <FormattedMessage {...messages.alphabetically} />
-            </Option>
-          </Select>
-        </div>
-      </div>
-    );
-    const schema = this.state.schema;
-    const spinning = this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
-    const previewHeader = (<h3>Email Preview</h3>);
-    const imagePreviewHeader = (<h3>Image Selection</h3>);
-    const imagePreviewContent = (
-      <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>
-        <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
-          <CardGrid
-            listItem={this.prepareImageData()}
-            filterContent={filterContent}
-            onHoverItem={this.handleOnHoverItem}
-            onItemClick={this.handleOnItemClick}
-            colNumber={2}
-            enablePagination
-          />
-        </Pagination>
-      </div>
-      );
-    console.log('Render Form Data ', this.state.formData, this.supportedLanguages, this.state);
-    if (!this.props.Global.currentOrgDetails || !this.props.Global.currentOrgDetails.basic_details) {
-      return (<div>Loading...</div>);
-    }
-    console.log('CMS Data ', this.props.Email.CmsSettings, this.props.Global.currentOrgDetails.basic_details.supported_languages);
-    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">
-        <Helmet
-          title="Email"
-          meta={[
-            { name: 'description', content: 'Description of Email' },
-          ]}
-        />
-        {/* <PageHeader pageHeading={pageHeading} /> */}
-        <Spin tip={loaderText} spinning={spinning}>
-          {this.props.location.query.type !== 'embedded' && <Row>
-            <Col span={24}>
-              <Breadcrumb>
-                <BreadcrumbItem>Campaigns</BreadcrumbItem>
-                <BreadcrumbItem>Creatives</BreadcrumbItem>
-                <BreadcrumbItem>Email</BreadcrumbItem>
-              </Breadcrumb>
-            </Col>
-          </Row>}
-          <Row>
-            <Col>
-              {/* <input type="file" id="filename" style={{ display: 'none'}} accept="text/html" onChange={(event) => this.openFile(event)} /><br/> */}
-              {/* <CKEditor
-                content={this.state.content}
-                config={{}}
-                events={this.state.events}
-              /> */}
-              {/* { (!this.props.Email.fetchingCmsSettings && !this.props.Email.fetchingCmsSettingsError &&
-                !_.isEmpty(this.props.Email.CmsSettings) && this.props.Email.CmsSettings.url) ?
-                  <EDMEditor
-                    content={'Hello World'}
-                    getEditorInstanse={this.getEditorInstanse}
-                    edmSrc={this.props.Email.CmsSettings.url}
-                  /> : ''
-              } */}
-              { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?
-                <FormBuilder
-                  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.state.injectedTags ? this.state.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.Global.currentOrgDetails.basic_details.base_language}
-                  supportedLanguages={this.props.Global.currentOrgDetails.basic_details.supported_languages}
-                  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>
-        </Spin>
-        {!_.isEmpty(this.state.formData[(this.state.currentTab - 1)]) && <EmailPreview
-          header={previewHeader}
-          content={this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab] ? 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}
-        />}
-        <ImagePreview
-          header={imagePreviewHeader}
-          content={imagePreviewContent}
-          show={this.state.showImageSelectionBox}
-          handleClose={this.handleImagePreviewClose}
-          isLoading={this.props.Email.fetchingAllAssets}
-        />
-        {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,
-  Global: PropTypes.object,
-  templatesActions: PropTypes.object,
-  route: PropTypes.object,
-  templateData: PropTypes.object,
-  isGetFormData: PropTypes.bool,
-  getFormSubscriptionData: PropTypes.func,
-  supportedTags: PropTypes.array,
-  getDefaultTags: PropTypes.string,
-};
-
-const mapStateToProps = createStructuredSelector({
-  Email: makeSelectEmail(),
-  Templates: makeSelectTemplates(),
-  metaEntities: makeSelectMetaEntities(),
-  Global: makeSelectAuthenticated(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-    templatesActions: bindActionCreators(templatesActions, dispatch),
-  };
-}
-
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));