@capillarytech/creatives-library 2.0.38 → 2.0.39

package/components/PreviewSideBar/index.js

@@ -7,7 +7,6 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import moment from "moment";
 import { CapButton } from '@capillarytech/cap-ui-library';
 // import styled from 'styled-components';
 
@@ -49,7 +48,6 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
   }
   render() {
     console.log('preview sidebar', this.props);
-    const modeTypeLine = this.props.templateData.modeType; // expected: (text or image)
     let content = '';
     if (this.props.channel.toLowerCase() === 'wechat') {
       console.log('Template Infog ', this.props.templateData);
@@ -104,6 +102,7 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
                 device={this.state.device === "android" ? "android" : "iphone"}
                 channel={this.props.channel}
                 content={content || ''}
+                templateData={this.props.templateData}
               >
               </TemplatePreview>
               :
@@ -113,11 +112,10 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
                 location={this.props.location}
                 charCounterEnabled={this.props.channel.toLowerCase() === 'sms'}
                 unicodeEnabled={this.props.channel.toLowerCase() === 'sms'}
+                templateData={this.props.templateData}
               >
               </TemplatePreview>
             }
-            <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData).format('MM-DD-YYYY')}</p>
-            <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>
             <hr className="seperator-line" />
             <div className="preview-action-container" style={{margin: '16px'}}>
               {this.props.channel.toLowerCase() === 'sms' && !this.props.embedded && <CapButton onClick={() => this.goToDuplicate()}className="preview-buttons" style={{marginRight: '8px'}} type="secondary"><FormattedMessage {...messages.duplicate} /></CapButton>}

package/components/TemplatePreview/index.js

@@ -8,11 +8,11 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, intlShape} from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn} from '@capillarytech/cap-ui-library'
+import {CapColumn} from '@capillarytech/cap-ui-library';
+import moment from 'moment';
 import './_templatePreview.scss';
-import * as charCount from '../../utils/smsCharCount';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
@@ -54,14 +54,14 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     }
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-        { channel && channel.toLowerCase() === 'sms'&&
+        { channel && channel.toLowerCase() === 'sms' &&
           <div className="shell align-center" id="sms-preview">
             <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
             <div className="msgContainer sms">
               <img className="sms-icon" src={smsIcon} alt="Sms icon" />
               <div className={"message-pop sms"}>
                 {content && content.length && content.map((msg) =>
-                  <CapColumn className="message-pop-item align-left" style={{ background:  '#3F51B5', color:  '#ffffff'}}>
+                  <CapColumn className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
                     {msg}
                   </CapColumn>)
                 }
@@ -156,6 +156,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
             : ''
         }
+        {this.props.templateData &&
+          [<p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
+            <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
+          ]
+        }
       </div>
     );
   }
@@ -171,6 +176,7 @@ TemplatePreview.propTypes = {
   intl: intlShape.isRequired,
   device: PropTypes.string,
   unicodeEnabled: PropTypes.bool,
+  templateData: PropTypes.object,
 };
 
 export default (injectIntl(TemplatePreview));

package/components/TemplatePreview/messages.js

@@ -26,4 +26,12 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
+  lastModified: {
+    id: 'app.components.PreviewSideBar.lastModified',
+    defaultMessage: 'Last Modified On',
+  },
+  uploadedBy: {
+    id: 'app.components.PreviewSideBar.uploadedBy',
+    defaultMessage: 'Last Modified By',
+  },
 });

package/containers/CreativesContainer/SlideBoxContent.js

