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

package/containers/WeChat/MapTemplates/index.js

@@ -1,1610 +0,0 @@
-/*
- *
- * WeChat
- *
- */
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators, compose } 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, makeSelectFetchingSchema, setInjectedTags } 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 * as templateActions from '../../Templates/actions';
-// import SlideBox from '../../components/SlideBox';
-// import PageHeader from '../../components/PageHeader';
-import './_mapTemplates.scss';
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import reducer from './reducer';
-import { mapTemplatesSaga } from './sagas';
-import { templateSaga } from '../../Templates/sagas';
-import { createQueryString } from '../../../utils/common';
-
-// const Option = Select.Option;
-const URL = "URL";
-const MINI_PROGRAM = "Mini-Program";
-const labelStyle = {
-  backgroundColor: 'white',
-  textAlign: 'left',
-  color: '#333333',
-  lineHeight: '24px',
-  fontSize: '14px',
-  fontFamily: 'open-sans',
-  fontStyle: 'normal',
-  padding: '1em .833em',
-};
-
-export class MapTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      schema: {},
-      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,
-        },
-        "template-redirect-options-radio": {
-          onChange: this.onRedirectOptionSelection,
-        },
-      },
-      selectedTemplateTags: [],
-      isEdit: false,
-      editTemplateData: {},
-      isFormValid: true,
-      checkValidation: false,
-      injectedTags: {},
-      isLoading: true,
-      showModal: false,
-      modalContent: {
-        title: this.props.intl.formatMessage(messages.alertMessage),
-        body: this.props.intl.formatMessage(messages.goBackTemporaryConfirmation),
-        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.getFormData = this.getFormData.bind(this);
-    this.updateSchema = false;
-    this.fetchedWeCrmAccount = false;
-    this.isAccountChange = 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});
-    }
-    
-    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,
-          originalId: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
-        };
-        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') {
-      
-    } 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`,
-        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-      });
-    }
-  }
-
-  componentDidMount() {
-    
-    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();
-    }
-    
-    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',
-        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(this.props.WeChat.templateDetails, this.state.editTemplateData) && this.isAccountChange === false) {
-        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});
-        if (templateIndex > -1) {
-          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') {
-        if (this.props.location.query.module !== 'loyalty') {
-          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`,
-          search :  createQueryString(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);
-      }
-
-      // 
-      // 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 (!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')) {
-        const params = {
-          name: '',
-          sortBy: 'Most Recent',
-          wecrmId: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_app_id,
-          wecrmToken: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_token,
-          originalId: nextProps.WeChat.selectedWeChatAccount.sourceAccountIdentifier,
-        };
-        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 (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() {
-    
-    window.removeEventListener("message", this.handleFrameTasks);
-    this.props.templateActions.resetTemplate();
-    this.resetState();
-  }
-
-  onFormDataChange(formData) {
-    let selectedWechatTemplateIndex = -1;
-    let selectedTemplate = {};
-    let selectedTemplateData = {};
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === 'loyalty')) {
-      selectedTemplateData = this.state.editTemplateData;
-      if (this.props.params.id && _.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,
-          content: this.props.WeChat.templateDetails.versions.base.content,
-        };
-        selectedTemplateData = this.props.WeChat.templateDetails;
-      } else {
-        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,
-              content: template.versions.base.content,
-            };
-            this.isAccountChange = false;
-            selectedTemplateData = template;
-          }
-        });
-      }
-    } else if (this.state.isEdit && this.state.editTemplateData.versions) {
-      
-      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;
-    }
-    if (this.isAccountChange) {
-      selectedTemplateData = {};
-    }
-    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);
-              }
-            } 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}}}`, currentTab);
-    document.getElementById(editorId).focus();
-  }
-
-  getFormData(e) {
-    
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
-    const data = {
-      template_id: _.get(this.state.editTemplateData.versions.base, 'template_id', ""),
-      Title: _.get(this.state.editTemplateData.versions.base, 'Title', ""),
-      Tag: [],
-      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}}",
-    };
-    if (this.state.formData['template-redirect-options-radio'] === MINI_PROGRAM) {
-      const miniprogram = {};
-      miniprogram.appid = this.state.formData['template-mini-program-id'] || '';
-      miniprogram.pagepath = this.state.formData['template-mini-program-page-path'] || '';
-      data.miniprogram = miniprogram;
-      data.url = "notset";
-    } else if (this.state.formData['template-redirect-options-radio'] === URL) {
-      data.url = this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'];
-    }
-    _.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,
-    };
-    
-    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) {
-    
-    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) {
-    
-    if (ifEdit) {
-      this.setState({loading: true});
-    }
-  }
-
-  handleFrameTasks = (e) => {
-    // 
-    const type = e.data;
-    // 
-    if (typeof type === 'object') {
-      // 
-      const action = type.action;
-      switch (action) {
-        case "startTemplateCreation":
-          this.startTemplateCreation(type.value);
-          break;
-        case "startLoading":
-          this.startLoading(type.edit);
-          break;
-        case "getCurrentWindow":
-          this.getCurrentWindow(type);
-          break;
-        default:
-          break;
-      }
-    } else {
-      switch (type) {
-        case "getFormData":
-          this.getFormData(e);
-          break;
-        case "startTemplateCreation":
-          
-          //this.getFormData(e);
-          break;
-        case "moveToTemplates":
-          
-          this.moveToTemplates();
-          break;
-        case "validateContent":
-          
-          this.validateContent(e);
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  moveToTemplates() {
-    
-    const modalContent = {
-      title: this.props.intl.formatMessage(messages.alertMessage),
-      body: this.props.intl.formatMessage(messages.goBackConfirmation),
-      type: 'confirm',
-      id: 'template-back-confirm-modal',
-      show: true,
-    };
-    this.setState({modalContent, showModal: true});
-  }
-
-  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) {
-    let schema = _.cloneDeep(this.state.baseSchema);
-    const { intl: {formatMessage}} = this.props;
-    if(schema?.standalone?.sections?.[0]?.childSections?.[1]?.childSections?.[0]?.childSections?.[1]?.inputFields){
-      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);
-      formData['wechat-template']="";
-      this.setState({schema,formData});
-      this.isAccountChange = true;
-      return;
-    }
-    
-    const {map} = _.cloneDeep(this.state);
-    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 = this.props.intl.formatMessage(messages.mapTemplateHeader);
-      }
-      if (tagTitle.match(/remark/i)) {
-        title = this.props.intl.formatMessage(messages.mapTemplateFooter);
-      }
-
-      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.invalidContent)}`,
-            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.push({
-      type: "multicols",
-        inputFields: [
-          {
-          rowClassName: 'redirect-options-row',
-          cols: [
-            {
-              id: "redirect-options-heading",
-              metaType: "label",
-              value: formatMessage(messages.redirectOptionsHeadingValue),
-              primitive: true,
-              dynamicTab: false,
-              type: "div",
-              width: 4,
-              style: {
-                backgroundColor: 'white',
-                textAlign: 'left',
-                color: '#333333',
-                lineHeight: '24px',
-                fontSize: '14px',
-                fontFamily: 'open-sans',
-                fontStyle: 'normal',
-                padding: '1em .833em',
-              },
-              offset: 0,
-              onlyDisplay: true,
-              colStyle: {
-                flex: 1,
-              },
-            },
-            {
-              id: 'template-redirect-options-radio',
-              type: "radioGroup",
-              metaType: "text",
-              datatype: "string",
-              options: [
-                {
-                  value: URL,
-                  label: formatMessage(messages.redirectOptionURL)
-                }, 
-                {
-                  value: MINI_PROGRAM,
-                  label: formatMessage(messages.redirectOptionMiniProgram)
-                }
-              ],
-              errorMessage: formatMessage(messages.redirectionOptionError),
-              required: true,
-              fluid: true,
-              disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
-              style: {
-                marginTop: 8,
-              },
-              styling: "semantic",
-              customComponent: false,
-              standalone: true,
-              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 && this.state.editTemplateData.versions.base.url !== "notset") {
-        formData['template-redirect-options-radio'] = URL;
-        formData[`template-link`] = this.state.editTemplateData.versions.base.isInternalUrl ? this.unMaskTemplateUrl(this.state.editTemplateData.versions.base.url) : this.state.editTemplateData.versions.base.url;
-        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getURLSchema());
-      }
-      if (this.state.editTemplateData.versions.base.isInternalUrl) {
-        formData['is-internal-url'] = this.state.editTemplateData.versions.base.isInternalUrl;
-      }
-      if (this.state.editTemplateData.versions.base.miniprogram && this.state.editTemplateData.versions.base.miniprogram.appid && this.state.editTemplateData.versions.base.miniprogram.pagepath) {
-        formData['template-redirect-options-radio'] = MINI_PROGRAM;
-        formData['template-mini-program-id'] = this.state.editTemplateData.versions.base.miniprogram.appid;
-        formData['template-mini-program-page-path'] = this.state.editTemplateData.versions.base.miniprogram.pagepath;
-        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getMiniProgramSchema());
-      }
-      // 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}, () => {
-      
-      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) {
-          const options = schema?.standalone?.sections[0]?.childSections[1]?.childSections[0]?.childSections[0]?.inputFields[0]?.options;
-          options && 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});
-    }
-  }
-
-  selectWechatAccount(value, option) {
-    // 
-    // templateActions.setWeChatAccount();
-  }
-
-  setTemplateOptions(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,
-        });
-      }
-    });
-    this.setState({schema, baseSchema: _.cloneDeep(baseSchema)}, () => {
-      
-      if (_.isEmpty(this.state.baseSchema)) {
-        this.setState({baseSchema: _.cloneDeep(schema)});
-      }
-    });
-  }
-
-  setFormValidity(isFormValid) {
-    this.setState({isFormValid});
-  }
-
-  setContent(content) {
-    
-  }
-
-  setEditData() {
-    
-    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);
-    
-
-    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`;
-    
-    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) => {
-    
-    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) {
-    
-  }
-
-  selectWechatTemplate() {
-    
-  }
-
-  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;
-    }
-    const formData = _.cloneDeep(this.state.formData);
-    formData[field.id] = myField.value;
-    this.onFormDataChange(formData);
-  }
-
-  internalUrlChecked() {
-
-  }
-
-  getURLSchema = () => ({
-    type: "multicols",
-    inputFields: [{
-      rowClassName: 'link-row',
-      cols: [
-        {
-          id: "template-label-link",
-          metaType: "label",
-          value: this.props.intl.formatMessage(messages.link),
-          primitive: true,
-          dynamicTab: false,
-          type: "div",
-          width: 4,
-          style: labelStyle,
-          onlyDisplay: true,
-          colStyle: {
-            flex: 1,
-          },
-        },
-        {
-          id: 'template-link',
-          placeholder: this.props.intl.formatMessage(messages.link),
-          type: "input",
-          metaType: "text",
-          datatype: "string",
-          errorMessage: this.props.intl.formatMessage(messages.linkCantEmpty),
-          required: true,
-          fluid: true,
-          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
-          style: {
-            fontSize: '14px',
-            fontStyle: 'normal',
-          },
-          styling: "semantic",
-          order: 1,
-          width: 15,
-          customComponent: false,
-          standalone: true,
-          supportedEvents: [
-            'onChange',
-          ],
-          size: "large",
-        },
-      ],
-    },
-    {
-      cols: [
-        {
-          id: "is-internal-url",
-          label: this.props.intl.formatMessage(messages.isInternalUrl),
-          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,
-          offset: 4,
-          onlyDisplay: false,
-          customComponent: false,
-          supportedEvents: [
-            'onChange',
-          ],
-        },
-      ],
-    }],
-  })
-
-  getMiniProgramSchema = () => ({
-    type: "multicols",
-    inputFields: [{
-      rowClassName: 'mini-program-row',
-      cols: [
-        {
-          id: "template-mini-program-id-heading",
-          metaType: "label",
-          value: this.props.intl.formatMessage(messages.miniWechatIdLabel),
-          primitive: true,
-          dynamicTab: false,
-          type: "div",
-          width: 4,
-          style: labelStyle,
-          onlyDisplay: true,
-          colStyle: {
-            flex: 1,
-          },
-        },
-        {
-          id: 'template-mini-program-id',
-          placeholder: this.props.intl.formatMessage(messages.miniWeChatPlaceholder),
-          inductiveText: this.props.intl.formatMessage(messages.miniWechatIdInductive),
-          type: "input",
-          metaType: "text",
-          datatype: "string",
-          errorMessage: this.props.intl.formatMessage(messages.miniWechatIdError),
-          required: true,
-          fluid: true,
-          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
-          styling: "semantic",
-          order: 1,
-          width: 15,
-          customComponent: false,
-          standalone: true,
-        },
-      ],
-    },
-    {
-      rowClassName: 'mini-program-row',
-      cols: [
-        {
-          id: "template-mini-program-page-path-heading",
-          metaType: "label",
-          value: this.props.intl.formatMessage(messages.pagePathLabel),
-          primitive: true,
-          dynamicTab: false,
-          type: "div",
-          width: 4,
-          style: labelStyle,
-          onlyDisplay: true,
-          colStyle: {
-            flex: 1,
-          },
-        },
-        {
-          id: 'template-mini-program-page-path',
-          placeholder: this.props.intl.formatMessage(messages.pagePathPlaceholder),
-          inductiveText: this.props.intl.formatMessage(messages.pagePathInductive),
-          type: "input",
-          metaType: "text",
-          datatype: "string",
-          errorMessage: this.props.intl.formatMessage(messages.pagePathError),
-          required: true,
-          fluid: true,
-          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
-          styling: "semantic",
-          order: 1,
-          width: 15,
-          customComponent: false,
-          standalone: true,
-        }
-      ],
-    }],
-  })
-  
-  deletePreviousRedirectOptionSelection = () => {
-    let schema = _.cloneDeep(this.state.schema);
-    const formChildSections = _.get(schema, 'standalone.sections[0].childSections[1].childSections[0].childSections', []);
-    const lastChildSection = formChildSections[formChildSections.length - 1];
-    const lastInputField = _.get(lastChildSection, 'inputFields[0].rowClassName', '');
-    if(lastInputField === 'mini-program-row' || lastInputField === 'link-row') {
-      schema.standalone.sections[0].childSections[1].childSections[0].childSections.pop();
-    }
-    return schema;
-  }
-
-  onRedirectOptionSelection = (paramOne, formData) => {
-    let schema = this.deletePreviousRedirectOptionSelection();
-    switch (formData['template-redirect-options-radio']) {
-      case URL: {
-        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getURLSchema());
-        break;
-      }
-      case MINI_PROGRAM: {
-        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getMiniProgramSchema());
-        break;
-      }
-    }
-    this.setState({schema});
-  }
-
-  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`,
-      search :  createQueryString(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.type = 'WECHAT';
-    obj.versions = {
-      base: {},
-      history: [],
-    };
-    obj.versions.base = {
-      "template_id": selectedWechatData.template_id,
-      "Title": selectedWechatData.title,
-      Tag: [],
-      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 (this.state.formData['template-redirect-options-radio'] === MINI_PROGRAM) {
-      const miniprogram = {};
-      miniprogram['appid'] = this.state.formData['template-mini-program-id'] || '';
-      miniprogram['pagepath'] = this.state.formData['template-mini-program-page-path'] || '';
-      obj.versions.base['miniprogram'] = miniprogram;
-      obj.versions.base['url'] = "notset";
-    } else if (this.state.formData['template-redirect-options-radio'] === URL) {
-      obj.versions.base['url'] = this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'];
-    }
-    _.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",
-      }
-    });
-    
-    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) {
-    
-    if (_.isEmpty(schema)) {
-      return false;
-    }
-    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[0].inputFields[0].cols[0].colStyle.display',  this.props.location.query.type === 'embedded' ? 'none' : 'block');
-    _.set(schema, 'standalone.sections[0].childSections[0].inputFields[0].cols[1].colStyle.display', this.props.location.query.type === 'embedded' ? 'none' : 'block');
-    _.set(schema, 'standalone.sections[0].childSections[0].inputFields[0].cols[2].colStyle.display', this.props.location.query.type === 'embedded' ? 'none' : 'block');
-    _.set(schema, 'standalone.sections[0].childSections[0].inputFields[0].cols[3].colStyle.display', this.props.location.query.type === 'embedded' ? 'none' : 'block');
-
-    _.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', 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) => {
-        
-        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 || this.props.fetchingSchema || (this.props.WeChat.getTemplateDetailsInProgress ? true : false)}>
-      <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.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,
-  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,
-  templateActions: PropTypes.object,
-  injectedTags: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  WeChat: makeSelectWeChat(),
-  Templates: makeSelectTemplates(),
-  metaEntities: makeSelectMetaEntities(),
-  fetchingSchema: makeSelectFetchingSchema(),
-  injectedTags: setInjectedTags(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-    templateActions: bindActionCreators(templateActions, dispatch),
-  };
-}
-
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
-const withReducer = injectReducer({ key: 'weChat', reducer });
-const withSaga = injectSaga({ key: 'weChat', saga: mapTemplatesSaga });
-const withTemplateSaga = injectSaga({ key: 'template', saga: templateSaga });
-
-export default compose(
-  UserIsAuthenticated,
-  withReducer,
-  withSaga,
-  withTemplateSaga,
-  withConnect,
-)(injectIntl(MapTemplates));