@capillarytech/creatives-library 2.0.33 → 2.0.35

package/containers/TemplatesV2/index.js

@@ -8,18 +8,37 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { CapTab, CapCustomCard, CapIcons, CapButton } from '@capillarytech/cap-ui-library';
+import styled from 'styled-components';
+import { CapTab, CapCustomCard, CapIcons, CapButton, CapHeader } from '@capillarytech/cap-ui-library';
 import { find } from 'lodash';
+import Helmet from 'react-helmet';
+
+import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
 import * as actions from './actions';
 import Templates from '../Templates';
+import './_templatesV2.scss';
+
 const { View } = CapIcons;
 const {CapCustomCardList} = CapCustomCard;
+
+const ComponentWrapper = styled.div`
+  max-width: 1140px;
+  margin: 0 auto;
+  width: 100%;
+  padding: ${CAP_SPACE_24} 0;
+  .ant-tabs-content{
+    margin-top: ${CAP_SPACE_16}
+  }
+`;
+const MarginTop = styled.div`
+  margin-top: ${CAP_SPACE_24}
+`;
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -42,18 +61,27 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       this.setState({selectedChannel: nextProps.channel, panes });
     }
   }
-  getTemplateDataForGrid = ({templates, handlers, filterContent}) => {
-    const cardDataList = templates.map((template) => (
-      {
-        title: template.name,
-        content: template.versions.base['sms-editor'],
-        extra: [<View onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }} />],
-        hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.edit : messages.select)}</CapButton>,
-      }));
+  getTemplateDataForGrid = ({templates, handlers, filterContent, channel}) => {
+    const currentChannel = channel.toUpperCase();
+    const cardDataList = templates.map((template) => {
+      const templateData =
+        {
+          key: `${currentChannel}-card-${template.name}`,
+          title: <span title={template.name} >{template.name}</span>,
+          extra: [<View onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }} />],
+          hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.edit : messages.select)}</CapButton>,
+        };
+      if (currentChannel === "SMS") {
+        templateData.content = template.versions.base['sms-editor'];
+      } else if (currentChannel === "EMAIL") {
+        templateData.url = template.versions.base.preview_http_url;
+      }
+      return templateData;
+    });
     return (<div>
       {filterContent}
       <div className="pagination-container">
-        <CapCustomCardList cardList={cardDataList} type="SMS" />
+        <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
       </div>
     </div>);
   }
@@ -88,7 +116,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   }
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
-    this.setState({panes, selectedChannel}, () => { this.props.onChannelChange(selectedChannel); });
+    this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
   }
   selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
 
@@ -96,15 +124,28 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
+    const {isFullMode} = this.props;
     return (
       <div>
-        <CapTab
-          panes={this.state.panes}
-          onChange={this.channelChange}
-          activeKey={this.state.selectedChannel}
-          defaultActiveKey={this.state.selectedChannel}/>
+        {isFullMode && <Helmet
+          title={this.props.intl.formatMessage(messages.creatives)}
+          meta={[
+            { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
+          ]}
+        />}
+        <ComponentWrapper>
+
+          <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>
+          <MarginTop>
+            <CapTab
+              panes={this.state.panes}
+              onChange={this.channelChange}
+              activeKey={this.state.selectedChannel}
+              defaultActiveKey={this.state.selectedChannel}/>
+          </MarginTop>
 
 
+        </ComponentWrapper>
       </div>
 
     );

package/containers/TemplatesV2/messages.js

@@ -18,4 +18,12 @@ export default defineMessages({
     id: 'app.containers.TemplatesV2.edit',
     defaultMessage: 'Edit',
   },
+  creatives: {
+    id: 'app.containers.TemplatesV2.creatives',
+    defaultMessage: 'Creatives',
+  },
+  creativesDesc: {
+    id: 'app.containers.TemplatesV2.creativesDesc',
+    defaultMessage: 'These are pre-built templates which you could use to customize your message content.',
+  },
 });

package/containers/WeChat/index.js

@@ -12,7 +12,6 @@ import { bindActionCreators } from 'redux';
 import Helmet from 'react-helmet';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-// import { CapButton, CapSelect } from '@capillarytech/cap-react-ui-library';
 import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
 import { makeSelectTemplates } from '../Templates/selectors';
@@ -23,6 +22,7 @@ import * as actions from './actions';
 import FormBuilder from '../../components/FormBuilder';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import * as globalActions from '../../containers/Cap/actions';
+import * as templateActions from '../../containers/Templates/actions';
 import {getMessageObject} from '../../utils/messageUtils';
 // import SlideBox from '../../components/SlideBox';
 // import PageHeader from '../../components/PageHeader';
@@ -404,6 +404,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
           sortBy: 'Most Recent',
           wecrmId: this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id,
           wecrmToken: this.props.Templates.selectedWeChatAccount.configs.wecrm_token,
+          originalId: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
         };
         this.props.actions.getDefaultWeChatTemplates('wechat', params);
       } else {
@@ -544,6 +545,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
           sortBy: 'Most Recent',
           wecrmId: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_app_id,
           wecrmToken: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_token,
+          originalId: nextProps.WeChat.selectedWeChatAccount.sourceAccountIdentifier,
         };
         this.props.actions.getDefaultWeChatTemplates('wechat', params);
       }
