@capillarytech/creatives-library 2.0.65 → 2.0.68

package/containers/Templates/index.js

@@ -13,8 +13,8 @@ import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Row, Dropdown, Menu, Modal} from 'antd';
-import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapColumn} from '@capillarytech/cap-ui-library';
+import { Dropdown, Menu, Modal} from 'antd';
+import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -43,6 +43,7 @@ import SlideBox from '../../components/SlideBox';
 import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
+import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
 const MenuItem = Menu.Item;
 const {CapCustomCardList} = CapCustomCard;
 
@@ -86,7 +87,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.startTemplateCreation = this.startTemplateCreation.bind(this);
     this.startLoading = this.startLoading.bind(this);
     this.prepareWeChatPreviewData = this.prepareWeChatPreviewData.bind(this);
-    this.prepareWeChatRichmediaPreviewData = this.prepareWeChatRichmediaPreviewData.bind(this);
     this.prepareWeChatMappedPreviewData = this.prepareWeChatMappedPreviewData.bind(this);
     this.onAccountSelect = this.onAccountSelect.bind(this);
     this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
@@ -478,9 +478,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return (<div>
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip}>
-        <div className="pagination-container">
+        {!_.isEmpty(templates) && <div className="pagination-container">
           <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-        </div>
+        </div>}
+        {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+          <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
+        </div>}
       </CapSpin>
 
     </div>);
@@ -506,10 +509,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
       };
     } else if (this.state.channel.toLowerCase() === 'wechat') {
-      routeParams = {
-        pathname: `/wechat/edit/${e.template_id}`,
-        query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
-      };
+      if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
+        this.props.router.push({
+          pathname: `/wechat/richmedia/edit/${e.template_id}`,
+          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+        });
+      } else {
+        this.props.router.push({
+          pathname: `/wechat/edit/${e.template_id}`,
+          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+        });
+      }
     } else if (this.state.channel.toLowerCase() === 'line') {
       routeParams = {
         pathname: `/line/view/${e.msg_type}/`,
@@ -590,7 +600,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   prepareWeChatPreviewData(template) {
     if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
       if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
-        return this.prepareWeChatRichmediaPreviewData(template.versions.base);
+        return template.versions.base.mediaList;
       }
       return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
     }
@@ -607,38 +617,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return formattedContent;
   }
 
-  prepareWeChatRichmediaPreviewData(content) {
-    const returnObj = [];
-    if (content.mediaList) {
-      _.forEach(content.mediaList, (mediaData, mediaIndex) => {
-        if (mediaIndex === 0) {
-          returnObj.push(
-            <div style={{ width: 272, height: 160 }}>
-              <CapRow style={{ height: 110 }}>
-                <img alt="default" width="272px" height="110px" src={mediaData.image_url} />
-              </CapRow>
-              <CapRow style={{ height: 32 }}>
-                {mediaData.digest ? mediaData.digest : ""}
-              </CapRow>
-            </div>
-          );
-        } else {
-          returnObj.push(
-            <CapRow style={{ width: 272, height: 86 }}>
-              <CapColumn span={18}>
-                {mediaData.title}
-              </CapColumn>
-              <CapColumn span={6}>
-                <img alt="default" width="60px" height="60px" src={mediaData.image_url} />
-              </CapColumn>
-            </CapRow>
-          );
-        }
-      });
-    }
-    return returnObj;
-  }
-
   prepareMobilePushPreviewData(content) {
     let result;
     if (content.ANDROID) {
@@ -1121,10 +1099,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
           if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
             path = `/wechat/richmedia/edit/${template._id}`;
+            content = <WechatRichmediaTemplatePreview type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''} content={template.versions.base.mediaList}/>;
           } else {
             path = `/wechat/edit/${template._id}`;
+            content = this.prepareWeChatPreviewData(template);
           }
