@capillarytech/creatives-library 2.0.70 → 2.0.71

package/v2Containers/Templates/tests/sagas.test.js

@@ -0,0 +1,15 @@
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/Templates/tests/selectors.test.js

@@ -0,0 +1,10 @@
+// import { fromJS } from 'immutable';
+// import { makeSelectTemplatesDomain } from '../selectors';
+
+// const selector = makeSelectTemplatesDomain();
+
+describe('makeSelectTemplatesDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/TemplatesV2/_templatesV2.scss

@@ -0,0 +1,5 @@
+.cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+}

package/v2Containers/TemplatesV2/actions.js

@@ -0,0 +1,16 @@
+
+import * as types from './constants';
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function getTemplates({channel, query}) {
+  return {
+    type: types.GET_TEMPLATES_REQUEST,
+    channel,
+    query,
+  };
+}

package/v2Containers/TemplatesV2/constants.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * TemplatesV2 constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/TemplatesV2/DEFAULT_ACTION';
+export const GET_TEMPLATES_REQUEST = 'app/TemplatesV2/GET_TEMPLATES_REQUEST';
+export const GET_TEMPLATES_SUCESS = 'app/TemplatesV2/GET_TEMPLATES_SUCESS';
+export const GET_TEMPLATES_FAILURE = 'app/TemplatesV2/GET_TEMPLATES_FAILURE';

package/v2Containers/TemplatesV2/index.js