@@ -80,6 +80,7 @@ function SlideBoxContent(props) {
         content={templateData.versions.base['sms-editor']}
         channel={templateData.type.toLowerCase()}
         charCounterEnabled
+        templateData={this.props.templateData}
       />
         )}
       {isEmailPreview && (

package/containers/CreativesContainer/index.js

@@ -14,10 +14,13 @@ import SlideBoxContent from './SlideBoxContent';
 import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
 import * as constants from './constants';
+import * as commonUtil from '../../utils/common';
+
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
 import {isLoading as isLoadingSelector} from './selectors';
+import {templateUserList} from '../Templates/selectors';
 
 const classPrefix = 'add-creatives-section';
 class Creatives extends React.Component {
@@ -47,7 +50,9 @@ class Creatives extends React.Component {
     this.setState({ slidBoxContent: 'editTemplate', templateData: template });
   };
   onPreviewTemplate = (template) => {
-    this.setState({ slidBoxContent: 'preview', templateData: template });
+    const templateData = template;
+    templateData.updatedByName = commonUtil.getUserNameById(parseInt(template.updatedBy, 10), commonUtil.getMergedUserList(this.props.templateUserList));
+    this.setState({ slidBoxContent: 'preview', templateData });
   };
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
@@ -156,10 +161,16 @@ class Creatives extends React.Component {
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
+  showFooter = () => {
+    const {slidBoxContent, currentChannel, emailCreateMode, templateStep} = this.state;
 
+    const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplate';
+    const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+    return (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview');
+  }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isLoading} = this.props;
+    const {isFullMode, creativesMode, cap} = this.props;
     return (
       <div className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
         <CapSlideBox
@@ -197,7 +208,7 @@ class Creatives extends React.Component {
               cap={cap}
             />
           }
-          footer={!isFullMode &&
+          footer={!isFullMode && this.showFooter() &&
             <SlideBoxFooter
               messages={this.props.messages}
               onSave={this.saveMessage}
@@ -231,10 +242,12 @@ Creatives.propTypes = {
   templateActions: PropTypes.object,
   globalActions: PropTypes.object,
   cap: PropTypes.object,
-  isLoading: PropTypes.bool,
+  // isLoading: PropTypes.bool,
+  templateUserList: PropTypes.array,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),
+  templateUserList: templateUserList(),
 });
 function mapDispatchToProps(dispatch) {
   return {

package/containers/Templates/selectors.js

@@ -20,6 +20,11 @@ const makeSelectTemplates = () => createSelector(
   (substate) => substate.toJS()
 );
 
+const templateUserList = () => createSelector(
+  makeSelectTemplates(),
+  (substate) => substate.userList || [],
+);
+
 const makeSelectTemplatesResponse = () => createSelector(
   selectTemplatesDomain(), (templatesState) => templatesState.get('templates')
 );
@@ -56,5 +61,6 @@ const selectEdmEditor = () => createSelector(makeSelectTemplates(), (templates)
   return edmTemplate || null;
 });
 export {
+  templateUserList,
   makeSelectTemplates, makeSelectTemplatesResponse, selectTemplateContent, selectEmailLayout, selectCmsTemplates, selectEdmEditor,
 };

package/containers/TemplatesV2/index.js

@@ -36,7 +36,9 @@ padding: ${CAP_SPACE_24} 0;
 .ant-tabs-content{
   margin-top: ${CAP_SPACE_16}
 }
-  ` : ` `}
+  ` : `.cap-tab-v2 {
+    height: calc(100vh - 118px);
+  } `}
   
  
 `;

package/package.json

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

package/routes.js

@@ -560,15 +560,28 @@ export default function createRoutes(store) {
           import('containers/TemplatesV2'),
           import('containers/Email/sagas'),
           import('containers/CreativesContainer/reducer'),
+          import('containers/Sms/create/reducer'),
+          import('containers/Sms/create/sagas'),
+          import('containers/Sms/Edit/reducer'),
+          import('containers/Sms/Edit/sagas'),
+          import('containers/Email/reducer'),
+          import('containers/Email/sagas'),
         ]);
 
         const renderRoute = loadModule(cb);
 
-        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer]) => {
+        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer, smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga, emailReducer, emailSaga]) => {
           injectReducer('templates', reducer.default);
+          injectReducer('create', smsCreateReducer.default);
+          injectReducer('creativesContainer', creativesContainerReducer.default);
+          injectReducer('edit', smsEditReducer.default);
+          injectReducer('email', emailReducer.default);
           injectSagas(sagas.default);
           injectSagas(emailContainerSagas.default);
-          injectReducer('creativesContainer', creativesContainerReducer.default);
+          injectSagas(smsCreateSaga.default);
+          injectSagas(smsEditSaga.default);
+          injectSagas(emailSaga.default);
+
           renderRoute(component);
         });