@capillarytech/creatives-library 2.0.66 → 2.0.68

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

@@ -9,19 +9,22 @@ import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { bindActionCreators } 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-ui-library';
-import makeSelectCreate, {makeSelectTemplates, getAssetDetails} from './selectors';
+import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
-import testschema from './testschema';
+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';
 const MenuItem = Menu.Item;
-export class Create extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
     let templateData = {};
@@ -43,7 +46,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
       templateName = props.templateName;
     }
     this.state = {
-      richmediaSchema: testschema,
+      richmediaSchema: richmediaschema,
       map: {
         "image-value": {
           onUpload: this.uploadImage,
@@ -61,7 +64,10 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
           onChange: this.onFormDataChange,
         },
         "content-value": {
-          onChange: this.onFormDataChange,
+          getEditorInstanse: this.getEditorInstanse,
+          onContentChange: this.onContentChange,
+          onFocusOut: this.focusOutFromCkEditor,
+          onFocusIn: this.focusInFromCkeditor,
         },
         "show-cover-pic-value": {
           onChange: this.onFormDataChange,
@@ -69,6 +75,9 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
         "post-comments-value": {
           onChange: this.onFormDataChange,
         },
+        "content-image-value": {
+          onUpload: this.uploadImage,
+        },
       },
       isEdit,
       isFormValid: true,
@@ -81,10 +90,12 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
       isIframe,
       hovered: false,
       loading: false,
+      showPreview: false,
+      focusOut: true,
       showModal: false,
       modalContent: {
-        title: "Alert",
-        body: "Do you really want to go back? All your temporary changes will be lost!",
+        title: this.props.intl.formatMessage(messages.modalTitle),
+        body: this.props.intl.formatMessage(messages.modalBody),
         type: 'confirm',
         id: 'template-back-confirm-modal',
       },
@@ -114,6 +125,18 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     // 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`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    }
   }
   componentDidMount = () => {
     if (!this.state.isEdit) {
@@ -125,13 +148,20 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     }
   }
   componentWillReceiveProps = (nextProps) => {
-    if (nextProps.Create.saveTemplateRes && !_.isEmpty(nextProps.Create.saveTemplateRes) && nextProps.Create.saveTemplateSuccess && !_.isEmpty(nextProps.Create.saveTemplateSuccess)) {
+    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;
-      this.props.router.push({
+      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) {
@@ -145,12 +175,26 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     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});
-    }
+    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) => {
+    console.log('Got editor Instance ', instance, id);
+    window.CKEDITOR.on( 'instanceReady', ( event ) => {
+      this.setState({editorInstanse: event.editor});
+      event.editor.on( 'focus', () => {
+        console.log( 'focused', event.editor, this );
+        this.setState({editorInstanse: event.editor});
+      });
+    });
+    //this.setState({editorInstanse: instance});
   }
   getMappedEvent = (id, event) => {
     const map = this.state.map;
@@ -162,6 +206,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     this.setState({isFormValid});
   }
   getCurrentWindow(e) {
+    console.log("moveToTemplates richmedia getCurrentWindow");
     const response = {
       action: e.action,
       value: 'edit',
@@ -175,7 +220,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
       mediaList: this.props.templateData.templateDetails.versions.base.mediaList,
       media_id: this.props.templateData.templateDetails.versions.base.mediaId,
       definition: {
-        msgtype: "IMAGE",
+        msgtype: "MPNEWS",
         msgcontent: "RICH_MEDIA_WECHAT",
       },
     };
@@ -197,28 +242,54 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     console.log("getformdata2 wechat richmedia: ", data);
     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 = (currentFormData) => {
+  checkFormFieldsCount = () => {
+    const templateData = _.cloneDeep(this.state.templateData);
     let isLimitExceeded = false;
-    if (_.isEmpty(currentFormData)) {
-      isLimitExceeded = true;
+    _.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;
-    }
-    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) {
@@ -227,9 +298,10 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
   //   }
   // }
   moveToTemplates() {
+    console.log("moveToTemplates richmedia");
     const modalContent = {
-      title: "Alert",
-      body: "Do you really want to go back? All your temporary changes will be lost!",
+      title: this.props.intl.formatMessage(messages.modalTitle),
+      body: this.props.intl.formatMessage(messages.modalBody),
       type: 'confirm',
       id: 'template-back-confirm-modal',
       show: true,
@@ -240,6 +312,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     this.setState({showModal: false});
   }
   showNext() {
+    console.log("richmedia shownext");
     const response = {
       action: "showNext",
       value: true,
@@ -247,6 +320,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     parent.postMessage(JSON.stringify(response), '*');
   }
   handleFrameTasks = (e) => {
+    console.log("richmedia handleFrameTasks: ", e.data);
     const type = e.data;
     if (typeof type === 'object') {
       const action = type.action;
@@ -266,6 +340,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
           this.getFormData(e);
           break;
         case "moveToTemplates":
+          console.log("moveToTemplates richmedia case");
           this.moveToTemplates();
           break;
         default:
@@ -317,19 +392,21 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
   }
   injectColLabelSection = (section) => {
     _.forEach(section.inputFields, (inputField) => {
-      const temp = 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) => {
-      const temp = 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;
@@ -337,21 +414,23 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
   injectMultiColSection = (section) => {
     _.forEach(section.inputFields, (inputField) => {
       _.forEach(inputField.cols, (col) => {
-        const temp = 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) => {
-        const temp = col;
+        let temp = col;
         temp.injectedEvents = {};
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
+        temp = this.injectMessages(temp);
         return true;
       });
     });
@@ -368,31 +447,97 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
       query: 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("Cannot leave template name empty");
+      this.showErrorMessage(this.props.intl.formatMessage(messages.emptyTemplateName));
       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 mediaList = this.prepareMediaList();
       const saveObj = {};
       saveObj.name = this.state.templateName.trim();
       saveObj.appId = this.props.Templates.selectedWeChatAccount.configs.wechat_app_id;
@@ -405,7 +550,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
         history: [],
       };
       saveObj.definition = {
-        msgtype: "IMAGE",
+        msgtype: "MPNEWS",
         msgcontent: "RICH_MEDIA_WECHAT",
       };
       if (this.state.isEdit) {
@@ -413,32 +558,29 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
         saveObj.mediaId = this.props.mediaId;
         saveObj.type = "WECHAT";
       }
+      this.setState({loading: true});
       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);
+  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.props.actions.uploadAsset(data.file, data.type, data.fileParams, null, wechatParams, this.state.currentContentId);
+      this.setState({loading: true});
+      this.props.actions.uploadAsset(data.file, data.type, data.fileParams, null, wechatParams, this.state.currentContentId, uploadId);
     }
   }
   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");
-    }
+    this.setState({
+      totalContentBlocks: this.state.totalContentBlocks + 1,
+    }, () => {
+      this.insertTemplateData();
+    });
   }
   insertTemplateData = () => {
     const templateData = _.cloneDeep(this.state.templateData);
@@ -454,81 +596,256 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     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});
+      this.setState({templateData, loading: false});
     }
   }
-  updateTemplateData = (e, id) => {
-    //e.stopPropagation();
+  viewContent = (e, id) => {
     this.setState({currentContentId: id});
   }
+  deleteContent = (e, id) => {
+    const templateData = _.cloneDeep(this.state.templateData);
+    let totalContentBlocks = this.state.totalContentBlocks;
+    let currentContentId = this.state.currentContentId;
+    let index = 0;
+    for (index = id; index <= (totalContentBlocks - 2); index += 1) {
+      templateData[index] = templateData[index + 1];
+    }
+    delete templateData[index];
+    currentContentId = (totalContentBlocks - 1) === id ? id - 1 : id;
+    totalContentBlocks -= 1;
+    this.setState({templateData, totalContentBlocks, currentContentId});
+  }
+  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 = [];
-    _.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>
+    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>
-          </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>
     );
   }
+  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 (_.isEmpty(currentContent.formData)) {
-      this.showErrorMessage("Cannot leave form empty");
+    if (this.isFormEmpty()) {
+      this.showErrorMessage(this.props.intl.formatMessage(messages.formEmpty));
       isValid = false;
+      return isValid;
     }
     if (_.isEmpty(currentContent.formData['title-value'])) {
-      this.showErrorMessage("Cannot leave title field empty");
+      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("Cannot leave source link field empty");
+      this.showErrorMessage(this.props.intl.formatMessage(messages.sourceLinkEmpty));
       isValid = false;
+      return isValid;
     }
     if (_.isEmpty(currentContent.formData['content-value'])) {
-      this.showErrorMessage("Cannot leave content field empty");
+      this.showErrorMessage(this.props.intl.formatMessage(messages.contentEmpty));
       isValid = false;
+      return isValid;
     }
-    if (_.isEmpty(currentContent.imageUrl) || _.isEmpty(currentContent.mediaId)) {
-      this.showErrorMessage("Please upload an image");
+    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;
   }
@@ -539,11 +856,15 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     }
     switch (ev.key) {
       case "new_richmedia_content":
-        this.setState({
-          currentContentId: this.state.currentContentId + 1,
-        }, () => {
-          this.updateTotalContentBlocks();
-        });
+        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({
@@ -554,13 +875,18 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
         break;
       default:
         this.setState({
-          currentContentId: this.state.currentContentId + 1,
+          currentContentId: this.state.totalContentBlocks + 1,
         }, () => {
           this.updateTotalContentBlocks();
         });
     }
     return true;
   }
+  updateContentData = () => {
+    this.state.editorInstanse.insertHtml(`<img src='${this.props.ContentImageData.metaInfo.wechatUrl}' alt='Capillary Image'>`);
+    this.props.actions.clearContentImageStore();
+    this.setState({loading: false});
+  }
   returnContentMenu = () => {
     let actionButton = '';
     const createPushMenu = (
@@ -569,7 +895,7 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
           Add existing Richmedia content
         </MenuItem> */}
         <MenuItem key="new_richmedia_content">
-          Add Richmedia content
+          <FormattedMessage {...messages.addNewRichmedia} />
         </MenuItem>
       </Menu>
     );
@@ -584,22 +910,36 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     </Dropdown>);
     return actionButton;
   }
+  focusOutFromCkEditor = () => {
+    this.setState({focusOut: true});
+  }
+  focusInFromCkeditor = () => {
+    this.setState({focusOut: false});
+  }
   returnCurrentSchema = () => {
-    let schema = {};
+    let schema = _.cloneDeep(this.state.richmediaSchema);
     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;
+      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;
     }
-    schema = this.injectEvents(this.state.richmediaSchema);
+    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 = () => {
@@ -612,38 +952,54 @@ export class Create extends React.PureComponent { // eslint-disable-line react/p
     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 (
-      <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 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}
+                  />
+                </CapColumn>
+              </CapRow>
+            </div>
           </div>
-        </div>
-      </CapSpinner>
+        </CapSpinner>
+      </div>
     );
   }
 }
@@ -661,12 +1017,16 @@ Create.propTypes = {
   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) {
@@ -676,4 +1036,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Create);
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Create));