@capillarytech/creatives-library 0.1.31 → 1.0.0

package/index.js

@@ -1,10 +1,9 @@
 /*-------Containers--------------*/
-export Cap from './containers/Cap/index';
-export Templates from './containers/Templates/index';
-export SmsCreate from './containers/Sms/Create/index';
-export SmsEdit from './containers/Sms/Edit/index';
-export Email from './containers/Email/index';
-export TagList from './containers/TagList/index';
-export TemplatePreview from './components/TemplatePreview';
-export EmailPreview from './components/EmailPreview';
-export WeChat from './containers/WeChat';
+export Cap from '../app/containers/Cap/index';
+export Templates from '../app/containers/Templates/index';
+export SmsCreate from '../app/containers/Sms/Create/index';
+export SmsEdit from '../app/containers/Sms/Edit/index';
+export Email from '../app/containers/Email/index';
+export TagList from '../app/containers/TagList/index';
+export TemplatePreview from '../app/components/TemplatePreview/index';
+

package/package.json

@@ -1,66 +1,11 @@
 {
   "name": "@capillarytech/creatives-library",
-  "author": "meharaj",
-  "version": "0.1.31",
-  "description": "Capillary creatives ui",
-  "main": "./index.js",
-  "module": "./index.es.js",
-  "jsnext:main": "./index.es.js",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com:Capillary/cap-creatives-ui.git"
+  "version": "1.0.0",
+  "description": "Creatives library for using containers of creatives project.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "license": "LicenseRef-LICENSE",
-  "dependencies": {
-    "@capillarytech/cap-react-ui-library": "latest",
-    "antd": "^2.11.2",
-    "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",
-    "cross-env": "3.1.3",
-    "express": "4.14.0",
-    "fixed-data-table": "^0.6.4",
-    "fontfaceobserver": "2.0.7",
-    "fs": "0.0.1-security",
-    "fs-extra": "^5.0.0",
-    "immutable": "3.8.1",
-    "intl": "1.2.5",
-    "invariant": "2.2.2",
-    "ip": "1.1.4",
-    "jquery": "^3.3.1",
-    "load-script": "^1.0.0",
-    "lodash": "4.17.2",
-    "minimist": "1.2.0",
-    "moment": "2.19.2",
-    "normalizr": "^3.2.3",
-    "perfect-scrollbar": "^0.7.0",
-    "react": "15.4.1",
-    "react-datepicker": "^0.46.0",
-    "react-dom": "15.4.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-router-redux": "4.0.6",
-    "react-router-scroll": "0.4.1",
-    "react-sizeme": "^2.3.2",
-    "redux": "3.6.0",
-    "redux-auth-wrapper": "^1.1.0",
-    "redux-beacon": "^0.4.0",
-    "redux-immutable": "3.0.8",
-    "redux-saga": "0.14.0",
-    "redux-saga-test-plan": "^3.1.0",
-    "reselect": "2.5.4",
-    "sanitize.css": "4.1.0",
-    "semantic-ui-react": "0.68.3",
-    "source-map-loader": "^0.2.4",
-    "styled-components": "1.1.2",
-    "warning": "3.0.0",
-    "whatwg-fetch": "2.0.1"
-  }
+  "author": "",
+  "license": "ISC"
 }

package/app.js

