@capillarytech/creatives-library 2.0.77 → 2.0.78

package/containers/MobilepushWrapper/_mobilepushWrapper.scss

@@ -0,0 +1,18 @@
+.mobilepush-wrapper {
+    .ant-card-body {
+        padding: unset;
+    }
+   
+    .ant-radio-group.cap-radioCard-v2 {
+        .ant-radio-button-wrapper{
+            width: 258px;
+            height: 258px;
+        }
+        .radio-card-header {
+            margin-top: 8px; 
+            margin-left: 16px;
+        }
+    }
+    
+    
+}

package/containers/MobilepushWrapper/index.js

@@ -0,0 +1,97 @@
+/*
+ *
+ * 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 WithImage from '../../assets/WithImage1';
+import WithNoImage from '../../assets/NoImage1';
+import messages from './messages';
+import './_mobilepushWrapper.scss';
+export class MobilepushWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.modes = [
+
+      {
+        title: <FormattedMessage {...messages.image}/>,
+        content: <WithImage height="248px" width={"248px"}/>,
+        value: 'image',
+      },
+      {
+        title: <FormattedMessage {...messages.text}/>,
+        content: <WithNoImage height="124px" width={"248px"}/>,
+        value: 'text',
+        // onClick: () => {
+        //   this.emailUploader.current.click();
+        // },
+      },
+    ];
+  }
+  onChange = (e) => {
+    this.props.onMobilepushModeChange( e.target.value );
+  };
+  render() {
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode} = this.props;
+    const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
+    return (
+      <div className="mobilepush-wrapper">
+        {step === "modeSelection" ?
+          <div>
+            <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
+            <CapRadioCard
+              panes={this.modes}
+              cardHeight={"286px"}
+              onChange={this.onChange}
+              selected={mobilePushCreateMode}
+          />
+          </div>
+        :
+          <div>
+            {isShowMobilepushCreate && <MobilepushCreate
+              getFormLibraryData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              location={{
+                pathname: `/mobilepush/create/${mobilePushCreateMode}`,
+                query,
+              }}
+              params={{mode: mobilePushCreateMode}}
+              isFullMode={isFullMode}
+              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,
+  isFullMode: PropTypes.bool,
+};
+
+
+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/TemplatesV2/_templatesV2.scss

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

package/containers/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/containers/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/containers/TemplatesV2/index.js

@@ -0,0 +1,207 @@
+/*
+ *
+ * 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 './_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: 'Mpush', key: 'mobilepush'},
+    ];
+    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>);
+  }
+
+  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 (channel === 'call_task' ?
+      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}
+    />);
+  }
+
+  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>
+        {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/containers/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/containers/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/containers/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/containers/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/containers/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/containers/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/containers/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);
+  });
+});