@capillarytech/creatives-library 3.1.6 → 3.1.8

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,41 @@ 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];
+    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="34px" height="34px" src={data.image_url} />
+        </div>
+      );
     });
-    return returnObj;
+    return (
+      <div className="richmedia-template">
+        {previewMsg}
+      </div>
+    );
   }
   prepareCardLayoutPreviewData = (mediaList) => {
     const returnObj = [];
@@ -90,27 +94,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 +133,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/index.js

@@ -387,7 +387,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   onAccountSelect(e) {
     const value = e.target.value;
-    console.log("onAccountSelect", e, value);
     this.setState({selectedAccount: value}, () => {
       const params = {
         name: this.state.searchText,
@@ -532,18 +531,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
   filterWechatTemplates = (templates) => {
     const { wechatFilter } = this.state;
-    switch(wechatFilter) {
+    switch (wechatFilter) {
       case WECHAT_FILTERS.RICHMEDIA:
-        return templates.filter(function (template) {
-          return template.definition && template.definition.msgcontent.toUpperCase() === "RICH_MEDIA_WECHAT";
-        });
+        return templates.filter((template) => template.definition && template.definition.msgcontent.toUpperCase() === "RICH_MEDIA_WECHAT");
       case WECHAT_FILTERS.MAPTEMPLATES:
-        return templates.filter(function (template) {
-          return !template.definition;
-        });
+        return templates.filter((template) => !template.definition);
       default:
         return templates;
-    };
+    }
   }
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
@@ -1585,7 +1580,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <CapRadioCard
           className="select-account"
           onChange={this.onAccountSelect}
-          value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined}
           panes={accountOptions}
           cardHeight="48px"
           cardWidth="276px"
@@ -1611,7 +1605,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isMobilePushChannel = channel === MOBILE_PUSH;
     return (<CapHeader
       title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
-    description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
+      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
       size="regular"
   />);
   }
@@ -1649,6 +1643,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     //TODO -> uncomment the following line
     // const isfilterContentVisisble = !isEmpty(this.props.TemplatesList) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError);
     const isfilterContentVisisble = true;
+    const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -1673,7 +1668,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         </CapRadio.CapRadioGroup>
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {isfilterContentVisisble && <CapButton
+        {isfilterContentVisisble && !isWechatEmbedded && <CapButton
           type={"primary"}
           disabled={this.isCreateDisabled()}
           style={{marginLeft: '8px'}}

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/RichmediaTemplates/Create/index.js

@@ -18,8 +18,6 @@ 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';
@@ -925,11 +923,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
             />
             <div className="wechat-container">
               <CapRow className="wechat-form-container">
-                <CapColumn span={8}>
+                <CapColumn span={9}>
                   {cardLayout}
                   {!this.state.isIframe && contentMenu}
                 </CapColumn>
-                <CapColumn span={16}>
+                <CapColumn span={15}>
                   { !isIframe && <CapInput
                     label="Name of the template"
                     value={this.state.templateName}