@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

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

@@ -0,0 +1,1071 @@
+/*
+ *
+ * Create
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { bindActionCreators, compose } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+import { Menu, Dropdown } from 'antd';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpinner } from '@capillarytech/cap-react-ui-library';
+import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
+import * as actions from './actions';
+import richmediaschema from './richmediaschema';
+import './_createRichmedia.scss';
+import messages from './messages';
+import * as globalActions from '../../../../containers/Cap/actions';
+import {getMessageObject} from '../../../../utils/messageUtils';
+import FormBuilder from '../../../../components/FormBuilder';
+import Header from '../../../../components/Header';
+import WechatRichmediaTemplatePreview from '../../../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import injectSaga from '../../../../utils/injectSaga';
+import injectReducer from '../../../../utils/injectReducer';
+import reducer from './reducer';
+import { richMediaTemplatesSaga } from './sagas';
+import { UserIsAuthenticated } from '../../../../utils/authWrapper';
+import { createQueryString } from '../../../../utils/common';
+
+const MenuItem = Menu.Item;
+export class Create extends React.Component { // 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: richmediaschema,
+      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": {
+          getEditorInstanse: this.getEditorInstanse,
+          onContentChange: this.onContentChange,
+          onFocusOut: this.focusOutFromCkEditor,
+          onFocusIn: this.focusInFromCkeditor,
+        },
+        "show-cover-pic-value": {
+          onChange: this.onFormDataChange,
+        },
+        "post-comments-value": {
+          onChange: this.onFormDataChange,
+        },
+        "content-image-value": {
+          onUpload: this.uploadImage,
+        },
+      },
+      isEdit,
+      isFormValid: true,
+      templateData,
+      currentContentId: 0,
+      totalContentBlocks,
+      templateName,
+      templateId,
+      mediaId,
+      isIframe,
+      hovered: false,
+      loading: false,
+      showPreview: false,
+      focusOut: true,
+      showModal: false,
+      modalContent: {
+        title: this.props.intl.formatMessage(messages.modalTitle),
+        body: this.props.intl.formatMessage(messages.modalBody),
+        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);
+    this.prepareWeChatRichmediaPreviewData = this.prepareWeChatRichmediaPreviewData.bind(this);
+    this.injectMessages = this.injectMessages.bind(this);
+  }
+  componentWillMount = () => {
+    if (_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+      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 = () => {
+    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 && !_.isEqual(nextProps.Create.saveTemplateRes, this.props.Create.saveTemplateRes)) {
+      this.setState({loading: false});
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages.saveSuccess), true);
+      this.props.globalActions.addMessageToQueue(message);
+      const type = nextProps.location.query.type;
+      nextProps.router.push({
+        pathname: `/wechat`,
+        query: type === 'embedded' ? {type: 'embedded'} : {},
+      });
+    }
+    if (!nextProps.Create.saveTemplateSuccess && nextProps.Create.saveTemplateSuccess !== undefined && nextProps.Create.saveTemplateErrorMessage && nextProps.Create.saveTemplateErrorMessage !== this.props.Create.saveTemplateErrorMessage) {
+      this.setState({loading: false});
+      this.showErrorMessage(nextProps.Create.saveTemplateErrorMessage);
+    }
+  }
+  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 templateData = _.cloneDeep(this.state.templateData);
+    templateData[this.state.currentContentId].formData = _.cloneDeep(currentFormData);
+    this.setState({templateData});
+  }
+  onContentChange = (evt) => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    console.log('oncontentchange onChange ', evt, evt.editor.getData(), templateData);
+    templateData[this.state.currentContentId].formData['content-value'] = evt.editor.getData();
+    this.setState({templateData});
+  }
+  getEditorInstanse = (instance, id) => {
+    
+    window.CKEDITOR.on( 'instanceReady', ( event ) => {
+      this.setState({editorInstanse: event.editor});
+      event.editor.on( 'focus', () => {
+        
+        this.setState({editorInstanse: event.editor});
+      });
+    });
+    //this.setState({editorInstanse: instance});
+  }
+  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) {
+    
+    const message = {
+      mediaList: this.props.templateData.templateDetails.versions.base.mediaList,
+      media_id: this.props.templateData.templateDetails.versions.base.mediaId,
+      definition: {
+        msgtype: "MPNEWS",
+        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,
+    };
+    
+    e.source.postMessage(JSON.stringify(response), e.origin);
+  }
+  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]);
+    }
+    if (temp.options) {
+      _.forEach(temp.options, (option, id) => {
+        if (messages[option]) {
+          temp.options[id] = this.props.intl.formatMessage(messages[option]);
+        }
+      });
+    }
+    return temp;
+  }
+  showErrorMessage = (errorMessage) => {
+    const message = getMessageObject('error', errorMessage, true);
+    this.props.globalActions.addMessageToQueue(message);
+  }
+  checkFormFieldsCount = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    let isLimitExceeded = false;
+    _.forEach(templateData, (content) => {
+      if (_.isEmpty(content)) {
+        isLimitExceeded = true;
+      }
+      if (content.formData['title-value'].length > 64) {
+        this.showErrorMessage(`${this.props.intl.formatMessage(messages.titleCharacterCount)} ${content.formData['title-value'].length - 64} characters`);
+        isLimitExceeded = true;
+      }
+      if (content.formData['author-value'].length > 8) {
+        this.showErrorMessage(`${this.props.intl.formatMessage(messages.authorCharacterCount)} ${content.formData['author-value'].length - 8} characters`);
+        isLimitExceeded = true;
+      }
+      if (content.formData['cover-abstract-value'].length > 120) {
+        this.showErrorMessage(`${this.props.intl.formatMessage(messages.coverAbstractCharacterCount)} ${content.formData['cover-abstract-value'].length - 120} characters`);
+        isLimitExceeded = true;
+      }
+      return isLimitExceeded;
+    });
+    return isLimitExceeded;
+  }
+  // startLoading(ifEdit) {
+  //   if (ifEdit) {
+  //     this.setState({loading: true});
+  //   }
+  // }
+  moveToTemplates() {
+    
+    const modalContent = {
+      title: this.props.intl.formatMessage(messages.modalTitle),
+      body: this.props.intl.formatMessage(messages.modalBody),
+      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) => {
+      let temp = inputField;
+      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;
+      temp.injectedEvents = {};
+      _.forEach(actionField.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
+      });
+      temp = this.injectMessages(temp);
+      return true;
+    });
+    return section;
+  }
+  injectMultiColSection = (section) => {
+    _.forEach(section.inputFields, (inputField) => {
+      _.forEach(inputField.cols, (col) => {
+        let temp = col;
+        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;
+        temp.injectedEvents = {};
+        _.forEach(col.supportedEvents, (event) => {
+          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
+        });
+        temp = this.injectMessages(temp);
+        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`,
+      search :  createQueryString(type === 'embedded' ? {type: 'embedded'} : {})
+    });
+  }
+  closeSlideBox = () => {
+    this.setState({showPreview: false});
+  }
+  deducePostCommentsData = (data) => {
+    let postCommentsData = {};
+    if (data && data.toLowerCase() === 'anyone') {
+      postCommentsData = {
+        need_open_comment: 1,
+        only_fans_can_comment: 0,
+      };
+    } else if (data && data.toLowerCase() === 'only followers') {
+      postCommentsData = {
+        need_open_comment: 1,
+        only_fans_can_comment: 1,
+      };
+    } else {
+      postCommentsData = {
+        need_open_comment: 0,
+        only_fans_can_comment: 0,
+      };
+    }
+    return postCommentsData;
+  }
+  prepareMediaList = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    const mediaList = [];
+    _.forEach(templateData, (contentData) => {
+      const postCommentsData = this.deducePostCommentsData(contentData.formData['post-comments-value']);
+      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,
+        need_open_comment: postCommentsData.need_open_comment,
+        only_fans_can_comment: postCommentsData.only_fans_can_comment,
+        thumb_media_id: contentData.mediaId,
+        image_url: contentData.imageUrl,
+      };
+      mediaList.push(filteredContent);
+    });
+    return mediaList;
+  }
+  prepareWeChatRichmediaPreviewData = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    const returnObj = [];
+    _.forEach(templateData, (contentData, contentIndex) => {
+      const id = parseInt(contentIndex, 10);
+      if (id === 0) {
+        returnObj.push(
+          <div style={{ width: "100%", height: 116, position: "relative" }}>
+            <CapRow>
+              <img alt="default" width="100%" height="110px" src={contentData.imageUrl} />
+              <div style={{ position: "absolute", bottom: "5%", left: "5%" }}>{contentData.formData['title-value'] ? contentData.formData['title-value'] : ""}</div>
+            </CapRow>
+            {Object.keys(templateData).length === 1 ?
+              <CapRow style={{ height: 32 }}>
+                {contentData.formData['cover-abstract-value'] ? contentData.formData['cover-abstract-value'] : ""}
+              </CapRow>
+              :
+              ""
+            }
+          </div>
+        );
+      } else {
+        returnObj.push(
+          <CapRow style={{ "width": "100%", "height": 64, "border-bottom": "0.5px solid lightgrey" }}>
+            <CapColumn style={{ padding: "5% 0% 0% 5%", float: "left" }}>
+              {contentData.formData['title-value']}
+            </CapColumn>
+            <CapColumn style={{ float: "right" }}>
+              <img alt="default" width="60px" height="60px" src={contentData.imageUrl} style={{ "padding-right": "10%", "float": "left" }}/>
+            </CapColumn>
+          </CapRow>
+        );
+      }
+    });
+    return returnObj;
+  }
+  previewHandler = () => {
+    this.setState({showPreview: true});
+  }
+  saveHandler = () => {
+    let isFormValid = this.validateFormFields();
+    if (_.isEmpty(this.state.templateName)) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.emptyTemplateName));
+      isFormValid = false;
+    }
+    if (isFormValid) {
+      const mediaList = this.prepareMediaList();
+      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: "MPNEWS",
+        msgcontent: "RICH_MEDIA_WECHAT",
+      };
+      if (this.state.isEdit) {
+        saveObj._id = this.props.templateId;
+        saveObj.mediaId = this.props.mediaId;
+        saveObj.type = "WECHAT";
+      }
+      this.setState({loading: true});
+      this.props.actions.saveTemplate(saveObj);
+    }
+  }
+  uploadImage = (data, uploadId) => {
+    if (data.type === "wrong file") {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.wrongFormatFile));
+    } else {
+      const wechatParams = {
+        appId: this.props.Templates.selectedWeChatAccount.configs.wechat_app_id,
+        appSecret: this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret,
+        source: 'wechat',
+      };
+      this.setState({loading: true});
+      this.props.actions.uploadAsset(data.file, data.type, data.fileParams, null, wechatParams, this.state.currentContentId, uploadId);
+    }
+  }
+  updateTotalContentBlocks = () => {
+    this.setState({
+      totalContentBlocks: this.state.totalContentBlocks + 1,
+    }, () => {
+      this.insertTemplateData();
+    });
+  }
+  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, loading: false});
+    }
+  }
+  viewContent = (e, id) => {
+    this.setState({currentContentId: id});
+  }
+  deleteContent = (e, id) => {
+    const modalContent = {
+      title: this.props.intl.formatMessage(messages.modalTitle),
+      body: this.props.intl.formatMessage(messages.deleteContent),
+      type: 'confirm',
+      id: 'template-delete-confirm-modal',
+      show: true,
+      contentId: id,
+    };
+    this.setState({showModal: true, modalContent});
+  }
+  handleDelete = (modalContent) => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    let totalContentBlocks = this.state.totalContentBlocks;
+    let currentContentId = this.state.currentContentId;
+    let index = 0;
+    for (index = modalContent.contentId; index <= (totalContentBlocks - 2); index += 1) {
+      templateData[index] = templateData[index + 1];
+    }
+    delete templateData[index];
+    currentContentId = (totalContentBlocks - 1) === modalContent.contentId ? modalContent.contentId - 1 : modalContent.contentId;
+    totalContentBlocks -= 1;
+    this.setState({templateData, totalContentBlocks, currentContentId, showModal: false});
+  }
+  moveContentDownward = (e, id) => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    let currentContentId = this.state.currentContentId;
+    const temp = templateData[id];
+    templateData[id] = templateData[id + 1];
+    templateData[id + 1] = temp;
+    currentContentId = id + 1;
+    this.setState({templateData, currentContentId});
+  }
+  moveContentUpward = (e, id) => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    let currentContentId = this.state.currentContentId;
+    const temp = templateData[id];
+    templateData[id] = templateData[id - 1];
+    templateData[id - 1] = temp;
+    currentContentId = id - 1;
+    this.setState({templateData, currentContentId});
+  }
+  returnCardLayout = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    const returnObj = [];
+    if (this.state.isIframe) {
+      _.forEach(templateData, (contentData, contentId) => {
+        const id = parseInt(contentId, 10);
+        const imageUrl = contentData.imageUrl;
+        if (id === 0) {
+          returnObj[id] = (
+            <div className="hover-container">
+              <CapCard
+                id={id}
+                style={{ width: 244, height: 221 }}
+                bodyStyle={{ "padding": 0, "background-color": "#707070", "height": 139 }}
+                onClick={(e) => this.viewContent(e, id)}
+                className={id === this.state.currentContentId ? "richmedia-card richmedia-card-clicked" : "richmedia-card"}
+              >
+                <div>
+                  <div className="custom-image">
+                    <img alt="" width="100%" height="139px" src={imageUrl} />
+                  </div>
+                  <div className="custom-card overflow-wrap-fields">
+                    <p style={{ padding: "0px 8px" }}>{contentData && contentData.formData ? contentData.formData['cover-abstract-value'] : ""}</p>
+                  </div>
+                </div>
+              </CapCard>
+            </div>
+          );
+        } else {
+          returnObj[id] = (
+            <div
+              id={id}
+              style={{ "margin-top": 10 }}
+              className="hover-container"
+              onClick={(e) => this.viewContent(e, id)}
+            >
+              <CapRow style={{ width: 244, height: 53 }} className={id === this.state.currentContentId ? "richmedia-card-rectangle richmedia-card-rectangle-clicked" : "richmedia-card-rectangle"}>
+                <CapColumn span={19} style={{ padding: "10px 8px 0px 8px" }} className="overflow-wrap-fields" >
+                  {contentData && contentData.formData ? contentData.formData['title-value'] : ""}
+                </CapColumn>
+                <CapColumn span={5} style={{ "height": "100%", "background-color": "#707070" }}>
+                  <img alt="" width="50px" height="100%" src={imageUrl} />
+                </CapColumn>
+              </CapRow>
+            </div>
+          );
+        }
+      });
+    } else {
+      _.forEach(templateData, (contentData, contentId) => {
+        const id = parseInt(contentId, 10);
+        const imageUrl = contentData.imageUrl;
+        if (id === 0) {
+          returnObj[id] = (
+            <div className="hover-container">
+              <CapCard
+                id={id}
+                style={{ width: 244, height: 221 }}
+                bodyStyle={{ "padding": 0, "background-color": "#707070", "height": 139 }}
+                className={id === this.state.currentContentId ? "richmedia-card richmedia-card-clicked" : "richmedia-card"}
+              >
+                <div>
+                  <div className="custom-image">
+                    <img alt="" width="100%" height="139px" src={imageUrl} />
+                  </div>
+                  <div className="custom-card overflow-wrap-fields">
+                    <p style={{ padding: "0px 8px" }}>{contentData && contentData.formData ? contentData.formData['cover-abstract-value'] : ""}</p>
+                  </div>
+                </div>
+              </CapCard>
+
+              {this.state.totalContentBlocks !== 1 ?
+                <div className="richmedia-icons">
+                  <div id={id} onClick={(e) => this.moveContentDownward(e, id)}>
+                    <i className="material-icons hover-icons">arrow_downward</i>
+                  </div>
+                  <div id={id} onClick={(e) => this.viewContent(e, id)} style={{ 'padding-left': '190px' }}>
+                    <i className="material-icons hover-icons">visibility</i>
+                  </div>
+                </div>
+                :
+                <div className="richmedia-icons">
+                  <div id={id} onClick={(e) => this.viewContent(e, id)} style={{ 'padding-left': '214px' }}>
+                    <i className="material-icons hover-icons">visibility</i>
+                  </div>
+                </div>
+                }
+            </div>
+          );
+        } else {
+          returnObj[id] = (
+            <div
+              id={id}
+              style={{ "margin-top": 10 }}
+              className="hover-container"
+            >
+              <CapRow style={{ width: 244, height: 53 }} className={id === this.state.currentContentId ? "richmedia-card-rectangle richmedia-card-rectangle-clicked" : "richmedia-card-rectangle"}>
+                <CapColumn span={19} style={{ padding: "10px 8px 0px 8px" }} className="overflow-wrap-fields" >
+                  {contentData && contentData.formData ? contentData.formData['title-value'] : ""}
+                </CapColumn>
+                <CapColumn span={5} style={{ "height": "100%", "background-color": "#707070" }}>
+                  <img alt="" width="50px" height="100%" src={imageUrl} />
+                </CapColumn>
+              </CapRow>
+              <div className="richmedia-icons">
+                <div style={{display: 'inline-flex'}}>
+                  <div id={id} onClick={(e) => this.moveContentUpward(e, id)}>
+                    <i className="material-icons hover-icons">arrow_upward</i>
+                  </div>
+                  {id !== (this.state.totalContentBlocks - 1 ) ?
+                    <div id={id} onClick={(e) => this.moveContentDownward(e, id)}>
+                      <i className="material-icons hover-icons">arrow_downward</i>
+                    </div>
+                    :
+                    ""
+                  }
+                </div>
+                {id !== (this.state.totalContentBlocks - 1 ) ?
+                  <div style={{'display': 'inline-flex', 'padding-left': '142px'}}>
+                    <div id={id} onClick={(e) => this.viewContent(e, id)}>
+                      <i className="material-icons hover-icons">visibility</i>
+                    </div>
+                    <div id={id} onClick={(e) => this.deleteContent(e, id)} >
+                      <i className="material-icons hover-icons">delete</i>
+                    </div>
+                  </div>
+                  :
+                  <div style={{'display': 'inline-flex', 'padding-left': '166px'}}>
+                    <div id={id} onClick={(e) => this.viewContent(e, id)}>
+                      <i className="material-icons hover-icons">visibility</i>
+                    </div>
+                    <div id={id} onClick={(e) => this.deleteContent(e, id)} >
+                      <i className="material-icons hover-icons">delete</i>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          );
+        }
+      });
+    }
+    return (
+      <div>{returnObj}</div>
+    );
+  }
+  isTitleRepeated = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    const titleSet = new Set();
+    let isRepeated = false;
+    _.forEach(templateData, (content = '') => {
+      const setSizeBefore = titleSet.size;
+      titleSet.add((content.formData['title-value'] || '').toLowerCase());
+      const setSizeAfter = titleSet.size;
+      if (setSizeAfter === setSizeBefore) {
+        isRepeated = true;
+      }
+    });
+    return isRepeated;
+  }
+  isFormEmpty = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    let isEmpty = false;
+    _.forEach(templateData, (content) => {
+      if (_.isEmpty(content.formData)) {
+        isEmpty = true;
+      }
+    });
+    return isEmpty;
+  }
+  validateFormFields = () => {
+    let isValid = true;
+    const currentContent = this.state.templateData[this.state.currentContentId];
+    if (this.isFormEmpty()) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.formEmpty));
+      isValid = false;
+      return isValid;
+    }
+    if (_.isEmpty(currentContent.formData['title-value'])) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.titleEmpty));
+      isValid = false;
+      return isValid;
+    }
+    if (_.isEmpty(currentContent.imageUrl) || _.isEmpty(currentContent.mediaId)) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.noImage));
+      isValid = false;
+      return isValid;
+    }
+    if (_.isEmpty(currentContent.formData['source-link-value'])) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.sourceLinkEmpty));
+      isValid = false;
+      return isValid;
+    }
+    if (_.isEmpty(currentContent.formData['content-value'])) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.contentEmpty));
+      isValid = false;
+      return isValid;
+    }
+    if (this.checkFormFieldsCount(currentContent.formData)) {
+      isValid = false;
+      return isValid;
+    }
+    if (this.isTitleRepeated()) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.titleNameRepeated));
+      isValid = false;
+      return isValid;
+    }
+    if (!_.isEmpty(currentContent.formData['source-link-value'])) {
+      isValid = currentContent.formData['source-link-value'].match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g);
+      if (!isValid) {
+        this.showErrorMessage(this.props.intl.formatMessage(messages.wrongUrl));
+        return isValid;
+      }
+    }
+    return isValid;
+  }
+  menuOnClickEvent(ev) {
+    const isFormValid = this.validateFormFields();
+    if (!isFormValid) {
+      return false;
+    }
+    switch (ev.key) {
+      case "new_richmedia_content":
+        if (this.state.totalContentBlocks < 8) {
+          this.setState({
+            currentContentId: this.state.totalContentBlocks,
+          }, () => {
+            this.updateTotalContentBlocks();
+          });
+        } else {
+          this.showErrorMessage(this.props.intl.formatMessage(messages.maxContentCount));
+        }
+        break;
+      case "old_richmedia_content":
+        this.setState({
+          currentContentId: this.state.currentContentId + 1,
+        }, () => {
+          this.updateTotalContentBlocks();
+        });
+        break;
+      default:
+        this.setState({
+          currentContentId: this.state.totalContentBlocks + 1,
+        }, () => {
+          this.updateTotalContentBlocks();
+        });
+    }
+    return true;
+  }
+  updateContentData = () => {
+    if (this.state.editorInstanse) {
+      this.state.editorInstanse.insertHtml(`<img src='${this.props.ContentImageData.metaInfo.wechatUrl}' alt='Image'>`);
+    }
+    this.props.actions.clearContentImageStore();
+    this.setState({loading: false});
+  }
+  returnContentMenu = () => {
+    let actionButton = '';
+    const createPushMenu = (
+      <Menu onClick={this.menuOnClickEvent}>
+        {/* <MenuItem key="old_richmedia_content">
+          Add existing Richmedia content
+        </MenuItem> */}
+        <MenuItem key="new_richmedia_content">
+          <FormattedMessage {...messages.addNewRichmedia} />
+        </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;
+  }
+  focusOutFromCkEditor = () => {
+    this.setState({focusOut: true});
+  }
+  focusInFromCkeditor = () => {
+    this.setState({focusOut: false});
+  }
+  returnCurrentSchema = () => {
+    let schema = _.cloneDeep(this.state.richmediaSchema);
+    if (this.state.isIframe) {
+      const disabledFormSchema = _.cloneDeep(this.state.richmediaSchema);
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[0].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[1].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[2].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[3].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[4].cols[0].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[5].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[2].inputFields[0].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[1].childSections[1].childSections[0].inputFields[0].cols[1].disabled = true;
+      if (this.state.editorInstanse) {
+        this.state.editorInstanse.setReadOnly(true);
+      }
+      schema = this.injectEvents(disabledFormSchema);
+      return schema;
+    }
+    if (this.state.editorInstanse && this.state.focusOut) {
+      schema.standalone.sections[0].childSections[1].childSections[1].childSections[0].inputFields[0].cols[1].disabled = true;
+    } else if (this.state.editorInstanse && !this.state.focusOut) {
+      schema.standalone.sections[0].childSections[1].childSections[1].childSections[0].inputFields[0].cols[1].disabled = false;
+    }
+    schema = this.injectEvents(schema);
+    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();
+    if (this.props.ContentImageData && this.props.ContentImageData.metaInfo && this.props.ContentImageData.metaInfo.wechatUrl) {
+      this.updateContentData();
+    }
+    return (
+      <div className="richmedia-container">
+        <CapSpinner spinning={this.state.loading}>
+          {this.state.showPreview && <WechatRichmediaTemplatePreview
+            show={this.state.showPreview}
+            closeSlideBox={this.closeSlideBox}
+            header={this.state.templateName}
+            width={50}
+            showSlidebox
+            const type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''}
+            content={this.prepareMediaList()}
+          />}
+          <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}
+                    handleCancelModal={this.handleCancelModal}
+                    iframeParent={parent}
+                    handleDelete={this.handleDelete}
+                  />
+                </CapColumn>
+              </CapRow>
+            </div>
+          </div>
+        </CapSpinner>
+      </div>
+    );
+  }
+}
+
+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,
+  Create: PropTypes.object,
+  intl: intlShape.isRequired,
+  ContentImageData: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Create: makeSelectCreate(),
+  Templates: makeSelectTemplates(),
+  ImageData: getAssetDetails(),
+  ContentImageData: getContentAssetDetails(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withSaga = injectSaga({ key: 'create', saga: richMediaTemplatesSaga });
+const withReducer = injectReducer({ key: 'create', reducer });
+
+export default compose(
+  UserIsAuthenticated,
+  withReducer,
+  withSaga,
+  withConnect,
+)(injectIntl(Create));
+