@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/containers/Cap/index.js

@@ -0,0 +1,402 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { Switch } from 'react-router';
+import { compose, bindActionCreators } from 'redux';
+import styled from 'styled-components';
+import { createStructuredSelector } from 'reselect';
+import _ from 'lodash';
+import moment from 'moment';
+import injectSaga from 'utils/injectSaga';
+import injectReducer from 'utils/injectReducer';
+import { getIsLoggedIn } from '../../utils/authWrapper';
+import { appSaga } from '../App/sagas';
+import { capSaga } from './sagas';
+import componentRoutes from '../../routes';
+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 './messages';
+import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
+import { CREATIVES_UI_VIEW } from '../../v2Containers/App/constants';
+import AccessForbidden from '../../v2Components/AccessForbidden';
+import reducer from './reducer';
+import RenderRoute from '../../v2Components/RenderRoute';
+import { EMBEDDED } from '../../v2Containers/SmsTrai/Edit/constants';
+
+const gtm = window.dataLayer || [];
+
+const CapWrapper = styled.div`
+  margin: 0 auto;
+  display: flex;
+  min-height: 100%;
+  padding: 0;
+  flex-direction: column;
+`;
+
+
+export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      menuData: [],
+      switchedOrg: false,
+      isCreativesAccessible: true,
+    };
+    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((userData) => {
+      if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
+        this.setState({ isCreativesAccessible: false });
+      }
+    });
+    if (this.props.Global.user) {
+      const userGtmData = this.getUserGtmData(this.props);
+      if (userGtmData?.userId) {
+        gtm.push({ ...userGtmData, event: 'userAuthenticated' });
+      }
+    }
+    if (!_.isEmpty(this.props?.Global?.orgID)) {
+      gtm.push({ orgId: this.props.Global.orgID });
+    }
+    if (this.props.Global.isLoggedIn) {
+      if (this.props.Global.user && Object.keys(this.props.Global.user).length) {
+        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';
+    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();
+    }
+
+    if (nextProps.Global.user && this.props.Global.user && (nextProps.Global.user.refID !== this.props.Global.user.refID)) {
+      const userGtmData = this.getUserGtmData(nextProps);
+      if (userGtmData?.userId) {
+        gtm.push({ ...userGtmData, event: 'userAuthenticated' });
+      }
+    }
+
+    if (nextProps.Global.isLoggedIn && nextProps.Global.isLoggedIn !== this.props.Global.isLoggedIn) {
+      if (nextProps.Global.orgID !== undefined && !_.isEqual(nextProps.Global.orgID, this.props.Global.orgID)) {
+        const userGtmData = this.getUserGtmData(nextProps);
+        if (userGtmData?.userId) {
+          gtm.push({ ...userGtmData, event: 'userAuthenticated' });
+        }
+      }
+    }
+  }
+
+  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 });
+  // }
+
+  getUserGtmData = (props) => {
+    const { user: userData } = props.Global;
+    const userName = userData.attributes.USERNAME;
+    const userEmail = userData.attributes.EMAIL;
+    const orgObj = _.find(userData?.proxyOrgList, { orgID: props?.Global?.orgID });
+    const gtmData = {
+      orgId: props.Global.orgID,
+      orgName: orgObj && orgObj.orgName,
+      userId: userData.refID,
+      userName: userName && userName.value,
+      userEmail: userEmail && userEmail.value,
+      isCapUser: userData.isCapUser,
+    };
+    return gtmData;
+  }
+
+  getMappedLocale(locale) {
+    const map = {
+      'en': 'en-US',
+      'zh-cn': 'zh',
+      'en-US': 'en-US',
+      'zh': '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();
+  }
+
+  logout() {
+    this.props.actions.logout();
+  }
+  changeOrg(orgId) {
+    this.props.actions.changeOrg(orgId);
+    //this.navigateToDashboard();
+  }
+
+  render() {
+    const userData = this.props.Global;
+    const { pathname, search, hash } = this.props.location;
+    const fullURL = `${window.location.origin}${pathname}${search}${hash}`;
+    const url = new URL(fullURL);
+    const params = new URLSearchParams(url.search);
+    // Extract parameters
+    const type = params.get("type");
+    // const changeOrg = this.props.actions.changeOrg;
+    // const logout = this.props.actions.logout;
+    const proxyOrgList = [];
+    let defaultOrgName = '';
+    let defaultOrgId = '';
+    let userName = '';
+    const { navigateToDashboard } = this;
+    if (userData && userData.user && userData.user !== '') {
+      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;
+          const name = item.orgName;
+          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: this.props.intl.formatMessage(messages.mobilepush),
+            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',
+          },
+          {
+            link: '/line',
+            text: this.props.intl.formatMessage(messages.line),
+            value: 'LINE',
+          },
+        ],
+      },
+      {
+        group: this.props.intl.formatMessage(messages.campaignsDashboard),
+        items: [
+          {
+            link: '/campaign/index',
+            text: this.props.intl.formatMessage(messages.campaignsHome),
+            value: 'Campaigns Home',
+            external: true,
+          },
+        ],
+      },
+    ];
+    const { isCreativesAccessible } = this.state;
+    return (
+      <CapWrapper>
+        {this.props?.loader?.localeLoading || 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> : <>
+
+            <Helmet
+              titleTemplate="Capillary - %s"
+              defaultTitle={this.props.intl.formatMessage(messages.appName)}
+              meta={[
+                { name: 'description', content: this.props.intl.formatMessage(messages.appName) },
+              ]}
+            />
+            <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">
+                {isCreativesAccessible && loggedIn && type !== 'embedded' && this.props.location.pathname.indexOf('v2') === -1 ? <div id="cap-sidebar" className={'sidebar'}>
+                  <Sidebar
+                    menuData={menuData}
+                    actionComponents={actionComponents}
+                    router={this.props.router}
+                  />
+                </div> : ''}
+                <div className="main-content">
+                  {!isCreativesAccessible ? <AccessForbidden /> : (
+                    <Switch>
+                      {componentRoutes.map(routeProps => (
+                        <RenderRoute
+                          {...routeProps}
+                          key={routeProps.path}
+                          isLoggedIn={loggedIn}
+                        />
+                      ))}
+                    </Switch>
+                  )}
+                </div>
+              </div>
+            </div>
+            {(toastMessages && toastMessages.length > 0) ?
+              <Toastr timeout={4000} messagesList={toastMessages} position="top-right" handleRemoveMessage={this.handleRemoveMessage} />
+              : ''}
+          </>}
+      </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(),
+  loader: makeSelectLocale(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    appActions: bindActionCreators(appActions, dispatch),
+    locationActions: bindActionCreators(locationActions, dispatch),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+const withAppSaga = injectSaga({ key: 'app', saga: appSaga });
+const withCapSaga = injectSaga({ key: 'cap', saga: capSaga });
+const withReducer = injectReducer({ key: 'cap', reducer });
+
+export default compose(
+  withRouter,
+  withReducer,
+  withAppSaga,
+  withCapSaga,
+  withConnect,
+)(injectIntl(Cap));

package/containers/Cap/messages.js

@@ -0,0 +1,75 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  "sms": {
+    id: 'reon.components.Cap.sms',
+    defaultMessage: 'SMS',
+  },
+  "wechat": {
+    id: 'reon.components.Cap.wechat',
+    defaultMessage: 'WeChat',
+  },
+  "gallery": {
+    id: 'reon.components.Cap.gallery',
+    defaultMessage: 'Gallery',
+  },
+  "creativesDashboard": {
+    id: 'reon.components.Cap.creativesDashboard',
+    defaultMessage: 'Creatives',
+  },
+  "creatives": {
+    id: 'reon.components.Cap.creatives',
+    defaultMessage: 'Creatives',
+  },
+  "campaigns": {
+    id: 'reon.components.Cap.campaigns',
+    defaultMessage: 'Campaigns',
+  },
+  "loyalty": {
+    id: 'reon.components.Cap.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "member care": {
+    id: 'reon.components.Cap.memberCare',
+    defaultMessage: 'Member Care',
+  },
+  "workbench": {
+    id: 'reon.components.Cap.Workbench',
+    defaultMessage: 'WorkBench',
+  },
+  "store care": {
+    id: 'reon.components.Cap.storeCare',
+    defaultMessage: 'Store Care',
+  },
+  "store performance": {
+    id: 'reon.components.Cap.storePerformance',
+    defaultMessage: 'Store Performance',
+  },
+  "email": {
+    id: 'reon.components.Cap.email',
+    defaultMessage: 'Email',
+  },
+  "ebill": {
+    id: 'reon.components.Cap.ebill',
+    defaultMessage: 'Ebill',
+  },
+  "campaignsDashboard": {
+    id: 'reon.components.campaignsDashboard',
+    defaultMessage: 'Campaigns',
+  },
+  "campaignsHome": {
+    id: 'reon.components.campaignsHome',
+    defaultMessage: "Campaigns Home",
+  },
+  "line": {
+    id: 'reon.components.Cap.line',
+    defaultMessage: 'Line',
+  },
+  "mobilepush": {
+    id: 'reon.components.Cap.mobilepush',
+    defaultMessage: 'Mobile Push',
+  },
+  "appName": {
+    id: 'reon.components.Cap.appName',
+    defaultMessage: 'App Name',
+  },
+});

