@capillarytech/creatives-library 8.0.136 → 8.0.137-alpha.1

package/containers/Sms/Create/index.js

@@ -1,1488 +0,0 @@
-/*
- *
- * Create
- *
- */
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { Row, Col, Spin } from 'antd';
-import { injectIntl, intlShape } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import _ from 'lodash';
-import { bindActionCreators, compose} from 'redux';
-import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
-import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import { UserIsAuthenticated } from '../../../utils/authWrapper';
-import './_smsCreate.scss';
-import FormBuilder from '../../../components/FormBuilder';
-import * as actions from './actions';
-import messages from './messages';
-import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
-import * as globalActions from '../../../containers/Cap/actions';
-import {getMessageObject} from '../../../utils/messageUtils';
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import reducer from './reducer';
-import { createSmsSaga } from './sagas';
-import { createQueryString } from '../../../utils/common';
-
-export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      formData: {},
-      tabCount: 1,
-      currentTab: 1,
-      schema: {},
-      loading: false,
-      isFormValid: true,
-      injectedTags: {},
-      checkValidation: false,
-      tabKey: '',
-      showModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteVersion), type: 'confirm', id: 'sms-version-modal'},
-    };
-    this.saveFormData = this.saveFormData.bind(this);
-    this.onFormDataChange = this.onFormDataChange.bind(this);
-    this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
-    this.onTemplateContentChange = this.onTemplateContentChange.bind(this);
-    this.handleFrameTasks = this.handleFrameTasks.bind(this);
-    this.getFormData = this.getFormData.bind(this);
-    this.validateContent = this.validateContent.bind(this);
-    this.onTagSelect = this.onTagSelect.bind(this);
-    this.insertAtCursor = this.insertAtCursor.bind(this);
-    this.addVersion = this.addVersion.bind(this);
-    this.onTabChange = this.onTabChange.bind(this);
-    this.resetSchema = this.resetSchema.bind(this);
-    this.resetState = this.resetState.bind(this);
-    this.discardValues = this.discardValues.bind(this);
-    this.cloneColLabel = this.cloneColLabel.bind(this);
-    this.cloneMultiCol = this.cloneMultiCol.bind(this);
-    this.cloneParent = this.cloneParent.bind(this);
-    this.markFinalVersion = this.markFinalVersion.bind(this);
-    this.deleteVersion = this.deleteVersion.bind(this);
-    this.duplicateVersion = this.duplicateVersion.bind(this);
-    this.renameVersion = this.renameVersion.bind(this);
-    this.onVersionNameChange = this.onVersionNameChange.bind(this);
-    this.startTemplateCreation = this.startTemplateCreation.bind(this);
-    this.startLoading = this.startLoading.bind(this);
-    this.removeStandAlone = this.removeStandAlone.bind(this);
-    this.validateFormData = this.validateFormData.bind(this);
-    this.getCurrentWindow = this.getCurrentWindow.bind(this);
-    this.moveToTemplates = this.moveToTemplates.bind(this);
-    this.cancelTemplate = this.cancelTemplate.bind(this);
-    this.injectEvents = this.injectEvents.bind(this);
-    this.injectSections = this.injectSections.bind(this);
-    this.injectContainer = this.injectContainer.bind(this);
-    this.injectParentSection = this.injectParentSection.bind(this);
-    this.injectColLabelSection = this.injectColLabelSection.bind(this);
-    this.injectMultiColSection = this.injectMultiColSection.bind(this);
-    this.getMappedEvent = this.getMappedEvent.bind(this);
-    this.setFormValidity = this.setFormValidity.bind(this);
-    this.showNext = this.showNext.bind(this);
-    this.injectMessages = this.injectMessages.bind(this);
-  }
-
-  componentWillMount() {
-    
-    if (this.props.route.name === 'view') {
-      this.setState({loading: false});
-      // this.removeStandAlone();
-    }
-  }
-
-  componentDidMount() {
-    
-    const query = {
-      layout: 'SMS',
-      type: 'LAYOUT',
-    };
-    this.props.globalActions.fetchSchemaForEntity(query);
-    const type = this.props.location.query.type;
-    // const module = this.props.location.query.module;
-    const name = this.props.route.name;
-    window.addEventListener("message", this.handleFrameTasks);
-    if (type === 'embedded') {
-      const response = {
-        action: 'startTemplateCreation',
-        window: name === 'view' ? 'view' : 'create',
-      };
-      // if (name !== "view" && module.toLowerCase() === "timeline") {
-      //   return;
-      // }
-      parent.postMessage(JSON.stringify(response), '*');
-    }
-    //For testing embedded mode data injection
-    // let that = this;
-    // setTimeout( function() {
-    //   that.startTemplateCreation(
-    //     {
-    //       edit: true,
-    //       content: 'asasasasasas 12122',
-    //       tags: {},
-    //     }
-    //   );
-    // }, 5000);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
-    }
-    if (nextProps.createResponse && nextProps.createResponse.templateId) {
-      
-      this.discardValues();
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages.smsCreateSuccess), true);
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearCreateResponse();
-      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: `/sms/`,
-        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-      });
-    }
-
-    if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
-    }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      
-      this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
-        const query = {
-          layout: 'SMS',
-          type: 'TAG',
-          context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-        };
-        if (this.props.getDefaultTags) {
-          query.context = this.props.getDefaultTags;
-        }
-        this.props.globalActions.fetchSchemaForEntity(query);
-        if (this.props.location.query.type === 'embedded') {
-          this.showNext();
-        }
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    
-    window.removeEventListener("message", this.handleFrameTasks);
-  }
-
-  onTemplateNameChange(name) {
-    
-  }
-
-  onTemplateContentChange(content) {
-    
-  }
-
-  onVersionNameChange(data, versionIndex) {
-    
-  }
-
-  onFormDataChange(formData, tabCount, currentTab) {
-    
-    this.setState({formData, tabCount});
-    if (currentTab) {
-      this.setState({currentTab});
-    }
-  }
-
-  onTagSelect(data, currentTab) {
-    
-    const editorId = currentTab > 1 ? `sms-editor${currentTab}` : 'sms-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
-    document.getElementById(editorId).focus();
-  }
-
-  onTabChange(data) {
-    
-    this.setState({currentTab: data});
-  }
-
-  getFormData(e, value) {
-    
-    const formData = _.cloneDeep(this.state.formData);
-    let baseData = {};
-    let versionIdx;
-    _.forEach(formData, (val, idx) => {
-      
-      if (val.base && idx !== 'base') {
-        baseData = val;
-        versionIdx = idx;
-      }
-    });
-    baseData['sms-editor'] = baseData[`sms-editor${versionIdx > 0 ? versionIdx : ''}`];
-    if (versionIdx !== "0") {
-      delete baseData[`sms-editor${versionIdx > 0 ? versionIdx : ''}`];
-    }
-    const result = {};
-    result.base = baseData;
-    const msgObj = updateCharCount(baseData['sms-editor']);
-    result.base.msg_count = msgObj.msgCount;
-    
-    const response = {
-      action: "getFormData",
-      value: result,
-      postAction: value || 'next',
-      validity: this.state.isFormValid,
-    };
-    this.setState({checkValidation: true});
-    
-    if (e) {
-      e.source.postMessage(JSON.stringify(response), e.origin);
-    }
-    return response;
-  }
-
-  getCurrentWindow(e) {
-    
-    const response = {
-      action: e.action,
-      value: 'edit',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  getMappedEvent(id, event) {
-    const map = {
-      "template-name": {
-        onChange: this.onTemplateNameChange,
-      },
-      "discard-button": {
-        discardValues: this.discardValues,
-      },
-      "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-version-button": {
-        addVersion: this.addVersion,
-      },
-      "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,
-      },
-      "pane": {
-        onTabChange: this.onTabChange,
-      },
-    };
-    const mappedIdObject = map[id];
-    return mappedIdObject && mappedIdObject[event] ? mappedIdObject[event] : () => {};
-  }
-
-  setFormValidity(isFormValid) {
-    this.setState({isFormValid});
-  }
-
-  injectMessages(elem) {
-    const temp = elem;
-    if (temp.value && messages[temp.value]) {
-      temp.value = this.props.intl.formatMessage(messages[temp.value]);
-    }
-    if (temp.label && messages[temp.label]) {
-      temp.label = this.props.intl.formatMessage(messages[temp.label]);
-    }
-    if (temp.errorMessage && messages[temp.errorMessage]) {
-      temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
-    }
-    if (temp.placeholder && messages[temp.placeholder]) {
-      temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
-    }
-    return temp;
-  }
-
-  showNext() {
-    const response = {
-      action: "showNext",
-      value: true,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  moveToTemplates() {
-    
-    const modalContent = {
-      title: this.props.intl.formatMessage(messages.alertMessage),
-      body: this.props.intl.formatMessage(messages.goBackConfirmation),
-      type: 'confirm',
-      id: 'template-back-confirm-modal',
-      show: true,
-    };
-    this.setState({modalContent, showModal: true});
-    // 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: `/sms/`,
-    //   query: type === 'embedded' ? {type: 'embedded', module} : {module},
-    // });
-  }
-
-  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: `/sms/`,
-      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-    });
-  }
-
-  injectEvents(schema) {
-    
-    const temp = schema;
-    temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    
-    this.setState({schema}, () => {
-      const type = this.props.location.query.type;
-      if (type === 'embedded') {
-        this.removeStandAlone();
-      }
-    });
-    return schema;
-  }
-
-  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);
-        });
-        
-        if (temp.type === 'icon') {
-          return true;
-        }
-        if (temp.value && messages[temp.value]) {
-          temp.value = this.props.intl.formatMessage(messages[temp.value]);
-        }
-        if (temp.label && messages[temp.label]) {
-          temp.label = this.props.intl.formatMessage(messages[temp.label]);
-        }
-        if (temp.errorMessage && messages[temp.errorMessage]) {
-          temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
-        }
-        if (temp.placeholder && messages[temp.placeholder]) {
-          temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
-        }
-        return true;
-      });
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
-        const temp = col;
-        if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
-          temp.value.sections = this.injectSections(temp.value.sections);
-          return true;
-        }
-        temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        
-        if (temp.type === 'icon') {
-          return true;
-        }
-        if (temp.value && messages[temp.value]) {
-          temp.value = this.props.intl.formatMessage(messages[temp.value]);
-        }
-        if (temp.label && messages[temp.label]) {
-          temp.label = this.props.intl.formatMessage(messages[temp.label]);
-        }
-        if (temp.errorMessage && messages[temp.errorMessage]) {
-          temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
-        }
-        if (temp.placeholder && messages[temp.placeholder]) {
-          temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
-        }
-        return true;
-      });
-    });
-    return section;
-  }
-
-  injectColLabelSection(section) {
-    _.forEach(section.inputFields, (inputField) => {
-      const temp = inputField;
-      if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
-        temp.value.sections = this.injectSections(temp.value.sections);
-        return true;
-      }
-      temp.injectedEvents = {};
-      _.forEach(inputField.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
-      });
-      
-      if (temp.type === 'icon') {
-        return true;
-      }
-      if (temp.value && messages[temp.value]) {
-        temp.value = this.props.intl.formatMessage(messages[temp.value]);
-      }
-      if (temp.label && messages[temp.label]) {
-        temp.label = this.props.intl.formatMessage(messages[temp.label]);
-      }
-      if (temp.errorMessage && messages[temp.errorMessage]) {
-        temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
-      }
-      if (temp.placeholder && messages[temp.placeholder]) {
-        temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
-      }
-      return true;
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      const temp = actionField;
-      if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
-        temp.value.sections = this.injectSections(temp.value.sections);
-        return true;
-      }
-      temp.injectedEvents = {};
-      _.forEach(actionField.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
-      });
-      
-      if (temp.type === 'icon') {
-        return true;
-      }
-      if (temp.value && messages[temp.value]) {
-        temp.value = this.props.intl.formatMessage(messages[temp.value]);
-      }
-      if (temp.label && messages[temp.label]) {
-        temp.label = this.props.intl.formatMessage(messages[temp.label]);
-      }
-      if (temp.errorMessage && messages[temp.errorMessage]) {
-        temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
-      }
-      if (temp.placeholder && messages[temp.placeholder]) {
-        temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
-      }
-      return true;
-    });
-    return section;
-  }
-
-  injectSections(sections) {
-    _.forEach(sections, (section) => {
-      let temp = section;
-      if (temp.type === 'col-label') {
-        temp = this.injectColLabelSection(temp);
-      } else if (section.type === 'multicols') {
-        temp = this.injectMultiColSection(temp);
-      } else if (section.type === 'parent') {
-        temp = this.injectSections(temp.childSections);
-      }
-    });
-    return sections;
-  }
-
-  injectParentSection(section) {
-    _.forEach(section.childSections, (childSection) => {
-      let temp = childSection;
-      if (temp.type === 'col-label') {
-        temp = this.injectColLabelSection(temp);
-      } else if (section.type === 'multicols') {
-        temp = this.injectMultiColSection(temp);
-      } else if (section.type === 'parent') {
-        temp = this.injectParentSection(temp);
-      }
-    });
-    return section;
-  }
-
-  cloneColLabel(sectionObj, tabIndex) {
-    
-    const section = _.cloneDeep(sectionObj);
-    const inputFields = _.forEach(section.inputFields, (inputField) => {
-      const inputF = inputField;
-      inputF.id = `${inputField.id}${tabIndex}`;
-      inputF.paneIndex = tabIndex;
-      return inputF;
-    });
-    section.inputFields = inputFields;
-    
-    return section;
-  }
-
-  cloneMultiCol(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 = `${col.id}${tabIndex}`;
-        colTemp.paneIndex = tabIndex;
-        return colTemp;
-      });
-      inputF.cols = cols;
-      return inputF;
-    });
-    section.inputFields = inputFields;
-    
-    return section;
-  }
-
-  cloneParent(section, tabIndex) {
-    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);
-      } else if (childSection.type === 'multicols') {
-        sect = this.cloneMultiCol(childSection, tabIndex);
-      } else if (childSection.type === 'parent') {
-        sect = this.cloneParent(childSection, tabIndex);
-      }
-      
-      childSections.push(sect);
-      return true;
-    });
-    console.log('returning cloned parent section final 1', JSON.stringify(childSections));
-    parentsect.childSections = childSections;
-    
-    return _.cloneDeep(parentsect);
-  }
-
-  deleteVersion(data, currentTab) {
-    
-    
-    if (this.state.tabCount === 1) {
-      return;
-    }
-    const schema = _.cloneDeep(this.state.schema);
-    schema.containers[0].panes.splice(this.state.tabCount - 1, 1);
-    schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = false;
-    this.setState({schema, tabCount: this.state.tabCount - 1});
-  }
-
-  renameVersion(data, currentTab) {
-    
-  }
-
-  markFinalVersion(data, currentTab) {
-    const message = getMessageObject('success', this.props.intl.formatMessage(messages.templateMarkedFinal), true);
-    this.props.globalActions.addMessageToQueue(message);
-    
-  }
-
-  duplicateVersion(data, currentTab) {
-    
-    this.addVersion(this.state.tabCount);
-  }
-
-  addVersion(data, addNow) {
-    
-    let tabIndex = data + 1;
-    const schema = _.cloneDeep(this.state.schema);
-    const containers = schema.containers.slice();
-    const panes = containers[0].panes.slice();
-    if (addNow && data === 1) {
-      for (let idx = 1; idx < addNow; idx += 1) {
-        const sections = [];
-        const firstPane = _.cloneDeep(panes[0]);
-        tabIndex = idx + 1;
-        _.forEach(firstPane.sections, (section) => { // eslint-disable-line no-loop-func
-          let sect = _.cloneDeep(section);
-          if (sect.type === 'col-label') {
-            sect = this.cloneColLabel(sect, tabIndex);
-          } else if (sect.type === 'multicols') {
-            sect = this.cloneMultiCol(sect, tabIndex);
-          } else if (sect.type === 'parent') {
-            sect = this.cloneParent(sect, tabIndex);
-          }
-          sections.push(sect);
-          return true;
-        });
-        firstPane.sections = sections;
-        schema.containers[0].panes.push(firstPane);
-        
-        if (tabIndex === 5) {
-          schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = true;
-        }
-      }
-      if (schema) {
-        this.setState({schema});
-      }
-    } else if (!addNow) {
-      const sections = [];
-      const firstPane = _.cloneDeep(panes[0]);
-      _.forEach(firstPane.sections, (section) => {
-        let sect = _.cloneDeep(section);
-        if (sect.type === 'col-label') {
-          sect = this.cloneColLabel(sect, tabIndex);
-        } else if (sect.type === 'multicols') {
-          sect = this.cloneMultiCol(sect, tabIndex);
-        } else if (sect.type === 'parent') {
-          sect = this.cloneParent(sect, tabIndex);
-        }
-        sections.push(sect);
-        return true;
-      });
-      firstPane.sections = sections;
-      schema.containers[0].panes.push(firstPane);
-      
-      if (tabIndex === 5) {
-        schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = true;
-      }
-      if (schema) {
-        this.setState({schema});
-      }
-    }
-  }
-
-  validateFormData(formData) {
-    const tabCount = this.state.tabCount;
-    let isValid = true;
-    for (let cnt = 0; cnt < tabCount; cnt += 1) {
-      const index = cnt + 1;
-      if (formData[cnt]) {
-        const text = formData[cnt][`sms-editor${index > 1 ? index : ''}`];
-        if (text.indexOf('{{optout}}') === -1) {
-          isValid = false;
-        }
-      }
-    }
-    if (isValid) {
-      
-      return true;
-    }
-    const message = getMessageObject('error', 'Template data is not valid', true);
-    this.props.globalActions.addMessageToQueue(message);
-    
-    return false;
-  }
-
-  insertAtCursor(field, myValue, currentTab) {
-    //IE support
-    const myField = field;
-    if (document.selection) {
-      myField.focus();
-      const sel = document.selection.createRange();
-      sel.text = myValue;
-    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
-      const startPos = myField.selectionStart;
-      const endPos = myField.selectionEnd;
-      myField.value = myField.value.substring(0, startPos)
-          + myValue
-          + myField.value.substring(endPos, myField.value.length);
-      myField.selectionStart = startPos + myValue.length;
-      myField.selectionEnd = startPos + myValue.length;
-    } else {
-      myField.value += myValue;
-    }
-    const formData = _.cloneDeep(this.state.formData);
-    formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
-  }
-
-  startTemplateCreation(data) {
-    
-    if (data.edit) {
-      
-      const ifUnicode = checkUnicode(data.content ? data.content : '');
-      
-      const content = data.content;
-      const id = _.uniqueId();
-      const tempData = {
-        'sms-editor': content,
-        'unicode-validity': false,
-        'base': true,
-        'tabKey': id,
-      };
-      const formData = {};
-      formData[0] = tempData;
-      formData.base = tempData;
-      this.setState({formData, loading: false, injectedTags: data.tags, tabKey: id}, () => {
-        this.setState({tabKey: ''});
-      });
-    } else {
-      
-      this.setState({injectedTags: data.tags});
-    }
-    this.props.globalActions.setInjectedTags(data.tags);
-  }
-
-  startLoading(ifEdit) {
-    
-    if (ifEdit) {
-      this.setState({loading: true});
-    }
-  }
-
-  handleFrameTasks = (e) => {
-    
-    const type = e.data;
-    
-    if (typeof type === 'object') {
-      
-      const action = type.action;
-      switch (action) {
-        case "startTemplateCreation":
-          this.startTemplateCreation(type.value);
-          break;
-        case "startLoading":
-          this.startLoading(type.edit);
-          break;
-        case "getCurrentWindow":
-          this.getCurrentWindow(type);
-          break;
-        case "getFormData":
-          this.getFormData(e, type.value);
-          break;
-        default:
-          break;
-      }
-    } else {
-      switch (type) {
-        case "getFormData":
-          this.getFormData(e);
-          break;
-        case "startTemplateCreation":
-          
-          //this.getFormData(e);
-          break;
-        case "moveToTemplates":
-          
-          this.moveToTemplates();
-          break;
-        case "validateContent":
-          
-          this.validateContent(e);
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  handleOnTagsContextChange = (data) => {
-    
-    const query = {
-      layout: 'SMS',
-      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 = [];
-    _.forEach(schema.containers, (container) => {
-      const temp = container;
-      if (temp.type === 'tabs') {
-        temp.tabBarExtraContent = {};
-        temp.tabBarExtraContent.sections = [];
-        const basePane = _.cloneDeep(temp.panes[0]);
-        temp.tabContent = {};
-        temp.tabContent.sections = [];
-        temp.panes = [];
-        temp.panes.push(basePane);
-      }
-    });
-    this.setState({ schema });
-  }
-
-  validateContent = (e) => {
-    
-    const response = {
-      action: "validateContent",
-      value: this.state.isFormValid,
-    };
-    // if (content.indexOf('{{optout}}') === -1) {
-    //   const message = getMessageObject('error', 'Template data is not valid', true);
-    //   this.props.globalActions.addMessageToQueue(message);
-    //   response.value = 'invalid';
-    // }
-
-    e.source.postMessage(JSON.stringify(response), e.origin);
-  }
-
-  discardValues() {
-    this.resetSchema();
-    this.resetState();
-  }
-
-  resetState() {
-    this.setState({
-      formData: {},
-      tabCount: 1,
-      currentTab: 1,
-    });
-  }
-  resetSchema() {
-    // const schema =
-    //   {
-    //     standalone: {
-    //       sections: [
-    //         {
-    //           type: "multicols",
-    //           inputFields: [
-    //             {
-    //               cols: [
-    //                 {
-    //                   id: "template-name",
-    //                   placeholder: "Enter template name",
-    //                   type: "input",  //Resembles component to be used
-    //                   metaType: "text",
-    //                   datatype: "string",
-    //                   required: true,
-    //                   fluid: true,
-    //                   style: {
-    //                     fontSize: '20px',
-    //                     fontFamily: 'proxima-nova,sans-serif',
-    //                     fontStyle: 'normal',
-    //                     fontWeight: 600,
-    //                     marginBottom: '16px',
-    //                   },
-    //                   styling: "semantic",
-    //                   order: 1,
-    //                   width: 9,
-    //                   offSet: 10,
-    //                   customComponent: false,
-    //                   standalone: true,
-    //                   supportedEvents: {
-    //                     onChange: this.onTemplateNameChange,
-    //                   },
-    //                 },
-    //                 {
-    //                   id: "discard-button",
-    //                   width: 3,
-    //                   offset: 8,
-    //                   metaType: "submit-button",
-    //                   colStyle: {
-    //                     // marginLeft: '47.833%',
-    //                     textAlign: 'right',
-    //                     paddingRight: '12px',
-    //                   },
-    //                   type: "button",
-    //                   buttonType: "cancel",
-    //                   value: "Discard",
-    //                   customComponent: false,
-    //                   standalone: true,
-    //                   styling: "semantic",
-    //                   order: 3,
-    //                   fluid: false,
-    //                   submitAction: "discardValues",
-    //                   supportedEvents: {
-    //                     discardValues: this.discardValues,
-    //                   },
-    //                 },
-    //                 {
-    //                   id: "cancel-button",
-    //                   width: 2,
-    //                   // offset: 11,
-    //                   metaType: "submit-button",
-    //                   colStyle: {
-    //                     textAlign: 'right',
-    //                     width: '9%',
-    //                   },
-    //                   type: "button",
-    //                   buttonType: "cancel",
-    //                   value: "Cancel",
-    //                   customComponent: false,
-    //                   standalone: true,
-    //                   styling: "semantic",
-    //                   order: 3,
-    //                   fluid: false,
-    //                   submitAction: "cancelTemplate",
-    //                   supportedEvents: {
-    //                     cancelTemplate: this.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,
-    //                   submitAction: "saveFormData",
-    //                   supportedEvents: {
-    //                     saveFormData: this.saveFormData,
-    //                   },
-    //                 },
-    //               ],
-    //             },
-    //           ],
-    //           actionFields: [],
-    //         },
-    //       ],
-    //     },
-    //     containers: [
-    //       {
-    //         panes: [
-    //           {
-    //             sections: [
-    //               {
-    //                 type: "parent",
-    //                 width: 16,
-    //                 rowStyle: {
-    //                   height: '100%',
-    //                 },
-    //                 childSections: [
-    //                   {
-    //                     colStyle: {
-    //                       paddingTop: '16px',
-    //                       borderRight: '1px solid #d9d9d9',
-    //                       height: '100%',
-    //                     },
-    //                     width: 16,
-    //                     type: "parent",
-    //                     childSections: [
-    //                       {
-    //                         type: "col-label",
-    //                         inputFields: [
-    //                           {
-    //                             id: "sms-editor",
-    //                             label: "Message",
-    //                             labelStyle: {
-    //                               backgroundColor: 'white',
-    //                               textAlign: 'left',
-    //                               color: '#333333',
-    //                               lineHeight: '24px',
-    //                               fontSize: '16px',
-    //                               fontWeight: '600',
-    //                               fontFamily: 'proxima-nova, sans-serif',
-    //                               fontStyle: 'normal',
-    //                             },
-    //                             style: {
-    //                               textAlign: 'left',
-    //                               color: '#333333',
-    //                               fontFamily: 'Open-Sans',
-    //                               lineHeight: '24px',
-    //                               fontSize: '14px',
-    //                             },
-    //                             type: "textarea",
-    //                             metaType: "text",
-    //                             datatype: "string",
-    //                             required: true,
-    //                             placeholder: "Please input sms template content.",
-    //                             fluid: false,
-    //                             styling: "semantic",
-    //                             onlyDisplay: false,
-    //                             width: 18,
-    //                             autosize: true,
-    //                             autosizeParams: {
-    //                               minRows: 3,
-    //                             },
-    //                             order: 2,
-    //                             customComponent: true,
-    //                             supportedEvents: {
-    //                               onChange: this.onTemplateContentChange,
-    //                             },
-    //                           },
-    //                         ],
-    //                         actionFields: [
-    //                         ],
-    //                       },
-    //                       {
-    //                         type: "multicols",
-    //                         inputFields: [
-    //                           {
-    //                             cols: [
-    //                               {
-    //                                 offset: 19,
-    //                                 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,
-    //                                 customComponent: true,
-    //                                 supportedEvents: {
-    //                                   onTagSelect: this.onTagSelect,
-    //                                 },
-    //                               },
-    //                             ],
-    //                           },
-    //                           {
-    //                             cols: [
-    //                               {
-    //                                 id: "unicode-validity",
-    //                                 label: "Allow Unicode characters?",
-    //                                 labelStyle: {
-    //                                   backgroundColor: "white",
-    //                                 },
-    //                                 style: {
-    //                                   textAlign: 'left',
-    //                                   color: '#262626',
-    //                                   fontFamily: 'Open-Sans',
-    //                                   lineHeight: '24px',
-    //                                   fontSize: '14px',
-    //                                 },
-    //                                 type: "checkbox",  //Resembles component to be used
-    //                                 metaType: "text",
-    //                                 datatype: "boolean",
-    //                                 required: true,
-    //                                 fluid: true,
-    //                                 styling: "semantic",
-    //                                 order: 1,
-    //                                 width: 10,
-    //                                 offset: 4,
-    //                                 onlyDisplay: false,
-    //                                 customComponent: false,
-    //                                 supportedEvents: {
-    //                                   onChange: this.onTemplateNameChange,
-    //                                 },
-    //                               },
-    //                             ],
-    //                           },
-    //                         ],
-    //                         actionFields: [],
-    //                       },
-    //                     ],
-    //                   },
-    //                   {
-    //                     width: 6,
-    //                     type: "multicols",
-    //                     offset: 1,
-    //                     colStyle: {
-    //                       paddingTop: '16px',
-    //                     },
-    //                     inputFields: [
-    //                       {
-    //                         cols: [
-    //                           {
-    //                             id: "sms-preview",
-    //                             type: "sms-preview",  //Resembles component to be used
-    //                             customComponent: true,
-    //                             customStyling: { padding: '0' },
-    //                             metaType: "preview",
-    //                             required: true,
-    //                             fluid: true,
-    //                             styling: "semantic",
-    //                             order: 1,
-    //                             width: 5,
-    //                             onlyDisplay: true,
-    //                             offset: 7,
-    //                             channel: 'SMS',
-    //                             supportedEvents: {
-    //                               onChange: this.onTemplateNameChange,
-    //                             },
-    //                           },
-    //                         ],
-    //                       },
-    //                     ],
-    //                   },
-    //                 ],
-    //               },
-    //             ],
-    //           },
-    //         ],
-    //         type: "tabs",
-    //         defaultPanes: 1,
-    //         additionalPanes: 0,
-    //         id: "pane",
-    //         tabBarExtraContent: {
-    //           sections: [
-    //             {
-    //               type: "multicols",
-    //               actionFields: [
-    //                 {
-    //                   cols: [
-    //                     {
-    //                       id: "add-version-button",
-    //                       metaType: "submit-button",
-    //                       type: "button",
-    //                       buttonType: "cancel",
-    //                       icon: "plus-circle-o",
-    //                       value: "New Version",
-    //                       customComponent: false,
-    //                       onlyDisplay: true,
-    //                       styling: "semantic",
-    //                       order: 3,
-    //                       fluid: false,
-    //                       submitAction: "addVersion",
-    //                       supportedEvents: {
-    //                         addVersion: this.addVersion,
-    //                       },
-    //                     },
-    //                   ],
-    //                 },
-    //               ],
-    //               inputFields: [],
-    //             },
-    //           ],
-    //         },
-    //         tabContent: {
-    //           sections: [
-    //             {
-    //               type: "multicols",
-    //               inputFields: [
-    //                 {
-    //                   rowStyle: {
-    //                     display: "flex",
-    //                     flex: 1,
-    //                   },
-    //                   cols: [
-    //                     {
-    //                       id: "tab-header",
-    //                       metaType: "label",
-    //                       value: "Version",
-    //                       primitive: true,
-    //                       dynamicTab: true,
-    //                       type: "div",
-    //                       width: 5,
-    //                       offset: 0,
-    //                       onlyDisplay: true,
-    //                       colStyle: {
-    //                         flex: 1,
-    //                       },
-    //                       supportedEvents: {
-    //                         onChange: this.onVersionNameChange,
-    //                       },
-    //                     },
-    //                     {
-    //                       id: "tab-options-popover",
-    //                       metaType: "display",
-    //                       colStyle: {
-    //                         flex: 0,
-    //                       },
-    //                       type: "popover",
-    //                       customComponent: false,
-    //                       styling: "semantic",
-    //                       order: 3,
-    //                       fluid: false,
-    //                       onlyDisplay: true,
-    //                       submitAction: "onTabOptionSelect",
-    //                       supportedEvents: {
-    //                         onTabOptionSelect: this.onTabOptionSelect,
-    //                       },
-    //                       content: {
-    //                         sections: [
-    //                           {
-    //                             type: "multicols",
-    //                             inputFields: [
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "mark-final-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Mark as Final",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "markFinalVersion",
-    //                                     supportedEvents: {
-    //                                       markFinalVersion: this.markFinalVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "duplicate-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Duplicate",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "duplicateVersion",
-    //                                     supportedEvents: {
-    //                                       duplicateVersion: this.duplicateVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "rename-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Rename",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "renameVersion",
-    //                                     supportedEvents: {
-    //                                       renameVersion: this.renameVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "delete-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Delete",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "deleteVersion",
-    //                                     supportedEvents: {
-    //                                       deleteVersion: this.deleteVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                             ],
-    //                             actionFields: [],
-    //                           },
-    //                         ],
-    //                       },
-    //                       value: {
-    //                         sections: [
-    //                           {
-    //                             type: "multicols",
-    //                             inputFields: [
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "tab-option-icon",
-    //                                     metaType: "display",
-    //                                     type: "icon",
-    //                                     onlyDisplay: true,
-    //                                     primitive: false,
-    //                                     value: "&#xE313;",
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                   },
-    //                                 ],
-    //                               },
-    //                             ],
-    //                             actionFields: [],
-    //                           },
-    //                         ],
-    //                       },
-    //                       trigger: "click",
-    //                       placement: "bottomRight",
-    //                     },
-    //                   ],
-    //                 },
-    //               ],
-    //               actionFields: [],
-    //             },
-    //           ],
-    //         },
-    //         label: "Version",
-    //         supportedEvents: {
-    //           onTabChange: this.onTabChange,
-    //         },
-    //       },
-    //     ],
-    //     channel: "SMS",
-    //     module: "Campaigns",
-    //   };
-    this.setState({ schema: this.props.metaEntities.layouts[0].definition });
-  }
-
-  handleCancelModal = () => {
-    this.setState({showModal: false});
-  }
-
-  saveFormData(formData) {
-    //Logic to save in db etc
-    // const isValidated = this.validateFormData(formData);
-    // 
-    // if (!isValidated) {
-    //   return;
-    // }
-    
-    const obj = {};
-    obj.versions = {
-      base: {},
-      history: [],
-    };
-    obj.type = 'SMS';
-    for (let index = 0; index < this.state.tabCount; index += 1 ) {
-      obj.versions.history.push(formData[index]);
-      // if (formData[index])
-    }
-    obj.name = formData['template-name'];
-    obj.versions.base = formData.base;
-    
-    this.props.actions.createTemplate(obj);
-  }
-  render() {
-    
-    const schema = this.state.schema;
-    const spinning = this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
-    let tags = this.props.metaEntities && this.props.metaEntities.tags && this.props.metaEntities.tags.standard ? this.props.metaEntities.tags.standard : [];
-
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
-      tags = this.props.supportedTags; // if get default tags is not present and supported tags is present use that inlbrary mode
-    }
-    return (
-      <div>
-        <Spin tip={this.props.intl.formatMessage(messages.saveTemplateLoader)} spinning={spinning}>
-          {/*<\Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
-            <Col offset={1}>
-              <Breadcrumb>
-                <Breadcrumb.Item>Campaigns</Breadcrumb.Item>
-                <Breadcrumb.Item>Creatives</Breadcrumb.Item>
-                <Breadcrumb.Item>SMS</Breadcrumb.Item>
-              </Breadcrumb>
-            </Col>
-          </Row>*/}
-          <Row>
-            <Col>
-              <FormBuilder
-                schema={schema}
-                onSubmit={this.saveFormData}
-                onChange={this.onFormDataChange}
-                currentTab={this.state.currentTab}
-                showModal={this.state.showModal}
-                modal={this.state.modalContent}
-                parent={this}
-                iframeParent={parent}
-                formData={_.cloneDeep(this.state.formData)}
-                location={this.props.location}
-                tabKey={this.state.tabKey}
-                tags={tags}
-                tagModule={this.props.getDefaultTags}
-                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
-                onFormValidityChange={this.setFormValidity}
-                usingTabContainer
-                checkValidation={this.state.checkValidation}
-                onContextChange={this.handleOnTagsContextChange}
-                handleCancelModal={this.handleCancelModal}
-                router={this.props.router}
-              />
-            </Col>
-          </Row>
-        </Spin>
-      </div>
-    );
-  }
-}
-
-Create.propTypes = {
-  actions: PropTypes.object.isRequired,
-  Create: PropTypes.object,
-  router: PropTypes.object,
-  location: PropTypes.object,
-  route: PropTypes.object,
-  globalActions: PropTypes.object,
-  metaEntities: PropTypes.object,
-  intl: intlShape.isRequired,
-  supportedTags: PropTypes.array,
-  getDefaultTags: PropTypes.string,
-  injectedTags: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  Create: makeSelectCreate(),
-  createResponse: makeSelectCreateResponse(),
-  metaEntities: makeSelectMetaEntities(),
-  injectedTags: setInjectedTags(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
-const withReducer = injectReducer({ key: 'create', reducer });
-const withCreateSmsSaga = injectSaga({ key: 'create', saga: createSmsSaga });
-
-export default compose(
-  UserIsAuthenticated,
-  withCreateSmsSaga,
-  withReducer,
-  withConnect,
-)(injectIntl(Create));