@capillarytech/creatives-library 3.7.0 → 3.8.1

package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -13,6 +13,7 @@ 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/package.json

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

package/v2Containers/Assets/Gallery/index.js

@@ -251,6 +251,7 @@ 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,
@@ -317,6 +318,7 @@ 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); }}
@@ -324,7 +326,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             <CapDropdown
               overlay={
                 <CapMenu>
-                  <CapMenu.Item onClick={() => this.deleteAsset(template)}>
+                  <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
                     <FormattedMessage {...messages.delete} />
                   </CapMenu.Item>
                 </CapMenu>
@@ -429,7 +431,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 type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+            <CapButton className="upload-image-gallery" 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,6 +63,7 @@ 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/Facebook/index.js

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

package/v2Containers/Templates/index.js

@@ -548,6 +548,8 @@ 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);
@@ -559,21 +561,23 @@ 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 onClick={(e) => handlers.handleEditClick(e, template)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
+          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>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
-              {this.state.channel.toUpperCase() !== WECHAT && <CapMenu.Item onClick={() => this.duplicateTemplate(template)}>
+              {this.state.channel.toUpperCase() !== WECHAT && <CapMenu.Item className={`duplicate-${channelLowerCase}`} 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} />}
@@ -1660,6 +1664,7 @@ 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"
@@ -1683,8 +1688,10 @@ 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'}}