-          content = this.prepareWeChatPreviewData(template);
           temp.content = (
             <div
               className="sms-template-content">
@@ -1505,7 +1484,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
           <CapButton
             type={this.props.isFullMode ? "primary" : "secondary"}
-            disabled={isLoading}
+            disabled={isLoading || _.isEmpty(this.props.Templates.selectedWeChatAccount)}
             style={{marginLeft: '8px'}}
             onClick={(ev) => this.props.isFullMode ? this.createTemplate(ev) : this.handleBlankTemplateAction()} >
             { this.props.intl.formatMessage(messages.createNewActionButton) }
@@ -1532,13 +1511,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
 
-        <Row>
-          { templateList && templateList.length > 0 &&
+        <CapRow>
           <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
             {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
           </Pagination>
-            }
-          {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) &&
+          {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && // old UI GRID
             <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
@@ -1552,14 +1529,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               >
               </CardGrid>
             </Pagination>}
-          {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
-            </div>}
           {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
             <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
             </div>}
-        </Row>
-        <Row>
+        </CapRow>
+        <CapRow>
           {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
           <CreativesContainer
             key={creativesParams.mode}
@@ -1571,18 +1545,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             getCreativesData={this.onCreateComplete}
             channel={route.name.toUpperCase()}
             handleCloseCreatives={this.onCreateComplete}/>
-            }
-          <PreviewSideBar
-            showPreview={this.state.previewOpen}
-            templateData={this.state.previewTemplate}
-            channel={this.state.channel}
-            handleClose={this.togglePreview}
-            onEditClick={this.handleEditClick}
-            embedded={this.props.location.query.type === 'embedded'}
-            onDuplicateClick={this.duplicateTemplate}
-            location={this.props.location}
-            >
-          </PreviewSideBar>
+          }
+        </CapRow>
+        <CapRow>
+          {this.state.channel.toLowerCase() === 'wechat' && this.state.previewTemplate && this.state.previewTemplate.definition && this.state.previewTemplate.definition.msgcontent && this.state.previewTemplate.definition.msgcontent === 'RICH_MEDIA_WECHAT' ?
+            <WechatRichmediaTemplatePreview
+              show={this.state.previewOpen}
+              closeSlideBox={this.togglePreview}
+              header={this.state.previewTemplate.name}
+              width={30}
+              showSlidebox
+              const type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''}
+              content={this.state.previewTemplate.versions.base.mediaList}
+              onEditClick={this.handleEditClick}
+              showEdit
+              templateId={this.state.previewTemplate._id}
+              path={`/wechat/richmedia/edit/${this.state.previewTemplate._id}`}
+            />
+            :
+              <PreviewSideBar
+                showPreview={this.state.previewOpen}
+                templateData={this.state.previewTemplate}
+                channel={this.state.channel}
+                handleClose={this.togglePreview}
+                onEditClick={this.handleEditClick}
+                embedded={this.props.location.query.type === 'embedded'}
+                onDuplicateClick={this.duplicateTemplate}
+                location={this.props.location}
+              >
+              </PreviewSideBar>
+
+          }
           {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
             header={previewHeader}
             content={htmlPreviewContent}
@@ -1592,7 +1585,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             changePreviewDevice={this.changePreviewDevice}
             lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
             updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
-            />}
+          />}
           <SlideBox
             header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
             width={60}
@@ -1603,7 +1596,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             isLoading={this.props.Templates.getCmsTemplatesInProgress}
             />
           {this.renderDeleteConfirmationModal()}
-        </Row>
+        </CapRow>
 
       </div>
     );

package/containers/Templates/reducer.js

@@ -78,7 +78,7 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('weCRMtemplates', fromJS([]))
         .set('weChatDefaultTemplate', fromJS([]))
-        .set('templates', fromJS([]));
+        .set('templates', []);
     case types.SET_SELECTED_LAYOUT:
       return state
         .set('selectedEmailLayout', fromJS(action.selectedTemplate))
@@ -106,7 +106,7 @@ function templatesReducer(state = initialState, action) {
       return state.set('getCmsTemplatesInProgress', true);
     case types.GET_EDM_DEAFULT_TEMPLATES_SUCCESS:
       return state.set('getCmsTemplatesInProgress', false)
-        .set('cmsTemplates', action.data ? fromJS(action.data.templates) : fromJS([]));
+        .set('cmsTemplates', action.data ? fromJS(action.data.templates) : []);
     case types.GET_EDM_DEAFULT_TEMPLATES_FAILURE:
       return state.set('getCmsTemplatesInProgress', false);
     case types.SET_EDM_TEMPLATE:
@@ -132,7 +132,7 @@ function templatesReducer(state = initialState, action) {
         .set('templateDetails', fromJS({}));
     case types.CLEAR_TEMPLATE_STORE_DATA:
       return state
-        .set('templates', fromJS({}))
+        .set('templates', [])
         .set('weCRMtemplates', fromJS({}));
     default:
       return state;

package/containers/WeChat/MapTemplates/index.js

@@ -15,7 +15,7 @@ import { createStructuredSelector } from 'reselect';
 import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
 import { makeSelectTemplates } from '../../Templates/selectors';
-import { makeSelectMetaEntities, makeSelectFetchingSchema } from '../../Cap/selectors';
+import { makeSelectMetaEntities, makeSelectFetchingSchema, setInjectedTags } from '../../Cap/selectors';
 import makeSelectWeChat from './selectors';
 import messages from './messages';
 import * as actions from './actions';
@@ -304,25 +304,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         }
       }
 
