@capillarytech/creatives-library 2.0.83 → 2.0.85

package/v2Containers/Cap/index.js

@@ -2,25 +2,27 @@ import PropTypes from 'prop-types';
 import React 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 { injectIntl } from 'react-intl';
 import {CapNotification} from '@capillarytech/cap-ui-library';
-import TopBar from '../../v2Components/TopBar';
-// import 'moment/locale/en-us';
-import Sidebar from '../../v2Components/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 messages from './messsages';
+import NavigationBar from '../../v2Components/NavigationBar';
+import { engagePlusPublicPath } from '../../config/path';
+import {
+  HELP_URL,
+  PROFILE_SETTINGS_URL,
+  BRAND_SETTINGS_URL,
+  CAMPAIGN_SETTINGS_URL,
+} from './constants';
 const gtm = window.dataLayer || [];
 
 const CapWrapper = styled.div`
@@ -36,7 +38,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   constructor(props) {
     super(props);
     this.state = {
-      menuData: [],
       switchedOrg: false,
     };
     this.changeOrg = this.changeOrg.bind(this);
@@ -47,6 +48,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   componentWillMount() {
     this.props.actions.getUserData();
+    this.props.actions.getTopbarMenuData();
     if (this.props.Global.user) {
       const userGtmData = this.getUserGtmData(this.props);
       gtm.push(userGtmData);
@@ -109,43 +111,9 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   componentWillUnmount() {
     this.setState({ switchedOrg: false });
+    this.props.actions.clearTopbarMenuData();
   }
 
-  // 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;
@@ -174,7 +142,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   navigateToDashboard() {
-    const dashboardUrl = process.env.NODE_ENV === 'production' ? config.production.dashboard_url : config.development.dashboard_url;
+    const dashboardUrl = process.env.NODE_ENV === 'production' ? config.production.dashboard_url_v2 : config.development.dashboard_url_v2;
     this.props.router.push({ pathname: dashboardUrl, state: {} });
     this.props.router.go(dashboardUrl);
   }
@@ -184,94 +152,15 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
   changeOrg(orgId) {
     this.props.actions.changeOrg(orgId);
-    //this.navigateToDashboard();
+    this.navigateToDashboard();
   }
 
   render() {
-    const userData = this.props.Global;
+    const { Global, location } = this.props;
+    const { topbarMenuData, isLoggedIn } = Global;
+    const topbarMenuDataOptions = topbarMenuData && topbarMenuData.data ? topbarMenuData.data : [];
     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',
-          },
-          {
-            link: '/line',
-            text: '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,
-          },
-        ],
-      },
-    ];
     return (
       <CapWrapper>
         <Helmet
@@ -282,24 +171,20 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           ]}
         />
         <div className="wrapper">
-          {loggedIn && type !== 'embedded' ?
-            <TopBar
-              proxyOrgList={proxyOrgList}
-              userName={userName}
-              orgName={defaultOrgName}
-              orgID={defaultOrgId}
+          {isLoggedIn && type !== 'embedded' ?
+            <NavigationBar
+              userData={Global}
               changeOrg={this.changeOrg}
-              navigateToDashboard={navigateToDashboard}
               logout={this.logout}
+              settingsUrl={`${engagePlusPublicPath}${CAMPAIGN_SETTINGS_URL}`}
+              brandSettingsUrl={BRAND_SETTINGS_URL}
+              profileSettingsUrl={PROFILE_SETTINGS_URL}
+              helpUrl={HELP_URL}
+              loggedIn={isLoggedIn}
+              topbarMenuData={topbarMenuDataOptions}
+              location={location}
             /> : ''}
           <div className="main">
-            {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">
               {React.Children.toArray(this.props.children)}
             </div>
@@ -330,7 +215,6 @@ Cap.propTypes = {
   appActions: PropTypes.object,
   locationActions: PropTypes.object,
   location: PropTypes.object,
-  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Cap/reducer.js

@@ -103,6 +103,20 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state.setIn(['metaEntities'], metaEntities);
     case types.SET_INJECTED_TAGS:
       return state.set('injectedTags', action.injectedTags);
+    case types.GET_TOPBAR_MENU_DATA_REQUEST:
+      return state.set('topbarMenuData', fromJS({ status: 'request' }));
+    case types.GET_TOPBAR_MENU_DATA_SUCCESS:
+      return state.set(
+          'topbarMenuData',
+          fromJS({ status: 'success', data: action.data }),
+        );
+    case types.GET_TOPBAR_MENU_DATA_FAILURE:
+      return state.set(
+          'topbarMenuData',
+          fromJS({ status: 'failure', error: action.error }),
+        );
+    case types.CLEAR_TOPBAR_MENU_DATA:
+      return state.set('topbarMenuData', fromJS({}));
     default:
       return state;
   }

package/v2Containers/Cap/sagas.js

@@ -112,6 +112,17 @@ export function* fetchSchemaForEntity(queryParams) {
   }
 }
 
+function* getTopbarMenuData() {
+  try {
+    yield put({
+      type: types.GET_TOPBAR_MENU_DATA_SUCCESS,
+      data: getTopbarMenuDataValue(),
+    });
+  } catch (error) {
+    yield put({ type: types.GET_TOPBAR_MENU_DATA_FAILURE, error });
+  }
+}
+
 
 function* watchFetchSchemaForEntity() {
   console.log('inside watch get schema');
@@ -133,6 +144,9 @@ function* watchForFetchUserInfo() {
   yield takeLatest(types.GET_USER_DATA_REQUEST, fetchUserInfo);
 }
 
+function* watchGetTopbarMenuData() {
+  yield takeLatest(types.GET_TOPBAR_MENU_DATA_REQUEST, getTopbarMenuData);
+}
 
 export default [
   loginFlow,
@@ -140,4 +154,14 @@ export default [
   watchForLogoutFlow,
   watchForFetchUserInfo,
   watchFetchSchemaForEntity,
+  watchGetTopbarMenuData,
 ];
+
+function getTopbarMenuDataValue() {
+  return [
+    { label: 'Campaigns', link: '/campaigns/ui/list', key: 'campaigns' },
+    { label: 'Audience', link: '/audience-manager/list', key: 'audience' },
+    { label: 'Incentive', link: '/coupons/ui/', key: 'incentive' },
+    { label: 'Creatives', link: '/creatives/ui/v2', key: 'creatives' },
+  ];
+}

package/components/CallTaskPreview/_callTaskPreview.scss

@@ -1,17 +0,0 @@
-.call-task-preview {
-  .call-task-subject-container {
-    padding: 8px;
-    background: #444;
-    color: white;
-    font-size: 12px;
-    font-weight: 500;
-  }
-  .call-task-message-container {
-    overflow-y: auto;
-    height: 150px;
-    width: 100%;
-    font-size: 12px;
-    background: #eee;
-    padding: 8px;
-  }
-}

package/components/CallTaskPreview/index.js

@@ -1,37 +0,0 @@
-/**
-*
-* CallTaskPreview
-*
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import HeaderPng from './images/Header.png';
-import FooterPng from './images/Footer.png';
-
-import './_callTaskPreview.scss';
-
-class CallTaskPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    const { subject, messageBody } = this.props;
-    return (
-      <div className="call-task-preview">
-        <img style={{ width: '100%' }} src={HeaderPng} alt="header" />
-        <div className="call-task-subject-container">
-          {subject}
-        </div>
-        <div className="call-task-message-container">
-          {messageBody}
-        </div>
-        <img style={{ width: '100%' }} src={FooterPng} alt="footer" />
-      </div>
-    );
-  }
-}
-
-CallTaskPreview.propTypes = {
-  subject: PropTypes.string,
-  messageBody: PropTypes.string,
-};
-
-export default CallTaskPreview;

package/components/CallTaskPreview/messages.js

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

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

@@ -1,15 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import CallTaskPreview from "../index";
-
-describe("<CallTaskPreview />", () => {
-  it("Test if Call task component renders", () => {
-    const component = shallow(
-      <CallTaskPreview
-        subject="this is test"
-        body="this is test message body"
-      />
-    );
-    expect(component).toMatchSnapshot();
-  });
-});

package/components/CmsTemplatesComponent/index.js

@@ -1,33 +0,0 @@
-/**
-*
-* CmsTemplatesComponent
-*
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-// import styled from 'styled-components';
-import {CapButton, CapCustomCard} from '@capillarytech/cap-ui-library';
-import { FormattedMessage } from 'react-intl';
-import messages from './messages';
-const {CapCustomCardList} = CapCustomCard;
-function CmsTemplatesComponent(props) {
-  const cardDataList = props.cmsTemplates.map((template) => (
-    {
-      key: template.name,
-      title: template.name,
-      url: template.versions.base.preview_http_url,
-      hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
-    }));
-  return (<div>
-    <div className="pagination-container">
-      <CapCustomCardList cardList={cardDataList} type="Email" />
-    </div>
-  </div>);
-}
-
-CmsTemplatesComponent.propTypes = {
-  cmsTemplates: PropTypes.array,
-};
-
-export default CmsTemplatesComponent;

package/components/CmsTemplatesComponent/messages.js

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

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

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

package/components/EmailMobilePreview/index.js

@@ -1,129 +0,0 @@
-/**
-*
-* EmailPreviewV2
-*
-*/
-
-import React from 'react';
-// import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import {isEmpty} from 'lodash';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { CapSpin, CapButton } from '@capillarytech/cap-ui-library';
-import moment from 'moment';
-import EmailPreviewV2 from '../EmailPreviewV2';
-import messages from '../EmailPreviewV2/messages';
-import './index.scss';
-import mobileBody from '../../assets/mobile.png';
-
-import {selectTemplateContent} from '../../containers/Templates/selectors';
-import * as templateActions from '../../containers/Templates/actions';
-
-const deviceAspectRatio = {
-  mobile: {
-    height: "440",
-    width: "230",
-  },
-};
-
-class EmailMobilePreview extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      showAllDevices: false,
-    };
-  }
-  componentWillMount() {
-    const {templateData, templateContent} = this.props;
-    if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
-      this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
-    }
-  }
-  onClickShowInAllDevices = () => {
-    const { onClickShowInAllDevices } = this.props;
-    if (onClickShowInAllDevices) {
-      onClickShowInAllDevices();
-    } else {
-      this.setState({
-        showAllDevices: true,
-      });
-    }
-  }
-  render() {
-    const messageContainerName = 'mobile-message-container';
-    const {
-      templateContent,
-      enableShowAllDevices,
-    } = this.props;
-    const { showAllDevices } = this.state;
-
-    return (
-      <div className="email-mobile-preview-container">
-        {showAllDevices ? (
-          <EmailPreviewV2 {...this.props} />
-        ) : (
-          <CapSpin spinning={!templateContent}>
-            <div id="emailPreivew-container">
-              <div id="emailPreivew-content-wrapper">
-                <div id="emailPreivew-content">
-                  <div className="email-preview-container">
-                    {enableShowAllDevices && (
-                      <CapButton
-                        type="flat"
-                        onClick={this.onClickShowInAllDevices}
-                      >
-                        View in all devices
-                      </CapButton>
-                      )}
-                    <div className={"shell align-center"}>
-                      <img src={mobileBody} alt="capillary" width="60%" />
-                      <div className={messageContainerName}>
-                        <iframe srcDoc={templateContent} {...deviceAspectRatio.mobile} >
-                          <p><FormattedMessage {...messages.noIframeSupport}/></p>
-                        </iframe>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {this.props.templateData &&
-              [
-                <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
-                <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
-              ]
-            }
-          </CapSpin>
-        )}
-      </div>
-
-    );
-  }
-
-}
-
-EmailMobilePreview.propTypes = {
-  templateContent: PropTypes.string,
-  templateData: PropTypes.object,
-  templateActions: PropTypes.object,
-  onClickShowInAllDevices: PropTypes.func,
-  enableShowAllDevices: PropTypes.bool,
-};
-
-EmailMobilePreview.defaultProps = {
-  showDeviceSelection: true,
-};
-
-const mapStateToProps = (state, props) => createStructuredSelector({
-  templateContent: props.templateData ? selectTemplateContent() : () => props.templateContent, // when props has templateContent that means preview with content
-});
-function mapDispatchToProps(dispatch) {
-  return {
-    templateActions: bindActionCreators(templateActions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EmailMobilePreview);

package/components/EmailMobilePreview/index.scss

@@ -1,55 +0,0 @@
-$classPrefix: email-mobile-preview-container;
-.#{$classPrefix}{
-    #emailPreivew-container {
-        position: relative;
-        // padding: 0 24px 0 24px;
-        overflow-y: auto;
-        // font-family: 'proxima-nova';
-        overflow: hidden;
-        #emailPreivew-content-wrapper{
-          width: 100%;
-          height: 90%;
-          // display: table;
-    
-          #emailPreivew-content {
-            .device-wrapper {
-              display: inline-flex;
-              margin-bottom: 8px;
-              margin-top: 16px;
-              .device-name {
-                padding: 6px 24px;
-                background: #E6F0FB;
-                border: 2px solid #E6F0FB;
-                font-family: "open-sans";
-                line-height: 20px;
-                font-size: 14px;
-                color: #4E92E5;
-                cursor: pointer;
-              }
-              .active {
-                background: #FFFFFF !important;
-                border: 2px solid #E6F0FB;
-              }
-    
-            }
-            .email-preview-container{
-
-              .mobile-message-container {
-                position: absolute;
-                top: 10.3%;
-                left: 24%;
-                overflow: auto;
-                display: -webkit-box;
-                display: -ms-flexbox;
-                display: flex;
-              }
-            }
-            padding: 0 0px 0 24px;
-            // display: table-cell;
-            // vertical-align: middle;
-            text-align: center;
-            margin-bottom: 36px;
-          }
-        }
-      }
-}