@capillarytech/creatives-library 3.1.12 → 3.1.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.12",
+  "version": "3.1.14",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@babel/node": "^7.8.3",
+    "@babel/node": "^7.8.4",
     "@babel/polyfill": "7.4.3",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/translations/en.json

@@ -684,7 +684,7 @@
   "creatives.containers.WeChat.template": "Template",
   "creatives.containers.WeChat.templateMapping": "Template mapping",
   "creatives.containers.WeChat.wechatCreateSuccess": "WeChat template mapped successfully",
-  "creatives.containers.WeChat.wechatEditSuccess": "WeChat template unmapped successfully",
+  "creatives.containers.WeChat.wechatEditSuccess": "WeChat template edited successfully",
   "creatives.containersV2.Assets.Gallery.addImages": "Add images",
   "creatives.containersV2.Assets.Gallery.alphabetically": "Alphabetically",
   "creatives.containersV2.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
@@ -1350,10 +1350,14 @@
   "creatives.containersV2.WeChat.template": "Template",
   "creatives.containersV2.WeChat.templateMapping": "Template mapping",
   "creatives.containersV2.WeChat.wechatCreateSuccess": "WeChat template mapped successfully",
-  "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template unmapped successfully",
+  "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template edited successfully",
   "creatives.containersV2.appName": "App Name",
+  "creatives.containersV2.audience": "Audience",
+  "creatives.containersV2.campaigns": "Campaigns",
   "creatives.containersV2.campaignsDashboard": "Campaigns",
   "creatives.containersV2.campaignsHome": "Campaigns Home",
+  "creatives.containersV2.creatives": "Creatives",
+  "creatives.containersV2.incentive": "Incentive",
   "customdatepicker.cancel": "Cancel",
   "customdatepicker.done": "Done",
   "reon.components.Cap.Workbench": "WorkBench",

package/translations/zh.json

@@ -1352,8 +1352,12 @@
   "creatives.containersV2.WeChat.wechatCreateSuccess": "",
   "creatives.containersV2.WeChat.wechatEditSuccess": "",
   "creatives.containersV2.appName": "",
+  "creatives.containersV2.audience": "",
+  "creatives.containersV2.campaigns": "",
   "creatives.containersV2.campaignsDashboard": "",
   "creatives.containersV2.campaignsHome": "",
+  "creatives.containersV2.creatives": "",
+  "creatives.containersV2.incentive": "",
   "customdatepicker.cancel": "",
   "customdatepicker.done": "",
   "reon.components.Cap.Workbench": "",

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -7,10 +7,10 @@
     background: white;
     width: 40%;
     text-align: left;
