@capillarytech/creatives-library 3.1.6 → 3.1.7

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -7,7 +7,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-ui-library/';
+// import { connect } from 'react-redux';
+import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
+import { CapHeading } from '@capillarytech/cap-ui-library/';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import './_wechatRichmediaTemplatePrev.scss';
@@ -16,39 +18,43 @@ const wechatBody = require('./../assets/images/WECHAT_5x.png');
 
 class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   preparePreviewData = (mediaList) => {
-    const returnObj = [];
-    _.forEach(mediaList, (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.image_url} />
-              <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "5%" }}>{contentData.title ? contentData.title : ""}</div>
-            </CapRow>
-            {Object.keys(mediaList).length === 1 ?
-              <CapRow style={{ height: 32 }}>
-                {contentData.digest ? contentData.digest : ""}
-              </CapRow>
-              :
-              ""
-            }
+    const previewMsg = [];
+    const content = JSON.parse(JSON.stringify(mediaList));
+    const mediaListLength = content.length;
+    const contentData = content[0];
+    console.log("archita medialist: ", mediaList, content, mediaListLength);
+    previewMsg.push(
+      <div className="image-container">
+        <img alt="default" width="100%" height="102px" src={contentData.image_url} />
+        {mediaListLength !== 1 && (
+          <div className="name-container">
+            <CapHeading type="h4" style={{color: "white"}}>{contentData.title}</CapHeading>
           </div>
-        );
-      } else {
-        returnObj.push(
-          <CapRow style={{ "width": "100%", "height": 64, "border-bottom": "0.5px solid lightgrey" }}>
-            <CapColumn className="preview-overflow-wrap-fields" style={{ padding: "5% 0% 0% 5%", float: "left", width: "auto" }}>
-              {contentData.title}
-            </CapColumn>
-            <CapColumn style={{ float: "right" }}>
-              <img alt="default" width="60px" height="60px" src={contentData.image_url} style={{ "padding-right": "10%", "float": "left" }}/>
-            </CapColumn>
-          </CapRow>
-        );
-      }
+        )}
+      </div>
+    );
+    if (mediaListLength === 1) {
+      previewMsg.push(
+        <div className="name-container-with-abstract">
+          <CapHeading type="h4">{contentData.title}</CapHeading>
+          <CapHeading type="label7">{contentData.digest}</CapHeading>
+        </div>
+      );
+    }
+    content.splice(1, 2).forEach((data) => {
+      previewMsg.push(
+        <div className="additional-richmedia-container">
+          <div><CapHeading type="label7" style={{width: '170px', top: '12px', position: 'relative'}}>{data.title}</CapHeading></div>
+          <img alt="default" width="40px" height="40px" src={data.image_url} />
+        </div>
+      );
     });