@@ -1,92 +0,0 @@
-import 'babel-polyfill';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import createHistory from 'history/lib/createBrowserHistory';
-import { applyRouterMiddleware, Router, useRouterHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
-import { useScroll } from 'react-router-scroll';
-import Cap from 'containers/Cap';
-import { LocaleProvider } from 'antd';
-import { makeSelectLocationState } from 'containers/Cap/selectors';
-import LanguageProvider from 'containers/LanguageProvider';
-import FontFaceObserver from 'fontfaceobserver';
-/* eslint-disable import/no-unresolved, import/extensions */
-import '!file-loader?name=[name].[ext]!./favicon.ico';
-/* eslint-enable import/no-unresolved, import/extensions */
-import configureStore from './store';
-import { translationMessages } from './i18n';
-import './global-styles';
-import createRoutes from './routes';
-import initialState from './initialState';
-import './styles/vendor/semantic/dist/semantic.min.css';
-import './styles/main.scss';
-import pathConfig from './config/path';
-// addLocaleData([...en, ...es, ...fr, ...it, ...zh]);
-
-const browserHistory = useRouterHistory(createHistory)({
-  basename: pathConfig.publicPath,
-});
-
-const store = configureStore(initialState, browserHistory);
-
-const history = syncHistoryWithStore(browserHistory, store, {
-  selectLocationState: makeSelectLocationState(),
-});
-
-const rootRoute = {
-  component: Cap,
-  childRoutes: createRoutes(store),
-};
-
-const render = (messages) => {
-  ReactDOM.render(
-    <Provider store={store}>
-      <LocaleProvider>
-        <LanguageProvider messages={messages}>
-          <div>
-            <Router
-              history={(history)}
-              routes={rootRoute}
-              render={applyRouterMiddleware(useScroll())
-              }
-            />
-          </div>
-        </LanguageProvider>
-      </LocaleProvider>
-    </Provider>,
-    document.getElementById('app')
-  );
-};
-
-// Hot reloadable translation json files
-if (module.hot) {
-  // modules.hot.accept does not accept dynamic dependencies,
-  // have to be constants at compile-time
-  module.hot.accept('./i18n', () => {
-    render(translationMessages);
-  });
-}
-const openSansObserver = new FontFaceObserver('Open Sans', {});
-// When Open Sans is loaded, add a font-family using Open Sans to the body
-openSansObserver.load().then(() => {
-  document.body.classList.add('fontLoaded');
-}, () => {
-  document.body.classList.remove('fontLoaded');
-});
-
-// Chunked polyfill for browsers without Intl support
-if (!window.Intl) {
-  (new Promise((resolve) => {
-    resolve(import('intl'));
-  }))
-    .then(() => Promise.all([
-      import('intl/locale-data/jsonp/en.js'),
-    ]))
-    .then(() => render(translationMessages))
-    .catch((err) => {
-      throw err;
-    });
-} else {
-  render(translationMessages);
-}

package/components/BreadCrumbs/index.js

@@ -1,64 +0,0 @@
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-import { Link } from 'react-router';
-import _ from 'lodash';
-
-class BreadCrumbs extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.prepareBreadcrumbElement = this.prepareBreadcrumbElement.bind(this);
-    this.disabledBreadcrumb = this.disabledBreadcrumb.bind(this);
-  }
-
-  disabledBreadcrumb(e, location) {
-    if (location.disabled) {
-      e.preventDefault();
-    }
-  }
-
-  prepareBreadcrumbElement() {
-    const breadcrumbs = [];
-    _.forEach(this.props.locations, (location) => {
-      const titleText = (typeof location.text === 'string') ? location.text : location.text.props.defaultMessage;
-      const element = (
-        <Link
-          to={location.url}
-          key={titleText}
-          title={titleText}
-          onClick={(e) => this.disabledBreadcrumb(e, location)}
-        >
-          <span
-            className={location.disabled ? 'disabled-breadcrumb' : 'active-breadcrumb'}
-            disabled={location.disabled}
-          > {location.text}
-          </span>
-        </Link>
-      );
-      if (breadcrumbs.length !== 0) {
-        breadcrumbs.push(
-          <span
-            key={`${titleText}separator`}
-          > {this.props.separator ? this.props.separator : ' / '}
-          </span>
-        );
-      }
-      breadcrumbs.push(element);
-    });
-    return breadcrumbs;
-  }
-
-  render() {
-    return (
-      <div className="breadcrumbs-wrapper">
-        {this.prepareBreadcrumbElement()}
-      </div>
-    );
-  }
-}
-
-BreadCrumbs.propTypes = {
-  locations: PropTypes.array.isRequired,
-  separator: PropTypes.string,
-};
-
-export default BreadCrumbs;

package/components/BreadCrumbs/messages.js

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

package/components/BreadCrumbs/tests/index.test.js

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

package/components/CapTagList/index.js

