@capillarytech/creatives-library 3.1.0 → 3.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/index.js

@@ -13,6 +13,7 @@ import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
 import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import { FormattedMessage } from 'react-intl';
 import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
 import SlideBox from '../SlideBox';
@@ -20,6 +21,7 @@ import CardGrid from '../CardGrid';
 import CKEditor from "../Ckeditor/";
 import EDMEditor from "../Edmeditor";
 import CustomPopOver from '../CustomPopOver';
+import messages from './messages';
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 import {SMS} from '../../v2Containers/CreativesContainer/constants';
@@ -29,8 +31,6 @@ const {TextArea} = CapInput;
 const {CapRadioGroup} = CapRadio;
 // import styled from 'styled-components';
 
-// import { FormattedMessage } from 'react-intl';
-// import messages from './messages';
 const isUrl = (str) => {
   // eslint-disable-next-line no-useless-escape
   const res = str.match(/(http(s)?:\/\/.)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
@@ -2742,15 +2742,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               </CapColumn>
               );
             break;
-          
           case 'capUpload':
             columns.push(
               <CapUploader
                 customRequest={(data) => this.capUploaderCustomRequest(data, val)}
               >
                 <CapButton>
-                  {"Upload"}
-                  {' '}
+                  <FormattedMessage {...messages.upload} />
                 </CapButton>
               </CapUploader>
             );
@@ -2763,10 +2761,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 {...val.componentProps}
                 className="form-builder-dragger"
               >
-                <CapHeading className="dragger-title" type="h7">Drag and drop image here</CapHeading>
-                <CapHeading className="dragger-or" type="label6">OR</CapHeading>
+                <CapHeading className="dragger-title" type="h7">
+                  <FormattedMessage {...messages.dragAndDrop} />
+                </CapHeading>
+                <CapHeading className="dragger-or" type="label6">
+                  <FormattedMessage {...messages.or} />
+                </CapHeading>
                 <CapButton className="dragger-button" type="secondary">
-                  Select a file from your computer
+                  <FormattedMessage {...messages.selectAFile} />
                 </CapButton>
               </CapUploader.CapDragger>
             );

package/v2Components/FormBuilder/messages.js

@@ -10,4 +10,52 @@ export default defineMessages({
     id: 'app.components.FormBuilder.header',
     defaultMessage: 'This is the FormBuilder component !',
   },
+  cancel: {
+    id: 'app.componentsv2.FormBuilder.cancel',
+    defaultMessage: 'Cancel',
+  },
+  yes: {
+    id: 'app.componentsv2.FormBuilder.header',
+    defaultMessage: 'Yes',
+  },
+  ok: {
+    id: 'app.componentsv2.FormBuilder.ok',
+    defaultMessage: 'Ok',
+  },
+  contentNotValidLanguage: {
+    id: 'app.componentsv2.FormBuilder.contentNotValidLanguage',
+    defaultMessage: 'Content is not valid for language:',
+  },
+  missingTags: {
+    id: 'app.componentsv2.FormBuilder.missingTags',
+    defaultMessage: 'Missing tags are:',
+  },
+  unsupportedTags: {
+    id: 'app.componentsv2.FormBuilder.unsupportedTags',
+    defaultMessage: 'Unsupported tags are:',
+  },
+  upload: {
+    id: 'app.componentsv2.FormBuilder.upload',
+    defaultMessage: 'Upload',
+  },
+  dragAndDrop: {
+    id: 'app.componentsv2.FormBuilder.dragAndDrop',
+    defaultMessage: 'Drag and drop image here',
+  },
+  or: {
+    id: 'app.componentsv2.FormBuilder.or',
+    defaultMessage: 'OR',
+  },
+  selectAFile: {
+    id: 'app.componentsv2.FormBuilder.selectAFile',
+    defaultMessage: 'Select a file from your computer',
+  },
+  layoutSelection: {
+    id: 'app.componentsv2.FormBuilder.layoutSelection',
+    defaultMessage: 'Layout Selection',
+  },
+  loadingEDMTemplates: {
+    id: 'app.componentsv2.FormBuilder.loadingEDMTemplates',
+    defaultMessage: 'Loading EDM Templates',
+  },
 });