-    height: 300px;
-    overflow: scroll;
+    height: fit-content;
+    border-radius: $CAP_SPACE_04;
     .richmedia-template {
-        .image-container {
+        .richmedia-image-container {
           width: 100%;
           height: 102px;
           position: relative;
@@ -39,11 +39,13 @@
           justify-content: space-between;
           margin: 8px;
           padding-bottom: 8px;
-          border-bottom: 1px solid #dfe2e7;
           img {
             border-radius: 4px;
           }
         }
+        .additional-richmedia-container:not(:last-child) {
+            border-bottom: 1px solid #dfe2e7;
+          }
         div {
           text-overflow: ellipsis;
           overflow: hidden;

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 /**
 *
 * WechatRichmediaTemplatePreview
@@ -23,7 +22,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
     const mediaListLength = content.length;
     const contentData = content[0];
     previewMsg.push(
-      <div className="image-container">
+      <div className="richmedia-image-container">
         <img alt="default" width="100%" height="102px" src={contentData.image_url} />
         {mediaListLength !== 1 && (
           <div className="name-container">

package/v2Containers/App/constants.js

@@ -1,3 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import globalMessages from '../Cap/messages';
+
 export const GET_SIDEBAR_REQUEST = 'app/App/GET_SIDEBAR_REQUEST';
 export const GET_SIDEBAR_SUCCESS = 'app/App/GET_SIDEBAR_SUCCESS';
 export const GET_SIDEBAR_FAILURE = 'app/App/GET_SIDEBAR_FAILURE';
+
+export const getTopbarMenuDataValue = () => ([
+      { label: <FormattedMessage {...globalMessages.campaigns} />, link: '/campaigns/ui/list', key: 'campaigns' },
+      { label: <FormattedMessage {...globalMessages.audience} />, link: '/audience-manager/list', key: 'audience' },
+      { label: <FormattedMessage {...globalMessages.incentive} />, link: '/coupons/ui/', key: 'incentive' },
+      { label: <FormattedMessage {...globalMessages.creatives} />, link: '/creatives/ui/v2', key: 'creatives' },
+]);

package/v2Containers/Cap/messages.js

@@ -64,4 +64,12 @@ export default defineMessages({
     id: 'creatives.containersV2.appName',
     defaultMessage: "App Name",
   },
+  "audience": {
+    id: 'creatives.containersV2.audience',
+    defaultMessage: 'Audience',
+  },
+  "incentive": {
+    id: 'creatives.containersV2.incentive',
+    defaultMessage: 'Incentive',
+  },
 });

package/v2Containers/Cap/sagas.js

@@ -6,6 +6,7 @@ import * as LocalStorage from '../../services/localStorageApi';
 import * as types from './constants';
 import config from '../../config/app';
 import pathConfig from '../../config/path';
+import { getTopbarMenuDataValue } from '../../v2Containers/App/constants';
 // import {makeSelectOrgId} from './selectors';
 
 function* authorize(user) {
@@ -157,11 +158,3 @@ export default [
   watchGetTopbarMenuData,
 ];
 
-function getTopbarMenuDataValue() {
-  return [
-    { label: 'Campaigns', link: '/campaigns/ui/list', key: 'campaigns' },
-    { label: 'Audience', link: '/audience-manager/list', key: 'audience' },
-    { label: 'Incentive', link: '/coupons/ui/', key: 'incentive' },
-    { label: 'Creatives', link: '/creatives/ui/v2', key: 'creatives' },
-  ];
-}

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -117,7 +117,7 @@ function SlideBoxContent(props) {
         )}
       {isPreview && (
       <TemplatePreview
-        content={get(templateData, `versions.base['sms-editor']`)}
+        content={templateData.type.toUpperCase() === constants.SMS ? get(templateData, `versions.base['sms-editor']`) : get(templateData, `versions.base.content`)}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={templateData.type.toLowerCase()}
         charCounterEnabled

package/v2Containers/CreativesContainer/index.js

@@ -461,8 +461,8 @@ class Creatives extends React.Component {
     return false;
   }
   render() {
-    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep, forwardedTags} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount} = this.props;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags} = this.props;
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
         <CapSlideBox

package/v2Containers/EmailWrapper/index.js

@@ -11,10 +11,10 @@ import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
 import styled from 'styled-components';
-import { CapRadioCard, CapNotification, CapInput, CapUploader, CapSpin, CapButton} from '@capillarytech/cap-ui-library';
+import { CapRadioCard, CapNotification, CapInput, CapUploader, CapSpin, CapButton } from '@capillarytech/cap-ui-library';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import {selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector} from '../Templates/selectors';
+import { selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector } from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
@@ -39,7 +39,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       templateName: '',
       routeParams: {
         pathname: `/email/create`,
-        query: { module: 'library', type: 'embedded'},
+        query: { module: 'library', type: 'embedded' },
       },
       modeContent: {
 
@@ -49,25 +49,25 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     this.modes = [
       {
-        title: <FormattedMessage {...messages.zipUpload}/>,
-        content: <FormattedMessage {...messages.zipUploadDesc}/>,
+        title: <FormattedMessage {...messages.zipUpload} />,
+        content: <FormattedMessage {...messages.zipUploadDesc} />,
         value: 'upload',
         // onClick: () => {
         //   this.emailUploader.current.click();
         // },
       },
       {
-        title: <FormattedMessage {...messages.useEditor}/>,
-        content: <FormattedMessage {...messages.useEditorDesc}/>,
+        title: <FormattedMessage {...messages.useEditor} />,
+        content: <FormattedMessage {...messages.useEditorDesc} />,
         value: 'editor',
       },
     ];
   }
 
   componentDidUpdate() {
-    const {modeContent} = this.state;
-   // const isValid = this.isValid();
-    const {emailCreateMode, EmailLayout, CmsTemplates, step, SelectedEdmDefaultTemplate, templatesActions} = this.props;
+    const { modeContent } = this.state;
+    // const isValid = this.isValid();
+    const { emailCreateMode, EmailLayout, CmsTemplates, step, SelectedEdmDefaultTemplate, templatesActions } = this.props;
     if (step === "modeSelection" && !this.state.selectedCreateMode && emailCreateMode === 'upload' && !EmailLayout) {
       //document.getElementById('upload-email-template').click();
     } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
@@ -89,14 +89,14 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     this.props.templatesActions.resetTemplateData();
   }
   onTemplateNameChange = (ev) => {
-    this.setState({templateName: ev.target.value});
+    this.setState({ templateName: ev.target.value });
   }
   onChange = (e) => {
-    this.props.onEmailModeChange( e.target.value );
+    this.props.onEmailModeChange(e.target.value);
   };
   //isValid = () => !_.isEmpty(this.state.templateName)
   setCreateMode = (emailCreateMode) => {
-    this.setState({selectedCreateMode: emailCreateMode});
+    this.setState({ selectedCreateMode: emailCreateMode });
   }
   handleZipUploadError = () => {
     const message = {
@@ -115,13 +115,13 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
       if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
         templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
-          this.setState({modeContent: { file}}, showNextStep);
+          this.setState({ modeContent: { file } }, showNextStep);
         }, this.handleZipUploadError);
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();
         reader.onload = () => {
           const text = reader.result;
-          this.setState({modeContent: { file}}, () => {
+          this.setState({ modeContent: { file } }, () => {
             templatesActions.handleHtmlUpload(text);
           });
 
@@ -140,26 +140,44 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
   };
 
   handleEdmDefaultTemplateSelection = (id) => {
-    const {CmsTemplates, templatesActions } = this.props;
-    const data = _.find(CmsTemplates, {_id: id});
+    const { CmsTemplates, templatesActions } = this.props;
+    const data = _.find(CmsTemplates, { _id: id });
 
     templatesActions.setEdmTemplate(data);
     this.setState({
-      selectedCreateMode: 'editor'});
+      selectedCreateMode: 'editor',
+    });
   };
-  useFileUpload = ({file}) => {
-    this.setState({modeContent: {}}, () => {
+  useFileUpload = ({ file }) => {
+    this.setState({ modeContent: {} }, () => {
       this.handleFileUpload(file);
     });
   }
   useEditor = (id) => {
-    this.setState({modeContent: {id}}, this.props.showNextStep);
+    this.setState({ modeContent: { id } }, this.props.showNextStep);
   }
 
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {showTemplateName, emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent, onValidationFail} = this.props;
-    const {templateName, modeContent} = this.state;
+    const {
+      showTemplateName,
+      emailCreateMode,
+      isGetFormData,
+      getFormdata,
+      type,
+      CmsTemplates,
+      step,
+      cap,
+      isFullMode,
+      EmailLayout,
+      setIsLoadingContent,
+      onValidationFail,
+      forwardedTags,
+    } = this.props;
+    const {
+      templateName,
+      modeContent,
+    } = this.state;
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
       <div>
@@ -167,12 +185,12 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
           {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
             <div>
               {isFullMode &&
-              <CapInput
-                label={<FormattedMessage {...messages.creativeName}/>}
-                onChange={this.onTemplateNameChange}
-                value={templateName}
-                labelPosition="top"
-                size="default"
+                <CapInput
+                  label={<FormattedMessage {...messages.creativeName} />}
+                  onChange={this.onTemplateNameChange}
+                  value={templateName}
+                  labelPosition="top"
+                  size="default"
                 />
               }
               <CardContainer>
@@ -180,23 +198,23 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                   panes={this.modes}
                   onChange={this.onChange}
                   selected={emailCreateMode}
-                  label={<FormattedMessage {...messages.createMode}/>}
+                  label={<FormattedMessage {...messages.createMode} />}
                 />
               </CardContainer>
               <div>
                 {emailCreateMode === "upload" &&
-                <div style={{ marginLeft: '8px'}}>
-                  <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
-                    <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
-                  </CapUploader>
-                  {!_.isEmpty(EmailLayout) &&
-                    <div>{_.get(modeContent, "file.name")}</div>
-                  }
-                </div>
-              }
+                  <div style={{ marginLeft: '8px' }}>
+                    <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+                      <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
+                    </CapUploader>
+                    {!_.isEmpty(EmailLayout) &&
+                      <div>{_.get(modeContent, "file.name")}</div>
+                    }
+                  </div>
+                }
               </div>
             </div>
-          :
+            :
             <div>
               {isShowEmailCreate && <Email
                 setIsLoadingContent={setIsLoadingContent}
@@ -209,14 +227,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 getFormSubscriptionData={getFormdata}
                 getDefaultTags={type}
                 isFullMode={isFullMode}
-                defaultData={{'template-name': templateName}}
+                defaultData={{ 'template-name': templateName }}
                 cap={cap}
                 showTemplateName={showTemplateName}
                 onValidationFail={onValidationFail}
-            />}
-              {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
+                forwardedTags={forwardedTags}
+              />}
+              {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor} />}
             </div>
-        }
+          }
         </CapSpin>
       </div>
     );
@@ -243,6 +262,7 @@ EmailWrapper.propTypes = {
   setIsLoadingContent: PropTypes.func,
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
+  forwardedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/_templates.scss

@@ -146,7 +146,6 @@
 
 .select-account {
   width: 200px;
-  margin-left: 16px;
   border: none;
   font-size: 24px;
   line-height: 32px;

package/v2Containers/Templates/index.js

@@ -1542,7 +1542,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 { key: isMobilePushChannel ? account.id : account.uuid,
                   title: account.name,
                   value: account.name,
-                  icon: <CapIcon.CapIconAvatar text={account.name[0]} width="2rem" height="2rem"/>,
+                  icon: <CapIcon.CapIconAvatar text={account.name[0]} width="auto" height="2rem"/>,
                 }
               );
             } else if (query.module && (isWechatChannel || isMobilePushChannel)) {
@@ -1551,7 +1551,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   key: isMobilePushChannel ? account.id : account.uuid,
                   value: account.name,
                   title: account.name,
-                  icon: <CapIcon.CapIconAvatar text={account.name[0]} width="2rem" height="2rem"/>,
+                  icon: <CapIcon.CapIconAvatar text={account.name[0]} width="auto" height="2rem"/>,
                 }
               );
             }
@@ -1561,7 +1561,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 key: isMobilePushChannel ? account.id : account.uuid,
                 value: account.name,
                 title: account.name,
-                icon: <CapIcon.CapIconAvatar text={account.name[0]} width="2rem" height="2rem"/>,
+                icon: <CapIcon.CapIconAvatar text={account.name[0]} width="auto" height="2rem"/>,
               }
             );
           }

package/v2Containers/WeChat/MapTemplates/index.js

@@ -442,7 +442,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       previewContent: stateFormData['sms-preview'],
       BrandId: (selectedWeChatAccount.configs.brand_id ? selectedWeChatAccount.configs.brand_id : ''),
       OriginalId: selectedWeChatAccount.sourceAccountIdentifier,
-      content: editTemplateData.versions.base.content,
+      content: encodeURIComponent(editTemplateData.versions.base.content),
       isInternalUrl: this.state.formData['is-internal-url'],
       creative_template_id: editTemplateData._id,
       touser: "{{wechat_open_id}}",

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -60,7 +60,7 @@ export default defineMessages({
   },
   "wechatEditSuccess": {
     id: 'creatives.containersV2.WeChat.wechatEditSuccess',
-    defaultMessage: "WeChat template unmapped successfully",
+    defaultMessage: "WeChat template edited successfully",
   },
   "wechatCreateSuccess": {
     id: 'creatives.containersV2.WeChat.wechatCreateSuccess',

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

@@ -18,7 +18,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import forEach from 'lodash/forEach';
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
-import { CapRow, CapColumn, CapButton, CapCard, CapSpin, CapInput, CapHeading, CapDivider, CapIcon, CapLink } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpin, CapInput, CapHeading, CapDivider, CapIcon, CapLink, CapNotification } from '@capillarytech/cap-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
 import richmediaschema from './richmediaschema';
@@ -233,6 +233,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         msgcontent: "RICH_MEDIA_WECHAT",
       },
     };
+    message.mediaList = message.mediaList.map((media) => ({...media, content: encodeURIComponent(media.content)}));
     const data = {
       data: message,
       accountId: get(templates, 'selectedWeChatAccount.id'),
@@ -546,7 +547,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
       this.setState({loading: true});
       this.props.actions.saveTemplate(saveObj, (response) => {
-        console.log("inside save template callback", response);
+        CapNotification.success({
+          message: this.props.intl.formatMessage(messages.saveSuccess),
+        });
         if (getFormData) {
           getFormData(this.getFormData({
             mediaId: response.mediaId,

package/v2Containers/WeChat/RichmediaTemplates/Edit/reducer.js

@@ -10,7 +10,6 @@ import * as types from './constants';
 const initialState = fromJS({});
 
 function editReducer(state = initialState, action) {
-  console.log("inside editReducer", action)
   switch (action.type) {
     case types.DEFAULT_ACTION:
       return state;