@@ -1,233 +0,0 @@
-/**
-*
-* CapTagList
-*
-*/
-
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-import { Tree, Input, Spin, Modal } from 'antd';
-import _ from 'lodash';
-// import { CapInput } from '@capillarytech/cap-react-ui-library/basic/input';
-import { injectIntl, intlShape } from 'react-intl';
-import { CapButton, CapPopover, CapSelect, CapInput } from '@capillarytech/cap-react-ui-library';
-import messages from './messages';
-const Search = Input.Search;
-const TreeNode = Tree.TreeNode;
-
-class CapTagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      tagValue: '',
-      expandedKeys: [],
-      searchValue: '',
-      autoExpandParent: true,
-      visible: false,
-      dynamicDateValue: '',
-      showModal: false,
-    };
-    this.renderTags = this.renderTags.bind(this);
-    this.getSearchedExpandedKeys = this.getSearchedExpandedKeys.bind(this);
-  }
-
-  onChange = (e) => {
-    const value = e.target.value;
-    let expandedKeys = this.getSearchedExpandedKeys(this.props.tags, value);
-    if (value === '') {
-      expandedKeys = [];
-    }
-    this.setState({
-      expandedKeys,
-      searchValue: value,
-      autoExpandParent: true,
-    });
-  };
-  onExpand = (expandedKeys, info) => {
-    this.handleOnExpand(info.node.props.eventKey);
-  };
-
-  getSearchedExpandedKeys(tags, value) {
-    let list = [];
-    _.forEach(tags, (val, key) => {
-      if (_.has(val, 'subtags')) {
-        if (val.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
-          list.push(key);
-        }
-        const temp = this.getSearchedExpandedKeys(val.subtags, value);
-        list = list.concat(temp);
-      } else if (val.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
-        list.push(key);
-      }
-    });
-    return list;
-  }
-
-  handleOnChange = (data, e) => {
-    console.log('module data', data, e);
-    this.props.onContextChange(data);
-  };
-
-  handleDynamicDateChange = (data, e) => {
-    console.log('data.target', data.target.value, e);
-    this.setState({dynamicDateValue: data.target.value});
-  };
-
-  handleOk = () => {
-    const days = this.state.dynamicDateValue;
-    let tagValue = this.state.tagValue;
-    tagValue = tagValue.replace("(N)", `${days}`);
-    const resultArray = [];
-    resultArray.push(tagValue);
-    this.props.onSelect(resultArray);
-    this.setState({showModal: false, dynamicDateValue: ''});
-  };
-
-  handleCancel = () => {
-    this.setState({showModal: false, dynamicDateValue: ''});
-  };
-
-  checkIfDynamicTag = (tag) => {
-    const regex = /dynamic_expiry_date_after_\(N\)_days.FORMAT_\d/g;
-    const match = regex.exec(tag);
-    if (match !== null) {
-      return true;
-    }
-    return false;
-  };
-
-  handleOnSelect = (selectedKeys, info) => {
-    if (selectedKeys.length > 0) {
-      if (info && info.selectedNodes && info.selectedNodes.length > 0 && info.selectedNodes[0].props.isLeaf) {
-        this.setState({tagValue: selectedKeys[0]});
-        const ifDynamicTag = this.checkIfDynamicTag(selectedKeys[0]);
-        if (ifDynamicTag) {
-          this.renderDynamicTagFlow();
-        } else {
-          this.props.onSelect(selectedKeys, info);
-          this.setState({visible: false});
-        }
-      } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
-        this.handleOnExpand(selectedKeys[0]);
-      }
-    }
-  };
-
-  handleOnExpand = (key) => {
-    const expandedKeys = this.state.expandedKeys.slice();
-    const index = _.indexOf(expandedKeys, key);
-    if (index !== -1) {
-      expandedKeys.splice(index, 1);
-    } else {
-      expandedKeys.push(key);
-    }
-    this.setState({expandedKeys, autoExpandParent: false});
-  };
-  togglePopoverVisibility = (visible) => {
-    console.log('popover ');
-    this.setState({visible});
-  };
-
-  renderDynamicTagFlow = () => {
-    this.setState({showModal: true, visible: false});
-  };
-
-  renderTags(tags, searchString) {
-    console.log('final tags list', tags);
-    const list = [];
-    _.forEach(tags, (val, key) => {
-      let supportedTagsString = '';
-      _.forEach(val.supportedTags, (supportedTag) => {
-        supportedTagsString += `${supportedTag} ,`;
-      });
-      supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      console.log('supportedTagsString', supportedTagsString);
-      if (_.has(val, 'subtags')) {
-        const temp = this.renderTags(val.subtags);
-        list.push((
-          <TreeNode title={val.name} key={key}>
-            {temp}
-          </TreeNode>
-        ));
-      } else if (searchString === '' || !searchString || val.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1) {
-        const tempNode = (<TreeNode title={val.name} isLeaf key={key}></TreeNode>);
-        list.push(tempNode);
-      }
-    });
-    return list;
-  }
-
-  render() {
-    const tg = this.props.tags;
-    const options = [
-      {
-        value: "All",
-        label: "All",
-      },
-      {
-        value: "Outbound",
-        label: "Outbound",
-      },
-      {
-        value: "Loyalty",
-        label: "Loyalty",
-      },
-    ];
-    return (
-      <div>
-        <CapPopover
-          visible={this.state.visible}
-          onVisibleChange={this.togglePopoverVisibility}
-          content={<div>
-            <Spin tip="Getting tags..." spinning={this.props.loading}>
-              <Search style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
-              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
-              </CapSelect> : ''}
-              <Tree
-                styling={{'height': '350px', 'overflow': 'auto'}}
-                onSelect={this.handleOnSelect}
-                selectedKeys={this.state.tagValue}
-                expandedKeys={this.state.expandedKeys}
-                autoExpandParent={this.state.autoExpandParent}
-                onExpand={this.onExpand}
-              >
-                {this.renderTags(tg, this.state.searchValue)}
-              </Tree>
-            </Spin>
-          </div>}
-          trigger="click"
-          placement="bottomRight">
-          <CapButton icon="plus-circle-o" type="secondary">{this.props.label !== '' ? this.props.label : ''}</CapButton>
-        </CapPopover>
-        <Modal
-          visible={this.state.showModal}
-          title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={[
-            <CapButton key="back" onClick={this.handleCancel}>{this.props.intl.formatMessage(messages.Cancel)}</CapButton>,
-            <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
-              {this.props.intl.formatMessage(messages.Ok)}
-            </CapButton>,
-          ]}
-        >
-          <p>{this.props.intl.formatMessage(messages.numberOfDaysBeforeExpiry)}</p>
-          <CapInput onChange={this.handleDynamicDateChange} value={this.state.dynamicDateValue}></CapInput>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-CapTagList.propTypes = {
-  tags: PropTypes.object,
-  onSelect: PropTypes.func,
-  label: PropTypes.string,
-  onContextChange: PropTypes.func,
-  loading: PropTypes.bool,
-  moduleFilterEnabled: PropTypes.bool,
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CapTagList);

package/components/CapTagList/messages.js

@@ -1,25 +0,0 @@
-/*
- * CapTagList Messages
- *
- * This contains all the text for the CapTagList component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  Ok: {
-    id: 'app.components.CapTagList.Ok',
-    defaultMessage: 'Ok',
-  },
-  numberOfDaysBeforeExpiry: {
-    id: 'app.components.CapTagList.numberOfDaysBeforeExpiry',
-    defaultMessage: 'Number of days before expiry',
-  },
-  Cancel: {
-    id: 'app.components.CapTagList.Cancel',
-    defaultMessage: 'Cancel',
-  },
-  "Dynamic Days before Expiry": {
-    id: 'app.components.CapTagList.dynamic_days_before_expiry',
-    defaultMessage: 'Dynamic Days before Expiry',
-  },
-});

package/components/CapTagList/tests/index.test.js

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

package/components/Card/_customCard.scss

@@ -1,35 +0,0 @@
-.custom-card {
-  &:hover {
-    box-shadow: none !important;
-    border-color: #1D5B96 !important
-  }
-  .ant-card-body {
-    padding: 0px;
-    border-radius: 4px;
-
-    // &:hover {
-    //   border: solid 2px #1D5B96;
-    //   border-radius: 4px;
-    // }
-  }
-
-  .content-wrapper {
-    width: 100%;
-    height: 246px;
-    overflow: hidden;
-    // padding-left: 16px;
-    // padding-right: 8px;
-    // background-image: url('https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/475c8c1b8d07cf1d5e58.png');
-  }
-
-  .footer-wrapper {
-    width: 100%;
-   // height: 64px;
-  }
-
-  .seperator-line{
-    color: #e9e9e9;
-    border-style: solid;
-    border-bottom: none;
-  }
-}

package/components/Card/index.js

@@ -1,76 +0,0 @@
-/**
-*
-* Card
-*
-*/
-
-import React, {PropTypes} from 'react';
-import { Card } from 'antd';
-import './_customCard.scss';
-
-class CustomCard extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.handleMouseHover = this.handleMouseHover.bind(this);
-    this.handleMouseClick = this.handleMouseClick.bind(this);
-    this.state = {
-      isHovering: false,
-      isClicked: false,
-    };
-  }
-
-  handleMouseClick() {
-    this.setState(this.toggleClickedState);
-    this.props.onClick(!this.state.isClicked, this.props.id);
-  }
-
-  toggleClickedState(state) {
-    return {
-      isClicked: !state.isClicked,
-    };
-  }
-
-  handleMouseHover(data) {
-    console.log('hover mouse data', data);
-    this.setState({isHovering: data});
-    this.props.onHover(!this.state.isHovering, this.props.id);
-  }
-
-  toggleHoverState(state) {
-    return {
-      isHovering: !state.isHovering,
-    };
-  }
-
-  render() {
-    return (
-      <Card
-        className="custom-card"
-        id={this.props.id}
-        title={this.props.title}
-        style={{ width: this.props.width, height: this.props.height }}
-        onMouseEnter={() => this.handleMouseHover(true)}
-        onClick={this.handleMouseClick}
-        onMouseLeave={() => this.handleMouseHover(false)}>
-        <div>
-          <div className="content-wrapper">{this.props.content}</div>
-          {this.props.footer ? <hr className="seperator-line" /> : ''}
-          {this.props.footer ? <div className="footer-wrapper">{this.props.footer}</div> : ''}
-        </div>
-      </Card>
-    );
-  }
-}
-
-CustomCard.propTypes = {
-  content: PropTypes.element.isRequired,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  footer: PropTypes.element,
-  title: PropTypes.string,
-  onHover: PropTypes.func,
-  onClick: PropTypes.func,
-  id: PropTypes.string.isRequired,
-};
-
-export default CustomCard;

package/components/Card/tests/index.test.js

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