@capillarytech/creatives-library 3.1.5 → 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/Email/index.js

@@ -58,7 +58,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       showImageSelectionBox: false,
       isDragDrop: false,
       showConfirmationModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alert), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
       showModal: false,
       page: 1,
       perPageLimit: 25,
@@ -906,14 +906,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     let modalContent = {};
     if (type === 'delete-version') {
       modalContent = {
-        title: this.props.intl.formatMessage(messages.alertMessage),
+        title: this.props.intl.formatMessage(messages.alert),
         body: this.props.intl.formatMessage(messages.deleteVersionConfirmation),
         type: 'confirm',
         id: 'email-version-delete-modal',
       };
     } else if (type === 'delete-language') {
       modalContent = {
-        title: this.props.intl.formatMessage(messages.alertMessage),
+        title: this.props.intl.formatMessage(messages.alert),
         body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation),
         type: 'confirm',
         id: 'email-language-delete-modal',
@@ -1001,7 +1001,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       showImageSelectionBox: false,
       isDragDrop: false,
       showConfirmationModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alert), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
       showModal: false,
       page: 1,
       perPageLimit: 25,
@@ -1823,7 +1823,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   moveToTemplates = () => {
     const modalContent = {
-      title: this.props.intl.formatMessage(messages.alertMessage),
+      title: this.props.intl.formatMessage(messages.alert),
       body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
       type: 'confirm',
       id: 'template-back-confirm-modal',

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": {

package/v2Containers/WeChat/MapTemplates/index.js

@@ -553,7 +553,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
               cols: [{
                 width: 23,
                 id: `tagList-${title}`,
-                label: this.props.intl.formatMessage(messages.Tags),
+                label: "Tags",
                 type: "tag-list",  //Resembles component to be used
                 metaType: "List",
                 datatype: "select",
@@ -589,7 +589,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
                 type: "input",  //Resembles component to be used
                 metaType: "text",
                 datatype: "string",
-                errorMessage: `${title} ${this.props.intl.formatMessage(messages.hasInvalidContent)}`,
+                errorMessage: "Invalid content",
                 required: true,
                 fluid: true,
                 disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
@@ -625,12 +625,12 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
           cols: [
             {
               id: 'template-link',
-              placeholder: this.props.intl.formatMessage(messages.Link),
-              label: this.props.intl.formatMessage(messages.Link),
+              placeholder: 'Link',
+              label: 'Link',
               type: "input",  //Resembles component to be used
               metaType: "text",
               datatype: "string",
-              errorMessage: this.props.intl.formatMessage(messages.linkErrorMessage),
+              errorMessage: 'Link cannot be empty.',
               required: true,
               fluid: true,
               disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
@@ -655,7 +655,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
           cols: [
             {
               id: "is-internal-url",
-              label: this.props.intl.formatMessage(messages.isInternalUrl),
+              label: 'Is this internal url',
               standalone: true,
               labelStyle: {
                 backgroundColor: "white",

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -46,7 +46,7 @@ export default defineMessages({
     id: 'creatives.containersV2.WeChat.link',
     defaultMessage: 'Link',
   },
-  'isInternalUrl': {
+  'Is this internal url': {
     id: 'creatives.containersV2.WeChat.isInternalUrl',
     defaultMessage: 'Is this internal url',
   },
@@ -94,12 +94,12 @@ export default defineMessages({
     id: 'creatives.containers.WeChat.newWechat',
     defaultMessage: 'New wechat',
   },
-  "linkErrorMessage": {
+  "Link cannot be empty.": {
     id: 'creatives.containers.WeChat.linkErrorMessage',
     defaultMessage: 'Link cannot be empty.',
   },
-  "hasInvalidContent": {
+  "Invalid content": {
     id: 'creatives.containers.WeChat.hasInvalidContent',
-    defaultMessage: 'has invalid content.',
+    defaultMessage: 'Invalid content.',
   },
 });