@capillarytech/creatives-library 3.6.10 → 3.8.0

package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -13,7 +13,6 @@ import _ from 'lodash';
 import SlideBox from '../../SlideBox';
 import './_wechatRichmediaTemplatePrev.scss';
 import messages from './messages';
-
 const wechatBody = require('./../assets/images/WECHAT_5x.png');
 
 class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

package/components/TemplatePreview/_templatePreview.scss

@@ -349,4 +349,4 @@
   display: inline-block;
   background-color: #333333;
   margin-right: 4px;
-}
+}

package/containers/Cap/index.js

@@ -21,6 +21,7 @@ import * as appActions from '../App/actions';
 import config from '../../config/app';
 import Toastr from '../../components/Toastr';
 import messages from './messages';
+import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 const gtm = window.dataLayer || [];
 
 const CapWrapper = styled.div`
@@ -70,7 +71,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-    console.log('Setting final locale as', locale);
     moment.locale(locale);
     this.props.locationActions.changeLocale(locale);
   }
@@ -273,6 +273,14 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     ];
     return (
       <CapWrapper>
+         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ? 
+          <div className="cap-loader-box">
+            <img
+              className="loader-image"
+              src="https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/88561f46de9407021cad.gif"
+              alt="Capillary"/>
+          </div> : <>
+       
         <Helmet
           titleTemplate="Capillary - %s"
           defaultTitle={this.props.intl.formatMessage(messages.appName)}
@@ -307,14 +315,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
         {(toastMessages && toastMessages.length > 0) ?
           <Toastr timeout={4000} messagesList={toastMessages} position="top-right" handleRemoveMessage={this.handleRemoveMessage} />
           : ''}
-        {this.props.Global.fetching_userdata &&
-          <div className="cap-loader-box">
-            <img
-              className="loader-image"
-              src="https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/88561f46de9407021cad.gif"
-              alt="Capillary"/>
-          </div>
-        }
+        </> }
       </CapWrapper>
     );
   }
@@ -334,6 +335,7 @@ Cap.propTypes = {
 const mapStateToProps = createStructuredSelector({
   Global: makeSelectAuthenticated(),
   User: makeSelectUser(),
+  loader: makeSelectLocale(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/Cap/selectors.js

@@ -23,9 +23,11 @@ const setInjectedTags = () => createSelector(
   (globalState) => {
     let injectedTags = globalState.get('injectedTags') || {};
     const metaEntities = globalState.get('metaEntities') || {};
-    const customTags = metaEntities.tags && metaEntities.tags.custom ? metaEntities.tags.custom : {};
-    console.log("selector cap: ", injectedTags, customTags, metaEntities);
-    return (injectedTags = _.merge({}, injectedTags, customTags));
+    const { tags } = metaEntities;
+    const customTags = tags && (tags.custom || {});
+    const extendedTags = tags && (tags.extended || {});
+    console.log("selector cap: ", injectedTags, customTags, metaEntities, extendedTags);
+    return (injectedTags = _.merge({}, injectedTags, customTags, extendedTags));
   }
 );
 

package/package.json

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

package/translations/en.json

@@ -1424,6 +1424,7 @@
   "creatives.containersV2.richMedia.Create.authorCharacterCount": "Author exceeds character count limit by",
   "creatives.containersV2.richMedia.Create.authorInductiveText": "Brand/name that your customer will recognise",
   "creatives.containersV2.richMedia.Create.contentEmpty": "Cannot leave content field empty",
+  "creatives.containersV2.richMedia.Create.coverAbstract": "Cover abstract",
   "creatives.containersV2.richMedia.Create.coverAbstractCharacterCount": "Cover abstract exceeds character count limit by",
   "creatives.containersV2.richMedia.Create.coverAbstractInductive": "A short description help customers learn more",
   "creatives.containersV2.richMedia.Create.coverImageTitle": "The relevant image that complements title.",
@@ -1455,6 +1456,7 @@
   "creatives.containersV2.richMedia.Create.sourceLinkEmpty": "Cannot leave source link field empty",
   "creatives.containersV2.richMedia.Create.sufficientParam": "Please provide sufficient params to create richmedia wechat template",
   "creatives.containersV2.richMedia.Create.sufficientPayload": "Please provide sufficient parameters to generate richmedia message payload",
+  "creatives.containersV2.richMedia.Create.templateNameAlreadyExists": "Template name already exists",
   "creatives.containersV2.richMedia.Create.templateNameBlank": "Template name cannot be blank",
   "creatives.containersV2.richMedia.Create.templateNameContainsWS": "Template name contains only whitespaces",
   "creatives.containersV2.richMedia.Create.templateNameExists": "Template with the same name exists. Please try another template name.",
@@ -1465,9 +1467,9 @@
   "creatives.containersV2.richMedia.Create.uploadFailed": "Upload has failed",
   "creatives.containersV2.richMedia.Create.uploadImage": "Upload Image",
   "creatives.containersV2.richMedia.Create.visibility": "visibility",
+  "creatives.containersV2.richMedia.Create.wechatTitle": "Title",
   "creatives.containersV2.richMedia.Create.wrongFormatFile": "Wrong file upoaded. Please upload image file",
   "creatives.containersV2.richMedia.Create.wrongUrl": "Enter correct URL",
-  "creatives.containersV2.richMedia.Create.templateNameAlreadyExists": "Template name already exists",
   "customdatepicker.cancel": "Cancel",
   "customdatepicker.done": "Done",
   "reon.components.Cap.Workbench": "WorkBench",

package/translations/zh.json

@@ -1424,6 +1424,7 @@
   "creatives.containersV2.richMedia.Create.authorCharacterCount": "",
   "creatives.containersV2.richMedia.Create.authorInductiveText": "",
   "creatives.containersV2.richMedia.Create.contentEmpty": "",
+  "creatives.containersV2.richMedia.Create.coverAbstract": "",
   "creatives.containersV2.richMedia.Create.coverAbstractCharacterCount": "",
   "creatives.containersV2.richMedia.Create.coverAbstractInductive": "",
   "creatives.containersV2.richMedia.Create.coverImageTitle": "",
@@ -1455,6 +1456,7 @@
   "creatives.containersV2.richMedia.Create.sourceLinkEmpty": "",
   "creatives.containersV2.richMedia.Create.sufficientParam": "",
   "creatives.containersV2.richMedia.Create.sufficientPayload": "",
+  "creatives.containersV2.richMedia.Create.templateNameAlreadyExists": "",
   "creatives.containersV2.richMedia.Create.templateNameBlank": "",
   "creatives.containersV2.richMedia.Create.templateNameContainsWS": "",
   "creatives.containersV2.richMedia.Create.templateNameExists": "",
@@ -1465,9 +1467,9 @@
   "creatives.containersV2.richMedia.Create.uploadFailed": "",
   "creatives.containersV2.richMedia.Create.uploadImage": "",
   "creatives.containersV2.richMedia.Create.visibility": "",
+  "creatives.containersV2.richMedia.Create.wechatTitle": "",
   "creatives.containersV2.richMedia.Create.wrongFormatFile": "",
   "creatives.containersV2.richMedia.Create.wrongUrl": "",
-  "creatives.containersV2.richMedia.create.templateNameAlreadyExists": "",
   "customdatepicker.cancel": "",
   "customdatepicker.done": "",
   "reon.components.Cap.Workbench": "",

package/v2Components/CapTagList/index.js

@@ -148,7 +148,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           </CapTreeNode>
         ));
       } else if (searchString === '' || !searchString || val.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1) {
-        const tempNode = (<CapTreeNode title={val.name} tag={val} isLeaf key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}></CapTreeNode>);
+        const tempNode = (<CapTreeNode title={val.desc || val.name} tag={val} isLeaf key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}></CapTreeNode>);
         list.push(tempNode);
       }
     });

package/v2Containers/Assets/Gallery/index.js

@@ -251,7 +251,6 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }
   }
   getIllustrationProps={
-    buttonClassName: 'upload-image-gallery',
     buttonLabel: <FormattedMessage {...messages.upload} />,
     onClick: (e) => this.openFileDialog(e),
     illustrationImage: imageGalleryIllustration,
@@ -318,7 +317,6 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           title: <span title={template.name} >{template.name}</span>,
           extra: [
             <CapIcon
-              className="view-gallery"
               style={{marginRight: '16px'}}
               type="eye"
               onClick={() => { this.openPreviewMode(template); }}
@@ -326,7 +324,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             <CapDropdown
               overlay={
                 <CapMenu>
-                  <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
+                  <CapMenu.Item onClick={() => this.deleteAsset(template)}>
                     <FormattedMessage {...messages.delete} />
                   </CapMenu.Item>
                 </CapMenu>
@@ -431,7 +429,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
           <form encType="multipart/form-data" id="myForm">
             <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
-            <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+            <CapButton type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
               <FormattedMessage {...messages.upload} />
             </CapButton>
           </form>

package/v2Containers/CallTask/index.js

@@ -63,7 +63,6 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     const templateIntlText = formatMessage(messages.template);
     const templateText = isFullMode ? templateIntlText : '';
     return {
-      buttonClassName: 'new-call-task-button',
       buttonLabel: formatMessage(messages.newCallTaskTemplate, { templateText }),
       onClick: showContentInSlidebox ? this.showNewCallTask : onCreateNew,
       illustrationImage: calltaskIllustration,

package/v2Containers/Cap/index.js

@@ -20,7 +20,7 @@ import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath } from '../../config/path';
 import { GTM_TRACKING_ID } from '../App/constants';
-
+import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import {
   HELP_URL,
   ORG_SETTINGS_URL,
@@ -178,8 +178,16 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const topbarMenuDataOptions = topbarMenuData && topbarMenuData.data ? topbarMenuData.data : [];
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
+    console.log('v2 locale loading', this.props.loader.localeLoading);
     return (
       <CapWrapper>
+        { this.props.loader.localeLoading || this.props.Global.fetching_userdata ? 
+          <div className="cap-loader-box">
+            <img
+              className="loader-image"
+              src="https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/88561f46de9407021cad.gif"
+              alt="Capillary"/>
+          </div> : <>
         <Helmet
           titleTemplate="Capillary - %s"
           defaultTitle={<FormattedMessage {...messages.appName} />}
@@ -216,14 +224,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           }
           )
         }
-        {this.props.Global.fetching_userdata &&
-          <div className="cap-loader-box">
-            <img
-              className="loader-image"
-              src="https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/88561f46de9407021cad.gif"
-              alt="Capillary"/>
-          </div>
-        }
+         </> }
       </CapWrapper>
     );
   }
@@ -242,6 +243,7 @@ Cap.propTypes = {
 const mapStateToProps = createStructuredSelector({
   Global: makeSelectAuthenticated(),
   User: makeSelectUser(),
+  loader: makeSelectLocale(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/Cap/selectors.js

@@ -27,9 +27,11 @@ const setInjectedTags = () => createSelector(
   (globalState) => {
     let injectedTags = globalState.get('injectedTags') || {};
     const metaEntities = globalState.get('metaEntities') || {};
-    const customTags = metaEntities.tags && metaEntities.tags.custom ? metaEntities.tags.custom : {};
-    console.log("selector cap: ", injectedTags, customTags, metaEntities);
-    return (injectedTags = _.merge({}, injectedTags, customTags));
+    const { tags } = metaEntities;
+    const customTags = tags && (tags.custom || {});
+    const extendedTags = tags && (tags.extended || {});
+    console.log("selector cap: ", injectedTags, customTags, metaEntities, extendedTags);
+    return (injectedTags = _.merge({}, injectedTags, customTags, extendedTags));
   }
 );
 

package/v2Containers/Facebook/index.js

@@ -251,7 +251,7 @@ const Facebook = (props) => {
                     {!socialRemoteCampaignId && onChange && (
                       <CapButton
                         type="flat"
-                        className="marketingObjective-change-button facebook-marketing-objective-change"
+                        className="marketingObjective-change-button"
                         onClick={onChange}
                       >
                         <FormattedMessage {...messages.fbChange} />
@@ -321,7 +321,6 @@ const Facebook = (props) => {
         </div>
       </div>
       <CapButton
-        className="facebook-confirm-button"
         type="primary"
         onClick={() =>
           onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })

package/v2Containers/LanguageProvider/index.js

@@ -19,18 +19,16 @@ import moment from 'moment';
 import { bindActionCreators } from 'redux';
 import * as actions from './actions';
 import { makeSelectLocale } from './selectors';
+import { makeSelectUser } from '../Cap/selectors';
 
 
 export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  componentDidMount() {
-    const user = localStorage.getItem('user');
-    let locale = localStorage.getItem('jlocale') || 'en';
-    moment.locale(locale);
-    if (user) {
-      locale = JSON.parse(user).lang;
+  componentDidUpdate(prevProps) {
+    const prevUser = prevProps.user;
+    const user = this.props.user;
+    if (!prevUser && user) {
+      this.updateLocale();
     }
-    locale = this.getMappedLocale(locale);
-    this.props.actions.getLocizMessage(locale);
   }
   /*global getMappedLocale */
   getMappedLocale = (locale) => {
@@ -42,7 +40,16 @@ export class LanguageProvider extends React.PureComponent { // eslint-disable-li
     };
     return map[locale];
   };
-
+  updateLocale() {
+    const user = localStorage.getItem('user');
+    let locale = localStorage.getItem('jlocale') || 'en';
+    moment.locale(locale);
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    this.props.actions.getLocizMessage(locale);
+  }
   render() {
     const { locale, messages} = this.props.language;
     const mappedLocale = {
@@ -67,11 +74,13 @@ LanguageProvider.propTypes = {
   language: PropTypes.object,
   actions: PropTypes.object,
   children: PropTypes.element.isRequired,
+  user: PropTypes.object,
 };
 
 
 const mapStateToProps = createStructuredSelector({
   language: makeSelectLocale(),
+  user: makeSelectUser(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/LanguageProvider/sagas.js

@@ -26,8 +26,6 @@ export function* watchGetLocizMessage() {
     types.GET_LOCIZ_MESSAGE_REQUEST,
     getLocizMessage,
   );
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
 }
 
 export default [watchGetLocizMessage];

package/v2Containers/Templates/index.js

@@ -548,8 +548,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
-    const {channel: stateChannel} = this.state;
-    const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     if (currentChannel === WECHAT) {
       filteredTemplates = this.filterWechatTemplates(templates);
@@ -561,23 +559,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           title: <span title={template.name} >{template.name}</span>,
           extra: [
             <CapIcon
-              className={`view-${channelLowerCase}`}
               style={{marginRight: '16px'}}
               type="eye"
               onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }}
               />,
           ],
-          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
+          hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
-              {this.state.channel.toUpperCase() !== WECHAT && <CapMenu.Item className={`duplicate-${channelLowerCase}`} onClick={() => this.duplicateTemplate(template)}>
+              {this.state.channel.toUpperCase() !== WECHAT && <CapMenu.Item onClick={() => this.duplicateTemplate(template)}>
                 <FormattedMessage {...messages.duplicateButton} />
               </CapMenu.Item>}
               <CapMenu.Item
-                className={this.state.channel.toUpperCase() === WECHAT && !template.definition ? `unmap-${channelLowerCase}` : `delete-${channelLowerCase}`}
                 onClick={() => this.deleteTemplate(template)}
               >
                 {this.state.channel.toUpperCase() === WECHAT && !template.definition ? <FormattedMessage {...messages.unMapButton} /> : <FormattedMessage {...messages.deleteButton} />}
@@ -1664,7 +1660,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     // 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 channelLowerCase = channel.toLowerCase();
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -1688,10 +1683,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </CapLabel></CapRadio.Button>
         </CapRadio.CapRadioGroup>
       }
-      
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton
-          className={`create-new-${channelLowerCase}`}
           type={"primary"}
           disabled={this.isCreateDisabled()}
           style={{marginLeft: '8px'}}