@capillarytech/creatives-library 2.0.43 → 2.0.45

package/containers/WeChat/RichmediaTemplates/Create/index.js

@@ -0,0 +1,679 @@
+/*
+ *
+ * Create
+ *
+ */
+
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import _ from 'lodash';
+import { Menu, Dropdown } from 'antd';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpinner } from '@capillarytech/cap-ui-library';
+import makeSelectCreate, {makeSelectTemplates, getAssetDetails} from './selectors';
+import * as actions from './actions';
+import testschema from './testschema';
+import './_createRichmedia.scss';
+import * as globalActions from '../../../../containers/Cap/actions';
+import {getMessageObject} from '../../../../utils/messageUtils';
+import FormBuilder from '../../../../components/FormBuilder';
+import Header from '../../../../components/Header';
+const MenuItem = Menu.Item;
+export class Create extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    let templateData = {};
+    let isEdit = false;
+    let totalContentBlocks = 0;
+    let mediaId = "";
+    let templateId = "";
+    let templateName = "";
+    let isIframe = false;
+    if (props.location.query.type === "embedded" && props.location.query.module === "outbound") {
+      isIframe = true;
+    }
+    if (props.mode === 'EDIT') {
+      templateData = props.templateData;
+      isEdit = true;
+      totalContentBlocks = props.totalContentBlocks;
+      mediaId = props.mediaId;
+      templateId = props.templateId;
+      templateName = props.templateName;
+    }
+    this.state = {
+      richmediaSchema: testschema,
+      map: {
+        "image-value": {
+          onUpload: this.uploadImage,
+        },
+        "title-value": {
+          onChange: this.onFormDataChange,
+        },
+        "author-value": {
+          onChange: this.onFormDataChange,
+        },
+        "cover-abstract-value": {
+          onChange: this.onFormDataChange,
+        },
+        "source-link-value": {
+          onChange: this.onFormDataChange,
+        },
+        "content-value": {
+          onChange: this.onFormDataChange,
+        },
+        "show-cover-pic-value": {
+          onChange: this.onFormDataChange,
+        },
+        "post-comments-value": {
+          onChange: this.onFormDataChange,
+        },
+      },
+      isEdit,
+      isFormValid: true,
+      templateData,
+      currentContentId: 0,
+      totalContentBlocks,
+      templateName,
+      templateId,
+      mediaId,
+      isIframe,
+      hovered: false,
+      loading: false,
+      showModal: false,
+      modalContent: {
+        title: "Alert",
+        body: "Do you really want to go back? All your temporary changes will be lost!",
+        type: 'confirm',
+        id: 'template-back-confirm-modal',
+      },
+    };
+    this.onFormDataChange = this.onFormDataChange.bind(this);
+    this.cancelHandler = this.cancelHandler.bind(this);
+    this.templateNameHandler = this.templateNameHandler.bind(this);
+    this.saveHandler = this.saveHandler.bind(this);
+    this.previewHandler = this.previewHandler.bind(this);
+    this.setFormValidity = this.setFormValidity.bind(this);
+    this.injectEvents = this.injectEvents.bind(this);
+    this.injectSections = this.injectSections.bind(this);
+    this.injectContainer = this.injectContainer.bind(this);
+    this.injectColLabelSection = this.injectColLabelSection.bind(this);
+    this.injectMultiColSection = this.injectMultiColSection.bind(this);
+    this.getMappedEvent = this.getMappedEvent.bind(this);
+    this.updateTotalContentBlocks = this.updateTotalContentBlocks.bind(this);
+    this.insertTemplateData = this.insertTemplateData.bind(this);
+    this.uploadImage = this.uploadImage.bind(this);
+    this.returnCardLayout = this.returnCardLayout.bind(this);
+    this.menuOnClickEvent = this.menuOnClickEvent.bind(this);
+    this.showErrorMessage = this.showErrorMessage.bind(this);
+    this.returnCurrentFormData = this.returnCurrentFormData.bind(this);
+    this.returnCurrentSchema = this.returnCurrentSchema.bind(this);
+    this.handleFrameTasks = this.handleFrameTasks.bind(this);
+    this.getCurrentWindow = this.getCurrentWindow.bind(this);
+    // this.startLoading = this.startLoading.bind(this);
+    this.moveToTemplates = this.moveToTemplates.bind(this);
+    this.showNext = this.showNext.bind(this);
+  }
+  componentDidMount = () => {
+    if (!this.state.isEdit) {
+      this.updateTotalContentBlocks();
+    }
+    if (this.state.isIframe) {
+      window.addEventListener("message", this.handleFrameTasks);
+      this.showNext();
+    }
+  }
+  componentWillReceiveProps = (nextProps) => {
+    if (nextProps.Create.saveTemplateRes && !_.isEmpty(nextProps.Create.saveTemplateRes) && nextProps.Create.saveTemplateSuccess && !_.isEmpty(nextProps.Create.saveTemplateSuccess)) {
+      const type = nextProps.location.query.type;
+      this.props.router.push({
+        pathname: `/wechat`,
+        query: type === 'embedded' ? {type: 'embedded'} : {},
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.state.isIframe) {
+      window.removeEventListener("message", this.handleFrameTasks);
+    }
+  }
+  onHover = (data) => {
+    this.setState({hovered: data});
+  }
+  onHoverRemove = (data) => {
+    this.setState({hovered: data});
+  }
+  onFormDataChange = (currentFormData) => {
+    const isLimitExceeded = this.checkFormFieldsCount(currentFormData);
+    if (!isLimitExceeded) {
+      const templateData = _.cloneDeep(this.state.templateData);
+      templateData[this.state.currentContentId].formData = _.cloneDeep(currentFormData);
+      this.setState({templateData});
+    }
+  }
+  getMappedEvent = (id, event) => {
+    const map = this.state.map;
+    // if (!map[id] || !map[id][event]) {
+    // }
+    return map[id][event];
+  }
+  setFormValidity = (isFormValid) => {
+    this.setState({isFormValid});
+  }
+  getCurrentWindow(e) {
+    const response = {
+      action: e.action,
+      value: 'edit',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+  getFormData(e) {
+    console.log("getformdata wechat richmedia: ", this.state.templateData, this.props, this.state);
+    const message = {
+      mediaList: this.props.templateData.templateDetails.versions.base.mediaList,
+      media_id: this.props.templateData.templateDetails.versions.base.mediaId,
+      definition: {
+        msgtype: "IMAGE",
+        msgcontent: "RICH_MEDIA_WECHAT",
+      },
+    };
+    const data = {
+      data: message,
+      accountId: this.props.Templates && this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.id,
+      template_id: this.props.templateId,
+      Title: this.props.templateName,
+      OriginalId: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
+      TopColor: "#000000",
+      touser: "{{wechat_open_id}}",
+      creative_template_id: this.props.templateId,
+    };
+    const response = {
+      action: "getFormData",
+      value: data,
+      validity: this.state.isFormValid,
+    };
+    console.log("getformdata2 wechat richmedia: ", data);
+    e.source.postMessage(JSON.stringify(response), e.origin);
+  }
+  showErrorMessage = (errorMessage) => {
+    const message = getMessageObject('error', errorMessage, true);
+    this.props.globalActions.addMessageToQueue(message);
+  }
+  checkFormFieldsCount = (currentFormData) => {
+    let isLimitExceeded = false;
+    if (_.isEmpty(currentFormData)) {
+      isLimitExceeded = true;
+      return isLimitExceeded;
+    }
+    if (currentFormData['title-value'].length > 64) {
+      this.showErrorMessage("Title exceeds character count limit");
+      isLimitExceeded = true;
+    }
+    if (currentFormData['author-value'].length > 8) {
+      this.showErrorMessage("Author exceeds character count limit");
+      isLimitExceeded = true;
+    }
+    if (currentFormData['cover-abstract-value'].length > 120) {
+      this.showErrorMessage("Cover abstract exceeds character count limit");
+      isLimitExceeded = true;
+    }
+    return isLimitExceeded;
+  }
+  // startLoading(ifEdit) {
+  //   if (ifEdit) {
+  //     this.setState({loading: true});
+  //   }
+  // }
+  moveToTemplates() {
+    const modalContent = {
+      title: "Alert",
+      body: "Do you really want to go back? All your temporary changes will be lost!",
+      type: 'confirm',
+      id: 'template-back-confirm-modal',
+      show: true,
+    };
+    this.setState({modalContent, showModal: true});
+  }
+  handleCancelModal = () => {
+    this.setState({showModal: false});
+  }
+  showNext() {
+    const response = {
+      action: "showNext",
+      value: true,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+  handleFrameTasks = (e) => {
+    const type = e.data;
+    if (typeof type === 'object') {
+      const action = type.action;
+      switch (action) {
+        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 "moveToTemplates":
+          this.moveToTemplates();
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  injectEvents = (schema) => {
+    const temp = schema;
+    if (temp.standalone) {
+      temp.standalone.sections = this.injectSections(temp.standalone.sections);
+    }
+    if (temp.containers) {
+      _.forEach(temp.containers, (container) => {
+        let tempContainer = container;
+        tempContainer = this.injectContainer(tempContainer);
+        return tempContainer;
+      });
+    }
+    return schema;
+  }
+  injectContainer = (container) => {
+    const temp = container;
+    if (temp.type === 'tabs') {
+      temp.injectedEvents = {};
+      _.forEach(temp.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
+      });
+      _.forEach(temp.panes, (pane) => {
+        const tempPane = pane;
+        tempPane.sectionsHeaders = this.injectSections(tempPane.sectionsHeaders);
+        tempPane.sections = this.injectSections(tempPane.sections);
+      });
+    }
+    return temp;
+  }
+  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;
+  }
+  injectColLabelSection = (section) => {
+    _.forEach(section.inputFields, (inputField) => {
+      const temp = inputField;
+      temp.injectedEvents = {};
+      _.forEach(inputField.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
+      });
+      return true;
+    });
+    _.forEach(section.actionFields, (actionField) => {
+      const temp = actionField;
+      temp.injectedEvents = {};
+      _.forEach(actionField.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
+      });
+      return true;
+    });
+    return section;
+  }
+  injectMultiColSection = (section) => {
+    _.forEach(section.inputFields, (inputField) => {
+      _.forEach(inputField.cols, (col) => {
+        const temp = col;
+        temp.injectedEvents = {};
+        _.forEach(col.supportedEvents, (event) => {
+          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        });
+        return true;
+      });
+    });
+    _.forEach(section.actionFields, (actionField) => {
+      _.forEach(actionField.cols, (col) => {
+        const temp = col;
+        temp.injectedEvents = {};
+        _.forEach(col.supportedEvents, (event) => {
+          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        });
+        return true;
+      });
+    });
+    return section;
+  }
+  templateNameHandler = (ev) => {
+    const { value } = ev.target;
+    this.setState({templateName: value});
+  }
+  cancelHandler = () => {
+    const type = this.props.location.query.type;
+    this.props.router.push({
+      pathname: `/wechat`,
+      query: type === 'embedded' ? {type: 'embedded'} : {},
+    });
+  }
+  previewHandler = () => {
+  }
+  saveHandler = () => {
+    let isFormValid = this.validateFormFields();
+    if (_.isEmpty(this.state.templateName)) {
+      this.showErrorMessage("Cannot leave template name empty");
+      isFormValid = false;
+    }
+    if (isFormValid) {
+      const templateData = _.cloneDeep(this.state.templateData);
+      const mediaList = [];
+      _.forEach(templateData, (contentData) => {
+        const filteredContent = {
+          title: contentData.formData['title-value'],
+          author: contentData.formData['author-value'] ? contentData.formData['author-value'] : '',
+          digest: contentData.formData['cover-abstract-value'] ? contentData.formData['cover-abstract-value'] : '',
+          content: contentData.formData['content-value'],
+          content_source_url: contentData.formData['source-link-value'],
+          show_cover_pic: contentData.formData['show-cover-pic-value'] === true ? 1 : 0,
+          post_comments_scope: contentData.formData['post-comments-value'] ? contentData.formData['post-comments-value'] : 'No one',
+          thumb_media_id: contentData.mediaId,
+          image_url: contentData.imageUrl,
+        };
+        mediaList.push(filteredContent);
+      });
+      const saveObj = {};
+      saveObj.name = this.state.templateName.trim();
+      saveObj.appId = this.props.Templates.selectedWeChatAccount.configs.wechat_app_id;
+      saveObj.appSecret = this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret;
+      saveObj.versions = {
+        base: {
+          OriginalId: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
+          mediaList,
+        },
+        history: [],
+      };
+      saveObj.definition = {
+        msgtype: "IMAGE",
+        msgcontent: "RICH_MEDIA_WECHAT",
+      };
+      if (this.state.isEdit) {
+        saveObj._id = this.props.templateId;
+        saveObj.mediaId = this.props.mediaId;
+        saveObj.type = "WECHAT";
+      }
+      this.props.actions.saveTemplate(saveObj);
+    }
+  }
+  uploadImage = (data) => {
+    if (data.fileParams.error) {
+      // const message = getMessageObject('error', this.props.intl.formatMessage(messages["File size cannot be more than 5mb"]), true);
+      // this.props.globalActions.addMessageToQueue(message);
+    } else {
+      const wechatParams = {
+        appId: this.props.Templates.selectedWeChatAccount.configs.wechat_app_id,
+        appSecret: this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret,
+        source: 'wechat',
+      };
+      this.props.actions.uploadAsset(data.file, data.type, data.fileParams, null, wechatParams, this.state.currentContentId);
+    }
+  }
+  updateTotalContentBlocks = () => {
+    if (this.state.totalContentBlocks < 8) {
+      this.setState({
+        totalContentBlocks: this.state.totalContentBlocks + 1,
+      }, () => {
+        this.insertTemplateData();
+      });
+    } else {
+      this.showErrorMessage("You have reached the maximum template size");
+    }
+  }
+  insertTemplateData = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    templateData[this.state.totalContentBlocks - 1] = {
+      formData: {},
+      imageUrl: "",
+      mediaId: "",
+    };
+    this.setState({templateData});
+  }
+  updateImageData = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    if (this.props.ImageData && !_.isEmpty(this.props.ImageData[this.state.currentContentId]) && this.props.ImageData[this.state.currentContentId].metaInfo && this.props.ImageData[this.state.currentContentId].metaInfo.secure_file_path && this.props.ImageData[this.state.currentContentId].metaInfo.mediaId && templateData[this.state.currentContentId].imageUrl !== this.props.ImageData[this.state.currentContentId].metaInfo.secure_file_path) {
+      templateData[this.state.currentContentId].imageUrl = this.props.ImageData[this.state.currentContentId].metaInfo.secure_file_path;
+      templateData[this.state.currentContentId].mediaId = this.props.ImageData[this.state.currentContentId].metaInfo.mediaId;
+      this.setState({templateData});
+    }
+  }
+  updateTemplateData = (e, id) => {
+    //e.stopPropagation();
+    this.setState({currentContentId: id});
+  }
+  returnCardLayout = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    const returnObj = [];
+    _.forEach(templateData, (contentData, contentId) => {
+      const id = parseInt(contentId, 10);
+      const imageUrl = contentData.imageUrl;
+      if (id === 0) {
+        returnObj[id] = (
+          <CapCard
+            id={id}
+            style={{ width: 244, height: 221 }}
+            bodyStyle={{ padding: 0 }}
+            onClick={(e) => this.updateTemplateData(e, id)}
+            // onMouseEnter={() => this.onHover(true, contentId)}
+            // onMouseLeave={() => this.onHoverRemove(false, contentId)}
+            // className={this.state.hovered ? 'hovered' : ''}
+          >
+            <div>
+              <div className="custom-image">
+                <img alt="default" width="242px" height="139px" src={imageUrl} />
+              </div>
+              <div className="custom-card">
+                <p>{contentData && contentData.formData ? contentData.formData['cover-abstract-value'] : ""}</p>
+              </div>
+            </div>
+          </CapCard>
+        );
+      } else {
+        returnObj[id] = (
+          <div id={id} onClick={(e) => this.updateTemplateData(e, id)}>
+            <CapRow style={{ width: 244, height: 53 }}>
+              <CapColumn span={18}>
+                {contentData && contentData.formData ? contentData.formData['title-value'] : ""}
+              </CapColumn>
+              <CapColumn span={6}>
+                <img alt="default" width="50px" height="47px" src={imageUrl} />
+              </CapColumn>
+            </CapRow>
+          </div>
+        );
+      }
+    });
+    return (
+      <div>{returnObj}</div>
+    );
+  }
+  validateFormFields = () => {
+    let isValid = true;
+    const currentContent = this.state.templateData[this.state.currentContentId];
+    if (_.isEmpty(currentContent.formData)) {
+      this.showErrorMessage("Cannot leave form empty");
+      isValid = false;
+    }
+    if (_.isEmpty(currentContent.formData['title-value'])) {
+      this.showErrorMessage("Cannot leave title field empty");
+      isValid = false;
+    }
+    if (_.isEmpty(currentContent.formData['source-link-value'])) {
+      this.showErrorMessage("Cannot leave source link field empty");
+      isValid = false;
+    }
+    if (_.isEmpty(currentContent.formData['content-value'])) {
+      this.showErrorMessage("Cannot leave content field empty");
+      isValid = false;
+    }
+    if (_.isEmpty(currentContent.imageUrl) || _.isEmpty(currentContent.mediaId)) {
+      this.showErrorMessage("Please upload an image");
+      isValid = false;
+    }
+    return isValid;
+  }
+  menuOnClickEvent(ev) {
+    const isFormValid = this.validateFormFields();
+    if (!isFormValid) {
+      return false;
+    }
+    switch (ev.key) {
+      case "new_richmedia_content":
+        this.setState({
+          currentContentId: this.state.currentContentId + 1,
+        }, () => {
+          this.updateTotalContentBlocks();
+        });
+        break;
+      case "old_richmedia_content":
+        this.setState({
+          currentContentId: this.state.currentContentId + 1,
+        }, () => {
+          this.updateTotalContentBlocks();
+        });
+        break;
+      default:
+        this.setState({
+          currentContentId: this.state.currentContentId + 1,
+        }, () => {
+          this.updateTotalContentBlocks();
+        });
+    }
+    return true;
+  }
+  returnContentMenu = () => {
+    let actionButton = '';
+    const createPushMenu = (
+      <Menu onClick={this.menuOnClickEvent}>
+        {/* <MenuItem key="old_richmedia_content">
+          Add existing Richmedia content
+        </MenuItem> */}
+        <MenuItem key="new_richmedia_content">
+          Add Richmedia content
+        </MenuItem>
+      </Menu>
+    );
+    actionButton = (<Dropdown overlay={createPushMenu} trigger={['click']}>
+      <CapButton style={{width: '244', height: '53', marginTop: '16'}} type="secondary">
+        <div style={{display: 'inline-flex'}}>
+          <p>
+            <i style={{ color: '#2e89df'}} className="material-icons">+</i>
+          </p>
+        </div>
+      </CapButton>
+    </Dropdown>);
+    return actionButton;
+  }
+  returnCurrentSchema = () => {
+    let schema = {};
+    if (this.state.isIframe) {
+      const disabledFormSchema = _.cloneDeep(this.state.richmediaSchema);
+      disabledFormSchema.standalone.sections[0].inputFields[0].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[1].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[2].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[3].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[4].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[5].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[6].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].inputFields[7].cols[1].disabled = true;
+      schema = this.injectEvents(disabledFormSchema);
+      return schema;
+    }
+    schema = this.injectEvents(this.state.richmediaSchema);
+    return schema;
+  }
+  returnCurrentFormData = () => {
+    const formData = this.state.templateData && !_.isEmpty(this.state.templateData[this.state.currentContentId]) && this.state.templateData[this.state.currentContentId].formData ? _.cloneDeep(this.state.templateData[this.state.currentContentId].formData) : {};
+    return formData;
+  }
+  render() {
+    const cardLayout = this.returnCardLayout();
+    const contentMenu = this.returnContentMenu();
+    const schema = this.returnCurrentSchema();
+    const formData = this.returnCurrentFormData();
+    this.updateImageData();
+    return (
+      <CapSpinner spinning={this.state.loading}>
+        <div>
+          <Helmet
+            title="Wechat Richmedia"
+          />
+          <div className="wechat-container">
+            {!this.state.isIframe && <Header templateName={this.state.templateName} templateNameHandler={this.templateNameHandler} previewHandler={this.previewHandler} cancelHandler={this.cancelHandler} saveHandler={this.saveHandler} />}
+            <CapRow className="wechat-form-container">
+              <CapColumn span={6}>
+                {cardLayout}
+                {!this.state.isIframe && contentMenu}
+              </CapColumn>
+              <CapColumn span={18}>
+                <FormBuilder
+                  key={this.state.currentContentId}
+                  schema={schema}
+                  onChange={this.onFormDataChange}
+                  parent={this}
+                  formData={formData}
+                  onFormValidityChange={this.setFormValidity}
+                  location={this.props.location}
+                  usingTabContainer={false}
+                  router={this.props.router}
+                  modal={this.state.modalContent}
+                  showModal={this.state.showModal}
+                />
+              </CapColumn>
+            </CapRow>
+          </div>
+        </div>
+      </CapSpinner>
+    );
+  }
+}
+
+Create.propTypes = {
+  location: PropTypes.object,
+  router: PropTypes.object,
+  mode: PropTypes.string,
+  templateData: PropTypes.object,
+  totalContentBlocks: PropTypes.integer,
+  templateName: PropTypes.string,
+  templateId: PropTypes.string,
+  mediaId: PropTypes.string,
+  Templates: PropTypes.object,
+  ImageData: PropTypes.object,
+  actions: PropTypes.object,
+  globalActions: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Create: makeSelectCreate(),
+  Templates: makeSelectTemplates(),
+  ImageData: getAssetDetails(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Create);

package/containers/WeChat/RichmediaTemplates/Create/messages.js

@@ -0,0 +1,13 @@
+/*
+ * Create Messages
+ *
+ * This contains all the text for the Create component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.Create.header',
+    defaultMessage: 'This is Create container !',
+  },
+});