@capillarytech/creatives-library 3.0.35 → 3.1.0

package/v2Containers/WeChat/MapTemplates/index.js

@@ -1,18 +1,25 @@
 /*
- *
- * WeChat
- *
- */
+*
+* WeChat
+*
+*/
 
 import PropTypes from 'prop-types';
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import Helmet from 'react-helmet';
-import { intlShape } from 'react-intl';
+import { intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { Row, Col, Spin } from 'antd';
-import _ from 'lodash';
+import { CapRow, CapColumn, CapSpin, CapCustomCard, CapButton, CapHeading } from '@capillarytech/cap-ui-library';
+import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
+import forEach from 'lodash/forEach';
+import isEqual from 'lodash/isEqual';
+import findIndex from 'lodash/findIndex';
+import map from 'lodash/map';
+import set from 'lodash/set';
+import get from 'lodash/get';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import { makeSelectMetaEntities, makeSelectFetchingSchema, setInjectedTags } from '../../Cap/selectors';
 import makeSelectWeChat from './selectors';
@@ -24,6 +31,10 @@ import * as templateActions from '../../Templates/actions';
 import './_mapTemplates.scss';
 import withCreatives from '../../../hoc/withCreatives';
 
+const SELECT_TEMPLATE_MODE = "selectTemplate";
+const MAP_TEMPLATE_MODE = "mapTemplateMode";
+const { CapCustomCardList } = CapCustomCard;
+
 export class MapTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -31,6 +42,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       schema: {},
       baseSchema: {},
       formData: {},
+      activeMode: SELECT_TEMPLATE_MODE,
       map: {
         "discard-button": {
           discardValues: this.discardValues,
@@ -59,12 +71,13 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       editTemplateData: {},
       isFormValid: true,
       checkValidation: false,
+      startValidation: false,
       injectedTags: {},
       isLoading: true,
       showModal: false,
       modalContent: {
-        title: this.props.intl.formatMessage(messages.alertMessage),
-        body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
+        title: "Alert",
+        body: "Do you really want to go back? All your temporary changes will be lost!",
         type: 'confirm',
         id: 'template-back-confirm-modal',
       },
@@ -88,7 +101,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     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);
@@ -96,7 +108,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     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);
 
@@ -108,24 +119,24 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     this.injectMultiColSection = this.injectMultiColSection.bind(this);
     this.getMappedEvent = this.getMappedEvent.bind(this);
     this.showNext = this.showNext.bind(this);
+    this.getFormData = this.getFormData.bind(this);
     this.updateSchema = false;
     this.fetchedWeCrmAccount = false;
     this.isAccountChange = false;
   }
-
   componentWillMount() {
     const query = {
       layout: 'WECHAT',
       type: 'LAYOUT',
+      version: 'v2', //gets initial schema when v2 is specified
       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) {
+    if (get(this.props, 'params.id', false)) {
       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 = {
@@ -139,42 +150,35 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       } 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',
+      version: 'v2', //gets initial schema when v2 is specified
       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();
+    if (nextProps.isGetFormData && !this.props.isFullMode && this.state.isEdit) {
+      this.props.getFormData(this.getFormData());
+    } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && (this.props.isFullMode || !this.state.isEdit)) {
+      this.setState({startValidation: true});
+    }
+    if (!isEqual(nextProps.weChatMaptemplateStep, this.props.weChatMaptemplateStep)) {
+      this.setState({ activeMode: nextProps.weChatMaptemplateStep === 0 ? SELECT_TEMPLATE_MODE : MAP_TEMPLATE_MODE });
     }
-    console.log('MetaEntity nextprops ', nextProps.metaEntities);
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema) && !nextProps.WeChat.getTemplateDetailsInProgress) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema) && !nextProps.WeChat.getTemplateDetailsInProgress) {
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);
       const query = {
         layout: 'WECHAT',
         type: 'TAG',
+        version: 'v2', //gets initial schema when v2 is specified
         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',
       };