-      if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
-        let injectedTags = _.cloneDeep(this.state.injectedTags);
-        delete injectedTags["Registration custom fields"];
-        delete injectedTags["Store custom fields"];
-        delete injectedTags["Transaction custom fields"];
-        injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-        console.log('new injected tags', nextProps.metaEntities.tags.custom);
-        if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-          delete injectedTags["Registration custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-          delete injectedTags["Store custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-          delete injectedTags["Transaction custom fields"];
-        }
-        this.setState({injectedTags});
-      }
-
       // if (this.props.location.query.type.type === 'embedded' && this.props.location.query.module === 'loyalty' && this.state.formData['wechat-template'] !== '') {
       // }
       if (!nextProps.WeChat.fetchingDefaultTemplates && nextProps.location.query.module === 'outbound' && nextProps.params.id !== undefined) {
@@ -600,8 +581,9 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   setSelectedTemplateData(weChatData) {
     let schema = _.cloneDeep(this.state.baseSchema);
+    schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
     if (_.isEmpty(weChatData)) {
-      schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
+      // schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
       const formData=_.cloneDeep(this.state.formData);
       formData['wechat-template']="";
       this.setState({schema,formData});
@@ -1350,7 +1332,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
               location= {this.props.location}
               tags={tags}
               tagModule={this.props.getDefaultTags}
-              injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+              injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
               isEdit={this.state.isEdit}
               usingTabContainer={false}
               router={this.props.router}
@@ -1381,6 +1363,7 @@ MapTemplates.propTypes = {
   getDefaultTags: PropTypes.string,
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1388,6 +1371,7 @@ const mapStateToProps = createStructuredSelector({
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   fetchingSchema: makeSelectFetchingSchema(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -1,5 +1,41 @@
-.hovered {
-  opacity: 0.2;
+.hover-container {
+  position: relative;
+}
+.richmedia-icons {
+  display: none;
+  position: absolute;
+  top: 50%;
+}
+.hover-container:hover {
+  .richmedia-card {
+    opacity: 0.2;
+    border: 2px solid #1D5B96!important;
+  }
+  .richmedia-card-rectangle {
+    opacity: 0.2;
+    border: 2px solid #1D5B96!important;
+  }
+  .richmedia-icons {
+    opacity: 1 !important;
+    display: inline-flex!important;
+  }
+
+}
+.richmedia-card-clicked {
+  border: 2px solid #1D5B96!important;
+}
+.richmedia-card-rectangle-clicked {
+  border: 2px solid #1D5B96!important;
+}
+.hover-container .richmedia-card, .hover-container .richmedia-card-rectangle {
+  border: 1px solid #707070;
+}
+.hover-icons {
+  font-size: 20px;
+}
+.richmedia-container {
+  height: 100%;
+  overflow-y: auto;
 }
 .template-form-header {
   margin-bottom: 2.5rem;
@@ -10,4 +46,12 @@
 .wechat-richmedia-row {
   margin-bottom: 1.5rem;
   width: 50rem;
+}
+.overflow-wrap-fields {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }

package/containers/WeChat/RichmediaTemplates/Create/actions.js

@@ -10,7 +10,7 @@ export function defaultAction() {
     type: types.DEFAULT_ACTION,
   };
 }
-export function uploadAsset(file, assetType, fileParams, mode, wechatParams, contentId) {
+export function uploadAsset(file, assetType, fileParams, mode, wechatParams, contentId, uploadId) {
   return {
     type: types.UPLOAD_ASSET_REQUEST,
     file,
@@ -19,6 +19,7 @@ export function uploadAsset(file, assetType, fileParams, mode, wechatParams, con
     mode,
     wechatParams,
     contentId,
+    uploadId,
   };
 }
 export function saveTemplate(template) {
@@ -27,9 +28,9 @@ export function saveTemplate(template) {
     template,
   };
 }
-export function clearAsset() {
+export function clearContentImageStore() {
   return {
-    type: types.CLEAR_ASSET,
+    type: types.CLEAR_CONTENT_ASSET,
   };
 }
 

package/containers/WeChat/RichmediaTemplates/Create/constants.js

@@ -12,3 +12,4 @@ export const CLEAR_ASSET = 'app/containers/Wechat/RichmediaTemplates/Create/CLEA
 export const SAVE_TEMPLATE_REQUEST = 'app/containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_REQUEST';
 export const SAVE_TEMPLATE_SUCCESS = 'app/containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_SUCCESS';
 export const SAVE_TEMPLATE_FAILURE = 'app/containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_FAILURE';
+export const CLEAR_CONTENT_ASSET = 'app/containers/Wechat/RichmediaTemplates/Create/CLEAR_CONTENT_ASSET';