@@ -600,11 +602,11 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
   componentWillUnmount() {
     console.log('removed listener create');
     window.removeEventListener("message", this.handleFrameTasks);
+    this.props.templateActions.resetTemplate();
     this.resetState();
   }
 
   onFormDataChange(formData) {
-    console.log('Form Data Change ', formData);
     let selectedWechatTemplateIndex = -1;
     let selectedTemplate = {};
     let selectedTemplateData = {};
@@ -643,6 +645,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
       selectedWechatTemplateIndex = _.findIndex(this.props.WeChat.weChatDefaultTemplate, {template_id: formData['wechat-template']});
       selectedTemplate = this.props.WeChat.weChatDefaultTemplate[selectedWechatTemplateIndex];
     }
+
     if (!_.isEqual(formData['wechat-template'], this.state.formData['wechat-template'])) {
       this.updateSchema = true;
     }
@@ -1150,10 +1153,15 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
 
   setTemplateOptions(weChatData) {
     console.log('Set Templates ', weChatData);
-    const {schema, baseSchema} = this.state;
-    // const schema = _.cloneDeep(this.state.schema);
-    // const baseSchema = _.cloneDeep(this.state.baseSchema);
+    //const {schema, baseSchema} = this.state;
+    const schema = _.cloneDeep(this.state.schema);
+    const baseSchema = _.cloneDeep(this.state.baseSchema);
     const baseSchemaTemplateOptionEmpty = (!_.isEmpty(baseSchema) && _.isEmpty(baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options));
+    schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
+    if (!_.isEmpty(baseSchema)) {
+      baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
+    
+    } 
     _.forEach(weChatData, (template) => {
       schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options.push({
         key: (template.versions) ? template.versions.base.template_id : template.template_id,
@@ -1607,6 +1615,7 @@ WeChat.propTypes = {
   getLibraryFormData: PropTypes.func,
   getDefaultTags: PropTypes.string,
   templateData: PropTypes.object,
+  templateActions: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1619,6 +1628,7 @@ function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
+    templateActions: bindActionCreators(templateActions, dispatch),
   };
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.33",
+  "version": "2.0.35",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,13 +12,12 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@capillarytech/cap-react-ui-library": "latest",
-    "@capillarytech/cap-ui-library": "^1.0.47",
-    "antd": "^3.13.1",
+    "@capillarytech/cap-react-ui-library": "^1.11.10",
+    "@capillarytech/cap-ui-library": "^1.0.77",
+    "antd": "^3.15.0",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",
     "babel-preset-env": "^1.6.1",
-    "c3": "^0.4.11",
     "chalk": "1.1.3",
     "chevrotain": "*",
     "compression": "1.6.2",
@@ -40,16 +39,17 @@
     "normalizr": "^3.2.3",
     "perfect-scrollbar": "^0.7.0",
     "prop-types": "^15.7.2",
-    "react": "15.4.1",
+    "react": "^16.8.1",
     "react-datepicker": "^0.46.0",
-    "react-dom": "15.4.1",
+    "react-dom": "^16.8.1",
     "react-grid-layout": "^0.14.6",
-    "react-helmet": "3.2.2",
-    "react-intl": "2.1.5",
-    "react-redux": "4.4.6",
-    "react-router": "3.0.0",
+    "react-helmet": "^5.0.3",
+    "react-intl": "^2.4.0",
+    "react-redux": "^5.0.4",
+    "react-router": "^3.2.0",
+    "react-router-dom": "^4.2.2",
     "react-router-redux": "4.0.6",
-    "react-router-scroll": "0.4.1",
+    "react-router-scroll": "^0.4.3",
     "react-sizeme": "^2.3.2",
     "redux": "3.6.0",
     "redux-auth-wrapper": "^1.1.0",
@@ -61,7 +61,7 @@
     "sanitize.css": "4.1.0",
     "semantic-ui-react": "0.68.3",
     "source-map-loader": "^0.2.4",
-    "styled-components": "2",
+    "styled-components": "^3.2.1",
     "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"
   }

package/routes.js

@@ -251,6 +251,7 @@ export default function createRoutes(store) {
           injectReducer('weChat', reducer.default);
           injectSagas(sagas.default);
           injectSagas(rootSaga.default);
+          injectSagas(templateSagas.default);
           renderRoute(component);
         });
 
@@ -558,14 +559,16 @@ export default function createRoutes(store) {
           import('containers/Templates/sagas'),
           import('containers/TemplatesV2'),
           import('containers/Email/sagas'),
+          import('containers/CreativesContainer/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
 
-        importModules.then(([reducer, sagas, component, emailContainerSagas]) => {
+        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer]) => {
           injectReducer('templates', reducer.default);
           injectSagas(sagas.default);
           injectSagas(emailContainerSagas.default);
+          injectReducer('creativesContainer', creativesContainerReducer.default);
           renderRoute(component);
         });