@capillarytech/creatives-library 0.1.32 → 1.0.0

package/containers/WeChat/index.js

@@ -1,1618 +0,0 @@
-/*
- *
- * WeChat
- *
- */
-
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import Helmet from 'react-helmet';
-import { injectIntl, intlShape } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-// import { CapButton, CapSelect } from '@capillarytech/cap-react-ui-library';
-import { Row, Col, Spin } from 'antd';
-import _ from 'lodash';
-import { makeSelectTemplates } from '../Templates/selectors';
-import { makeSelectMetaEntities } from '../Cap/selectors';
-import makeSelectWeChat from './selectors';
-import messages from './messages';
-import * as actions from './actions';
-import FormBuilder from '../../components/FormBuilder';
-import { UserIsAuthenticated } from '../../utils/authWrapper';
-import * as globalActions from '../../containers/Cap/actions';
-import {getMessageObject} from '../../utils/messageUtils';
-// import SlideBox from '../../components/SlideBox';
-// import PageHeader from '../../components/PageHeader';
-import './_wechat.scss';
-
-// const Option = Select.Option;
-
-export class WeChat extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      schema: {},
-      // schema:
-      // {
-      //   standalone: {
-      //     sections: [
-      //       {
-      //         type: "parent",
-      //         width: 24,
-      //         rowStyle: {
-      //           height: '100%',
-      //         },
-      //         childSections: [
-      //           {
-      //             type: "multicols",
-      //             inputFields: [
-      //               {
-      //                 cols: [
-      //                   {
-      //                     id: "template-header",
-      //                     metaType: "label",
-      //                     value: 'Template mapping',
-      //                     primitive: true,
-      //                     type: "div",
-      //                     width: 9,
-      //                     offset: 0,
-      //                     onlyDisplay: true,
-      //                     colStyle: {
-      //                       flex: 1,
-      //                       color: '#323B4E',
-      //                       fontFamily: 'proxima-nova',
-      //                       fontWeight: '600',
-      //                       lineHeight: '32px',
-      //                       fontSize: '24px',
-      //                       display: (this.props.location.query.type === 'embedded' ? 'none' : 'block'),
-      //                     },
-      //                   },
-      //                   {
-      //                     id: "discard-button",
-      //                     width: 3,
-      //                     offset: 8,
-      //                     metaType: "submit-button",
-      //                     colStyle: {
-      //                       // marginLeft: '47.833%',
-      //                       textAlign: 'right',
-      //                       paddingRight: '12px',
-      //                       display: (this.props.location.query.type === 'embedded' ? 'none' : 'block'),
-      //                     },
-      //                     type: "button",
-      //                     buttonType: "cancel",
-      //                     value: 'Discard',
-      //                     customComponent: false,
-      //                     standalone: true,
-      //                     styling: "semantic",
-      //                     order: 3,
-      //                     fluid: false,
-      //                     submitAction: "discardValues",
-      //                     supportedEvents: [
-      //                       'discardValues',
-      //                     ],
-      //                   },
-      //                   {
-      //                     id: "cancel-button",
-      //                     width: 2,
-      //                     // offset: 11,
-      //                     metaType: "submit-button",
-      //                     colStyle: {
-      //                       textAlign: 'center',
-      //                       width: '9%',
-      //                       display: (this.props.location.query.type === 'embedded' ? 'none' : 'block'),
-      //                     },
-      //                     type: "button",
-      //                     buttonType: "cancel",
-      //                     value: 'Cancel',
-      //                     customComponent: false,
-      //                     standalone: true,
-      //                     styling: "semantic",
-      //                     order: 3,
-      //                     fluid: false,
-      //                     submitAction: "cancelTemplate",
-      //                     supportedEvents: [
-      //                       'cancelTemplate',
-      //                     ],
-      //                   },
-      //                   {
-      //                     id: "save-button",
-      //                     width: 2,
-      //                     metaType: "submit-button",
-      //                     colStyle: {
-      //                       textAlign: 'right',
-      //                       width: '7%',
-      //                       display: (this.props.location.query.type === 'embedded' ? 'none' : 'block'),
-      //                     },
-      //                     type: "button",
-      //                     buttonType: "primary",
-      //                     value: 'Save',
-      //                     customComponent: false,
-      //                     styling: "semantic",
-      //                     order: 3,
-      //                     fluid: false,
-      //                     standalone: true,
-      //                     submitAction: "saveFormData",
-      //                     supportedEvents: [
-      //                       'saveFormData',
-      //                     ],
-      //                   },
-      //                 ],
-      //               },
-      //             ],
-      //           },
-      //           {
-      //             width: 24,
-      //             type: 'parent',
-      //             rowStyle: {
-      //               height: '100%',
-      //               border: '1px solid #d9d9d9',
-      //               marginTop: '16px',
-      //             },
-      //             childSections: [
-      //               {
-      //                 colStyle: {
-      //                   paddingTop: '16px',
-      //                   borderRight: '1px solid #d9d9d9',
-      //                   height: '100%',
-      //                   // overflowY: 'auto',
-      //                 },
-      //                 width: 15,
-      //                 type: 'parent',
-      //                 childSections: [
-      //                   {
-      //                     type: "col-label",
-      //                     inputFields: [
-      //                       {
-      //                         id: "wechat-accounts",
-      //                         label: 'Account Id',
-      //                         labelStyle: {
-      //                           backgroundColor: 'white',
-      //                           textAlign: 'left',
-      //                           color: '#333333',
-      //                           lineHeight: '24px',
-      //                           fontSize: '14px',
-      //                           fontWeight: '400',
-      //                           fontFamily: 'open-sans',
-      //                           fontStyle: 'normal',
-      //                           padding: '.5em .833em',
-      //                           display: (this.props.location.query.module === 'loyalty' ? 'block' : 'none'),
-      //                         },
-      //                         placeholder: 'Select Wechat Account',
-      //                         type: "select",  //Resembles component to be used
-      //                         options: [],
-      //                         metaType: "text",
-      //                         datatype: "string",
-      //                         required: true,
-      //                         fluid: true,
-      //                         style: {
-      //                           fontSize: '14px',
-      //                           fontFamily: 'open-sans',
-      //                           fontStyle: 'normal',
-      //                           // fontWeight: 600,
-      //                           marginBottom: '16px',
-      //                           display: (this.props.location.query.module === 'loyalty' ? 'block' : 'none'),
-      //                         },
-      //                         styling: "semantic",
-      //                         order: 1,
-      //                         width: 15,
-      //                         offSet: 6,
-      //                         customComponent: false,
-      //                         standalone: true,
-      //                         supportedEvents: [
-      //                           'onSelect',
-      //                         ],
-      //                       },
-      //                       {
-      //                         id: "wechat-template",
-      //                         label: 'Template',
-      //                         labelStyle: {
-      //                           backgroundColor: 'white',
-      //                           textAlign: 'left',
-      //                           color: '#333333',
-      //                           lineHeight: '24px',
-      //                           fontSize: '14px',
-      //                           fontWeight: '400',
-      //                           fontFamily: 'open-sans',
-      //                           fontStyle: 'normal',
-      //                           padding: '.5em .833em',
-      //                         },
-      //                         placeholder: 'Select Wechat Template',
-      //                         type: "select",  //Resembles component to be used
-      //                         options: [],
-      //                         metaType: "text",
-      //                         datatype: "string",
-      //                         required: true,
-      //                         fluid: true,
-      //                         disabled: (this.props.params.id && this.props.location.query.module !== 'loyalty'),
-      //                         style: {
-      //                           fontSize: '14px',
-      //                           fontFamily: 'open-sans',
-      //                           fontStyle: 'normal',
-      //                           // fontWeight: 600,
-      //                           marginBottom: '16px',
-      //                         },
-      //                         styling: "semantic",
-      //                         order: 1,
-      //                         width: 15,
-      //                         offSet: 6,
-      //                         customComponent: false,
-      //                         standalone: true,
-      //                         supportedEvents: [
-      //                           'onSelect',
-      //                         ],
-      //                       },
-      //                     ],
-      //                     actionFields: [],
-      //                   },
-      //                   {
-      //                     type: "multicols",
-      //                     inputFields: [
-      //                       {
-      //                         cols: [],
-      //                       },
-      //                     ],
-      //                   },
-      //                 ],
-      //               },
-      //               {
-      //                 width: 8,
-      //                 type: 'multicols',
-      //                 colStyle: {
-      //                   paddingTop: '16px',
-      //                   height: '100%',
-      //                 },
-      //                 inputFields: [
-      //                   {
-      //                     cols: [
-      //                       {
-      //                         id: "sms-preview",
-      //                         type: "sms-preview",  //Resembles component to be used
-      //                         customComponent: true,
-      //                         charCounterEnabled: false,
-      //                         customStyling: { padding: '0', overflowX: 'hidden' },
-      //                         style: {
-      //                           overflowX: 'hidden',
-      //                         },
-      //                         content: '',
-      //                         metaType: "preview",
-      //                         required: true,
-      //                         fluid: true,
-      //                         styling: "semantic",
-      //                         order: 1,
-      //                         width: 5,
-      //                         onlyDisplay: true,
-      //                         offset: 7,
-      //                         channel: 'WECHAT',
-      //                       },
-      //                     ],
-      //                   },
-      //                 ],
-      //               },
-      //             ],
-      //           },
-      //         ],
-      //       },
-      //     ],
-      //   },
-      //   containers: [],
-      //   channel: "WECHAT",
-      //   module: "Campaigns",
-      // },
-      baseSchema: {},
-      formData: {},
-      map: {
-        "discard-button": {
-          discardValues: this.discardValues,
-        },
-        "cancel-button": {
-          cancelTemplate: this.cancelTemplate,
-        },
-        "save-button": {
-          saveFormData: this.saveFormData,
-        },
-        "wechat-template": {
-          onSelect: this.selectWechatTemplate,
-        },
-        "wechat-accounts": {
-          onSelect: this.selectWechatAccount,
-        },
-        "template-link": {
-          onChange: this.setContent,
-        },
-        "is-internal-url": {
-          onChange: this.internalUrlChecked,
-        },
-      },
-      selectedTemplateTags: [],
-      isEdit: false,
-      editTemplateData: {},
-      isFormValid: true,
-      checkValidation: false,
-      injectedTags: {},
-      isLoading: true,
-      showModal: false,
-      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',
-      },
-    };
-
-    this.saveFormData = this.saveFormData.bind(this);
-    this.onFormDataChange = this.onFormDataChange.bind(this);
-    this.setTemplateOptions = this.setTemplateOptions.bind(this);
-    this.cancelTemplate = this.cancelTemplate.bind(this);
-    this.setSelectedTemplateData = this.setSelectedTemplateData.bind(this);
-    this.discardValues = this.discardValues.bind(this);
-    this.internalUrlChecked = this.internalUrlChecked.bind(this);
-    this.getTagsFromContent = this.getTagsFromContent.bind(this);
-    this.onTagSelect = this.onTagSelect.bind(this);
-    this.insertAtCursor = this.insertAtCursor.bind(this);
-    this.setFormValidity = this.setFormValidity.bind(this);
-    this.setContent = this.setContent.bind(this);
-    this.prepareWeChatPreviewData = this.prepareWeChatPreviewData.bind(this);
-    this.setEditData = this.setEditData.bind(this);
-    this.maskTemplateUrl = this.maskTemplateUrl.bind(this);
-    this.unMaskTemplateUrl = this.unMaskTemplateUrl.bind(this);
-    this.resetState = this.resetState.bind(this);
-    this.resetSchema = this.resetSchema.bind(this);
-    this.handleFrameTasks = this.handleFrameTasks.bind(this);
-    this.getCurrentWindow = this.getCurrentWindow.bind(this);
-    this.startLoading = this.startLoading.bind(this);
-    this.startTemplateCreation = this.startTemplateCreation.bind(this);
-    this.selectWechatTemplate = this.selectWechatTemplate.bind(this);
-    this.removeActionButtons = this.removeActionButtons.bind(this);
-    this.setWechatAccountOptions = this.setWechatAccountOptions.bind(this);
-    this.selectWechatAccount = this.selectWechatAccount.bind(this);
-    this.moveToTemplates = this.moveToTemplates.bind(this);
-    this.injectMessages = this.injectMessages.bind(this);
-    this.hideSchemaElementsByModule = this.hideSchemaElementsByModule.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.showNext = this.showNext.bind(this);
-    this.updateSchema = false;
-  }
-
-  componentWillMount() {
-    const query = {
-      layout: 'WECHAT',
-      type: 'LAYOUT',
-      context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-    };
-    this.props.globalActions.fetchSchemaForEntity(query);
-    this.props.actions.getWeCrmAccounts();
-    if (this.props.params.id) {
-      this.props.actions.getTemplateDetails(this.props.params.id);
-      this.setState({isEdit: true});
-    }
-    console.log("Mount Params ", this.props.Templates.selectedWeChatAccount, this.props.location.query.type);
-    if (this.props.Templates.selectedWeChatAccount || (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty')) {
-      if (this.props.Templates.selectedWeChatAccount) {
-        const params = {
-          name: '',
-          sortBy: 'Most Recent',
-          wecrmId: this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id,
-          wecrmToken: this.props.Templates.selectedWeChatAccount.configs.wecrm_token,
-        };
-        this.props.actions.getDefaultWeChatTemplates('wechat', params);
-      } else {
-        this.setWechatAccountOptions(this.props.WeChat.weCrmAccounts);
-      }
-      window.addEventListener("message", this.handleFrameTasks);
-    } else if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'outbound') {
-      console.log('Inside embedded Outbound');
-    } else {
-      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: `/wechat`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
-    }
-  }
-
-  componentDidMount() {
-    console.log('added listener create,', this.props);
-    const query = {
-      layout: 'WECHAT',
-      type: 'LAYOUT',
-      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);
-
-    window.addEventListener("message", this.handleFrameTasks);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      this.getFormData();
-    }
-    console.log('MetaEntity nextprops ', nextProps.metaEntities);
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      const query = {
-        layout: 'WECHAT',
-        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) { // handling dynamic tags in library mode, but handling static and synamic tags in email and sms.
-        query.context = this.props.getDefaultTags;
-      }
-      this.props.globalActions.fetchSchemaForEntity(query);
-    }
-
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && !_.isEmpty(this.state.schema)) {
-      if (nextProps.WeChat.weChatDefaultTemplate && !_.isEqual(nextProps.WeChat.weChatDefaultTemplate, this.props.WeChat.weChatDefaultTemplate)) {
-        this.injectEvents(this.state.schema);
-        if (nextProps.location.query.type === 'embedded' && nextProps.location.query.module === 'loyalty') {
-          this.setTemplateOptions(nextProps.WeChat.weChatTemplates);
-        } else {
-          this.setTemplateOptions(nextProps.WeChat.weChatDefaultTemplate);
-        }
-      }
-      if ((this.props.location.query.type === 'embedded' && (this.props.location.query.module === 'loyalty' || this.props.location.query.module === 'outbound')) && !_.isEmpty(nextProps.WeChat.templateDetails) && !_.isEqual(nextProps.WeChat.templateDetails, this.props.WeChat.templateDetails)) {
-        this.setState({editTemplateData: nextProps.WeChat.templateDetails}, () => {
-          if ( !_.isEmpty(this.state.baseSchema)) {
-            this.setEditData();
-          } else {
-            this.setState({baseSchema: _.cloneDeep(this.state.schema)}, () => {
-              this.setEditData();
-            });
-          }
-        });
-      }
-      // has to be un commented when wechat edit is implemented in embedded mode.
-      // if (nextProps.location.query.type === "embedded" && nextProps.location.query.module === "library" && nextProps.templateData && nextProps.templateData.versions) { // Edit of already added message in library mode
-      //   this.setState({editTemplateData: nextProps.templateData}, () => {
-      //     this.setEditData();
-      //   });
-      // }
-      if (nextProps.params.id && !_.isEqual(nextProps.params.id, this.props.params.id)) {
-        this.setState({isEdit: true});
-      }
-      if (this.state.isEdit && _.isEmpty(this.state.editTemplateData) && !_.isEmpty(nextProps.WeChat.weChatTemplates)) {
-        const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {"_id": nextProps.params.id});
-        this.setState({editTemplateData: nextProps.WeChat.weChatTemplates[templateIndex]}, () => {
-          if (_.isEmpty(this.state.baseSchema)) {
-            this.setState({ baseSchema: _.cloneDeep(this.state.schema)}, () => {
-              this.setEditData();
-            });
-          } else {
-            this.setEditData();
-          }
-        });
-      }
-      if (nextProps.location.query.type === 'embedded') {
-        this.removeActionButtons();
-      }
-
-      if (nextProps.WeChat.createResponse && nextProps.WeChat.createResponse.templateId) {
-        // this.resetSchema();
-        let message;
-        if (this.state.isEdit) {
-          message = getMessageObject('success', this.props.intl.formatMessage(messages.wechatEditSuccess), true);
-        } else {
-          message = getMessageObject('success', this.props.intl.formatMessage(messages.wechatCreateSuccess), true);
-        }
-        this.props.globalActions.addMessageToQueue(message);
-        this.props.actions.clearCreateResponse();
-        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: `/wechat`,
-          query: type === 'embedded' ? {type: 'embedded', module} : {module},
-        });
-      }
-      if (nextProps.WeChat.createTemplateError && !_.isEqual(nextProps.WeChat.createTemplateError, this.props.WeChat.createTemplateError)) {
-        const message = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
-        this.props.globalActions.addMessageToQueue(message);
-      }
-
-      // console.log('All Dont Hail ', query);
-      // this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      // const query = {
-      //   layout: 'WECHAT',
-      //   type: 'TAG',
-      //   context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-      // };
-      // this.props.globalActions.fetchSchemaForEntity(query);
-      if (this.props.location.query.type === 'embedded') {
-        this.showNext();
-      }
-
-      if (!_.isEqual(this.props.WeChat.weCrmAccounts, nextProps.WeChat.weCrmAccounts) && (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty')) {
-        this.injectEvents(this.state.schema);
-        this.setWechatAccountOptions(nextProps.WeChat.weCrmAccounts);
-      }
-
-      if (!_.isEmpty(nextProps.WeChat.selectedWeChatAccount) && !_.isEqual(this.props.WeChat.selectedWeChatAccount, nextProps.WeChat.selectedWeChatAccount) && (this.props.location.query.type === 'embedded')) {
-        const params = {
-          name: '',
-          sortBy: 'Most Recent',
-          wecrmId: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_app_id,
-          wecrmToken: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_token,
-        };
-        this.props.actions.getDefaultWeChatTemplates('wechat', params);
-      }
-
-      if (_.isEmpty(nextProps.WeChat.selectedWeChatAccount) && (this.props.location.query.type === 'embedded')) {
-        let selectedAccount = {};
-        _.forEach(nextProps.WeChat.weCrmAccounts, (account) => {
-          if (account.configs && account.configs.is_wecrm_enabled) {
-            if (account.sourceAccountIdentifier === this.props.location.query.source_account_id) {
-              selectedAccount = account;
-            }
-          }
-        });
-        if (!_.isEmpty(selectedAccount)) {
-          this.props.actions.setWeChatAccount(selectedAccount);
-        }
-      }
-
-      if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && 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 (this.props.location.query.type.type === 'embedded' && this.props.location.query.module === 'loyalty' && this.state.formData['wechat-template'] !== '') {
-      // }
-
-      if (!nextProps.WeChat.fetchingDefaultTemplates && nextProps.location.query.module === 'outbound' && nextProps.params.id !== undefined) {
-        this.setState({ isLoading: false});
-      }
-      if ((!nextProps.WeChat.fetchingDefaultTemplates && !_.isEqual(nextProps.WeChat.fetchingDefaultTemplates, this.props.WeChat.fetchingDefaultTemplates) && nextProps.location.query.module !== 'loyalty') || (nextProps.location.query.module === 'loyalty')) {
-        this.setState({ isLoading: false});
-      }
-
-      if (nextProps.WeChat.fetchingDefaultTemplates && nextProps.location.query.module === 'loyalty' && nextProps.params.id === undefined) {
-        this.setState({ isLoading: true});
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    console.log('removed listener create');
-    window.removeEventListener("message", this.handleFrameTasks);
-    this.resetState();
-  }
-
-  onFormDataChange(formData) {
-    console.log('Form Data Change ', formData);
-    let selectedWechatTemplateIndex = -1;
-    let selectedTemplate = {};
-    let selectedTemplateData = {};
-
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === 'loyalty')) {
-      if (this.props.params.id && _.isEmpty(this.props.WeChat.weChatTemplates) && _.isEqual(formData['wechat-template'], this.state.formData['wechat-template'])) {
-        console.log('In If', formData['wechat-template']);
-        selectedTemplate = {
-          template_id: this.props.WeChat.templateDetails.versions.base.template_id,
-          title: this.props.WeChat.templateDetails.versions.base.Title,
-          content: this.props.WeChat.templateDetails.versions.base.content,
-        };
-        selectedTemplateData = this.props.WeChat.templateDetails;
-      } else {
-        console.log('In Else', formData['wechat-template']);
-        _.forEach(this.props.WeChat.weChatTemplates, (template) => {
-          if (template.versions.base.template_id === formData['wechat-template']) {
-            selectedTemplate = {
-              template_id: template.versions.base.template_id,
-              title: template.versions.base.Title,
-              content: template.versions.base.content,
-            };
-            selectedTemplateData = template;
-          }
-        });
-      }
-    } else if (this.state.isEdit && this.state.editTemplateData.versions) {
-      console.log('this.state.editTemplateData', this.state.editTemplateData);
-      selectedTemplateData = _.cloneDeep(this.state.editTemplateData);
-      selectedTemplate = {
-        template_id: selectedTemplateData.versions.base.template_id,
-        title: selectedTemplateData.versions.base.Title,
-        content: selectedTemplateData.versions.base.content,
-      };
-    } else if (!this.state.isEdit) {
-      selectedWechatTemplateIndex = _.findIndex(this.props.WeChat.weChatDefaultTemplate, {template_id: formData['wechat-template']});
-      selectedTemplate = this.props.WeChat.weChatDefaultTemplate[selectedWechatTemplateIndex];
-    }
-    if (!_.isEqual(formData['wechat-template'], this.state.formData['wechat-template'])) {
-      this.updateSchema = true;
-    }
-    this.setState({formData, editTemplateData: selectedTemplateData}, () => {
-      if (!_.isEmpty(this.state.editTemplateData) && this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
-        this.setEditData();
-      }
-      if (selectedWechatTemplateIndex !== -1 || this.state.isEdit) {
-        let templateData = {};
-        if (this.state.isEdit && !_.isEmpty(this.state.editTemplateData)) {
-          templateData = {
-            template_id: this.state.editTemplateData.versions.base.template_id,
-            title: this.state.editTemplateData.versions.base.Title,
-            content: this.state.editTemplateData.versions.base.content,
-          };
-          if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
-            this.setSelectedTemplateData(selectedTemplate);
-          } else {
-            const templateTags = this.getTagsFromContent(templateData.content);
-            this.prepareWeChatPreviewData(templateData, templateTags);
-          }
-        } else if (!this.updateSchema) {
-          const templateTags = this.getTagsFromContent(selectedTemplate.content);
-          this.prepareWeChatPreviewData(selectedTemplate, templateTags);
-        } else {
-          this.updateSchema = false;
-          this.setSelectedTemplateData(selectedTemplate);
-        }
-      } else {
-        let selectedAccount = {};
-        _.forEach(this.props.WeChat.weCrmAccounts, (account) => {
-          if (account.configs && account.configs.is_wecrm_enabled) {
-            if (account.name === formData['wechat-accounts']) {
-              selectedAccount = account;
-            }
-          }
-        });
-        this.props.actions.setWeChatAccount(selectedAccount);
-      }
-    });
-  }
-
-  onTagSelect(data, currentTab, value) {
-    const editorId = (value.id).replace('tagList', 'template');
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
-    document.getElementById(editorId).focus();
-  }
-
-  getFormData(e) {
-    console.log('posting final result', this.state.formData, this.state.editTemplateData);
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
-    const data = {
-      "template_id": this.state.editTemplateData.versions.base.template_id,
-      "Title": this.state.editTemplateData.versions.base.Title,
-      Tag: [],
-      url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
-      TopColor: "#000000",
-      data: {},
-      preview: '',
-      BrandId: (selectedWeChatAccount.configs.brand_id ? selectedWeChatAccount.configs.brand_id : ''),
-      OriginalId: selectedWeChatAccount.sourceAccountIdentifier,
-      content: this.state.editTemplateData.versions.base.content,
-      isInternalUrl: this.state.formData['is-internal-url'],
-      creative_template_id: this.state.editTemplateData._id,
-      touser: "{{wechat_open_id}}",
-    };
-    _.forEach(this.state.selectedTemplateTags, (templateTag) => {
-      const tagName = templateTag.substr(0, templateTag.indexOf('.'));
-      let newTagname = tagName;
-      data.Tag.push(tagName);
-      if (tagName.match(/first/i)) {
-        newTagname = "Header";
-      }
-      if (tagName.match(/remark/i)) {
-        newTagname = "Footer";
-      }
-      data.data[tagName] = {};
-      data.data[tagName] = {
-        value: this.state.formData[`template-${newTagname}`],
-        color: "#00000",
-      };
-    });
-    const response = {
-      action: "getFormData",
-      value: data,
-      validity: this.state.isFormValid,
-    };
-    console.log('response ', response);
-    this.setState({checkValidation: true});
-    if (this.props.location.query.module === 'library') {
-      this.props.getLibraryFormData(response);
-    } else {
-      e.source.postMessage(JSON.stringify(response), e.origin);
-    }
-  }
-
-  getCurrentWindow(e) {
-    console.log('in sms create', e);
-    const response = {
-      action: e.action,
-      value: 'edit',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  getTagsFromContent(string) {
-    const foundTags = [];
-    const rxp = /{{([^}]+)}}/g;
-    let curMatch;
-    /* eslint-disable */
-    while ( curMatch = rxp.exec( string ) ) {
-      foundTags.push( curMatch[1] );
-    }
-    return foundTags;
-  }
-
-  startLoading(ifEdit) {
-    console.log('startLoading', ifEdit);
-    if (ifEdit) {
-      this.setState({loading: true});
-    }
-  }
-
-  handleFrameTasks = (e) => {
-    // console.log('data listened to is', e.data);
-    const type = 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 "startLoading":
-          this.startLoading(type.edit);
-          break;
-        case "getCurrentWindow":
-          this.getCurrentWindow(type);
-          break;
-        default:
-          break;
-      }
-    } else {
-      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;
-      }
-    }
-  }
-
-  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});
-  }
-
-  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;
-  }
-
-  setSelectedTemplateData(weChatData) {
-    if (_.isEmpty(weChatData)) {
-      return;
-    }
-    console.log('Setting Data ', weChatData, this.state.baseSchema);
-    const {map} = _.cloneDeep(this.state);
-    const schema = _.cloneDeep(this.state.baseSchema);
-    const templateTags = this.getTagsFromContent(weChatData.content);
-    const formData = _.cloneDeep(this.state.formData);
-    _.forEach(templateTags, (tag) => {
-      const tagTitle = tag.substr(0, tag.indexOf('.'));
-      let title = tagTitle;
-
-      if (tagTitle.match(/first/i)) {
-        title = "Header";
-      }
-      if (tagTitle.match(/remark/i)) {
-        title = "Footer";
-      }
-
-      const colsData = {
-        cols: [
-          {
-            id: `template-label-${title}`,
-            metaType: "label",
-            value: `${title}`,
-            primitive: true,
-            type: "div",
-            width: 4,
-            offset: 0,
-            onlyDisplay: true,
-            colStyle: {
-              flex: 1,
-              textAlign: 'left',
-              color: '#333333',
-              lineHeight: '24px',
-              fontSize: '14px',
-              fontWeight: '400',
-              fontFamily: 'open-sans',
-              fontStyle: 'normal',
-              textTransform: 'capitalize',
-              padding: '1em .833em',
-            },
-          },
-          {
-            id: `template-${title}`,
-            placeholder: `${title}`,
-            type: "input",  //Resembles component to be used
-            metaType: "text",
-            datatype: "string",
-            errorMessage: `${title} has invalid content.`,
-            required: true,
-            fluid: true,
-            disabled: (this.props.location.query.type === 'embedded'),
-            style: {
-              fontSize: '14px',
-              fontFamily: 'open-sans',
-              fontStyle: 'normal',
-              // fontWeight: 600,
-              marginBottom: '16px',
-            },
-            styling: "semantic",
-            order: 1,
-            width: 15,
-            // offSet: 2,
-            customComponent: false,
-            standalone: true,
-            supportedEvents: [
-              'onChange',
-            ],
-          },
-        ],
-      };
-
-      if(this.props.location.query.type !== 'embedded') {
-        colsData.cols.push({
-          offset: 20,
-          id: `tagList-${title}`,
-          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',
-          ],
-        },);
-      }
-
-      map[`tagList-${title}`] = {
-        onTagSelect: this.onTagSelect,
-      };
-
-      // if(!tagTitle.match(/first/i) && !tagTitle.match(/remark/i) && this.props.location.query.type !== 'embedded') {
-      //   colsData.cols.push({
-      //     offset: 20,
-      //     id: `tagList-${title}`,
-      //     // 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',
-      //     ],
-      //   },);
-
-      //   map[`tagList-${title}`] = {
-      //     onTagSelect: this.onTagSelect,
-      //   };
-      // }
-      map[`template-${title}`] = {
-        onChange: this.setContent,
-      };
-
-      schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields.push(colsData);
-    });
-
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields.push(
-      {
-        cols: [
-          {
-            id: "template-label-link",
-            metaType: "label",
-            value: 'Link',
-            primitive: true,
-            type: "div",
-            width: 4,
-            offset: 0,
-            onlyDisplay: true,
-            colStyle: {
-              flex: 1,
-              textAlign: 'left',
-              color: '#333333',
-              lineHeight: '24px',
-              fontSize: '14px',
-              fontWeight: '400',
-              fontFamily: 'open-sans',
-              fontStyle: 'normal',
-              textTransform: 'capitalize',
-              padding: '.5em .833em',
-            },
-          },
-          {
-            id: 'template-link',
-            placeholder: this.props.intl.formatMessage(messages.Link),
-            type: "input",  //Resembles component to be used
-            metaType: "text",
-            datatype: "string",
-            errorMessage: `Link cannot be empty.`,
-            required: true,
-            fluid: true,
-            disabled: (this.props.location.query.type === 'embedded'),
-            style: {
-              fontSize: '14px',
-              fontFamily: 'open-sans',
-              fontStyle: 'normal',
-              // fontWeight: 600,
-              // marginBottom: '16px',
-            },
-            styling: "semantic",
-            order: 1,
-            width: 15,
-            // offSet: 6,
-            customComponent: false,
-            standalone: true,
-            supportedEvents: [
-              'onChange',
-            ],
-          },
-        ],
-      },
-      {
-        cols: [
-          {
-            id: "is-internal-url",
-            label: 'Is this internal url',
-            standalone: true,
-            labelStyle: {
-              backgroundColor: "white",
-            },
-            colStyle: {
-              marginBottom: '24px',
-            },
-            style: {
-              textAlign: 'left',
-              color: '#262626',
-              fontFamily: 'Open-Sans',
-              lineHeight: '24px',
-              fontSize: '14px',
-              padding: '.5833em .833em',
-              marginBottom: '24px',
-              paddingLeft: '0',
-            },
-            type: "checkbox",
-            disabled: (this.props.location.query.type === 'embedded'),
-            metaType: "text",
-            datatype: "boolean",
-            required: true,
-            fluid: true,
-            styling: "semantic",
-            order: 1,
-            width: 10,
-            offset: 4,
-            onlyDisplay: false,
-            customComponent: false,
-            supportedEvents: [
-              'onChange',
-            ],
-          },
-        ],
-      }
-    );
-    if (this.state.isEdit) {
-      _.forEach(this.state.editTemplateData.versions.base.Tag, (tag) => {
-        let tagName = tag;
-        if (tag.match(/first/i)) {
-          tagName = "Header";
-        }
-        if (tag.match(/remark/i)) {
-          tagName = "Footer";
-        }
-        formData[`template-${tagName}`] = this.state.editTemplateData.versions.base.data[tag].value;
-      });
-      if (this.state.editTemplateData.versions.base.url) {
-        formData[`template-link`] = this.state.editTemplateData.versions.base.isInternalUrl ? this.unMaskTemplateUrl(this.state.editTemplateData.versions.base.url) : this.state.editTemplateData.versions.base.url;
-      }
-      if (this.state.editTemplateData.versions.base.isInternalUrl) {
-        formData['is-internal-url'] = this.state.editTemplateData.versions.base.isInternalUrl;
-      }
-      // schema.standalone.sections[0].childSections[1].childSections[1].inputFields[0].cols[0].content = weChatData.content;
-    } else {
-      // schema.standalone.sections[0].childSections[1].childSections[1].inputFields[0].cols[0].content = weChatData.content;
-    }
-    // schema.standalone.sections[0].childSections[1].childSections[1].inputFields[0].cols[0].content = weChatData.content;
-
-    this.setState({schema, map, selectedTemplateTags: templateTags, formData}, () => {
-      console.log('Is internal URL ', this.state.schema, formData);
-      this.prepareWeChatPreviewData(weChatData, templateTags);
-    });
-  }
-
-  resetState() {
-    this.setState({
-      formData: {},
-      schema: {},
-      baseSchema: {},
-      selectedTemplateTags: [],
-      isEdit: false,
-      editTemplateData: {},
-      isFormValid: true,
-      checkValidation: false,
-      injectedTags: {},
-      isLoading: true,
-    });
-  }
-
-  resetSchema() {
-    const formData = _.cloneDeep(this.state.formData);
-    if (this.state.isEdit) {
-      const templateData = {
-        template_id: this.state.editTemplateData.versions.base.template_id,
-        title: this.state.editTemplateData.versions.base.Title,
-        content: this.state.editTemplateData.versions.base.content,
-      };
-      this.setSelectedTemplateData(templateData);
-    } else {
-      this.setState({ schema: this.state.baseSchema, formData: {'wechat-template': "" }});
-      // this.setState({ schema: this.props.metaEntities.layouts[0].definition });
-    }
-  }
-
-  setWechatAccountOptions(weCrmAccounts) {
-    const schema = _.cloneDeep(this.state.schema);
-    const formData = _.cloneDeep(this.state.formData);
-    if (!_.isEmpty(weCrmAccounts)) {
-      _.forEach(weCrmAccounts, (account) => {
-        if (account.configs && account.configs.is_wecrm_enabled) {
-          schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].options.push({
-            key: account.uuid,
-            label: account.name,
-            value: account.name,
-          });
-        }
-
-        if (this.props.WeChat.templateDetails && this.props.WeChat.templateDetails.versions.base.OriginalId === account.sourceAccountIdentifier) {
-          formData['wechat-accounts'] = account.name;
-          this.props.actions.setWeChatAccount(account);
-        }
-      });
-      this.setState({schema, formData});
-    }
-  }
-
-  selectWechatAccount(value, option) {
-    // console.log('Test ', value, option);
-    // templateActions.setWeChatAccount();
-  }
-
-  setTemplateOptions(weChatData) {
-    console.log('Set Templates ', weChatData);
-    const {schema, baseSchema} = this.state;
-    // const schema = _.cloneDeep(this.state.schema);
-    // const baseSchema = _.cloneDeep(this.state.baseSchema);
-    const baseSchemaTemplateOptionEmpty = (!_.isEmpty(baseSchema) && _.isEmpty(baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options));
-    _.forEach(weChatData, (template) => {
-      schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options.push({
-        key: (template.versions) ? template.versions.base.template_id : template.template_id,
-        label: (template.versions) ? template.name : `${template.title} : ${template.template_id}`,
-        value: (template.versions) ? template.versions.base.template_id : template.template_id,
-      });
-      if ((!_.isEmpty(baseSchema) && this.props.location.query.module === 'loyalty') || (baseSchemaTemplateOptionEmpty)) {
-        baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options.push({
-          key: (template.versions) ? template.versions.base.template_id : template.template_id,
-          label: (template.versions) ? template.name : `${template.title} : ${template.template_id}`,
-          value: (template.versions) ? template.versions.base.template_id : template.template_id,
-        });
-      }
-    });
-    this.setState({schema, baseSchema: _.cloneDeep(baseSchema)}, () => {
-      console.log('setTemplateOptions', this.state.baseSchema, schema);
-      if (_.isEmpty(this.state.baseSchema)) {
-        this.setState({baseSchema: _.cloneDeep(schema)});
-      }
-    });
-  }
-
-  setFormValidity(isFormValid) {
-    this.setState({isFormValid});
-  }
-
-  setContent(content) {
-    console.log('Template content changed to ', content);
-  }
-
-  setEditData() {
-    console.log('Inside Edit Data ', this.state.editTemplateData);
-    const formData = _.cloneDeep(this.state.formData);
-    const baseSchema = _.cloneDeep(this.state.baseSchema);
-    if (_.isEmpty(baseSchema)) {
-      return;
-    }
-    formData['wechat-template'] = this.state.editTemplateData.versions.base.template_id;
-    if (this.props.location.query.module !== 'loyalty' && !_.isEmpty(baseSchema)) {
-      baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
-      baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options.push({
-        key: this.state.editTemplateData.versions.base.template_id,
-        label: this.state.editTemplateData.name,
-        value: this.state.editTemplateData.versions.base.template_id,
-      });
-    }
-    const templateData = {
-      'template_id': this.state.editTemplateData.versions.base.template_id,
-      'title': this.state.editTemplateData.versions.base.Title,
-      'content': this.state.editTemplateData.versions.base.content,
-    };
-
-    this.setState({baseSchema, formData, isEdit: true}, () => {
-      this.setSelectedTemplateData(templateData);
-    })
-  }
-
-  maskTemplateUrl(url) {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
-    console.log('wecrm url', selectedWeChatAccount.configs.wecrm_app_id);
-
-    const appid = selectedWeChatAccount.configs.wecrm_app_id;
-    const domain = selectedWeChatAccount.configs.domain;
-    const maskedUrl = `${domain}/web?appid=${appid}&redirect_uri=${escape(url)}&response_type=code&scope=snsapi_base&state=STATE`;
-    console.log('wecrm masked url', maskedUrl);
-    return maskedUrl;
-  }
-
-  unMaskTemplateUrl(url) {
-    let startIndex, endIndex;
-    startIndex = url.indexOf('&redirect_uri=') + 14;
-    endIndex = url.indexOf('&response_type');
-    return decodeURIComponent(url.substring(startIndex, endIndex));
-  }
-
-  getMappedEvent(id, event) {
-    return this.state.map[id][event];
-  }
-
-  handleOnTagsContextChange = (data) => {
-    console.log('parent tags context', data);
-    const query = {
-      layout: 'WECHAT',
-      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);
-  }
-
-  startTemplateCreation(data) {
-    console.log('startTemplateCreation');
-  }
-
-  selectWechatTemplate() {
-    console.log('Updated data');
-  }
-
-  removeActionButtons() {
-    const schema = _.cloneDeep(this.state.schema);
-    const headerCols = schema.standalone.sections[0].childSections[0].inputFields[0].cols;
-    _.forEach(headerCols, (col) => {
-      col.colStyle.display = 'none';
-    });
-    this.setState({schema});
-  }
-
-  showNext() {
-    const response = {
-      action: "showNext",
-      value: true,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  insertAtCursor(field, myValue) {
-    //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 event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
-  }
-
-  internalUrlChecked() {
-
-  }
-
-  discardValues() {
-    // this.setState({ schema: this.state.baseSchema, formData: {}});
-    this.resetSchema();
-    // this.resetState();
-  }
-
-  cancelTemplate() {
-    const type = this.props.location.query.type;
-    this.props.router.push({
-      pathname: `/wechat`,
-      query: type === 'embedded' ? {type: 'embedded'} : {},
-    });
-  }
-
-  saveFormData(formData) {
-    const obj = {};
-    let selectedWechatData = {};
-    if (this.state.isEdit) {
-      obj['_id'] = this.state.editTemplateData._id;
-      selectedWechatData = {
-        'template_id': this.state.editTemplateData.versions.base.template_id,
-        'title': this.state.editTemplateData.versions.base.Title,
-        'content': this.state.editTemplateData.versions.base.content,
-      };
-    } else {
-      const selectedWechatTemplateIndex = _.findIndex(this.props.WeChat.weChatDefaultTemplate, {template_id: formData['wechat-template']});
-      selectedWechatData = this.props.WeChat.weChatDefaultTemplate[selectedWechatTemplateIndex];
-    }
-    obj.name = `${selectedWechatData.title}: ${selectedWechatData.template_id}`;
-    obj.versions = {
-      base: {},
-      history: [],
-    };
-    obj.versions.base = {
-      "template_id": selectedWechatData.template_id,
-      "Title": selectedWechatData.title,
-      Tag: [],
-      url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
-      TopColor: "#000000",
-      data: {},
-      preview: '',
-      BrandId: (this.props.Templates.selectedWeChatAccount.configs.brand_id ? this.props.Templates.selectedWeChatAccount.configs.brand_id : ''),
-      OriginalId: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
-      content: selectedWechatData.content,
-      isInternalUrl: this.state.formData['is-internal-url'],
-    }
-    _.forEach(this.state.selectedTemplateTags, (templateTag) => {
-      const tagName = templateTag.substr(0, templateTag.indexOf('.'));
-      let newTagname = tagName;
-      obj.versions.base.Tag.push(tagName);
-      if (tagName.match(/first/i)) {
-        newTagname = "Header";
-      }
-      if (tagName.match(/remark/i)) {
-        newTagname = "Footer";
-      }
-      obj.versions.base.data[tagName] = {};
-      obj.versions.base.data[tagName] = {
-        value: this.state.formData[`template-${newTagname}`],
-        color: "#00000",
-      }
-    });
-    console.log("Final Object ", obj);
-    this.props.actions.createTemplate(obj);
-  }
-
-  prepareWeChatPreviewData(wechatData, templateTags) {
-    let content = _.cloneDeep(wechatData.content);
-    const {formData} = _.cloneDeep(this.state);
-    _.forEach(templateTags, (tag) => {
-      let tagName = tag.substr(0, tag.indexOf('.'));
-      if (tagName.match(/first/i)) {
-        tagName = "Header";
-      }
-      if (tagName.match(/remark/i)) {
-        tagName = "Footer";
-      }
-      if(this.state.formData[`template-${tagName}`] !== undefined && this.state.formData[`template-${tagName}`] !== '') {
-        content = content.replace(`{{${tag}}}`, this.state.formData[`template-${tagName}`]);
-      }
-    })
-    formData['sms-preview'] = content;
-    // schema.standalone.sections[0].childSections[1].childSections[1].inputFields[0].cols[0].content = content;
-    this.setState({formData}, () => {
-      this.injectEvents(this.state.schema);
-    });
-  }
-
-  injectEvents(schema) {
-    console.log('injecting events', schema);
-    const temp = schema;
-    let newSchema = _.cloneDeep(schema);
-    temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    newSchema = this.hideSchemaElementsByModule(schema);
-    this.setState({schema: newSchema});
-    return schema;
-  }
-
-  hideSchemaElementsByModule(schema) {
-    schema.standalone.sections[0].childSections[0].inputFields[0].cols[0].colStyle.display = (this.props.location.query.type === 'embedded' ? 'none' : 'block');
-    schema.standalone.sections[0].childSections[0].inputFields[0].cols[1].colStyle.display = (this.props.location.query.type === 'embedded' ? 'none' : 'block');
-    schema.standalone.sections[0].childSections[0].inputFields[0].cols[2].colStyle.display = (this.props.location.query.type === 'embedded' ? 'none' : 'block');
-    schema.standalone.sections[0].childSections[0].inputFields[0].cols[3].colStyle.display = (this.props.location.query.type === 'embedded' ? 'none' : 'block');
-
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].labelStyle.display = (this.props.location.query.module === 'loyalty' ? 'block' : 'none');
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].style.display = (this.props.location.query.module === 'loyalty' ? 'block' : 'none');
-
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].disabled = (this.props.params.id && this.props.location.query.module !== 'loyalty');
-    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) => {
-        console.log('injecting for col', col);
-        let 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);
-        });
-        temp = this.injectMessages(temp);
-        return true;
-      });
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
-        let 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);
-        });
-        temp = this.injectMessages(temp);
-        return true;
-      });
-    });
-    return section;
-  }
-
-  injectColLabelSection(section) {
-    _.forEach(section.inputFields, (inputField) => {
-      let 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);
-      });
-      temp = this.injectMessages(temp);
-      return true;
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      let 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);
-      });
-      temp = this.injectMessages(temp);
-      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;
-  }
-
-  handleCancelModal = () => {
-    this.setState({showModal: false});
-  }
-
-  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;
-  }
-
-  render() {
-    // const schema = this.state.schema;
-    // const options = [
-    //   {
-    //     label: 'Test',
-    //     value: 'Test',
-    //   },
-    //   {
-    //     label: 'Test1',
-    //     value: 'Test1',
-    //   },
-    //   {
-    //     label: 'Test2',
-    //     value: 'Test2',
-    //   },
-    //   {
-    //     label: 'Test3',
-    //     value: 'Test3',
-    //   },
-    // ];
-    return (
-      <Spin
-        tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
-        spinning={this.state.isLoading}>
-      <div>
-        <Helmet
-          title="WeChat"
-        />
-        {/* <CapSelect options={options} /> */}
-        <Row className="wechat-container">
-          <Col>
-            <FormBuilder
-              schema={this.state.schema}
-              onSubmit={this.saveFormData}
-              onChange={this.onFormDataChange}
-              parent={this}
-              modal={this.state.modalContent}
-              showModal={this.state.showModal}
-              iframeParent={parent}
-              formData={_.cloneDeep(this.state.formData)}
-              onFormValidityChange={this.setFormValidity}
-              location= {this.props.location}
-              tags={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
-              tagModule={this.props.getDefaultTags}
-              injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
-              isEdit={this.state.isEdit}
-              usingTabContainer={false}
-              router={this.props.router}
-              checkValidation={this.state.checkValidation}
-              handleCancelModal={this.handleCancelModal}
-              onContextChange={this.handleOnTagsContextChange}
-            />
-          </Col>
-        </Row>
-      </div>
-      </Spin>
-    );
-  }
-}
-
-WeChat.propTypes = {
-  actions: PropTypes.object.isRequired,
-  WeChat: PropTypes.object,
-  globalActions: PropTypes.object,
-  Templates: PropTypes.object,
-  location: PropTypes.object,
-  router: PropTypes.object,
-  params: PropTypes.object,
-  metaEntities: PropTypes.object,
-  intl: intlShape.isRequired,
-  isGetFormData: PropTypes.bool,
-  getLibraryFormData: PropTypes.func,
-  getDefaultTags: PropTypes.string,
-};
-
-const mapStateToProps = createStructuredSelector({
-  WeChat: makeSelectWeChat(),
-  Templates: makeSelectTemplates(),
-  metaEntities: makeSelectMetaEntities(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(WeChat)));