@capillarytech/creatives-library 8.0.146 → 8.0.147

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

@@ -1,1071 +0,0 @@
-/*
- *
- * 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));
-