@@ -183,8 +187,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       }
       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)) {
+    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);
@@ -192,12 +196,12 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
           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(this.props.WeChat.templateDetails, this.state.editTemplateData) && this.isAccountChange === false) {
+      if ((this.props.location.query.type === 'embedded' && (this.props.location.query.module === 'loyalty' || this.props.location.query.module === 'outbound')) && !isEmpty(nextProps.WeChat.templateDetails) && !isEqual(this.props.WeChat.templateDetails, this.state.editTemplateData) && this.isAccountChange === false) {
         this.setState({editTemplateData: nextProps.WeChat.templateDetails}, () => {
-          if ( !_.isEmpty(this.state.baseSchema)) {
+          if ( !isEmpty(this.state.baseSchema)) {
             this.setEditData();
           } else {
-            this.setState({baseSchema: _.cloneDeep(this.state.schema)}, () => {
+            this.setState({baseSchema: cloneDeep(this.state.schema)}, () => {
               this.setEditData();
             });
           }
@@ -209,15 +213,15 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       //     this.setEditData();
       //   });
       // }
-      if (nextProps.params.id && !_.isEqual(nextProps.params.id, this.props.params.id)) {
+      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});
+      if (this.state.isEdit && isEmpty(this.state.editTemplateData) && !isEmpty(nextProps.WeChat.weChatTemplates)) {
+        const templateIndex = findIndex(nextProps.WeChat.weChatTemplates, {_id: nextProps.params.id});
         if (templateIndex > -1) {
           this.setState({editTemplateData: nextProps.WeChat.weChatTemplates[templateIndex]}, () => {
-            if (_.isEmpty(this.state.baseSchema)) {
-              this.setState({ baseSchema: _.cloneDeep(this.state.schema)}, () => {
+            if (isEmpty(this.state.baseSchema)) {
+              this.setState({ baseSchema: cloneDeep(this.state.schema)}, () => {
                 this.setEditData();
               });
             } else {
@@ -226,11 +230,12 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
           });
         }
       }
-      if (nextProps.location.query.type === 'embedded') {
-        if (this.props.location.query.module !== 'loyalty') {
-          this.removeActionButtons();
-        }
-      }
+      //To do => Uncomment in loyalty mode
+      // if (nextProps.location.query.type === 'embedded') {
+      //   if (this.props.location.query.module !== 'loyalty') {
+      //     this.removeActionButtons();
+      //   }
+      // }
 
       if (nextProps.WeChat.createResponse && nextProps.WeChat.createResponse.templateId) {
         // this.resetSchema();
@@ -242,14 +247,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         }
         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)) {
+      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);
       }
@@ -266,12 +265,12 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         this.showNext();
       }
 
-      if (!this.fetchedWeCrmAccount && !_.isEmpty(this.props.WeChat.weCrmAccounts) && (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty')) {
+      if (!this.fetchedWeCrmAccount && !isEmpty(this.props.WeChat.weCrmAccounts) && (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty')) {
         this.injectEvents(this.state.schema);
         this.setWechatAccountOptions(nextProps.WeChat.weCrmAccounts);
         this.fetchedWeCrmAccount = true;
       }
-      if (!_.isEmpty(nextProps.WeChat.selectedWeChatAccount) && !_.isEqual(this.props.WeChat.selectedWeChatAccount, nextProps.WeChat.selectedWeChatAccount) && (this.props.location.query.type === 'embedded')) {
+      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',
@@ -282,16 +281,16 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         this.props.actions.getDefaultWeChatTemplates('wechat', params);
       }
 
-      if (_.isEmpty(nextProps.WeChat.selectedWeChatAccount) && (this.props.location.query.type === 'embedded')) {
+      if (isEmpty(nextProps.WeChat.selectedWeChatAccount) && (this.props.location.query.type === 'embedded')) {
         let selectedAccount = {};
-        _.forEach(nextProps.WeChat.weCrmAccounts, (account) => {
+        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)) {
+        if (!isEmpty(selectedAccount)) {
           this.props.actions.setWeChatAccount(selectedAccount);
         }
       }
@@ -301,7 +300,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       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'))) {
+      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});
       }
 
@@ -312,9 +311,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
   }
 
   componentWillUnmount() {
-    console.log('removed listener create');
-    window.removeEventListener("message", this.handleFrameTasks);
-    this.props.templateActions.resetTemplate();
     this.resetState();
   }
 
@@ -323,8 +319,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     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']);
+      selectedTemplateData = this.state.editTemplateData;
+      if (get(this.props, 'params.id', false) && isEmpty(this.props.WeChat.weChatTemplates) && isEqual(formData['wechat-template'], this.state.formData['wechat-template'])) {
         selectedTemplate = {
           template_id: this.props.WeChat.templateDetails.versions.base.template_id,
           title: this.props.WeChat.templateDetails.versions.base.Title,
@@ -332,9 +328,9 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         };
         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']) {
+        const editTemplateData = this.state.editTemplateData;
+        forEach(this.props.WeChat.weChatTemplates, (template) => {
+          if (template.versions.base.template_id === formData['wechat-template'] && formData['wechat-template'] !== get(editTemplateData, 'versions.base.template_id') ) { // not changing if already selected templates comes
             selectedTemplate = {
               template_id: template.versions.base.template_id,
               title: template.versions.base.Title,
@@ -346,75 +342,80 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         });
       }
     } else if (this.state.isEdit && this.state.editTemplateData.versions) {
-      console.log('this.state.editTemplateData', this.state.editTemplateData);
-      selectedTemplateData = _.cloneDeep(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']});
+      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'])) {
+    if (!isEqual(formData['wechat-template'], this.state.formData['wechat-template'])) {
       this.updateSchema = true;
     }
     if (this.isAccountChange) {
       selectedTemplateData = {};
     }
-    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 (this.props.WeChat.selectedWeChatAccount && !_.isEqual(this.props.WeChat.selectedWeChatAccount.name, formData['wechat-accounts']) && this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
-        let selectedAccount = {};
-        _.forEach(this.props.WeChat.weCrmAccounts, (account) => {
-          if (account.configs && account.configs.is_wecrm_enabled) {
-            if (account.name === formData['wechat-accounts']) {
-              selectedAccount = account;
+    const newState = {formData};
+    if (!isEqual(this.state.editTemplateData, selectedTemplateData)) {
+      newState.editTemplateData = selectedTemplateData;
+    }
+    if (!isEqual(this.state.formData, formData)) {
+      this.setState(newState, () => {
+        if (!isEmpty(this.state.editTemplateData) && this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
+          this.setEditData();
+        }
+        if (this.props.WeChat.selectedWeChatAccount && !isEqual(this.props.WeChat.selectedWeChatAccount.name, formData['wechat-accounts']) && this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
+          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);
-        this.setSelectedTemplateData({});
-      }
-      if ((selectedWechatTemplateIndex !== -1 || this.state.isEdit) && !_.isEmpty(selectedTemplate)) {
-        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') {
-            if (_.isEqual(this.props.WeChat.selectedWeChatAccount.name, formData['wechat-accounts'])) {
-              this.setSelectedTemplateData(selectedTemplate);
+          });
+          this.props.actions.setWeChatAccount(selectedAccount);
+          this.setSelectedTemplateData({});
+        }
+        if ((selectedWechatTemplateIndex !== -1 || this.state.isEdit) && !isEmpty(selectedTemplate)) {
+          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') {
+              if (isEqual(this.props.WeChat.selectedWeChatAccount.name, formData['wechat-accounts'])) {
+                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 {
-            const templateTags = this.getTagsFromContent(templateData.content);
-            this.prepareWeChatPreviewData(templateData, templateTags);
+            this.updateSchema = false;
+            this.setSelectedTemplateData(selectedTemplate);
           }
-        } 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;
+          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);
-      }
-    });
+          });
+          this.props.actions.setWeChatAccount(selectedAccount);
+        }
+      });
+    }
   }
 
   onTagSelect(data, currentTab, value) {
@@ -423,25 +424,30 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     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);
+  getFormData(formData) {
+    let { editTemplateData} = this.state;
+    const { formData: stateFormData } = this.state;
+    const selectedWeChatAccount = (!isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
+    if (isEmpty(editTemplateData)) {
+      editTemplateData = formData;
+    }
     const data = {
-      template_id: this.state.editTemplateData.versions.base.template_id,
-      Title: this.state.editTemplateData.versions.base.Title,
+      accountId: selectedWeChatAccount.id,
+      template_id: editTemplateData.versions.base.template_id,
+      Title: 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: '',
+      previewContent: stateFormData['sms-preview'],
       BrandId: (selectedWeChatAccount.configs.brand_id ? selectedWeChatAccount.configs.brand_id : ''),
       OriginalId: selectedWeChatAccount.sourceAccountIdentifier,
-      content: this.state.editTemplateData.versions.base.content,
+      content: editTemplateData.versions.base.content,
       isInternalUrl: this.state.formData['is-internal-url'],
-      creative_template_id: this.state.editTemplateData._id,
+      creative_template_id: editTemplateData._id,
       touser: "{{wechat_open_id}}",
     };
-    _.forEach(this.state.selectedTemplateTags, (templateTag) => {
+    forEach(this.state.selectedTemplateTags, (templateTag) => {
       const tagName = templateTag.substr(0, templateTag.indexOf('.'));
       let newTagname = tagName;
       data.Tag.push(tagName);
@@ -461,18 +467,12 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       action: "getFormData",
       value: data,
       validity: this.state.isFormValid,
+      type: "WECHAT",
     };
-    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);
-    }
+    return response;
   }
 
   getCurrentWindow(e) {
-    console.log('in sms create', e);
     const response = {
       action: e.action,
       value: 'edit',
@@ -491,69 +491,14 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     }
     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: this.props.intl.formatMessage(messages.alertMessage),
-      body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
-      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]) {
@@ -570,26 +515,27 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     }
     return temp;
   }
-
+  
   setSelectedTemplateData(weChatData) {
-    let schema = _.cloneDeep(this.state.baseSchema);
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
-    if (_.isEmpty(weChatData)) {
+    let schema = cloneDeep(this.state.baseSchema);
+    // schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
+    if (isEmpty(weChatData)) {
       // schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
-      const formData=_.cloneDeep(this.state.formData);
+      const formData=cloneDeep(this.state.formData);
       formData['wechat-template']="";
       this.setState({schema,formData});
       this.isAccountChange = true;
       return;
     }
     console.log('Setting Data ', weChatData, this.state.baseSchema);
-    const {map} = _.cloneDeep(this.state);
+    const {map} = cloneDeep(this.state);
     const templateTags = this.getTagsFromContent(weChatData.content);
-    const formData = _.cloneDeep(this.state.formData);
-    _.forEach(templateTags, (tag) => {
+    const formData = cloneDeep(this.state.formData);
+    formData['wechat-template'] = weChatData.template_id;
+    forEach(templateTags, (tag) => {
       const tagTitle = tag.substr(0, tag.indexOf('.'));
       let title = tagTitle;
-
+      
       if (tagTitle.match(/first/i)) {
         title = "Header";
       }
@@ -597,750 +543,728 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         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} ${this.props.intl.formatMessage(messages.hasValidContent)}`,
-            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',
-            ],
-          },
-        ],
-      };
-
+      const colsData = [];
       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',
+        colsData.push({
+          type: "multicols",
+          inputFields: [
+            {
+              rowClassName: 'tag-container',
+              cols: [{
+                width: 23,
+                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',
+                ],
+                style: {marginBottom: 'unset', height: '24px', },
+                className: 'add-label',
+              }],
+            }
           ],
-        },);
+        });
       }
-
+      
       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,
-      //   };
-      // }
+      
+      colsData.push({
+        type: "multicols",
+        inputFields: [
+          {
+            cols: [
+              {
+                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' && this.state.isEdit),
+                label: title,
+                styling: "semantic",
+                order: 1,
+                width: 23,
+                // offSet: 2,
+                customComponent: false,
+                standalone: true,
+                supportedEvents: [
+                  'onChange',
+                ],
+                size: "large",
+              },
+            ],
+          }
+        ],
+      });
+      
       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.push(...colsData);
     });
-
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields.push(
-      {
-        cols: [
-          {
-            id: "template-label-link",
-            metaType: "label",
-            value: this.props.intl.formatMessage(messages.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: this.props.intl.formatMessage(messages.linkCantEmpty),
-            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',
-            ],
-          },
-        ],
-      },
+    
+    schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(
       {
-        cols: [
-          {
-            id: "is-internal-url",
-            label: this.props.intl.formatMessage(messages.isInternalUrl),
-            standalone: true,
-            labelStyle: {
-              backgroundColor: "white",
+        type: "multicols",
+        inputFields: [{
+          rowClassName: 'link-row',
+          cols: [
+            {
+              id: 'template-link',
+              placeholder: this.props.intl.formatMessage(messages.Link),
+              label: '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' && this.state.isEdit),
+              style: {
+                fontSize: '14px',
+                fontStyle: 'normal',
+              },
+              styling: "semantic",
+              order: 1,
+              width: 23,
+              // offSet: 6,
+              customComponent: false,
+              standalone: true,
+              supportedEvents: [
+                'onChange',
+              ],
+              size: "large",
             },
-            colStyle: {
-              marginBottom: '24px',
-            },
-            style: {
-              textAlign: 'left',
-              color: '#262626',
-              fontFamily: 'Open-Sans',
-              lineHeight: '24px',
-              fontSize: '14px',
-              padding: '.5833em .833em',
-              marginBottom: '24px',
-              paddingLeft: '0',
+          ],
+        },
+        {
+          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' && this.state.isEdit),
+              metaType: "text",
+              datatype: "boolean",
+              required: true,
+              fluid: true,
+              styling: "semantic",
+              order: 1,
+              width: 10,
+              onlyDisplay: false,
+              customComponent: false,
+              supportedEvents: [
+                'onChange',
+              ],
             },
-            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 (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 (tag.match(/remark/i)) {
-          tagName = "Footer";
+        if (this.state.editTemplateData.versions.base.isInternalUrl) {
+          formData['is-internal-url'] = this.state.editTemplateData.versions.base.isInternalUrl;
         }
-        formData[`template-${tagName}`] = this.state.editTemplateData.versions.base.data[tag].value;
+        // 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, activeMode: MAP_TEMPLATE_MODE, weChatData}, () => {
+        console.log('Is internal URL ', this.state.schema, formData);
+        this.prepareWeChatPreviewData(weChatData, templateTags);
+        this.props.onWeChatMaptemplateStepChange(1);
+      });
+    }
+    
+    resetState() {
+      this.setState({
+        formData: {},
+        schema: {},
+        baseSchema: {},
+        selectedTemplateTags: [],
+        isEdit: false,
+        editTemplateData: {},
+        isFormValid: true,
+        checkValidation: false,
+        startValidation: false,
+        injectedTags: {},
+        isLoading: true,
       });
-      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;
+    }
+    
+    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 });
       }
-      if (this.state.editTemplateData.versions.base.isInternalUrl) {
-        formData['is-internal-url'] = this.state.editTemplateData.versions.base.isInternalUrl;
+    }
+    
+    setWechatAccountOptions(weCrmAccounts) {
+      console.log("inside setWechatAccountOptions");
+      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, baseSchema: schema});
       }
-      // 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 });
+    
+    selectWechatAccount(value, option) {
+      // console.log('Test ', value, option);
+      // templateActions.setWeChatAccount();
     }
-  }
-
-  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,
+    
+    setTemplateOptions(weChatData) {
+      console.log('Set Templates ', weChatData);
+      //const {schema, baseSchema} = this.state;
+      const schema = cloneDeep(this.state.schema);
+      const baseSchema = cloneDeep(this.state.schema);
+      const baseSchemaTemplateOptionEmpty = (!isEmpty(baseSchema) && isEmpty(baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options));
+      schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
+      if (!isEmpty(baseSchema)) {
+        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,
           });
         }
-
-        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, baseSchema: cloneDeep(baseSchema)}, () => {
+        console.log('setTemplateOptions', this.state.baseSchema, schema);
+        if (isEmpty(this.state.baseSchema)) {
+          this.setState({baseSchema: cloneDeep(schema)});
         }
       });
-      this.setState({schema, formData, baseSchema: schema});
     }
-  }
-
-  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.schema);
-    const baseSchemaTemplateOptionEmpty = (!_.isEmpty(baseSchema) && _.isEmpty(baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options));
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
-    if (!_.isEmpty(baseSchema)) {
-      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,
+    setFormValidity(isFormValid) {
+      this.setState({
+        isFormValid,
+        startValidation: false,
       });
-      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,
-        });
+      if(!isFormValid) {
+        this.props.onValidationFail();
       }
-    });
-    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, currentTab) {
-    //IE support
-    const myField = field;
-    if (document.selection) {
-      myField.focus();
-      const sel = document.selection.createRange();
-      sel.text = myValue;
-    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
-      const startPos = myField.selectionStart;
-      const endPos = myField.selectionEnd;
-      myField.value = myField.value.substring(0, startPos)
-          + myValue
-          + myField.value.substring(endPos, myField.value.length);
-      myField.selectionStart = startPos + myValue.length;
-      myField.selectionEnd = startPos + myValue.length;
-    } else {
-      myField.value += myValue;
+    
+    setContent(content) {
+      console.log('Template content changed to ', content);
     }
-    const formData = _.cloneDeep(this.state.formData);
-    formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
-  }
-
-  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 = {
+    
+    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,
       };
-    } else {
-      const selectedWechatTemplateIndex = _.findIndex(this.props.WeChat.weChatDefaultTemplate, {template_id: formData['wechat-template']});
-      selectedWechatData = this.props.WeChat.weChatDefaultTemplate[selectedWechatTemplateIndex];
+      
+      this.setState({baseSchema, formData, isEdit: true}, () => {
+        this.setSelectedTemplateData(templateData);
+      })
     }
-    obj.name = `${selectedWechatData.title}: ${selectedWechatData.template_id}`;
-    obj.type = 'WECHAT';
-    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'],
+    
+    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;
     }
-    _.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";
+    
+    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, currentTab) {
+      //IE support
+      const myField = field;
+      if (document.selection) {
+        myField.focus();
+        const sel = document.selection.createRange();
+        sel.text = myValue;
+      } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
+        const startPos = myField.selectionStart;
+        const endPos = myField.selectionEnd;
+        myField.value = myField.value.substring(0, startPos)
+        + myValue
+        + myField.value.substring(endPos, myField.value.length);
+        myField.selectionStart = startPos + myValue.length;
+        myField.selectionEnd = startPos + myValue.length;
+      } else {
+        myField.value += myValue;
       }
-      obj.versions.base.data[tagName] = {};
-      obj.versions.base.data[tagName] = {
-        value: this.state.formData[`template-${newTagname}`],
-        color: "#00000",
+      const formData = cloneDeep(this.state.formData);
+      formData[field.id] = myField.value;
+      this.onFormDataChange(formData);
+    }
+    
+    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 = {};
+      const { getFormData } = this.props;
+      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];
       }
-    });
-    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";
+      obj.name = `${selectedWechatData.title}: ${selectedWechatData.template_id}`;
+      obj.type = 'WECHAT';
+      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'],
       }
-      if (tagName.match(/remark/i)) {
-        tagName = "Footer";
+      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, (response) => {
+        obj._id = response.templateID;
+        if(getFormData) {
+          setTimeout(() => {
+            getFormData(this.getFormData(obj));
+          }, 0);
+        }
+        console.log("Template created successfully", response, 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);
+      if (isEmpty(schema)) {
+        return false;
       }
-      if(this.state.formData[`template-${tagName}`] !== undefined && this.state.formData[`template-${tagName}`] !== '') {
-        content = content.replace(`{{${tag}}}`, this.state.formData[`template-${tagName}`]);
+      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) {
+      set(schema, 'standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].labelStyle.display', this.props.location.query.module === 'loyalty' ? 'block' : 'none');
+      set(schema, 'standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].style.display', this.props.location.query.module === 'loyalty' ? 'block' : 'none');
+      set(schema, 'standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].disabled', get(this.props, 'params.id', false) && 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);
+        });
       }
-    })
-    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);
-    if (_.isEmpty(schema)) {
-      return false;
+      return temp;
     }
-    const temp = schema;
-    temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    let newSchema = _.cloneDeep(schema);
-    newSchema = this.hideSchemaElementsByModule(newSchema);
-    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);
+    
+    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(temp.panes, (pane) => {
-        const tempPane = pane;
-        tempPane.sections = this.injectSections(tempPane.sections);
+      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;
     }
-    return temp;
-  }
-
-  injectMultiColSection(section) {
-    _.forEach(section.inputFields, (inputField) => {
-      _.forEach(inputField.cols, (col) => {
-        console.log('injecting for col', col);
-        let temp = col;
+    
+    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(col.supportedEvents, (event) => {
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        forEach(inputField.supportedEvents, (event) => {
+          temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
         });
         temp = this.injectMessages(temp);
         return true;
       });
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
-        let temp = col;
+      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(col.supportedEvents, (event) => {
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        forEach(actionField.supportedEvents, (event) => {
+          temp.injectedEvents[event] = this.getMappedEvent(actionField.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);
+      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);
+        }
       });
-      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);
+      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);
+        }
       });
-      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;
-  }
+      return section;
+    }
 
-  handleCancelModal = () => {
-    this.setState({showModal: false});
-  }
+    setTemplateMode = () => {
+      this.setState({activeMode: SELECT_TEMPLATE_MODE});
+    }
 
-  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);
+    renderSelectTemplate() {
+      const { WeChat = {} } = this.props;
+      const { weChatDefaultTemplate ={} } = WeChat;
+      const cardList = map(weChatDefaultTemplate, (template) => {
+        return {
+          key: `wechat-card-${template.name}`,
+          title: <span title={template.title} >{template.title}</span>,
+          content: template.content,
+          hoverOption: <CapButton onClick={(e) => this.setSelectedTemplateData(template)}>{this.props.intl.formatMessage(messages.select)}</CapButton>,
+        };
+      });
+      return (
+        <CapSpin
+          spinning={isEmpty(weChatDefaultTemplate)}
+          tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
+        >
+          <CapCustomCardList 
+            type="WECHAT"
+            cardList={cardList}
+          />
+        </CapSpin>
+      );
+    }
+    
+    render() {
+      const { activeMode, weChatData, isEdit } = this.state;
+      let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+      if (this.props.supportedTags) {
+        tags = this.props.supportedTags;
+      }
+      return (
+        <div>
+          {!isEdit && <CapHeading type="h1" style={{marginBottom: '32px'}}><FormattedMessage {...messages.newWechat}/></CapHeading>}
+          {activeMode === SELECT_TEMPLATE_MODE ? 
+            this.renderSelectTemplate() :
+            <CapSpin
+              tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
+              spinning={this.state.isLoading || this.props.fetchingSchema || (this.props.WeChat.getTemplateDetailsInProgress ? true : false)}>
+              <div>
+                <Helmet
+                title="WeChat"
+                />
+                <CapHeading type="h5">Template name</CapHeading>
+                <CapHeading type="h3">{weChatData.title}</CapHeading>
+                <CapRow className="wechat-container">
+                  <CapColumn>
+                    <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.props.injectedTags ? this.props.injectedTags : {}}
+                      isEdit={this.state.isEdit}
+                      usingTabContainer={false}
+                      router={this.props.router}
+                      checkValidation={this.state.checkValidation}
+                      startValidation={this.state.startValidation}
+                      handleCancelModal={this.handleCancelModal}
+                      onContextChange={this.handleOnTagsContextChange}
+                      stopValidation={() => this.setFormValidity(false)}
+                    />
+                  </CapColumn>
+                </CapRow>
+              </div>
+            </CapSpin>
+          }
+       </div>
+        );
       }
-    });
-    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 || this.props.fetchingSchema || (this.props.WeChat.getTemplateDetailsInProgress ? true : false)}>
-      <div>
-        <Helmet
-          title="WeChat"
-        />
-        <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.props.injectedTags ? this.props.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>
-    );
-  }
-}
-
+    
 MapTemplates.propTypes = {
   actions: PropTypes.object.isRequired,
   WeChat: PropTypes.object,
@@ -1357,6 +1281,9 @@ MapTemplates.propTypes = {
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
   injectedTags: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  getFormData: PropTypes.func,
+  weChatMaptemplateStep: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1379,4 +1306,5 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});
+