-    return returnObj;
+    console.log("archita return obj: ", previewMsg);
+    return (
+      <div className="richmedia-template">
+        {previewMsg}
+      </div>
+    );
   }
   prepareCardLayoutPreviewData = (mediaList) => {
     const returnObj = [];
@@ -90,27 +96,29 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
   }
   render() {
     return (
-      this.props.contentForSlideBox ?
-        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
-          <div className="shell align-center" id="sms-preview">
-            <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-            <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-              <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-                {this.preparePreviewData(this.props.content)}
+      <div>
+        {this.props.contentForSlideBox ?
+          <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+            <div className="shell align-center" id="sms-preview">
+              <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+              <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
+                <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
+                  {this.preparePreviewData(this.props.content)}
+                </div>
               </div>
             </div>
+            {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
           </div>
-          {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
-        </div>
         :
-        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
-          <div className="shell align-center" id="sms-preview">
-            <div className="wechatMsgContainerCardLayout">
-              <div>{this.prepareCardLayoutPreviewData(this.props.content)}
+          <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+            <div className="shell align-center" id="sms-preview">
+              <div className="wechatMsgContainerCardLayout">
+                <div>{this.prepareCardLayoutPreviewData(this.props.content)}
+                </div>
               </div>
             </div>
-          </div>
-        </div>
+          </div>}
+      </div>
     );
   }
 }
@@ -127,3 +135,4 @@ WechatRichmediaTemplatePreview.propTypes = {
 };
 
 export default WechatRichmediaTemplatePreview;
+// export default connect(null, null)(WechatRichmediaTemplatePreview);

package/v2Components/TopBar/messages.js

@@ -23,7 +23,7 @@ export default defineMessages({
     defaultMessage: 'Select brand',
   },
   hi: {
-    id: 'creatives.componentsV2.TopBar.brand.dropdown',
+    id: 'creatives.componentsV2.TopBar.brand.hi',
     defaultMessage: 'Hi',
   },
   selectOrganization: {

package/v2Containers/CreativesContainer/messages.js

@@ -259,7 +259,7 @@ export default defineMessages({
     defaultMessage: `Edit message content`,
   },
   "createMessageContent": {
-    id: `${scope}.editMessageContent`,
+    id: `${scope}.createMessageContent`,
     defaultMessage: `New {channel} message`,
   },
   "creativeTemplatesDesc": {
@@ -283,11 +283,11 @@ export default defineMessages({
     defaultMessage: `Discard`,
   },
   "creativesTemplatesEdit": {
-    id: `${scope}.creativesTemplatesSave`,
+    id: `${scope}.creativesTemplatesEdit`,
     defaultMessage: `Edit`,
   },
   "creativesTemplatesEditName": {
-    id: `${scope}.creativesTemplatesSave`,
+    id: `${scope}.creativesTemplatesEditName`,
     defaultMessage: `Edit name`,
   },
   "wechatAccountNotConfigured": {

package/v2Containers/Line/Create/messages.js

@@ -167,7 +167,7 @@ export default defineMessages({
     defaultMessage: 'Please upload an image to proceed',
   },
   "Maximum characters length exceeds": {
-    id: 'creatives.containersV2.Line.Create.line',
+    id: 'creatives.containersV2.Line.Create.maximumCharacterLengthExceeds',
     defaultMessage: 'Maximum characters length exceeds',
   },
   "alertMessage": {

package/v2Containers/MobilePush/Create/messages.js

@@ -231,7 +231,7 @@ export default defineMessages({
     defaultMessage: 'Mobile Push',
   },
   "selectActionButton": {
-    id: 'creatives.containersV2.MobilePush.Create.mobilePush',
+    id: 'creatives.containersV2.MobilePush.Create.selectActionButton',
     defaultMessage: 'Select action buttons',
   },
   "uploadImageSizeErrorTitle": {

package/v2Containers/MobilePush/Edit/messages.js

@@ -247,7 +247,7 @@ export default defineMessages({
     defaultMessage: 'IOS template is not configured, save without IOS template',
   },
   "selectActionButton": {
-    id: 'creatives.containersV2.MobilePush.Edit.mobilePush',
+    id: 'creatives.containersV2.MobilePush.Edit.selectActionButton',
     defaultMessage: 'Select action buttons',
   },
   "validationError": {

package/v2Containers/MobilepushWrapper/messages.js

@@ -23,7 +23,7 @@ export default defineMessages({
     defaultMessage: 'Which type of content you want to create?',
   },
   creativeName: {
-    id: 'creatives.containersV2.MobilepushWrapper.createMode',
+    id: 'creatives.containersV2.MobilepushWrapper.creativeName',
     defaultMessage: 'Creative name',
   },
 });

package/v2Containers/Templates/messages.js

@@ -255,7 +255,7 @@ export default defineMessages({
     defaultMessage: `Edit message content`,
   },
   "createMessageContent": {
-    id: `${scope}.editMessageContent`,
+    id: `${scope}.createMessageContent`,
     defaultMessage: `New message`,
   },
   "creativeTemplatesDesc": {
@@ -267,7 +267,7 @@ export default defineMessages({
     defaultMessage: `Done`,
   },
   "creativesTemplatesEdit": {
-    id: `${scope}.creativesTemplatesSave`,
+    id: `${scope}.creativesTemplatesEdit`,
     defaultMessage: `Edit`,
   },
   "continue": {