@capillarytech/creatives-library 1.0.2 → 2.0.1

package/containers/WeChat/index.js

@@ -0,0 +1,1625 @@
+/*
+ *
+ * WeChat
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React 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.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',
+    //   },
+    // ];
+    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+    if (this.props.supportedTags) {
+      tags = this.props.supportedTags;
+    }
+    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={tags}
+              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,
+  templateData: PropTypes.object,
+};
+
+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)));