package/containers/Cap/reducer.js

@@ -0,0 +1,113 @@
+/**
+ * Created by vivek on 22/5/17.
+ */
+import { fromJS } from 'immutable';
+import _ from 'lodash';
+import * as types from './constants';
+import initialState from '../../initialState';
+
+function capReducer(state = fromJS(initialState), action) {
+  switch (action.type) {
+    case types.LOGIN_REQUEST:
+      return state.set('login_progress', true);
+    case types.LOGIN_SUCCESS:
+      return state
+        .set('login_progress', false)
+        .set('token', action.res.token)
+        .set('user', fromJS(action.res.user))
+        .set('message', '')
+        .set('authenticated', true)
+        .set('isLoggedIn', true);
+    case types.LOGIN_FAILURE:
+      return state
+        .set('login_progress', false)
+        .set('message', action.error.message);
+    case types.LOGOUT_REQUEST:
+      return state.set('login_progress', false);
+    case types.LOGOUT_SUCCESS:
+      return state;
+    case types.LOGOUT_FAILURE:
+      return state;
+    case types.SWITCH_ORG_REQUEST:
+      return state
+        .set('settingProxyOrg', true)
+        .set('changeProxyOrgSuccess', false);
+    case types.SWITCH_ORG_SUCCESS:
+      return state
+        .set('orgID', action.orgID)
+        .set('settingProxyOrg', false)
+        .set('changeProxyOrgSuccess', action.isSuccess);
+    case types.SWITCH_ORG_FAILURE:
+      return state
+        .set('settingProxyOrg', false)
+        .set('changeProxyOrgSuccess', false);
+    case types.ADD_MESSAGE: {
+      const message = {
+        messageId: action.message.id,
+        title: action.message.title,
+        text: action.message.text,
+        type: action.message.type,
+        hideProgressBar: action.message.hideProgressBar,
+      };
+      return state
+      .set('messages', fromJS(state.get('messages').concat(message)));
+    }
+    case types.REMOVE_MESSAGE: {
+      const messageQueue = state.get('messages').toJS();
+      const messageIndex = _.findIndex(messageQueue, { messageId: action.messageIndex });
+      messageQueue.splice(messageIndex, 1);
+      return state
+      .set('messages', fromJS(messageQueue));
+    }
+    case types.GET_USER_DATA_REQUEST:
+      return state
+        .set('fetching_userdata', true)
+        .set('isLoggedIn', false);
+    case types.GET_USER_DATA_SUCCESS:
+      return state
+        .set('fetching_userdata', false)
+        .set('user', fromJS(action.userData))
+        .set('currentOrgDetails', fromJS(action.currentOrgDetails))
+        .set('isLoggedIn', true)
+        .set('orgID', action.currentOrgId);
+    case types.GET_USER_DATA_FAILURE:
+      return state
+        .set('fetching_userdata', false)
+        .set('isLoggedIn', false);
+    case types.GET_SCHEMA_FOR_ENTITY_REQUEST:
+      return state
+        .set('fetchingSchema', true);
+    case types.GET_SCHEMA_FOR_ENTITY_FAILURE:
+      return state
+        .set('fetchingSchema', false);
+    case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
+      const stateMeta = state.get('metaEntities');
+      
+      return state
+        .set('fetchingSchema', false)
+        .set('metaEntities', {
+          layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta.layouts,
+          tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta.tags,
+        });
+    }
+    case types.ROMOVE_ENTITY_SCHEMA:
+      return state.set('metaEntities', {});
+    case types.CLEAR_META_ENTITIES:
+      return state.set('metaEntities', {
+        layouts: [],
+        tags: [],
+      });
+    // eslint-disable-next-line no-case-declarations
+    case types.HIDE_TAGS:
+      const metaEntities = {tags: {}, layouts: state.get('metaEntities').layouts};
+      metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
+      metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
+      return state.setIn(['metaEntities'], metaEntities);
+    case types.SET_INJECTED_TAGS:
+      return state.set('injectedTags', action.injectedTags);
+    default:
+      return state;
+  }
+}
+
+export default capReducer;