@capillarytech/creatives-library 1.0.2 → 2.0.0

package/app.js

@@ -1,150 +1,92 @@
-/**
- * app.js
- *
- * This is the entry file for the application, only setup and boilerplate
- * code.
- */
-
-// Needed for redux-saga es6 generator support
-import '@babel/polyfill';
+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';
-import Bugsnag from '@bugsnag/js';
-import BugsnagPluginReact from '@bugsnag/plugin-react';
-import 'sanitize.css/sanitize.css';
-
-import SomethingWentWrong from './components/molecules/SomethingWentWrong';
-
-// Import root app
-import App from './components/pages/App';
-
-import LanguageProvider from './components/pages/LanguageProvider';
-
 /* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./favicon.ico';
-import 'file-loader?name=.htaccess!./.htaccess';
 /* eslint-enable import/no-unresolved, import/extensions */
-
-import configureStore from './configureStore';
-import initialState from './initialState';
+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 openSansObserver = new FontFaceObserver('Roboto', {});
-
-// When Roboto is loaded, add a font-family using Robotot to the body
-openSansObserver
-  .load()
-  .then(() => {
-    document.body.classList.add('fontLoaded');
-  })
-  .catch(err => {
-    Bugsnag.notify(err);
-    console.log(err);
-  });
-
-// Create redux store with history
-const store = configureStore(initialState, history);
-const MOUNT_NODE = document.getElementById('loyalty-app');
-
-const bugSnagErrorCallback = event => {
-  const { app: { releaseStage } = {} } = event || {};
-  if (
-    //(releaseStage || '').includes('nightly') ||
-    process.env.NODE_ENV !== 'production'
-  ) {
-    return false;
-  }
-  let userId;
-  let userName;
-  let userEmail;
-  let orgId;
-  let currentOrgName;
-  try {
-    const { id, firstName, lastName, loginName } = JSON.parse(
-      window.localStorage.getItem('user'),
-    );
-    orgId = window.localStorage.getItem('orgID');
-    userId = id;
-    userName = `${firstName} ${lastName}`;
-    userEmail = loginName;
-    currentOrgName = window.localStorage.getItem('currentOrgName');
-  } catch (error) {
-    userId = '';
-    userName = '';
-    userEmail = '';
-    orgId = '';
-    currentOrgName = '';
-  }
-  event.addMetadata('org', {
-    name: currentOrgName,
-    id: orgId,
-  });
-  event.setUser(userId, userEmail, userName);
-  if (window.FS && window.FS.getCurrentSessionURL) {
-    event.addMetadata('fullstory', {
-      sessionURL: window.FS.getCurrentSessionURL(true),
-    });
-  }
-};
-
-Bugsnag.start({
-  // eslint-disable-next-line no-undef
-  appVersion: BUGSNAG_APP_VERSION,
-  // eslint-disable-next-line no-undef
-  apiKey: BUGSNAG_API_KEY,
-  releaseStage: window.location.hostname,
-  plugins: [new BugsnagPluginReact()],
-  onError: bugSnagErrorCallback,
+const browserHistory = useRouterHistory(createHistory)({
+  basename: pathConfig.publicPath,
 });
 
-const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);
+const store = configureStore(initialState, browserHistory);
 
-export const BugsnagClient = Bugsnag;
+const history = syncHistoryWithStore(browserHistory, store, {
+  selectLocationState: makeSelectLocationState(),
+});
 
-const ErrorScreen = () => <SomethingWentWrong />;
+const rootRoute = {
+  component: Cap,
+  childRoutes: createRoutes(store),
+};
 
-const render = messages => {
+const render = (messages) => {
   ReactDOM.render(
     <Provider store={store}>
-      <ErrorBoundary FallbackComponent={ErrorScreen}>
+      <LocaleProvider>
         <LanguageProvider messages={messages}>
-          <App />
+          <div>
+            <Router
+              history={(history)}
+              routes={rootRoute}
+              render={applyRouterMiddleware(useScroll())
+              }
+            />
+          </div>
         </LanguageProvider>
-      </ErrorBoundary>
+      </LocaleProvider>
     </Provider>,
-    MOUNT_NODE,
+    document.getElementById('app')
   );
 };
 
+// Hot reloadable translation json files
 if (module.hot) {
-  // Hot reloadable React components and translation json files
   // modules.hot.accept does not accept dynamic dependencies,
   // have to be constants at compile-time
-  module.hot.accept(['./i18n', 'components/pages/App'], () => {
-    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
+  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 => {
+  (new Promise((resolve) => {
     resolve(import('intl'));
-  })
-    .then(() => Promise.all([import('intl/locale-data/jsonp/en')]))
+  }))
+    .then(() => Promise.all([
+      import('intl/locale-data/jsonp/en.js'),
+    ]))
     .then(() => render(translationMessages))
-    .catch(err => {
+    .catch((err) => {
       throw err;
     });
 } else {
   render(translationMessages);
 }
-
-// Install ServiceWorker and AppCache in the end since
-// it's not most important operation and if main code fails,
-// we do not want it installed
-if (process.env.NODE_ENV === 'production') {
-  require('offline-plugin/runtime').install(); // eslint-disable-line global-require
-}

package/components/BreadCrumbs/index.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React 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

@@ -0,0 +1,13 @@
+/*
+ * 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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,233 @@
+/**
+*
+* CapTagList
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { CapTree, CapSpin, CapModal, CapTreeNode, CapInputSearch } from '@capillarytech/cap-ui-library';
+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';
+
+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((
+          <CapTreeNode title={val.name} key={key}>
+            {temp}
+          </CapTreeNode>
+        ));
+      } else if (searchString === '' || !searchString || val.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1) {
+        const tempNode = (<CapTreeNode title={val.name} isLeaf key={key}></CapTreeNode>);
+        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>
+            <CapSpin tip="Getting tags..." spinning={this.props.loading}>
+              <CapInputSearch 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> : ''}
+              <CapTree
+                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)}
+              </CapTree>
+            </CapSpin>
+          </div>}
+          trigger="click"
+          placement="bottomRight">
+          <CapButton icon="plus-circle-o" type="secondary">{this.props.label !== '' ? this.props.label : ''}</CapButton>
+        </CapPopover>
+        <CapModal
+          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>
+        </CapModal>
+      </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

@@ -0,0 +1,25 @@
+/*
+ * 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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,35 @@
+.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

@@ -0,0 +1,78 @@
+/**
+*
+* Card
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React 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

@@ -0,0 +1,10 @@
+// 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);
+  });
+});