package/v2Containers/Cap/messages.js

@@ -0,0 +1,67 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  "sms": {
+    id: 'reon.componentsv2.Cap.sms',
+    defaultMessage: 'SMS',
+  },
+  "wechat": {
+    id: 'reon.componentsv2.Cap.wechat',
+    defaultMessage: 'WeChat',
+  },
+  "gallery": {
+    id: 'reon.componentsv2.Cap.gallery',
+    defaultMessage: 'Gallery',
+  },
+  "creativesDashboard": {
+    id: 'reon.componentsv2.Cap.creativesDashboard',
+    defaultMessage: 'Creatives',
+  },
+  "creatives": {
+    id: 'reon.componentsv2.Cap.creatives',
+    defaultMessage: 'Creatives',
+  },
+  "campaigns": {
+    id: 'reon.componentsv2.Cap.campaigns',
+    defaultMessage: 'Campaigns',
+  },
+  "loyalty": {
+    id: 'reon.componentsv2.Cap.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "member care": {
+    id: 'reon.componentsv2.Cap.memberCare',
+    defaultMessage: 'Member Care',
+  },
+  "workbench": {
+    id: 'reon.componentsv2.Cap.Workbench',
+    defaultMessage: 'WorkBench',
+  },
+  "store care": {
+    id: 'reon.componentsv2.Cap.storeCare',
+    defaultMessage: 'Store Care',
+  },
+  "store performance": {
+    id: 'reon.componentsv2.Cap.storePerformance',
+    defaultMessage: 'Store Performance',
+  },
+  "email": {
+    id: 'reon.componentsv2.Cap.email',
+    defaultMessage: 'Email',
+  },
+  "ebill": {
+    id: 'reon.componentsv2.Cap.ebill',
+    defaultMessage: 'Ebill',
+  },
+  "campaignsDashboard": {
+    id: 'reon.componentsv2.campaignsDashboard',
+    defaultMessage: 'Campaigns',
+  },
+  "campaignsHome": {
+    id: 'reon.componentsv2.campaignsHome',
+    defaultMessage: "Campaigns Home",
+  },
+  "appName": {
+    id: 'reon.componentsv2.appName',
+    defaultMessage: "App Name",
+  },
+});

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -55,7 +55,7 @@ function SlideBoxHeader(props) {
             }
           />
         )}
