@capillarytech/creatives-library 0.0.1

package/containers/Assets/Gallery/sagas.js

@@ -0,0 +1,84 @@
+import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../../services/api';
+import * as types from './constants';
+
+export function* getAllAssets(assetType, queryParams) {
+  try {
+    const result = yield call(Api.getAllAssets, assetType, queryParams);
+    yield put({ type: types.GET_ALL_ASSETS_SUCCESS, data: result.data.response, isReset: assetType.queryParams.page === 1 });
+  } catch (error) {
+    yield put({ type: types.GET_ALL_ASSETS_FAILURE, error });
+  }
+}
+
+export function* uploadAsset(file, assetType, fileParams) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    yield put({ type: types.UPLOAD_ASSET_SUCCESS, data: result.response.asset, statusCode: result.status ? result.status.code : '' });
+  } catch (error) {
+    yield put({ type: types.UPLOAD_ASSET_FAILURE, error });
+  }
+}
+
+export function* deleteAssetById(assetId, assetType) {
+  try {
+    const result = yield call(Api.deleteAssetById, assetId, assetType);
+    console.log(result);
+    yield put({ type: types.DELETE_ASSET_SUCCESS, data: result.response });
+  } catch (error) {
+    yield put({ type: types.DELETE_ASSET_FAILURE, error });
+  }
+}
+
+export function* fetchUserList() {
+  try {
+    const result = yield call(Api.getUserList);
+    yield [
+      put({
+        type: types.GET_USER_LIST_SUCCESS,
+        data: result.data.result,
+      }),
+    ];
+  } catch (error) {
+    yield [
+      put({
+        type: types.GET_USER_LIST_FAILURE,
+        data: error,
+      }),
+    ];
+  }
+}
+
+
+function* watchGetAllAssets() {
+  const watcher = yield takeLatest(types.GET_ALL_ASSETS_REQUEST, getAllAssets);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchDeleteAssetById() {
+  const watcher = yield takeLatest(types.DELETE_ASSET_REQUEST, deleteAssetById);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchUploadAsset() {
+  const watcher = yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetUserList() {
+  const watcher = yield takeLatest(types.GET_USER_LIST_REQUEST, fetchUserList);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchGetAllAssets,
+  watchUploadAsset,
+  watchDeleteAssetById,
+  watchGetUserList,
+];

package/containers/Assets/Gallery/selectors.js

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

package/containers/Assets/Gallery/tests/__snapshots__/reducer.test.js.snap

@@ -0,0 +1,7 @@
+exports[`galleryReducer Initial State should match snapshot returns the initial state 1`] = `
+Object {
+  "assetList": Array [],
+  "assetUploading": false,
+  "fetchingAllAssets": false,
+}
+`;

package/containers/Assets/Gallery/tests/actions.test.js

@@ -0,0 +1,26 @@
+
+import * as actions from '../actions';
+import * as types from '../constants';
+
+describe('Gallery actions', () => {
+  describe('uploadAsset', () => {
+    it('has a type of UPLOAD_ASSET_REQUEST', () => {
+      const expected = {
+        type: types.UPLOAD_ASSET_REQUEST,
+        file: 'test',
+        assetType: 'IMAGE',
+      };
+      expect(actions.uploadAsset('test', 'IMAGE')).toEqual(expected);
+    });
+  });
+
+  describe('getAllAssets', () => {
+    it('has a type of GET_ALL_ASSETS_REQUEST', () => {
+      const expected = {
+        type: types.GET_ALL_ASSETS_REQUEST,
+        assetType: 'IMAGE',
+      };
+      expect(actions.getAllAssets('IMAGE')).toEqual(expected);
+    });
+  });
+});

package/containers/Assets/Gallery/tests/index.test.js

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

package/containers/Assets/Gallery/tests/reducer.test.js

@@ -0,0 +1,95 @@
+
+import { fromJS } from 'immutable';
+import galleryReducer from '../reducer';
+import * as types from '../constants';
+import * as actions from '../actions';
+
+describe('galleryReducer', () => {
+  describe('Initial State should match snapshot', () => {
+    it('returns the initial state', () => {
+      expect(galleryReducer(undefined, {})).toMatchSnapshot();
+    });
+  });
+
+  describe('Request for all assets', () => {
+    const initialState = fromJS({
+      assetList: [],
+      fetchingAllAssets: false,
+      fetchAllAssetSuccess: false,
+    });
+    const requestAction = actions.getAllAssets('IMAGE');
+    const stateOnRequest = galleryReducer(initialState, requestAction);
+    const successStateExpected = {
+      assetList: [
+        {
+          _id: '5678fdghfh',
+        },
+        {
+          _id: '5678fdghfh5',
+        },
+      ],
+      fetchingAllAssets: false,
+      fetchAllAssetSuccess: true,
+    };
+    const successAction = {
+      type: types.GET_ALL_ASSETS_SUCCESS,
+      data: {
+        assets: [
+          {
+            _id: '5678fdghfh',
+          },
+          {
+            _id: '5678fdghfh5',
+          },
+        ],
+      },
+    };
+    const stateOnSuccess = galleryReducer(initialState, successAction);
+    const failureAction = {
+      type: types.GET_ALL_ASSETS_FAILURE,
+      error: 'Some error Occurred',
+    };
+    const stateOnFailure = galleryReducer(initialState, failureAction);
+    it('should set fetching_schedule_message to true on request', () => {
+      expect(stateOnRequest.toJS()).toEqual({ assetList: [], fetchingAllAssets: true, fetchAllAssetSuccess: false });
+    });
+
+    it('should set assetList from response on success', () => {
+      expect(stateOnSuccess.toJS()).toEqual(successStateExpected);
+    });
+    it('should set fetching_schedule_message to false on GET_ALL_ASSETS_FAILURE', () => {
+      expect(stateOnFailure.toJS()).toEqual({assetList: [], fetchingAllAssets: false, fetchAllAssetSuccess: false});
+    });
+  });
+
+  describe('Upload Assets', () => {
+    const initialState = fromJS({
+      assetUploading: false,
+    });
+    const requestAction = actions.uploadAsset({}, 'IMAGE', {});
+    const stateOnRequest = galleryReducer(initialState, requestAction);
+    const successStateExpected = {
+      assetUploading: false,
+      uploadAssetSuccess: true,
+    };
+    const successAction = {
+      type: types.UPLOAD_ASSET_SUCCESS,
+    };
+    const stateOnSuccess = galleryReducer(initialState, successAction);
+    const failureAction = {
+      type: types.UPLOAD_ASSET_FAILURE,
+      error: 'Some error Occurred',
+    };
+    const stateOnFailure = galleryReducer(initialState, failureAction);
+    it('should set assetUploading to true and uploadAssetSuccess to false on request', () => {
+      expect(stateOnRequest.toJS()).toEqual({ uploadAssetSuccess: false, assetUploading: true });
+    });
+
+    it('should set assetUploading to false and uploadAssetSuccess to true on success', () => {
+      expect(stateOnSuccess.toJS()).toEqual(successStateExpected);
+    });
+    it('should set assetUploading to false and uploadAssetSuccess to false on UPLOAD_ASSET_FAILURE', () => {
+      expect(stateOnFailure.toJS()).toEqual({ uploadAssetSuccess: false, assetUploading: false });
+    });
+  });
+});

package/containers/Assets/Gallery/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/Assets/Gallery/tests/selectors.test.js

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

package/containers/Cap/actions.js

@@ -0,0 +1,52 @@
+/**
+ * Created by vivek on 22/5/17.
+ */
+import * as types from './constants';
+
+export function authenticate(user) {
+  return {
+    type: types.LOGIN_REQUEST,
+    user,
+  };
+}
+
+export function logout() {
+  return {
+    type: types.LOGOUT_REQUEST,
+  };
+}
+
+export function changeOrg(orgID) {
+  return {
+    type: types.SWITCH_ORG_REQUEST,
+    orgID,
+  };
+}
+
+export function addMessageToQueue(message) {
+  console.log('CAP Action ', message);
+  return {
+    type: types.ADD_MESSAGE,
+    message,
+  };
+}
+
+export function removeMessageFromQueue(messageIndex) {
+  return {
+    type: types.REMOVE_MESSAGE,
+    messageIndex,
+  };
+}
+
+export function getUserData() {
+  return {
+    type: types.GET_USER_DATA_REQUEST,
+  };
+}
+
+export function fetchSchemaForEntity(queryParams) {
+  console.log('fetch schema action');
+  return {
+    type: types.GET_SCHEMA_FOR_ENTITY_REQUEST, queryParams,
+  };
+}

package/containers/Cap/constants.js

@@ -0,0 +1,20 @@
+export const DEFAULT_LOCALE = 'en';
+export const SWITCH_ORG_REQUEST = 'cap/SWITCH_ORG_REQUEST';
+export const SWITCH_ORG_SUCCESS = 'cap/SWITCH_ORG_SUCCESS';
+export const SWITCH_ORG_FAILURE = 'cap/SWITCH_ORG_FAILURE';
+export const LOGIN_REQUEST = 'cap/LOGIN_REQUEST';
+export const LOGIN_SUCCESS = 'cap/LOGIN_SUCCESS';
+export const LOGIN_FAILURE = 'cap/LOGIN_FAILURE';
+
+export const LOGOUT_REQUEST = 'cap/LOGOUT_REQUEST';
+export const LOGOUT_SUCCESS = 'cap/LOGOUT_SUCCESS';
+export const LOGOUT_FAILURE = 'cap/LOGOUT_FAILURE';
+export const ADD_MESSAGE = 'cap/ADD_MESSAGE';
+export const REMOVE_MESSAGE = 'cap/REMOVE_MESSAGE';
+export const GET_USER_DATA_REQUEST = 'cap/GET_USER_DATA_REQUEST';
+export const GET_USER_DATA_SUCCESS = 'cap/GET_USER_DATA_SUCCESS';
+export const GET_USER_DATA_FAILURE = 'cap/GET_USER_DATA_FAILURE';
+
+export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE';
+export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST';
+export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS';

package/containers/Cap/index.js

@@ -0,0 +1,332 @@
+import React, { PropTypes } from 'react';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+// import { Link } from 'react-router';
+// import { Icon } from 'semantic-ui-react';
+import { bindActionCreators } from 'redux';
+import styled from 'styled-components';
+import { createStructuredSelector } from 'reselect';
+import _ from 'lodash';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import { injectIntl, intlShape } from 'react-intl';
+import TopBar from '../../components/TopBar';
+// import 'moment/locale/en-us';
+import Sidebar from '../../components/Sidebar';
+import { makeSelectAuthenticated, makeSelectUser } from './selectors';
+import * as actions from './actions';
+import * as locationActions from '../LanguageProvider/actions';
+import * as appActions from '../App/actions';
+import config from '../../config/app';
+import Toastr from '../../components/Toastr';
+import messages from './messsages';
+
+const CapWrapper = styled.div`
+  margin: 0 auto;
+  display: flex;
+  min-height: 100%;
+  padding: 0;
+  flex-direction: column;
+`;
+
+// const gtm = window.dataLayer || [];
+export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      menuData: [],
+      switchedOrg: false,
+    };
+    this.changeOrg = this.changeOrg.bind(this);
+    this.logout = this.logout.bind(this);
+    this.handleRemoveMessage = this.handleRemoveMessage.bind(this);
+    this.getMappedLocale = this.getMappedLocale.bind(this);
+  }
+
+  componentWillMount() {
+    this.props.actions.getUserData();
+    // if (!this.props.Global.user || Object.keys(this.props.Global.user).length === 0) {
+    //   this.props.actions.getUserData();
+    // }
+    if (this.props.Global.isLoggedIn) {
+      if (this.props.Global.user && Object.keys(this.props.Global.user).length) {
+        // gtm.push({userId: this.props.Global.user.id});
+        this.props.appActions.getSidebar();
+      }
+    }
+  }
+
+  componentDidMount() {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    //locale = 'zh';
+    console.log('Setting final locale as', locale);
+    moment.locale(locale);
+    this.props.locationActions.changeLocale(locale);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const user = this.props.Global.user;
+    const nextPropsUser = nextProps.Global.user;
+    if (!nextProps.Global.settingProxyOrg && nextProps.Global.changeProxyOrgSuccess &&
+      !_.isEqual(nextProps.Global.changeProxyOrgSuccess, this.props.Global.changeProxyOrgSuccess) && !this.state.switchedOrg) {
+      this.navigateToDashboard();
+    }
+
+    const callBack = nextProps.routeParams.callbackUrl ? decodeURIComponent(nextProps.routeParams.callbackUrl) : "";
+    if (nextProps.Global.error) {
+      const locationValue = `${window.location.origin}${callBack}?flash=${nextProps.Global.error}`;
+      window.location.replace(locationValue);
+      window.location.reload();
+    }
+
+    if (nextPropsUser && user && nextProps.Global.isLoggedIn && nextProps.Global.isLoggedIn !== this.props.Global.isLoggedIn) {
+      this.props.appActions.getSidebar();
+    }
+  }
+
+  componentWillUnmount() {
+    this.setState({ switchedOrg: false });
+  }
+
+  // getSideBarData(reportData) {
+  //   const tmpMenuData = [];
+  //   const categoryId = reportData.categories ? Object.keys(reportData.categories) : [];
+  //   _.forEach(categoryId, (id) => {
+  //     const groupReport = {
+  //       group: reportData.categories[id].name,
+  //       items: [],
+  //     };
+  //     _.forEach(reportData.reportList, (report, reportId) => {
+  //       if (report.category === id) {
+  //         groupReport.items.push({
+  //           link: `/report/${reportId}`,
+  //           text: report.name,
+  //         });
+  //       }
+  //     });
+  //     tmpMenuData.push(groupReport);
+  //   });
+  //   const menuLibrary = {
+  //     group: 'Library',
+  //     items: [
+  //       {
+  //         link: '/library/charts',
+  //         text: 'Charts',
+  //       },
+  //       {
+  //         link: '/library/dimension',
+  //         text: 'Dimensions',
+  //       },
+  //     ],
+  //   };
+  //   tmpMenuData.push(menuLibrary);
+  //   this.setState({ menuData: tmpMenuData });
+  // }
+
+  getMappedLocale(locale) {
+    const map = {
+      'en': 'en',
+      'zh-cn': 'zh',
+    };
+    return map[locale];
+  }
+  handleRemoveMessage(messageIndex) {
+    this.props.actions.removeMessageFromQueue(messageIndex);
+  }
+
+  navigateToDashboard() {
+    const dashboardUrl = process.env.NODE_ENV === 'production' ? config.production.dashboard_url : config.development.dashboard_url;
+    this.props.router.push({ pathname: dashboardUrl, state: {} });
+    this.props.router.go(dashboardUrl);
+  }
+
+  logout() {
+    this.props.actions.logout();
+  }
+  changeOrg(orgId) {
+    this.props.actions.changeOrg(orgId);
+    //this.navigateToDashboard();
+  }
+
+  render() {
+    const userData = this.props.Global;
+    const type = this.props.location.query.type;
+    // const changeOrg = this.props.actions.changeOrg;
+    // const logout = this.props.actions.logout;
+    console.log('props', this.props);
+    const proxyOrgList = [];
+    let defaultOrgName = '';
+    let defaultOrgId = '';
+    let userName = '';
+    const navigateToDashboard = this.navigateToDashboard;
+    if (userData && userData.user && userData.user !== '') {
+      console.log('Org name ', userData.user.orgName, userData.user.orgID);
+      defaultOrgName = userData.user.orgName;
+      defaultOrgId = userData.user.orgID;
+      proxyOrgList.push({ text: defaultOrgName, value: defaultOrgId });
+      const orgList = userData.user.proxyOrgList;
+      if (!_.isEmpty(orgList)) {
+        _.forEach(orgList, (item) => {
+          const id = item.orgID;
+          let name = item.orgName;
+          if (id === 486) {
+            name = 'Demo Org';
+          }
+          proxyOrgList.push({ key: id, text: name, value: id });
+        });
+      }
+      userName = userData.user.firstName;
+    }
+    const actionComponents = "";
+    const toastMessages = this.props.Global.messages;
+    const loggedIn = this.props.Global.isLoggedIn;
+    const menuData = [
+      {
+        group: this.props.intl.formatMessage(messages.creativesDashboard),
+        items: [
+          {
+            link: '/sms',
+            text: this.props.intl.formatMessage(messages.sms),
+            value: 'SMS',
+          },
+          {
+            link: '/wechat',
+            text: this.props.intl.formatMessage(messages.wechat),
+            value: 'WECHAT',
+          },
+          {
+            link: '/mobilepush',
+            text: 'Mobile Push',
+            value: 'MOBILEPUSH',
+          },
+          {
+            link: '/assets',
+            text: this.props.intl.formatMessage(messages.gallery),
+            value: 'GALLERY',
+          },
+          {
+            link: '/email',
+            text: this.props.intl.formatMessage(messages.email),
+            value: 'EMAIL',
+          },
+          {
+            link: '/ebill',
+            text: this.props.intl.formatMessage(messages.ebill),
+            value: 'EBILL',
+          },
+
+        ],
+      },
+      {
+        group: this.props.intl.formatMessage(messages.campaignsDashboard),
+        items: [
+          {
+            link: '../../campaign/index',
+            text: this.props.intl.formatMessage(messages.campaignsHome),
+            value: 'Campaigns Home',
+            external: true,
+          },
+        ],
+      },
+    ];
+
+    const productMenuData = [
+      // {
+      //   text: this.props.intl.formatMessage(messages.creatives),
+      //   value: 'Creatives',
+      //   url: '/creatives/ui/',
+      // },
+    ];
+    if (this.props.Global.currentOrgDetails) {
+      _.forEach(this.props.Global.currentOrgDetails.module_details, (module) => {
+        if (module.display_order > 0) {
+          productMenuData.push({
+            text: (messages[module.name]) ? this.props.intl.formatMessage(messages[module.name]) : module.name,
+            value: module.name.toLowerCase(),
+            url: module.url,
+          });
+        }
+      });
+    }
+
+    return (
+      <CapWrapper>
+        <Helmet
+          titleTemplate="Capillary - %s"
+          defaultTitle="App Name"
+          meta={[
+            { name: 'description', content: 'App Name' },
+          ]}
+        />
+        <div className="wrapper">
+          {loggedIn && type !== 'embedded' ?
+            <TopBar
+              proxyOrgList={proxyOrgList}
+              userName={userName}
+              orgName={defaultOrgName}
+              orgID={defaultOrgId}
+              changeOrg={this.changeOrg}
+              navigateToDashboard={navigateToDashboard}
+              logout={this.logout}
+            /> : ''}
+          <div className="main">
+            {loggedIn && type !== 'embedded' ? <div id="cap-sidebar" className={'sidebar'}>
+              <Sidebar
+                menuData={menuData}
+                productMenuData={productMenuData}
+                actionComponents={actionComponents}
+                router={this.props.router}
+              />
+            </div> : '' }
+            <div className="main-content">
+              {React.Children.toArray(this.props.children)}
+            </div>
+          </div>
+        </div>
+        {(toastMessages && toastMessages.length > 0) ?
+          <Toastr timeout={4000} messagesList={toastMessages} position="top-right" handleRemoveMessage={this.handleRemoveMessage} />
+          : ''}
+        {this.props.Global.fetching_userdata &&
+          <div className="cap-loader-box">
+            <img
+              className="loader-image"
+              src="https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/88561f46de9407021cad.gif"
+              alt="Capillary"/>
+          </div>
+        }
+      </CapWrapper>
+    );
+  }
+}
+
+Cap.propTypes = {
+  children: PropTypes.node,
+  actions: PropTypes.object.isRequired,
+  Global: PropTypes.object,
+  router: PropTypes.object,
+  appActions: PropTypes.object,
+  locationActions: PropTypes.object,
+  location: PropTypes.object,
+  intl: intlShape.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Global: makeSelectAuthenticated(),
+  User: makeSelectUser(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    appActions: bindActionCreators(appActions, dispatch),
+    locationActions: bindActionCreators(locationActions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Cap));