@capillarytech/creatives-library 3.0.35 → 3.1.0

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /*
  *
  * Create
@@ -11,10 +12,15 @@ 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, CapSpin } from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape } from 'react-intl';
+import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
+import forEach from 'lodash/forEach';
+import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
+
+import { Menu } from 'antd';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpin, CapInput, CapHeading, CapDivider, CapIcon, CapLink } from '@capillarytech/cap-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
 import richmediaschema from './richmediaschema';
@@ -23,9 +29,9 @@ import messages from './messages';
 import * as globalActions from '../../../Cap/actions';
 import {getMessageObject} from '../../../../utils/messageUtils';
 import FormBuilder from '../../../../v2Components/FormBuilder';
-import Header from '../../../../v2Components/Header';
 import WechatRichmediaTemplatePreview from '../../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
-const MenuItem = Menu.Item;
+import noImage from '../../../../assets/noImage.png';
+
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -36,7 +42,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     let templateId = "";
     let templateName = "";
     let isIframe = false;
-    if (props.location.query.type === "embedded" && props.location.query.module === "outbound") {
+    if (props.location.query.type === "embedded" && props.location.query.module === "library") {
       isIframe = true;
     }
     if (props.mode === 'EDIT') {
@@ -122,7 +128,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     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.handleFrameTasks = this.handleFrameTasks.bind(this);
     this.getCurrentWindow = this.getCurrentWindow.bind(this);
     // this.startLoading = this.startLoading.bind(this);
     this.moveToTemplates = this.moveToTemplates.bind(this);
@@ -131,7 +137,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectMessages = this.injectMessages.bind(this);
   }
   componentWillMount = () => {
-    if (_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+    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({
@@ -144,31 +150,28 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     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)) {
+    if (nextProps.isGetFormData && !this.props.isFullMode && this.state.isEdit) {
+      nextProps.getFormData(this.getFormData());
+    } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && (this.props.isFullMode || !this.state.isEdit)) {
+      this.saveHandler();
+    }
+    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);
     }
+    if (!isEqual(nextProps.templateName, this.props.templateName)) {
+      this.setState({templateName: nextProps.templateName});
+    }
   }
   componentWillUnmount() {
-    if (this.state.isIframe) {
-      window.removeEventListener("message", this.handleFrameTasks);
-    }
+    this.props.actions.clearContentImageStore();
   }
   onHover = (data) => {
     this.setState({hovered: data});
@@ -177,12 +180,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({hovered: data});
   }
   onFormDataChange = (currentFormData) => {
-    const templateData = _.cloneDeep(this.state.templateData);
-    templateData[this.state.currentContentId].formData = _.cloneDeep(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);
+    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});
@@ -216,33 +219,50 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     };
     parent.postMessage(JSON.stringify(response), '*');
   }
-  getFormData(e) {
-    console.log("getformdata wechat richmedia: ", this.state.templateData, this.props, this.state);
+  getFormData(templateParams) {
+    /**
+     * This method would be called in two scenario
+     *
+     * Scenario 1:
+     * ===========
+     *  When a user selects a template. Edit container would be loaded with read only value. On click of done, This method would be invoked.
+     *  In this scenario we depend up on props to parse this data
+     *
+     * Scenario 2:
+     * ===========
+     *  When a user creates a new richmedia template.
+     *  In this scenario we depend up on state and function param to parse this data.
+     *
+     *  Considering the above scenarios, Parsing based on Props is considered as the default approach and fallback will be based on state.
+     */
+    const { templateData, Templates: templates, templateId: templateIdFromProp, templateName: templateNameFromProp} = this.props;
+    const { mediaId, mediaList, templateId, templateName } = templateParams || {};
     const message = {
-      mediaList: this.props.templateData.templateDetails.versions.base.mediaList,
-      media_id: this.props.templateData.templateDetails.versions.base.mediaId,
+      mediaList: get(templateData, 'templateDetails.versions.base.mediaList', mediaList),
+      media_id: get(templateData, 'templateDetails.versions.base.mediaId', 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,
+      content: message,
+      accountId: get(templates, 'selectedWeChatAccount.id'),
+      template_id: templateIdFromProp || templateId,
+      Title: templateNameFromProp || templateName,
+      OriginalId: get(templates, 'selectedWeChatAccount.sourceAccountIdentifier'),
       TopColor: "#000000",
       touser: "{{wechat_open_id}}",
-      creative_template_id: this.props.templateId,
+      creative_template_id: templateIdFromProp || templateId,
+      previewContent: message.mediaList,
     };
     const response = {
       action: "getFormData",
       value: data,
       validity: this.state.isFormValid,
+      type: "WECHAT",
     };
-    console.log("getformdata2 wechat richmedia: ", data);
-    e.source.postMessage(JSON.stringify(response), e.origin);
+    return response;
   }
   injectMessages(elem) {
     const temp = elem;
@@ -259,7 +279,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
     }
     if (temp.options) {
-      _.forEach(temp.options, (option, id) => {
+      forEach(temp.options, (option, id) => {
         if (messages[option]) {
           temp.options[id] = this.props.intl.formatMessage(messages[option]);
         }
@@ -272,10 +292,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.props.globalActions.addMessageToQueue(message);
   }
   checkFormFieldsCount = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
     let isLimitExceeded = false;
-    _.forEach(templateData, (content) => {
-      if (_.isEmpty(content)) {
+    forEach(templateData, (content) => {
+      if (isEmpty(content)) {
         isLimitExceeded = true;
       }
       if (content.formData['title-value'].length > 64) {
@@ -300,7 +320,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   //   }
   // }
   moveToTemplates() {
-    console.log("moveToTemplates richmedia");
     const modalContent = {
       title: this.props.intl.formatMessage(messages.modalTitle),
       body: this.props.intl.formatMessage(messages.modalBody),
@@ -314,49 +333,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({showModal: false});
   }
   showNext() {
-    console.log("richmedia shownext");
     const response = {
       action: "showNext",
       value: true,
     };
     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;
-      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":
-          console.log("moveToTemplates richmedia case");
-          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) => {
+      forEach(temp.containers, (container) => {
         let tempContainer = container;
         tempContainer = this.injectContainer(tempContainer);
         return tempContainer;
@@ -368,10 +357,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const temp = container;
     if (temp.type === 'tabs') {
       temp.injectedEvents = {};
-      _.forEach(temp.supportedEvents, (event) => {
+      forEach(temp.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
       });
-      _.forEach(temp.panes, (pane) => {
+      forEach(temp.panes, (pane) => {
         const tempPane = pane;
         tempPane.sectionsHeaders = this.injectSections(tempPane.sectionsHeaders);
         tempPane.sections = this.injectSections(tempPane.sections);
@@ -380,7 +369,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return temp;
   }
   injectSections = (sections) => {
-    _.forEach(sections, (section) => {
+    forEach(sections, (section) => {
       let temp = section;
       if (temp.type === 'col-label') {
         temp = this.injectColLabelSection(temp);
@@ -393,19 +382,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return sections;
   }
   injectColLabelSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
+    forEach(section.inputFields, (inputField) => {
       let temp = inputField;
       temp.injectedEvents = {};
-      _.forEach(inputField.supportedEvents, (event) => {
+      forEach(inputField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
       });
       temp = this.injectMessages(temp);
       return true;
     });
-    _.forEach(section.actionFields, (actionField) => {
+    forEach(section.actionFields, (actionField) => {
       let temp = actionField;
       temp.injectedEvents = {};
-      _.forEach(actionField.supportedEvents, (event) => {
+      forEach(actionField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
       });
       temp = this.injectMessages(temp);
@@ -414,22 +403,22 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return section;
   }
   injectMultiColSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
-      _.forEach(inputField.cols, (col) => {
+    forEach(section.inputFields, (inputField) => {
+      forEach(inputField.cols, (col) => {
         let temp = col;
         temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
+        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) => {
+    forEach(section.actionFields, (actionField) => {
+      forEach(actionField.cols, (col) => {
         let temp = col;
         temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
+        forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         temp = this.injectMessages(temp);
@@ -473,9 +462,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return postCommentsData;
   }
   prepareMediaList = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
     const mediaList = [];
-    _.forEach(templateData, (contentData) => {
+    forEach(templateData, (contentData) => {
       const postCommentsData = this.deducePostCommentsData(contentData.formData['post-comments-value']);
       const filteredContent = {
         title: contentData.formData['title-value'],
@@ -494,9 +483,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return mediaList;
   }
   prepareWeChatRichmediaPreviewData = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
     const returnObj = [];
-    _.forEach(templateData, (contentData, contentIndex) => {
+    forEach(templateData, (contentData, contentIndex) => {
       const id = parseInt(contentIndex, 10);
       if (id === 0) {
         returnObj.push(
@@ -534,7 +523,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
   saveHandler = () => {
     let isFormValid = this.validateFormFields();
-    if (_.isEmpty(this.state.templateName)) {
+    const { getFormData, onValidationFail } = this.props;
+    if (isEmpty(this.state.templateName)) {
       this.showErrorMessage(this.props.intl.formatMessage(messages.emptyTemplateName));
       isFormValid = false;
     }
@@ -561,10 +551,23 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         saveObj.type = "WECHAT";
       }
       this.setState({loading: true});
-      this.props.actions.saveTemplate(saveObj);
+      this.props.actions.saveTemplate(saveObj, (response) => {
+        console.log("inside save template callback", response);
+        if (getFormData) {
+          getFormData(this.getFormData({
+            mediaId: response.mediaId,
+            templateId: response.templateId,
+            mediaList,
+            templateName: saveObj.name,
+          }));
+        }
+      });
+    } else {
+      onValidationFail();
     }
   }
   uploadImage = (data, uploadId) => {
+    console.log("uploadImage", data, uploadId);
     if (data.type === "wrong file") {
       this.showErrorMessage(this.props.intl.formatMessage(messages.wrongFormatFile));
     } else {
@@ -585,7 +588,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     });
   }
   insertTemplateData = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
     templateData[this.state.totalContentBlocks - 1] = {
       formData: {},
       imageUrl: "",
@@ -594,17 +597,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     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) {
+    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) => {
+  viewContent = (id, e) => {
+    e.stopPropagation();
+    console.log("moveContentUpward viewContent", id);
     this.setState({currentContentId: id});
   }
-  deleteContent = (e, id) => {
+  deleteContent = (id, e) => {
+    e.stopPropagation();
+    console.log("clicked delete", id);
     const modalContent = {
       title: this.props.intl.formatMessage(messages.modalTitle),
       body: this.props.intl.formatMessage(messages.deleteContent),
@@ -616,7 +623,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({showModal: true, modalContent});
   }
   handleDelete = (modalContent) => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
     let totalContentBlocks = this.state.totalContentBlocks;
     let currentContentId = this.state.currentContentId;
     let index = 0;
@@ -628,175 +635,142 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     totalContentBlocks -= 1;
     this.setState({templateData, totalContentBlocks, currentContentId, showModal: false});
   }
-  moveContentDownward = (e, id) => {
-    const templateData = _.cloneDeep(this.state.templateData);
+  moveContentDownward = (id, e) => {
+    e.stopPropagation();
+    const templateData = cloneDeep(this.state.templateData);
     let currentContentId = this.state.currentContentId;
-    const temp = templateData[id];
-    templateData[id] = templateData[id + 1];
+    const temp = cloneDeep(templateData[id]);
+    templateData[id] = cloneDeep(templateData[id + 1]);
     templateData[id + 1] = temp;
     currentContentId = id + 1;
     this.setState({templateData, currentContentId});
   }
-  moveContentUpward = (e, id) => {
-    const templateData = _.cloneDeep(this.state.templateData);
+  moveContentUpward = (id, e) => {
+    e.stopPropagation();
+    const templateData = cloneDeep(this.state.templateData);
     let currentContentId = this.state.currentContentId;
-    const temp = templateData[id];
-    templateData[id] = templateData[id - 1];
+    const temp = cloneDeep(templateData[id]);
+    templateData[id] = cloneDeep(templateData[id - 1]);
     templateData[id - 1] = temp;
     currentContentId = id - 1;
+    console.log("moveContentUpward", id, this.state.currentContentId, currentContentId);
     this.setState({templateData, currentContentId});
   }
+  getCardActionBar = (contentBlocks, id) => (
+    <div className="card-nav-container">
+      <CapLink
+        onClick={(e) => this.deleteContent(id, e)}
+        title={
+          <CapIcon
+            size="s"
+            type="close"
+          />
+        }
+      />
+      <CapLink
+        {...(id > 0 && {onClick: (e) => this.moveContentUpward(id, e)})}
+        className={id < 1 ? 'disabled-action' : ''}
+        title={<CapIcon
+          size="s"
+          type="arrow-up"
+          style={{
+            paddingLeft: '2px',
+            paddingBottom: '6px',
+          }}
+        />}
+      />
+      <CapLink
+        {...(id < contentBlocks - 1 && {onClick: (e) => this.moveContentDownward(id, e)})}
+        className={contentBlocks - 1 === id ? 'disabled-action' : ''}
+        title={<CapIcon
+          size="s"
+          type="arrow-down"
+          style={{
+            paddingLeft: '2px',
+          }}
+        />}
+      />
+    </div>
+    )
   returnCardLayout = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
+    const { isIframe, totalContentBlocks } = this.state;
     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)}
+    forEach(templateData, (contentData, contentId) => {
+      const id = parseInt(contentId, 10);
+      const imageUrl = contentData.imageUrl || noImage;
+      const { formData = {} } = contentData;
+      if (id === 0) {
+        returnObj[id] = (
+          <div>
+            <CapRow
+              style={{ width: `${totalContentBlocks === 1 ? '260px' : '292px'}`,
+                height: `${totalContentBlocks === 1 ? '252px' : '156px'}`,
+                display: 'flex',
+              }}
+              className={id === this.state.currentContentId ? "richmedia-card richmedia-card-clicked" : "richmedia-card"}
             >
-              <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"}
+                bordered={false}
+                bodyStyle={{
+                  padding: 0,
+                  borderRadius: '4px',
+                  width: '244px',
+                  border: '1px solid #e8e8e8',
+                }}
+                onClick={(e) => this.viewContent(id, e)}
               >
                 <div>
-                  <div className="custom-image">
-                    <img alt="" width="100%" height="139px" src={imageUrl} />
+                  <div className={`custom-image ${totalContentBlocks !== 1 && "custom-image-border-bottom"}`}>
+                    <img alt="" width="100%" height="136px" src={imageUrl} />
+                    {totalContentBlocks !== 1 && <div className="name-container">
+                      <CapHeading type="h4">{formData['title-value'] || "Title"}</CapHeading>
+                    </div>}
                   </div>
-                  <div className="custom-card overflow-wrap-fields">
-                    <p style={{ padding: "0px 8px" }}>{contentData && contentData.formData ? contentData.formData['cover-abstract-value'] : ""}</p>
+                  {totalContentBlocks === 1 &&
+                  <div className="custom-card">
+                    <CapHeading type="h4" className="overflow-wrap-fields">{formData['title-value'] || "Title"}</CapHeading>
+                    <CapHeading type="label7" className="overflow-wrap-fields">{formData['cover-abstract-value'] || "Cover abstract"}</CapHeading>
                   </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">{this.props.intl.formatMessage(messages.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">{this.props.intl.formatMessage(messages.visibility)}</i>
-                  </div>
-                </div>
-                }
-            </div>
+              {!isIframe && totalContentBlocks !== 1 &&
+                this.getCardActionBar(totalContentBlocks, id)}
+            </CapRow>
+          </div>
           );
-        } else {
-          returnObj[id] = (
-            <div
-              id={id}
-              style={{ "margin-top": 10 }}
-              className="hover-container"
+      } else {
+        returnObj[id] = (
+          <div>
+            <CapRow
+              style={{ width: 296, height: 72 }} className={id === this.state.currentContentId ? "richmedia-card-rectangle richmedia-card-rectangle-clicked" : "richmedia-card-rectangle"}
+              onClick={(e) => this.viewContent(id, e)}
             >
-              <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'] : ""}
+              <div className="richmedia-card-container">
+                <CapColumn span={18} className="overflow-wrap-fields title" >
+                  <CapHeading type="label7">{formData['title-value'] || "Title"}</CapHeading>
                 </CapColumn>
-                <CapColumn span={5} style={{ "height": "100%", "background-color": "#707070" }}>
-                  <img alt="" width="50px" height="100%" src={imageUrl} />
+                <CapColumn span={6} className="image">
+                  <img alt="" width="40px" height="40px" 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">{this.props.intl.formatMessage(messages.visibility)}</i>
-                    </div>
-                    <div id={id} onClick={(e) => this.deleteContent(e, id)} >
-                      <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.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">{this.props.intl.formatMessage(messages.visibility)}</i>
-                    </div>
-                    <div id={id} onClick={(e) => this.deleteContent(e, id)} >
-                      <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.delete)}</i>
-                    </div>
-                  </div>
-                }
+                {!isIframe && this.getCardActionBar(totalContentBlocks, id)}
               </div>
-            </div>
+            </CapRow>
+          </div>
           );
-        }
-      });
-    }
+      }
+    });
     return (
       <div>{returnObj}</div>
     );
   }
   isTitleRepeated = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
+    const templateData = cloneDeep(this.state.templateData);
     const titleSet = new Set();
     let isRepeated = false;
-    _.forEach(templateData, (content) => {
+    forEach(templateData, (content) => {
       const setSizeBefore = titleSet.size;
       titleSet.add(content.formData['title-value'].toLowerCase());
       const setSizeAfter = titleSet.size;
@@ -807,14 +781,14 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return isRepeated;
   }
   isFormEmpty = () => {
-    const templateData = _.cloneDeep(this.state.templateData);
-    let isEmpty = false;
-    _.forEach(templateData, (content) => {
-      if (_.isEmpty(content.formData)) {
-        isEmpty = true;
+    const templateData = cloneDeep(this.state.templateData);
+    let isFormEmpty = false;
+    forEach(templateData, (content) => {
+      if (isEmpty(content.formData)) {
+        isFormEmpty = true;
       }
     });
-    return isEmpty;
+    return isFormEmpty;
   }
   validateFormFields = () => {
     let isValid = true;
@@ -824,22 +798,22 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       isValid = false;
       return isValid;
     }
-    if (_.isEmpty(currentContent.formData['title-value'])) {
+    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)) {
+    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'])) {
+    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'])) {
+    if (isEmpty(currentContent.formData['content-value'])) {
       this.showErrorMessage(this.props.intl.formatMessage(messages.contentEmpty));
       isValid = false;
       return isValid;
@@ -853,7 +827,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       isValid = false;
       return isValid;
     }
-    if (!_.isEmpty(currentContent.formData['source-link-value'])) {
+    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));
@@ -862,37 +836,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     return isValid;
   }
-  menuOnClickEvent(ev) {
+  menuOnClickEvent() {
     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();
-        });
-    }
+    this.setState({
+      currentContentId: this.state.totalContentBlocks,
+    }, () => {
+      this.updateTotalContentBlocks();
+    });
     return true;
   }
   updateContentData = () => {
@@ -901,27 +854,14 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     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>
+    const addRichMediaMenu = (
+      <>
+        <div style={{width: '292px'}}><CapDivider /></div>
+        <CapHeading type="h5" style={{marginBottom: '8px'}}>Add rich media content</CapHeading>
+        <CapButton type="dashed" onClick={this.menuOnClickEvent} prefix={<CapIcon size="s" type="add-media" />} style={{backgroundColor: 'white'}}>New media</CapButton>
+      </>
     );
-    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;
+    return addRichMediaMenu;
   }
   focusOutFromCkEditor = () => {
     this.setState({focusOut: true});
@@ -930,17 +870,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({focusOut: false});
   }
   returnCurrentSchema = () => {
-    let schema = _.cloneDeep(this.state.richmediaSchema);
+    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;
+      const disabledFormSchema = cloneDeep(this.state.richmediaSchema);
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[0].cols[0].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[1].cols[0].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[2].cols[0].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[3].cols[0].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;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[5].cols[0].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[2].inputFields[0].cols[0].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[0].inputFields[4].cols[0].componentProps.disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].cols[1].disabled = true;
+      disabledFormSchema.standalone.sections[0].childSections[2].inputFields[2].cols[0].disabled = true;
       if (this.state.editorInstanse) {
         this.state.editorInstanse.setReadOnly(true);
       }
@@ -948,15 +890,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       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;
+      schema.standalone.sections[0].childSections[1].childSections[0].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.standalone.sections[0].childSections[1].childSections[0].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) : {};
+    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() {
@@ -964,6 +906,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const contentMenu = this.returnContentMenu();
     const schema = this.returnCurrentSchema();
     const formData = this.returnCurrentFormData();
+    const { isIframe } = this.state;
     this.updateImageData();
     if (this.props.ContentImageData && this.props.ContentImageData.metaInfo && this.props.ContentImageData.metaInfo.wechatUrl) {
       this.updateContentData();
@@ -985,13 +928,22 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
               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}>
+                <CapColumn span={8}>
                   {cardLayout}
                   {!this.state.isIframe && contentMenu}
                 </CapColumn>
-                <CapColumn span={18}>
+                <CapColumn span={16}>
+                  { !isIframe && <CapInput
+                    label="Name of the template"
+                    value={this.state.templateName}
+                    onChange={this.templateNameHandler}
+                    size="large"
+                    style={{
+                      marginBottom: '24px',
+                    }}
+                    className="richmedia-template-name"
+                  />}
                   <FormBuilder
                     key={this.state.currentContentId}
                     schema={schema}
@@ -1034,6 +986,10 @@ Create.propTypes = {
   Create: PropTypes.object,
   intl: intlShape.isRequired,
   ContentImageData: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  isGetFormData: PropTypes.bool,
+  getFormData: PropTypes.func,
+  onValidationFail: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({