-      {!showTemplateNameHeader && slidBoxContent === 'createTemplate' && ( templateStep === 'modeSelection' || templateStep === "createTemplateContent" ) && (
+      {!showTemplateNameHeader && slidBoxContent === 'createTemplate' && ( templateStep === 'modeSelection' || (templateStep === "createTemplateContent" && weChatTemplateType !== MAP_TEMPLATE) ) && (
       <CapHeader
         title={<FormattedMessage {...messages.createMessageContent} values={{channel: getChannelLabel(channel)}}/>}
         prefix={!isFullMode && showPrefix &&
@@ -73,10 +73,10 @@ function SlideBoxHeader(props) {
           className="wechat-steps"
         >
           <CapSteps.CapStep
-            title={<CapLabel type="label8">Select template</CapLabel>}
+            title={<CapLabel type="label8"><FormattedMessage {...messages.selectTemplate} /></CapLabel>}
           />
           <CapSteps.CapStep
-            title={<CapLabel type="label8">Add content</CapLabel>}
+            title={<CapLabel type="label8"><FormattedMessage {...messages.addContent} /></CapLabel>}
             disabled
           />
         </CapSteps>

package/v2Containers/CreativesContainer/messages.js

@@ -294,4 +294,12 @@ export default defineMessages({
     id: `${scope}.wechatAccountNotConfigured`,
     defaultMessage: 'Selected wechat account is not configured to create wechat templates',
   },
+  "selectTemplate": {
+    id: `${scope}.selectTemplate`,
+    defaultMessage: 'Select template',
+  },
+  "addContent": {
+    id: `${scope}.addContent`,
+    defaultMessage: 'Add content',
+  },
 });

package/v2Containers/Line/Edit/_lineEdit.scss

@@ -1,21 +1,23 @@
-.mobile-push-row{
-  margin-bottom: 16px;
-}
-.image-container{
-  border: solid 1px #C2C2C2;
-  border-radius: 5px;
-  .image-placeholder{
-    line-height: 150px;
+.line-edit {
+  .mobile-push-row{
+    margin-bottom: 16px;
+  }
+  .image-container{
+    border: solid 1px #C2C2C2;
+    border-radius: 5px;
+    .image-placeholder{
+      line-height: 150px;
+    }
+  }
+  .ant-tabs-bar{
+    margin-bottom: 0 !important;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+  .ant-tabs-tabpane{
+    padding: 16px 16px 16px 0;
+    border: solid 1px #D6D6D6;
   }
-}
-.ant-tabs-bar{
-  margin-bottom: 0 !important;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-.ant-tabs-tabpane{
-  padding: 16px 16px 16px 0;
-  border: solid 1px #D6D6D6;
 }

package/v2Containers/Line/Edit/index.js

@@ -961,7 +961,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       tags = this.props.supportedTags;
     }
     return (
-      <div>
+      <div className="line-edit">
         <Spin spinning={spinning}>
           {<Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
             <Col offset={1}>

package/v2Containers/Templates/index.js

@@ -1650,10 +1650,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         />}
       {
         channel.toUpperCase() === WECHAT && <CapRadio.CapRadioGroup className="wechat-filters" defaultValue={wechatFilter} onChange={this.setWechatFilter}>
-            <CapRadio.Button value={WECHAT_FILTERS.ALL}><CapLabel type="label2">All</CapLabel></CapRadio.Button>
-            <CapRadio.Button value={WECHAT_FILTERS.MAPTEMPLATES}><CapLabel type="label2">Map templates</CapLabel></CapRadio.Button>
-            <CapRadio.Button value={WECHAT_FILTERS.RICHMEDIA}><CapLabel type="label2">Rich media templates</CapLabel></CapRadio.Button>
-          </CapRadio.CapRadioGroup>
+          <CapRadio.Button value={WECHAT_FILTERS.ALL}><CapLabel type="label2">
+            <FormattedMessage {...messages.all} />
+          </CapLabel></CapRadio.Button>
+          <CapRadio.Button value={WECHAT_FILTERS.MAPTEMPLATES}><CapLabel type="label2">
+            <FormattedMessage {...messages.mapTemplates} />
+          </CapLabel></CapRadio.Button>
+          <CapRadio.Button value={WECHAT_FILTERS.RICHMEDIA}><CapLabel type="label2">
+            <FormattedMessage {...messages.richMediaTemplates} />
+          </CapLabel></CapRadio.Button>
+        </CapRadio.CapRadioGroup>
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && <CapButton

package/v2Containers/Templates/messages.js

@@ -326,4 +326,16 @@ export default defineMessages({
     id: `${scope}.mobilepushAccount`,
     defaultMessage: 'Mobilepush account',
   },
+  "all": {
+    id: `${scope}.all`,
+    defaultMessage: 'All',
+  },
+  "mapTemplates": {
+    id: `${scope}.mapTemplates`,
+    defaultMessage: 'Map templates',
+  },
+  "richMediaTemplates": {
+    id: `${scope}.richMediaTemplates`,
+    defaultMessage: 'Rich media templates',
+  },
 });

package/v2Containers/TemplatesV2/index.js

@@ -33,11 +33,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     super(props);
     const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     const defaultPanes = {
-      sms: {content: <div></div>, tab: 'SMS', key: 'sms'},
-      email: {content: <div></div>, tab: 'Email', key: 'email'},
-      weChat: {content: <div></div>, tab: 'Wechat', key: 'wechat'},
+      sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
+      email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
+      weChat: {content: <div></div>, tab: props.intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      mPush: {content: <div></div>, tab: 'Push notification', key: 'mobilepush'},
+      mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
     const channelsToHide = this.props.channelsToHide || [];
 
@@ -48,9 +48,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }, []);
 
     if (props.isFullMode ) {
-      filteredPanes.push({content: <div></div>, tab: 'Gallery', key: 'assets'});
+      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.gallery), key: 'assets'});
     } else if (!channelsToHide.includes('callTask')) {
-      filteredPanes.push({content: <div></div>, tab: 'Call Task', key: 'call_task'});
+      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
     }
 
     const panes = this.setChannelContent(defaultChannel, filteredPanes);

package/v2Containers/TemplatesV2/messages.js

@@ -26,4 +26,28 @@ export default defineMessages({
     id: 'app.containers.TemplatesV2.creativesDesc',
     defaultMessage: 'These are pre-built templates which you could use to customize your message content.',
   },
+  sms: {
+    id: 'app.containersv2.TemplatesV2.sms',
+    defaultMessage: 'SMS',
+  },
+  email: {
+    id: 'app.containersv2.TemplatesV2.email',
+    defaultMessage: 'Email',
+  },
+  pushNotification: {
+    id: 'app.containersv2.TemplatesV2.pushNotification',
+    defaultMessage: 'Push notification',
+  },
+  callTask: {
+    id: 'app.containersv2.TemplatesV2.callTask',
+    defaultMessage: 'Call Task',
+  },
+  gallery: {
+    id: 'app.containersv2.TemplatesV2.gallery',
+    defaultMessage: 'Gallery',
+  },
+  wechat: {
+    id: 'app.containersv2.TemplatesV2.wechat',
+    defaultMessage: 'Wechat',
+  },
 });

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: "Tags",
+                label: this.props.intl.formatMessage(messages.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} has invalid content.`,
+                errorMessage: `${title} ${this.props.intl.formatMessage(messages.hasInvalidContent)}`,
                 required: true,
                 fluid: true,
                 disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
@@ -626,11 +626,11 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
             {
               id: 'template-link',
               placeholder: this.props.intl.formatMessage(messages.Link),
-              label: 'Link',
+              label: this.props.intl.formatMessage(messages.Link),
               type: "input",  //Resembles component to be used
               metaType: "text",
               datatype: "string",
-              errorMessage: `Link cannot be empty.`,
+              errorMessage: this.props.intl.formatMessage(messages.linkErrorMessage),
               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: 'Is this internal url',
+              label: this.props.intl.formatMessage(messages.isInternalUrl),
               standalone: true,
               labelStyle: {
                 backgroundColor: "white",

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -70,6 +70,22 @@ export default defineMessages({
     id: 'app.containers.WeChat.somethingWentWrong',
     defaultMessage: "Something went wrong!!",
   },
+  "alertMessage": {
+    id: 'app.containersv2.WeChat.alertMessage',
+    defaultMessage: "Alert",
+  },
+  "goBackTemporaryChangesLost": {
+    id: 'app.containersv2.WeChat.goBackTemporaryChangesLost',
+    defaultMessage: "Do you really want to go back? All your temporary changes will be lost!",
+  },
+  "hasValidContent": {
+    id: 'app.containersv2.WeChat.hasValidContent',
+    defaultMessage: "has valid content.",
+  },
+  "linkCantEmpty": {
+    id: 'app.containersv2.WeChat.linkCantEmpty',
+    defaultMessage: "has valid content.",
+  },
   "select": {
     id: 'app.containers.WeChat.select',
     defaultMessage: 'Select',
@@ -78,4 +94,12 @@ export default defineMessages({
     id: 'app.containers.WeChat.newWechat',
     defaultMessage: 'New wechat',
   },
+  "linkErrorMessage": {
+    id: 'app.containers.WeChat.linkErrorMessage',
+    defaultMessage: 'Link cannot be empty.',
+  },
+  "hasInvalidContent": {
+    id: 'app.containers.WeChat.hasInvalidContent',
+    defaultMessage: 'has invalid content.',
+  },
 });

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

@@ -278,6 +278,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (temp.placeholder && messages[temp.placeholder]) {
       temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
     }
+    // if (temp.value && messages[temp.value] && temp.metaType === 'label') {
+    //   temp.value = this.props.intl.formatMessage(messages[temp.value]);
+    // }
+    // if (temp.inductiveText && messages[temp.inductiveText]) {
+    //   temp.inductiveText = this.props.intl.formatMessage(messages[temp.inductiveText]);
+    // }
     if (temp.options) {
       forEach(temp.options, (option, id) => {
         if (messages[option]) {

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

@@ -1,8 +1,8 @@
 /*
- * Create Messages
- *
- * This contains all the text for the Create component.
- */
+*  Create Messages
+*
+*  This contains all the text for the Create component.
+*/
 import { defineMessages } from 'react-intl';
 
 export default defineMessages({
@@ -82,9 +82,9 @@ export default defineMessages({
     id: 'app.containers.Create.addNewRichmedia',
     defaultMessage: 'Add richmedia content',
   },
-  'Title*': {
-    id: 'app.containers.Create.Title*',
-    defaultMessage: 'Title*',
+  'Title': {
+    id: 'app.containersv2.Create.Title',
+    defaultMessage: 'Title',
   },
   'Please input title': {
     id: 'app.containers.Create.Please_input_title',
@@ -98,9 +98,9 @@ export default defineMessages({
     id: 'app.containers.Create.Please_input_author',
     defaultMessage: 'Please input author',
   },
-  'Cover image*': {
-    id: 'app.containers.Create.Cover_image*',
-    defaultMessage: 'Cover image*',
+  'Cover image': {
+    id: 'app.containersv2.Create.Cover_image',
+    defaultMessage: 'Cover image',
   },
   'Cover abstract': {
     id: 'app.containers.Create.Cover_abstract',
@@ -110,9 +110,9 @@ export default defineMessages({
     id: 'app.containers.Create.Please_input_cover_abstract',
     defaultMessage: 'Please input cover abstract',
   },
-  'Content*': {
-    id: 'app.containers.Create.Content*',
-    defaultMessage: 'Content*',
+  'Content': {
+    id: 'app.containersv2.Create.Content',
+    defaultMessage: 'Content',
   },
   'Please input content': {
     id: 'app.containers.Create.Please_input_content',
@@ -138,4 +138,56 @@ export default defineMessages({
     id: 'app.containers.Create.Only_followers',
     defaultMessage: 'Only followers',
   },
+  'visibility': {
+    id: 'app.containersv2.Create.visibility',
+    defaultMessage: 'visibility',
+  },
+  'delete': {
+    id: 'app.containersv2.Create.delete',
+    defaultMessage: 'delete',
+  },
+  'This field is required!': {
+    id: 'app.containersv2.Create.requiredField',
+    defaultMessage: 'This field is required!',
+  },
+  "Write a brief headline to draw customer's attention": {
+    id: 'app.containersv2.Create.titleInductiveText',
+    defaultMessage: "Write a brief headline to draw customer's attention",
+  },
+  "Brand/name that your customer will recognise": {
+    id: 'app.containersv2.Create.authorInductiveText',
+    defaultMessage: "Brand/name that your customer will recognise",
+  },
+  'Resolution 360 x 200': {
+    id: 'app.containersv2.Create.resolutionText',
+    defaultMessage: 'Resolution 360 x 200',
+  },
+  'The relevant image that complements title.': {
+    id: 'app.containersv2.Create.coverImageTitle',
+    defaultMessage: 'The relevant image that complements title.',
+  },
+  'Upload Image': {
+    id: 'app.containersv2.Create.uploadImage',
+    defaultMessage: 'Upload Image',
+  },
+  'A short description help customers learn more': {
+    id: 'app.containersv2.Create.coverAbstractInductive',
+    defaultMessage: 'A short description help customers learn more',
+  },
+  'Article content': {
+    id: 'app.containersv2.Create.articleContent',
+    defaultMessage: 'Article content',
+  },
+  'Insert Image': {
+    id: 'app.containersv2.Create.insertImage',
+    defaultMessage: 'Insert Image',
+  },
+  'Read more link': {
+    id: 'app.containersv2.Create.readMoreLink',
+    defaultMessage: 'Read more link',
+  },
+  'Link to help customers discover more about the brand.': {
+    id: 'app.containersv2.Create.linkInductiveText',
+    defaultMessage: 'Link to help customers discover more about the brand.',
+  },
 });