@capillarytech/creatives-library 0.0.1

package/containers/Email/index.js

@@ -0,0 +1,2356 @@
+/*
+ *
+ * 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 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: {
+        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,
+                  },
+                  labelStyle: {
+                    fontSize: "18px",
+                    fontFamily: "proxima-nova,sans-serif",
+                    fontStyle: "normal",
+                    fontWeight: 600,
+                    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',
+                          },
+                          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,
+      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: '',
+    };
+
+    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,
+      },
+      "delete-language-label": {
+        deleteLanguage: this.deleteLanguage,
+      },
+    };
+  }
+
+  componentWillMount() {
+    console.log('Dark KNight', this.props.Templates, this.props.Email, this.props.Global, this.supportedLanguages);
+    const formData = this.initFormData(); //_.cloneDeep(this.state.formData);
+    formData['template-version-options'] = [
+      {
+        key: 'version 1',
+        label: 'Version 1',
+        value: 'version 1',
+      },
+      {
+        key: 'New Version',
+        label: 'New Version',
+        value: 'New Version',
+      },
+    ];
+
+    // const formData = _.cloneDeep(this.state.formData);
+    if (this.props.params.id || (this.props.location.query.module === "subscription" && !_.isEmpty(this.props.subscriptionTemplateData))) {
+      if (this.props.params.id) {
+        this.props.actions.getTemplateDetails(this.props.params.id, 'email');
+      }
+      this.setState({isEdit: true});
+    }
+    // console.log('New Form Data Preparing ', this.initFormData());
+    formData['template-version'] = "version 1";
+    // formData[0] = {
+    //   "template-content": (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
+    // };
+    // if (this.props.Templates.CmsSettings) {}
+    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');
+      } else {
+        this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'create');
+      }
+    }
+    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 type = this.props.location.query.type;
+    window.addEventListener("message", this.handleFrameTasks);
+    if (type === 'embedded') {
+      const response = {
+        action: 'startTemplateCreation',
+      };
+      parent.postMessage(JSON.stringify(response), '*');
+    }
+    if (this.props.location.query.type === 'embedded') {
+      this.showNext();
+    }
+
+    console.log('isTagLoaded didMount', 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);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('Next Props ', nextProps);
+    // if (this.props.location.query.type === 'embedded') {
+    //   this.showNext();
+    // }
+    if (nextProps.location.query.module === 'subscription' && nextProps.isGetFormData) {
+      nextProps.getFormSubscriptionData(this.getFormData());
+    }
+    this.injectEvents(this.state.schema);
+    const baseLanguage = nextProps.Global.currentOrgDetails.basic_details.base_language;
+    if (_.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});
+    }
+
+    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 && !_.isEmpty(nextProps.Email.templateDetails) && !_.isEqual(nextProps.Email.templateDetails, this.props.Email.templateDetails)) {
+      this.setEditData(nextProps.Email.templateDetails);
+    }
+    if (this.state.isEdit && nextProps.location.query.module === "subscription" && !_.isEmpty(nextProps.subscriptionTemplateData) && !this.props.params.id) {
+      this.startTemplateCreation(nextProps.subscriptionTemplateData);
+    }
+
+    if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings)) {
+      console.log('Got src');
+      const formData = _.cloneDeep(this.state.formData);
+      if (nextProps.Email.CmsSettings.isDragDrop) {
+        formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`] = nextProps.Email.CmsSettings.url;
+        formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`drag_drop_id`] = this.getParameterByName("projectId", nextProps.Email.CmsSettings.url);
+        formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`is_drag_drop`] = true;
+      } else {
+        const schema = _.cloneDeep(this.state.schema);
+        schema.containers[0].panes[0].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+        schema.containers[0].panes[0].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+        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[0][baseLanguage]["template-content"] = html;
+      }
+
+      this.setState({ formData, isDragDrop: nextProps.Email.CmsSettings.isDragDrop }, () => {
+        this.hideEdmOptions();
+      });
+    }
+
+    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;
+      this.props.router.push({
+        pathname: `/email`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    }
+    if (nextProps.Email.createTemplateError && !_.isEqual(nextProps.Email.createTemplateError, this.props.Email.createTemplateError)) {
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
+      this.props.globalActions.addMessageToQueue(message);
+    }
+    if ((!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) &&
+      !nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData)) {
+      const formData = _.cloneDeep(this.state.formData);
+      formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+      if (this.state.editorInstanse) {
+        this.state.editorInstanse.setData(decodeURIComponent(nextProps.Email.cmsData));
+      }
+      this.setState({ formData });
+    }
+
+    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');
+      if (this.state.isDragDrop) {
+        console.log('Handle EDM ', this.edmEvent, JSON.parse(this.edmEvent.data)._dynId, nextProps.Email.uploadedAssetData.metaInfo.secure_file_path);
+        const evtData = JSON.parse(this.edmEvent.data);
+        if (evtData.action === 'editBackground') {
+          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.setState({showImageSelectionBox: false});
+    }
+
+    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');
+    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});
+    }
+  };
+
+  onChange = (evt) => {
+    // console.log('Dark Knight ', this.state);
+    const formData = _.cloneDeep(this.state.formData);
+    formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(this.state.editorInstanse.getData());
+    if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
+      formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(this.state.editorInstanse.getData());
+    }
+    console.log("Modified Form Data ", formData);
+    this.setState({formData, content: this.state.editorInstanse.getData()}, () => {
+      console.log('Dark Knight ', this.state.content);
+    });
+    console.log("onChange fired with event info: ", evt, "and data: ", this.state.editorInstanse.getData(), this.state.editorInstanse);
+  };
+
+  onBlur = (evt) => {
+    console.log("onBlur fired with event info: ", evt);
+  };
+
+  onTabChange(data, formData) {
+    console.log('inside parent ontabchange', data, this.state);
+    this.setState({currentTab: data, formData});
+  }
+
+  onTemplateNameChange = (name) => {
+    console.log('Template name changed to ', name);
+  };
+
+  onTagSelect = (data, currentTab, value) => {
+    console.log('On Tag selection ', data, currentTab, value);
+    if (this.state.isDragDrop) {
+      const msg = {
+        action: "InsertToCursor",
+        content: `{{${data}}}`,
+      };
+      const msgString = JSON.stringify(msg);
+      const win = document.getElementById(`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}`).contentWindow;
+      win.postMessage(msgString, '*');
+    } else {
+      this.state.editorInstanse.insertHtml(`{{${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);
+    });
+  };
+
+  getParameterByName = (name, url) => {
+    const match = RegExp(`[?&]${name}=([^&]*)`).exec(url);
+    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+  };
+
+  getFormData = (e, value) => {
+    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 formData = _.cloneDeep(this.state.formData);
+
+    const tabIndex = this.state.currentTab + 1;
+    const schema = _.cloneDeep(this.state.schema);
+    const containers = _.cloneDeep(schema.containers.slice());
+    let tabKey = "";
+    let currentTab = _.cloneDeep(this.state.currentTab);
+
+    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) {
+          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;
+        if (data.constructor === Object) {
+          console.log("Edit Data ", data, 'Tab key ', editData.versions.base.tabKey, data.tabKey, index);
+          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);
+          }
+
+          console.log('Schema Test ', schema, schema.containers[index]);
+          _.forEach(data.selectedLanguages, (lang, langIndex) => {
+            console.log('Language ', lang, langIndex);
+            if (lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
+              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);
+            }
+          });
+        }
+        formData[index] = data;
+      }
+    });
+
+    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);
+    });
+  }
+
+  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) => {
+    console.log('Got editor Instance ', instance);
+    this.setState({editorInstanse: instance});
+  };
+
+  uploadImages(e, {files}) {
+    e.preventDefault();
+    const _URL = window.URL || window.webkitURL;
+    const file = files[0];
+    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);
+    };
+  }
+
+  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 = (formData, val) => {
+    console.log('Delete Language ', formData, val);
+    const schema = _.cloneDeep(this.state.schema);
+    schema.containers[0].panes.splice(val, 1);
+    this.setState({schema, formData});
+    console.log('Schema ', schema, formData, val);
+  };
+
+  initFormData() {
+    const newFormData = {
+      "0": {},
+      "template-name": "",
+      "base": {},
+    };
+    const baseData = {};
+    const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
+    const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})];
+    baseData.activeTab = baseLanguage;
+    baseData[languageObject.iso_code] = {};
+    baseData[languageObject.iso_code].is_drag_drop = this.state.isDragDrop;
+    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"] = (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : '');
+    if (this.state.isDragDrop) {
+      baseData[languageObject.iso_code].drag_drop_id = this.props.Templates.edmTemplate.versions.base.drag_drop_id;
+    }
+    baseData.selectedLanguages = [baseLanguage];
+    newFormData.base = baseData;
+    newFormData[0] = baseData;
+
+    return newFormData;
+  }
+
+  transformFormData = (formData) => {
+    console.log('Transforming data ', formData);
+    const newFormData = {
+      base: {},
+      secondary_templates: [],
+    };
+    // const baseData = {};
+    _.forEach(formData.base, (content, index) => {
+      console.log('Type test ', content.constructor);
+      if (content.constructor === Object) {
+        const tmpData = {};
+        tmpData.html_content = content['template-content'];
+        tmpData.is_drag_drop = this.state.isDragDrop;
+        tmpData.lang_id = content.lang_id;
+        tmpData.iso_code = content.iso_code;
+        tmpData.language = content.language;
+        if (this.state.isDragDrop) {
+          tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : this.props.Templates.edmTemplate.versions.base.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 === 'subscription')) {
+      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":
+          if (type.elementJson.type === "IMAGE") {
+            console.log('Data Inside ', type);
+            this.onImageSelect();
+            this.edmEvent = e;
+          }
+          break;
+        case "editBackground":
+          if (type.elementJson.type === "BOX" || type.elementJson.type === "BUTTON" || type.elementJson.type === "GENERAL") {
+            console.log('Data Inside ', type);
+            this.onImageSelect();
+            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;
+        default:
+          break;
+      }
+    }
+  };
+
+  isValidJson = (str) => {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+
+  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 = () => {
+    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 === '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 = this.state.isDragDrop ? "" : 'none';
+              }
+            });
+          }
+        });
+      }
+    });
+    console.log('HandleEdmOption ', JSON.stringify(schema));
+    this.setState({schema, isSchemaChanged: true});
+  };
+
+  handleOnItemClick = (isSelected, id) => {
+    console.log('Dummy ', isSelected, id, event);
+    if (isSelected) {
+      const data = _.find(this.props.Email.assetList, {_id: id});
+      console.log('Found Data ', data, this.state.isDragDrop);
+      if (data) {
+        if (this.state.isDragDrop) {
+          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.public_url}' alt='Capillary Image'>`);
+        }
+      }
+      this.setState({ showImageSelectionBox: false });
+    }
+  };
+
+  toggleEmailPreview = () => {
+    if (this.state.isDragDrop) {
+      this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
+    }
+    this.setState({ showEmailPreview: !this.state.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});
+  };
+
+  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', '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 = (data, formData, val) => {
+    const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
+    const tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;
+    console.log('adding language', data, formData, val, selectedLanguage, formData[`${this.state.currentTab - 1}`]);
+    const tabIndex = (selectedLanguage) + 1;
+    const schema = _.cloneDeep(this.state.schema);
+    const containers = schema.containers.slice();
+    const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
+    const tabContentSection = tabContent.inputFields[0].cols[0];
+    const panes = containers[`${this.state.currentTab - 1}`].panes.slice();
+    const firstPane = _.cloneDeep(panes[0]);
+    const sections = [];
+    _.forEach(firstPane.sections, (section) => {
+      let sect = _.cloneDeep(section);
+      console.log('trying to clone in add version', JSON.stringify(sect), tabIndex);
+      if (sect.type === 'col-label') {
+        sect = this.cloneColLabel(sect, tabIndex);
+      } else if (sect.type === 'multicols') {
+        sect = this.cloneMultiCol(sect, tabIndex);
+      } else if (sect.type === 'parent') {
+        sect = this.cloneParent(sect, tabIndex);
+      }
+      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);
+    if (schema) {
+      this.setState({schema, isSchemaChanged: true, tabKey});
+    }
+  };
+
+  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';
+    this.props.router.push({
+      pathname: `/email/`,
+      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+    });
+  };
+
+  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) => {
+    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('final injected schema', schema);
+    this.setState({schema, isSchemaChanged: true}, () => {
+      const type = this.props.location.query.type;
+      if (type === 'embedded') {
+        this.removeStandAlone();
+      }
+    });
+    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 === "subscription")) {
+      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'};
+                }
+              });
+            }
+          });
+        });
+        temp.panes = [];
+        temp.panes.push(basePane);
+      }
+    });
+    this.setState({ schema, isSchemaChanged: true });
+  }
+
+  startTemplateCreation(data) {
+    if (_.isEmpty(data)) {
+      return;
+    }
+
+    // const data = {"base":{"subject":"deded","html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><img alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","secondary_template_id":"9500","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}],"edit":true,"tags":[]};
+    // const data = {edit: true, "base":{"subject":"testsubject","html_content":"<html>  <head>  \t<meta charset=\"utf-8\" />  \t<title>Aster Secure</title>  \t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}  \t</style>  </head>  <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center>  <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t<tbody>  \t\t<tr>  \t\t\t<td>  \t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t\t\t\t<tbody>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><img class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>  \t\t\t\t\t</tr>  \t\t\t\t</tbody>  \t\t\t</table>  \t\t\t</td>  \t\t</tr>  \t</tbody>  </table>  </body>  </html>  ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<html>\r\n<head>\r\n\t<meta charset=\"utf-8\" />\r\n\t<title>Aster Secure</title>\r\n\t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}\r\n\t</style>\r\n</head>\r\n<body>\r\n<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t<tbody>\r\n\t\t<tr>\r\n\t\t\t<td>\r\n\t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><img class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t\t</td>\r\n\t\t</tr>\r\n\t</tbody>\r\n</table>\r\n</body>\r\n</html>\r\n","secondary_template_id":"9584","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}]};
+    console.log('Start template creation ', data);
+    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) {
+        formData['template-subject'] = data.base.subject ? data.base.subject : '';
+        const languageIndex = 0;
+        const tempData = {
+          "is_drag_drop": data.base.is_drag_drop,
+          "lang_id": this.supportedLanguages[languageIndex].lang_id,
+          "iso_code": this.supportedLanguages[languageIndex].iso_code,
+          "language": this.supportedLanguages[languageIndex].language,
+          "template-content": data.base.html_content,
+        };
+        formData[0].base = true;
+        formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
+        formData[0][this.supportedLanguages[languageIndex].iso_code] = tempData;
+        formData[0].activeTab = this.supportedLanguages[languageIndex].iso_code;
+        tabKey = "2";
+      } else {
+        _.forEach(data.secondary_templates, (templates) => {
+          if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'subscription') {
+            formData['template-subject'] = templates.subject ? templates.subject : '';
+          }
+          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,
+            "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;
+          }
+          // 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) {
+            formData[0].activeTab = this.supportedLanguages[languageIndex].iso_code;
+            // formData.base = tempData;
+          }
+        });
+      }
+      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 && data.base.is_drag_drop !== false )}, () => {
+        // this.setState({tabKey: ''});
+      });
+    } 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 = (formData) => {
+    //Logic to save in db etc
+    // const isValidated = this.validateFormData(formData);
+    // console.log('whyyyy');
+    // if (!isValidated) {
+    //   return;
+    // }
+    console.log('Saving form data', formData, this.state.tabCount);
+    const obj = {};
+    obj.versions = {
+      base: {},
+      history: [],
+    };
+    if (this.state.isEdit) {
+      obj._id = this.props.Email.templateDetails._id;
+    }
+    obj.type = 'EMAIL';
+    _.forEach(formData, (data, index) => {
+      if (!isNaN(index) && data) {
+        obj.versions.history.push(data);
+      }
+    });
+    obj.name = formData['template-name'];
+    obj.versions.base = formData.base;
+    console.log('HTML file ', obj.versions.history);
+    _.forEach(obj.versions.history, (index, version) => {
+      console.log('Encoding ', index, version);
+    });
+    console.log('obj', obj);
+    this.props.actions.createTemplate(obj);
+  };
+
+  handleOk = () => {
+    const schema = _.cloneDeep(this.state.schema);
+    this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
+    schema.containers[0].panes[0].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+    schema.containers[0].panes[0].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+    schema.containers[0].tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
+    console.log('Handle OK ', schema);
+    this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
+      this.injectEvents(schema);
+    });
+  };
+
+  handleCancel = () => {
+    this.setState({ showConfirmationModal: false });
+  };
+
+  handleCancelModal = () => {
+    this.setState({showModal: false});
+  };
+
+  openFileDialog() {
+    document.getElementById("fileName").click();
+  }
+
+  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 = '';
+    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 && this.props.Email.createTemplateInProgress);
+    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'}}>
+              <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);
+    console.log('CMS Data ', this.props.Email.CmsSettings, this.props.Global.currentOrgDetails.basic_details.supported_languages);
+    const loaderText = this.props.Email.createTemplateInProgress ? this.props.intl.formatMessage(messages.saveTemplateLoader) : this.props.intl.formatMessage(messages.templateLoader);
+    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}
+                  /> : ''
+              } */}
+
+              <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={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
+                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}
+              />
+            </Col>
+          </Row>
+        </Spin>
+        {!_.isEmpty(this.state.formData[(this.state.currentTab - 1)]) && <EmailPreview
+          header={previewHeader}
+          content={this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab][`template-content`]}
+          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,
+  subscriptionTemplateData: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Email: makeSelectEmail(),
+  Templates: makeSelectTemplates(),
+  metaEntities: makeSelectMetaEntities(),
+  Global: makeSelectAuthenticated(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));