@@ -0,0 +1,217 @@
+/*
+ *
+ * TemplatesV2
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import styled from 'styled-components';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
+import { find, get } 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 CallTask from '../CallTask';
+import Gallery from '../Assets/Gallery';
+import './_templatesV2.scss';
+
+const {CapCustomCardList} = CapCustomCard;
+
+const ComponentWrapper = styled.div`
+${(props) => props.isFullMode ? `
+max-width: 1140px;
+margin: 0 auto;
+width: 100%;
+padding: ${CAP_SPACE_24} 0;
+.ant-tabs-content{
+  margin-top: ${CAP_SPACE_16}
+}
+  ` : `.cap-tab-v2 {
+    height: calc(100vh - 118px);
+  } `}
+  
+ 
+`;
+const MarginTop = styled.div`
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+}
+`;
+export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    const defaultPanes = [
+      {content: <div></div>, tab: 'Sms', key: 'sms'},
+      {content: <div></div>, tab: 'Email', key: 'email'},
+      // {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
+      {content: <div></div>, tab: 'Push notification', key: 'mobilepush'},
+    ];
+    if (props.isFullMode) {
+      defaultPanes.push({content: <div></div>, tab: 'Gallery', key: 'assets'});
+    }
+    if (!props.isFullMode) {
+      defaultPanes.push({content: <div></div>, tab: 'Call Task', key: 'call_task'});
+    }
+    const panes = this.setChannelContent(defaultChannel, defaultPanes);
+    this.state = {
+      selectedChannel: defaultChannel,
+      panes,
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if (this.props.channel !== nextProps.channel) {
+      const panes = this.setChannelContent(nextProps.channel, this.state.panes);
+      this.setState({selectedChannel: nextProps.channel, panes });
+    }
+  }
+  getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
+    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: [<CapIcon type="eye" 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}
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+        </div>
+      </CapSpin>
+
+    </div>);
+  }
+  getGalleryComponent = (location) => <Gallery location={location} isFullMode={this.props.isFullMode}/>
+  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'};
+    }
+    const location = {pathname: `/${channel}`, search: '', query};
+    switch (channel) {
+      case 'call_task':
+        return this.getCallTaskComponent();
+      case 'assets':
+        return this.getGalleryComponent(location);
+      default:
+        return (<Templates
+          key={channel}
+          location={location}
+          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}
+    />);
+    }
+  }
+
+  setChannelContent = (selectedChannel, argsPanes) => {
+    const panes = argsPanes.map((p) => {
+      const pane = p;
+      if (pane.key === selectedChannel) {
+        let channel = selectedChannel;
+        if (channel === "mpush") {
+          channel = "mobilepush";
+        }
+        pane.content = this.getTemplatesComponent(channel);
+        return pane;
+      }
+      return {...pane, content: <div></div>};
+    });
+    return panes;
+  }
+  channelChange = (selectedChannel) => {
+    const panes = this.setChannelContent(selectedChannel, this.state.panes);
+    this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
+  }
+  selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
+
+  isLoading() {
+    return this.props.Templates.loadingTemplates;
+  }
+  render() {
+    const {isFullMode} = this.props;
+    return (
+      <div className={`creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+        {isFullMode && <Helmet
+          title={this.props.intl.formatMessage(messages.creatives)}
+          meta={[
+            { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
+          ]}
+        />}
+        <ComponentWrapper isFullMode={isFullMode}>
+
+          {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
+          <MarginTop isFullMode={isFullMode}>
+            <CapTab
+              panes={this.state.panes}
+              onChange={this.channelChange}
+              activeKey={this.state.selectedChannel}
+              defaultActiveKey={this.state.selectedChannel}/>
+          </MarginTop>
+
+
+        </ComponentWrapper>
+      </div>
+
+    );
+  }
+}
+
+TemplatesV2.propTypes = {
+  router: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  onSelectTemplate: PropTypes.func,
+  createNew: PropTypes.func,
+  channel: PropTypes.string,
+  Templates: PropTypes.object,
+  TemplatesList: PropTypes.arrayOf(PropTypes.object),
+  handlePeviewTemplate: PropTypes.func,
+  onCallTaskSubmit: PropTypes.func,
+  intl: intlShape,
+  onChannelChange: PropTypes.func,
+};
+
+TemplatesV2.defaultProps = {
+  isFullMode: true,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Templates: makeSelectTemplates(),
+  TemplatesList: makeSelectTemplatesResponse(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));

package/v2Containers/TemplatesV2/messages.js

@@ -0,0 +1,29 @@
+/*
+ * TemplatesV2 Messages
+ *
+ * This contains all the text for the TemplatesV2 component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.TemplatesV2.header',
+    defaultMessage: 'This is TemplatesV2 container !',
+  },
+  select: {
+    id: 'app.containers.TemplatesV2.select',
+    defaultMessage: 'Select',
+  },
+  edit: {
+    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/v2Containers/TemplatesV2/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the templatesV2 state domain
+ */
+const selectTemplatesV2Domain = () => (state) => state.get('templatesV2');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by TemplatesV2
+ */
+
+const makeSelectTemplatesV2 = () => createSelector(
+  selectTemplatesV2Domain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectTemplatesV2;
+export {
+  selectTemplatesV2Domain,
+};

package/v2Containers/TemplatesV2/tests/actions.test.js

@@ -0,0 +1,18 @@
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('TemplatesV2 actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/v2Containers/TemplatesV2/tests/index.test.js

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

package/v2Containers/TemplatesV2/tests/reducer.test.js

@@ -0,0 +1,9 @@
+
+import { fromJS } from 'immutable';
+import templatesV2Reducer from '../reducer';
+
+describe('templatesV2Reducer', () => {
+  it('returns the initial state', () => {
+    expect(templatesV2Reducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/v2Containers/TemplatesV2/tests/sagas.test.js

@@ -0,0 +1,15 @@
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/TemplatesV2/tests/selectors.test.js

@@ -0,0 +1,10 @@
+// import { fromJS } from 'immutable';
+// import { makeSelectTemplatesV2Domain } from '../selectors';
+
+// const selector = makeSelectTemplatesV2Domain();
+
+describe('makeSelectTemplatesV2Domain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/TestPage/constants.js

@@ -0,0 +1,7 @@
+/*
+ *
+ * Dashboard constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/containers/TestPage/DEFAULT_ACTION';

package/v2Containers/TestPage/index.js

@@ -0,0 +1,31 @@
+
+import React from "react";
+import SmsTest from '../../components/SmsTest';
+
+export default class TestPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <SmsTest />
+    );
+  }
+}
+
+// const schema = {
+//   title: "Todo",
+//   type: "object",
+//   required: ["title"],
+//   properties: {
+//     title: {type: "string", title: "Title", default: "A new task"},
+//     done: {type: "boolean", title: "Done?", default: false},
+//   },
+// };
+
+// const log = (type) => console.log.bind(console, type);
+
+// render((
+//   <div>
+//     <SmsTest
+//     />
+//   </div>
+// ), document.getElementById("app"));
+//export default TestPage;

package/v2Containers/TestPage/messages.js

@@ -0,0 +1,13 @@
+/*
+ * NotFoundPage Messages
+ *
+ * This contains all the text for the NotFoundPage component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.TestPage.header',
+    defaultMessage: 'Looks like youas are lost!',
+  },
+});

package/v2Containers/TestPage/reducer.js

@@ -0,0 +1,21 @@
+/*
+ *
+ * Dashboard reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import { DEFAULT_ACTION } from './constants';
+
+const initialState = fromJS({});
+
+function TestPageReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default TestPageReducer;

package/v2Containers/TestPage/sagas.js

@@ -0,0 +1,11 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/v2Containers/Testv2/actions.js

@@ -0,0 +1,15 @@
+/*
+ *
+ * Testv2 actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}

package/v2Containers/Testv2/constants.js

@@ -0,0 +1,7 @@
+/*
+ *
+ * Testv2 constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Testv2/DEFAULT_ACTION';

package/v2Containers/Testv2/index.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * Testv2
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { FormattedMessage } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import makeSelectTestv2 from './selectors';
+import messages from './messages';
+
+export class Testv2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div>
+        <Helmet
+          title="Testv2"
+          meta={[
+            { name: 'description', content: 'Description of Testv2' },
+          ]}
+        />
+        <FormattedMessage {...messages.header} />
+      </div>
+    );
+  }
+}
+
+Testv2.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Testv2: makeSelectTestv2(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Testv2);

package/v2Containers/Testv2/messages.js

@@ -0,0 +1,13 @@
+/*
+ * Testv2 Messages
+ *
+ * This contains all the text for the Testv2 component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.Testv2.header',
+    defaultMessage: 'This is Testv2 container !',
+  },
+});

package/v2Containers/Testv2/reducer.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * Testv2 reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+const initialState = fromJS({});
+
+function testv2Reducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default testv2Reducer;

package/v2Containers/Testv2/sagas.js

@@ -0,0 +1,11 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/v2Containers/Testv2/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the testv2 state domain
+ */
+const selectTestv2Domain = () => (state) => state.get('testv2');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by Testv2
+ */
+
+const makeSelectTestv2 = () => createSelector(
+  selectTestv2Domain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectTestv2;
+export {
+  selectTestv2Domain,
+};

package/v2Containers/Testv2/tests/actions.test.js

@@ -0,0 +1,18 @@
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('Testv2 actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/v2Containers/Testv2/tests/index.test.js

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