@capillarytech/creatives-library 2.0.54 → 2.0.57

package/containers/MobilepushWrapper/index.js

@@ -0,0 +1,92 @@
+/*
+ *
+ * MobilepushWrapper
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import {CapRadioCard, CapHeader} from '@capillarytech/cap-ui-library';
+import {isEmpty} from 'lodash';
+import MobilepushCreate from '../MobilePush/Create';
+import messages from './messages';
+
+export class MobilepushWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.modes = [
+      {
+        title: <FormattedMessage {...messages.text}/>,
+        content: <FormattedMessage {...messages.text}/>,
+        value: 'text',
+        // onClick: () => {
+        //   this.emailUploader.current.click();
+        // },
+      },
+      {
+        title: <FormattedMessage {...messages.image}/>,
+        content: <FormattedMessage {...messages.image}/>,
+        value: 'image',
+      },
+    ];
+  }
+  onChange = (e) => {
+    this.props.onMobilepushModeChange( e.target.value );
+  };
+  render() {
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query} = this.props;
+    const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
+    return (
+      <div>
+        {step === "modeSelection" ?
+          <div>
+            <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
+            <CapRadioCard
+              panes={this.modes}
+              onChange={this.onChange}
+              selected={mobilePushCreateMode}
+          />
+          </div>
+        :
+          <div>
+            {isShowMobilepushCreate && <MobilepushCreate
+              getFormLibraryData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              location={{
+                pathname: `/mobilepush/create/${mobilePushCreateMode}`,
+                query,
+              }}
+              params={{mode: mobilePushCreateMode}}
+              isFullMode={false}
+              isGetFormData={isGetFormData}
+              route={{ name: 'mobilepush' }}
+          />
+
+
+          }
+          </div>
+       }
+      </div>
+    );
+  }
+}
+
+MobilepushWrapper.propTypes = {
+  onMobilepushModeChange: PropTypes.func,
+  mobilePushCreateMode: PropTypes.string,
+  step: PropTypes.string,
+  getFormData: PropTypes.string,
+  setIsLoadingContent: PropTypes.func,
+  isGetFormData: PropTypes.bool,
+  query: PropTypes.object,
+};
+
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(null, mapDispatchToProps)(MobilepushWrapper);

package/containers/MobilepushWrapper/messages.js

@@ -0,0 +1,25 @@
+/*
+ * MobilepushWrapper Messages
+ *
+ * This contains all the text for the MobilepushWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.MobilepushWrapper.header',
+    defaultMessage: 'This is MobilepushWrapper container !',
+  },
+  image: {
+    id: 'app.containers.MobilepushWrapper.image',
+    defaultMessage: 'Image content',
+  },
+  text: {
+    id: 'app.containers.MobilepushWrapper.text',
+    defaultMessage: 'Text content',
+  },
+  createMode: {
+    id: 'app.containers.MobilepushWrapper.createMode',
+    defaultMessage: 'Which type of content you want to create?',
+  },
+});

package/containers/MobilepushWrapper/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import { MobilepushWrapper } from '../index';
+
+describe('<MobilepushWrapper />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/Sms/Create/_smsCreate.scss

@@ -32,7 +32,6 @@
 .ant-tabs-extra-content{
   flex: 1;
   align-self: flex-end;
-  padding: 4px;
 }
 
 .version-popover {

package/containers/Sms/Edit/actions.js

@@ -37,3 +37,9 @@ export function clearEditResponse() {
     type: types.CLEAR_EDIT_RESPONSE_REQUEST,
   };
 }
+
+export function resetEditTemplate() {
+  return {
+    type: types.RESET_EDIT_TEMPLATE,
+  };
+}

package/containers/Sms/Edit/constants.js

@@ -15,3 +15,4 @@ export const EDIT_TEMPLATE_SUCCESS = 'app/containers/Sms/Edit/EDIT_TEMPLATE_SUCC
 export const EDIT_TEMPLATE_FAILURE = 'app/containers/Sms/Edit/EDIT_TEMPLATE_FAILURE';
 
 export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/containers/Sms/Create/CLEAR_EDIT_RESPONSE_REQUEST';
+export const RESET_EDIT_TEMPLATE = 'app/containers/Sms/Create/RESET_EDIT_TEMPLATE';

package/containers/Sms/Edit/index.js

@@ -194,6 +194,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
+    this.props.actions.resetEditTemplate();
     window.removeEventListener("message", this.handleFrameTasks);
   }
 

package/containers/Sms/Edit/reducer.js

@@ -42,6 +42,8 @@ function editReducer(state = initialState, action) {
       return state.set('getTemplateDetailsInProgress', false);
     case types.CLEAR_EDIT_RESPONSE_REQUEST:
       return state.set('editResponse', {});
+    case types.RESET_EDIT_TEMPLATE:
+      return state.set('templateDetails', {});
     default:
       return state;
   }

package/containers/TagList/index.js

@@ -82,9 +82,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         console.log('Inside ', tag.label);
         mainTags[tag.value] = {
           'tag-header': true,
-          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
-          desc: tag.desc ? tag.desc : tag.label.en,
-          subtags: tag.subtags,
+          "name": tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          "desc": tag.desc ? tag.desc : tag.label.en,
+          "subtags": tag.subtags,
         };
       }
     });

package/containers/Templates/index.js

@@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import {injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Row, Select, Dropdown, Menu, Modal} from 'antd';
-import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard} from '@capillarytech/cap-ui-library';
+import { Row, Dropdown, Menu, Modal} from 'antd';
+import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapColumn} 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';
@@ -44,7 +44,6 @@ import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 const MenuItem = Menu.Item;
-const Option = Select.Option;
 const {CapCustomCardList} = CapCustomCard;
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -1318,16 +1317,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           if (this.props.location.query.type === 'embedded' && (!this.props.location.query.module || (this.props.location.query.module && this.props.location.query.module !== 'library'))) {
             if (this.props.location.query.source_account_id && account.sourceAccountIdentifier === this.props.location.query.source_account_id) {
               accountOptions.push(
-                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+                { key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  label: account.name,
+                  value: account.name,
+                }
               );
             } else if (this.props.location.query.module && (this.state.channel.toUpperCase() === "WECHAT" || this.state.channel.toUpperCase() === "MOBILEPUSH")) {
               accountOptions.push(
-                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+                {
+                  key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  value: account.name,
+                  label: account.name,
+                }
               );
             }
           } else {
             accountOptions.push(
-              <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+              {
+                key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                value: account.name,
+                label: account.name,
+              }
             );
           }
         }
@@ -1336,17 +1346,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const pageHeader = (
       <div>
         {(this.isEnabledInLibraryModule("showAccountSelection") || (((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type !== 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)))) &&
-          <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
-            {accountOptions}
-          </CapSelect>}
+          <CapSelect
+            className="selectAccount"
+            onSelect={this.onAccountSelect}
+            value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined}
+            placeholder={this.props.intl.formatMessage(messages.selectAccount)}
+            options={accountOptions}
+          />
+           }
       </div>
     );
     const pageHeaderDvs = (
       <div>
         {((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type === 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)) &&
-        <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
-          {accountOptions}
-        </CapSelect>}
+        <CapSelect
+          className="selectAccount"
+          onSelect={this.onAccountSelect}
+          value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}
+          options={accountOptions}
+        />
+          }
       </div>
     );
     let actionButton = '';
@@ -1481,9 +1500,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           onChange={(e) => this.searchTemplate(e.target.value)}
         />
         <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
           <CapButton
             type={this.props.isFullMode ? "primary" : "secondary"}
             disabled={isLoading}
+            style={{marginLeft: '8px'}}
             onClick={(ev) => this.props.isFullMode ? this.createTemplate(ev) : this.handleBlankTemplateAction()} >
             { this.props.intl.formatMessage(messages.createNewActionButton) }
           </CapButton>
@@ -1506,10 +1527,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
     return (
       <div>
-        <Row className="template-header-container">
-          <div className="template-header">{(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}</div>
-        </Row>
-
         <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
 
@@ -1612,6 +1629,7 @@ Templates.propTypes = {
   isFullMode: PropTypes.bool,
   renderNewCardGrid: PropTypes.func,
   handlePeviewTemplate: PropTypes.func,
+  router: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/TemplatesV2/index.js

@@ -22,6 +22,7 @@ import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/s
 import messages from './messages';
 import * as actions from './actions';
 import Templates from '../Templates';
+import CallTask from '../CallTask';
 import './_templatesV2.scss';
 
 const {CapCustomCardList} = CapCustomCard;
@@ -52,8 +53,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     const deafaultPanes = [
       {content: <div></div>, tab: 'Sms', key: 'sms'},
       {content: <div></div>, tab: 'Email', key: 'email'},
+      // {content: <div></div>, tab: 'Call Task', key: 'calltask'},
       // {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      // {content: <div></div>, tab: 'Mpush', key: 'mobilepush'},
+      {content: <div></div>, tab: 'Mpush', key: 'mobilepush'},
     ];
     const panes = this.setChannelContent(defaultChannel, deafaultPanes);
     this.state = {
@@ -94,22 +96,27 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
 
     </div>);
   }
+
+  getCallTaskComponent = () => <CallTask onCreateNew={this.props.createNew} onCallTaskSubmit={this.props.onCallTaskSubmit}/>
+
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
     if (!this.props.isFullMode) {
       query = {type: 'embedded', module: 'library'};
     }
-    return (<Templates
-      key={channel}
-      location={{pathname: `/${channel}`, search: '', query}}
-      route={{name: channel}}
-      router={this.props.router}
-      isFullMode={this.props.isFullMode}
-      createNew={this.props.createNew}
-      onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
-      renderNewCardGrid={this.getTemplateDataForGrid}
-      handlePeviewTemplate={this.props.handlePeviewTemplate}
+    return (channel === 'calltask' ?
+      this.getCallTaskComponent() :
+      <Templates
+        key={channel}
+        location={{pathname: `/${channel}`, search: '', query}}
+        route={{name: channel}}
+        router={this.props.router}
+        isFullMode={this.props.isFullMode}
+        createNew={this.props.createNew}
+        onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
+        renderNewCardGrid={this.getTemplateDataForGrid}
+        handlePeviewTemplate={this.props.handlePeviewTemplate}
     />);
   }
 
@@ -121,6 +128,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         if (channel === "mpush") {
           channel = "mobilepush";
         }
+        if (channel === 'call task') {
+          channel = "calltask";
+        }
         pane.content = this.getTemplatesComponent(channel);
         return pane;
       }
@@ -175,6 +185,7 @@ TemplatesV2.propTypes = {
   Templates: PropTypes.object,
   TemplatesList: PropTypes.arrayOf(PropTypes.object),
   handlePeviewTemplate: PropTypes.func,
+  onCallTaskSubmit: PropTypes.func,
   intl: intlShape,
   onChannelChange: PropTypes.func,
 };

package/index.js

@@ -19,6 +19,10 @@ import Email from './containers/Email/index';
 import emailReducer from './containers/Email/reducer';
 import emailSaga from './containers/Email/sagas';
 
+import CallTask from './containers/CallTask/index';
+import callTaskReducer from './containers/CallTask/reducer';
+import callTaskSaga from './containers/CallTask/sagas';
+
 import WeChat from './containers/WeChat/MapTemplates';
 import wechatReduce from './containers/WeChat/MapTemplates/reducer';
 import wechatSaga from './containers/WeChat/MapTemplates/sagas';
@@ -55,6 +59,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
 const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
 const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
 const EmailContainer = {Email, emailReducer, emailSaga};
+const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
 const WechatContainer = {WeChat, wechatReduce, wechatSaga};
 const MobilePushCreateContainer = {MobilepushCreate, mobilepushCreateReducer, mobilepushCreateSaga};
 const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepushEditSaga};
@@ -68,6 +73,7 @@ export {default as TagListReducer} from './containers/TagList/reducer';
 export {default as TemplatePreview} from './components/TemplatePreview';
 export {default as EmailPreview} from './components/EmailPreview';
 export {default as EmailPreviewV2} from './components/EmailPreviewV2';
+export {default as CallTaskPreview} from './components/CallTaskPreview';
 export {default as EmailMobilePreview} from './components/EmailMobilePreview';
 
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
@@ -77,6 +83,7 @@ export { CapContainer,
   SmsCreateContainer,
   SmsEditContainer,
   EmailContainer,
+  CallTaskContainer,
   WechatContainer,
   Cap,
   Templates,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.54",
+  "version": "2.0.57",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@capillarytech/cap-ui-library": "^1.0.86",
+    "@capillarytech/cap-ui-library": "^1.0.96",
     "antd": "^3.15.0",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",

package/routes.js

@@ -607,21 +607,26 @@ export default function createRoutes(store) {
           import('containers/Sms/Edit/reducer'),
           import('containers/Sms/Edit/sagas'),
           import('containers/Email/reducer'),
-          import('containers/Email/sagas')]);
+          import('containers/Email/sagas'),
+          import('containers/CallTask/reducer'),
+          import('containers/CallTask/sagas'),
+        ]);
 
         const renderRoute = loadModule(cb);
 
-        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer, smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga, emailReducer, emailSaga]) => {
+        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer, smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga, emailReducer, emailSaga, callTaskReducer, callTaskSagas]) => {
           injectReducer('templates', reducer.default);
           injectReducer('create', smsCreateReducer.default);
           injectReducer('creativesContainer', creativesContainerReducer.default);
           injectReducer('edit', smsEditReducer.default);
           injectReducer('email', emailReducer.default);
+          injectReducer('callTask', callTaskReducer.default);
           injectSagas(sagas.default);
           injectSagas(emailContainerSagas.default);
           injectSagas(smsCreateSaga.default);
           injectSagas(smsEditSaga.default);
           injectSagas(emailSaga.default);
+          injectSagas(callTaskSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/styles/containers/layout/_layoutPage.scss

@@ -7,10 +7,9 @@
     margin-right: 0rem !important;
 }
 
-.wrapper{
+.wrapper {
     height: 100%;
     position: relative;
-    font-family: "proxima-nova","open-sans", sans-serif !important;
 }
 
 .main{