@capillarytech/creatives-library 2.0.84 → 2.0.85

package/app.js

@@ -6,7 +6,8 @@ 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 'v2Containers/Cap';
+import CapV2 from 'v2Containers/Cap';
+import Cap from 'containers/Cap';
 import { LocaleProvider } from 'antd';
 import { makeSelectLocationState } from 'containers/Cap/selectors';
 import LanguageProvider from 'containers/LanguageProvider';
@@ -35,7 +36,13 @@ const history = syncHistoryWithStore(browserHistory, store, {
 });
 
 const rootRoute = {
-  component: Cap,
+  component: (props) => {
+    // eslint-disable-next-line react/prop-types
+    if (props.location.pathname === 'v2') {
+      return <CapV2 {...props} />;
+    }
+    return <Cap {...props} />;
+  },
   childRoutes: createRoutes(store),
 };
 

package/config/app.js

@@ -6,16 +6,16 @@ const config = {
     api_endpoint: '/arya/api/v1/creatives',
     auth_endpoint: '/arya/api/v1/auth',
     login_url: 'auth/login',
-    //dashboard_url: '/sms',
-    dashboard_url: '/v2',
+    dashboard_url: '/sms',
+    dashboard_url_v2: '/v2',
     accountConfig: (strs, accountId) => `org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',
     auth_endpoint: 'https://nightly.capillary.in/arya/api/v1/auth',
     login_url: 'auth/login',
-   // dashboard_url: '/sms',
-    dashboard_url: '/v2',
+    dashboard_url: '/sms',
+    dashboard_url_v2: '/v2',
   },
   testing: {
     api_endpoint: '',

package/config/path.js

@@ -1,3 +1,4 @@
 module.exports = {
   publicPath: '/creatives/ui/',
+  engagePlusPublicPath: '/campaigns/ui',
 };

package/index.js

@@ -72,10 +72,10 @@ export {default as TagListSaga} from './v2Containers/TagList/sagas';
 export {default as TagListReducer} from './v2Containers/TagList/reducer';
 export {default as TemplatePreview} from './components/TemplatePreview';
 export {default as EmailPreview} from './components/EmailPreview';
-export {default as EmailPreviewV2} from './components/EmailPreviewV2';
-export {default as CallTaskPreview} from './components/CallTaskPreview';
-export {default as EmailMobilePreview} from './components/EmailMobilePreview';
-export {default as MobilePushPreview} from './components/MobilePushPreviewV2';
+export {default as EmailPreviewV2} from './v2Components/EmailPreviewV2';
+export {default as CallTaskPreview} from './v2Components/CallTaskPreview';
+export {default as EmailMobilePreview} from './v2Components/EmailMobilePreview';
+export {default as MobilePushPreview} from './v2Components/MobilePushPreviewV2';
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 
 export { CapContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.84",
+  "version": "2.0.85",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -13,7 +13,7 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "@capillarytech/cap-react-ui-library": "^1.11.14",
-    "@capillarytech/cap-ui-library": "^1.0.144",
+    "@capillarytech/cap-ui-library": "^1.0.168",
     "antd": "3.19.6",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",

package/routes.js

@@ -602,6 +602,8 @@ export default function createRoutes(store) {
           import('v2Containers/Templates/reducer'),
           import('v2Containers/Templates/sagas'),
           import('v2Containers/TemplatesV2'),
+          import('v2Containers/Cap/reducer'),
+          import('v2Containers/Cap/sagas'),
           import('v2Containers/Email/sagas'),
           import('v2Containers/CreativesContainer/reducer'),
           import('v2Containers/Sms/Create/reducer'),
@@ -624,6 +626,7 @@ export default function createRoutes(store) {
 
         importModules.then(([reducer,
           sagas, component,
+          capReducer, capSagas,
           emailContainerSagas, creativesContainerReducer,
           smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga,
           emailReducer, emailSaga,
@@ -633,6 +636,7 @@ export default function createRoutes(store) {
           galleryReducer, gallerySagas,
         ]) => {
           injectReducer('templates', reducer.default);
+          injectReducer('cap', capReducer.default);
           injectReducer('create', smsCreateReducer.default);
           injectReducer('creativesContainer', creativesContainerReducer.default);
           injectReducer('edit', smsEditReducer.default);
@@ -643,6 +647,7 @@ export default function createRoutes(store) {
           injectReducer('gallery', galleryReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
+          injectSagas(capSagas.default);
           injectSagas(emailContainerSagas.default);
           injectSagas(smsCreateSaga.default);
           injectSagas(smsEditSaga.default);

package/v2Components/EmailPreviewV2/index.js

@@ -19,8 +19,8 @@ import './_emailPreviewV2.scss';
 import tabletBody from '../../assets/iPad.svg';
 import mobileBody from '../../assets/mobile.png';
 
-import {selectTemplateContent} from '../../containers/Templates/selectors';
-import * as templateActions from '../../containers/Templates/actions';
+import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
+import * as templateActions from '../../v2Containers/Templates/actions';
 
 const deviceAspectRatio = {
   desktop: {
@@ -99,7 +99,7 @@ class EmailPreviewV2 extends React.Component {
               </div>
             </div>
           </div>
-          {this.props.templateData &&
+          {this.props.templateData && this.props.templateData.updatedByName &&
             [
               <p className="preview-info" key="lastModified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
               <p style={{marginBottom: '8px'}} key="uploadedBy" className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,

package/v2Components/NavigationBar/index.js

@@ -0,0 +1,235 @@
+/**
+ *
+ * NavigationBar
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { isEmpty, forEach } from 'lodash';
+import { loadItem } from 'services/localStorageApi';
+import { intlShape, injectIntl } from 'react-intl';
+import TopBar from '../TopBar';
+import messages from './messages';
+
+const EMBEDDED = 'embedded';
+
+const CapWrapper = styled.div`
+  position: absolute;
+  padding: 0;
+  background-color: #ffffff;
+  width: 100%;
+  display: flex;
+  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'}
+`;
+
+const ComponentWrapper = styled.div`
+  max-width: 1140px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 24px 0;
+`;
+
+class NavigationBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedProduct: '',
+    };
+  }
+
+  onBrandSettingsClick = () => {
+    const { brandSettingsUrl } = this.props;
+    if (brandSettingsUrl) {
+      const stateObj = {
+        page: "brand settings",
+      };
+      window.history.pushState(stateObj, 'BrandSettings', window.location.replace(brandSettingsUrl));
+    }
+  };
+
+  onProfileSettingsClick = () => {
+    const { profileSettingsUrl } = this.props;
+    if (profileSettingsUrl) {
+      const stateObj = {
+        page: "profile settings",
+      };
+      window.history.pushState(stateObj, 'ProfileSettings', window.location.replace(profileSettingsUrl));
+    }
+  };
+
+  onSettingsIconClick = () => {
+    const { settingsUrl } = this.props;
+    if (settingsUrl) {
+      const stateObj = {
+        page: "settings",
+      };
+      window.history.pushState(stateObj, 'Settings', window.location.replace(settingsUrl));
+    }
+  };
+
+  onHelpIconClick = () => {
+    const { helpUrl } = this.props;
+    if (helpUrl) {
+      const stateObj = {
+        page: "help",
+      };
+      window.history.pushState(stateObj, 'Help', window.location.replace(helpUrl));
+    }
+  };
+
+  getProxyOrgList = () => {
+    const { userData } = this.props;
+    const proxyOrgList = [];
+    if (userData && userData.user && userData.user !== '') {
+      const defaultOrgName = userData.user.orgName;
+      const defaultOrgId = userData.user.orgID;
+      proxyOrgList.push({ label: defaultOrgName, value: defaultOrgId, key: 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';
+          }
+          if (id !== defaultOrgId) {
+            proxyOrgList.push({ label: name, value: id, key: id });
+          }
+        });
+      }
+    }
+    return proxyOrgList;
+  };
+
+  getProductsList = () => {
+    const { currentOrgDetails } = this.props.userData;
+    const productsList = [];
+    if (currentOrgDetails) {
+      forEach(currentOrgDetails.module_details, (module) => {
+        if (module.name.toLowerCase() !== 'masters') {
+          productsList.push({
+            value: module.name.toLowerCase(),
+            url: module.url,
+            key: module.code,
+          });
+        }
+      });
+    }
+    return productsList;
+  };
+
+  getTopbarIcons = () => [
+    {
+      iconType: 'help',
+      key: 'help',
+      onClickHandler: () => this.onHelpIconClick(),
+    },
+    {
+      iconType: 'settings',
+      key: 'settings',
+      onClickHandler: () => this.onSettingsIconClick(),
+    },
+  ];
+
+  getDropdownMenu = () => [
+    {
+      label: 'Profile Settings',
+      key: 'Profile Settings',
+      onClickHandler: () => this.onProfileSettingsClick(),
+    },
+    {
+      label: 'Brand Settings',
+      key: 'Brand Settings',
+      onClickHandler: () => this.onBrandSettingsClick(),
+    },
+    {
+      label: 'Logout',
+      key: 'Logout',
+      onClickHandler: () => this.props.logout(),
+    },
+  ];
+
+  handleTopbarMenuChange = (option) => {
+    window.location.pathname = option.link;
+  };
+
+  handleOrgChange = (orgId) => {
+    const selectedOrg = loadItem('orgID');
+    if (selectedOrg !== orgId) {
+      this.props.changeOrg(orgId);
+    }
+  };
+
+  handleProductChange = (product) => {
+    const { location } = this.props;
+    const { basename } = location;
+    this.setState({ selectedProduct: product.value }, () => {
+      if (product.url !== `${basename}/index`) {
+        window.location.pathname = product.url;
+      }
+    });
+  };
+
+  render() {
+    const {
+      topbarMenuData,
+      loggedIn,
+      intl,
+      type,
+    } = this.props;
+    const productsList = this.getProductsList();
+    const proxyOrgList = this.getProxyOrgList();
+    const selectedOrg = loadItem('orgID');
+    const dropdownMenuProps = this.getDropdownMenu();
+    const topbarIcons = this.getTopbarIcons();
+    const { selectedProduct } = this.state;
+    const customTopBarProps = {};
+    return (
+      <div>
+        {loggedIn && type !== EMBEDDED &&
+          <TopBar
+            productsList={productsList}
+            selectedProduct={
+            selectedProduct ||
+            intl.formatMessage(messages.selectedProductDefault)
+          }
+            handleProductChange={this.handleProductChange}
+            proxyOrgList={proxyOrgList}
+            selectedOrg={selectedOrg}
+            handleOrgChange={this.handleOrgChange}
+            topbarMenuData={topbarMenuData}
+            handleTopbarMenuChange={this.handleTopbarMenuChange}
+            dropdownMenuProps={dropdownMenuProps}
+            topbarIcons={topbarIcons}
+            {...customTopBarProps}
+          />
+        }
+        <CapWrapper isEmbedded={type === EMBEDDED}>
+          <ComponentWrapper>
+            {React.Children.toArray(this.props.children)}
+          </ComponentWrapper>
+        </CapWrapper>
+      </div>
+    );
+  }
+}
+
+NavigationBar.propTypes = {
+  userData: PropTypes.object,
+  topbarMenuData: PropTypes.array,
+  logout: PropTypes.func,
+  changeOrg: PropTypes.func,
+  settingsUrl: PropTypes.string,
+  children: PropTypes.node,
+  helpUrl: PropTypes.string,
+  profileSettingsUrl: PropTypes.string,
+  brandSettingsUrl: PropTypes.string,
+  loggedIn: PropTypes.bool,
+  intl: intlShape.isRequired,
+  location: PropTypes.object,
+  type: PropTypes.string,
+};
+
+export default injectIntl(NavigationBar);

package/v2Components/NavigationBar/messages.js

@@ -0,0 +1,20 @@
+/*
+ * NavigationBar Messages
+ *
+ * This contains all the text for the NavigationBar component.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export const scope = 'app.components.NavigationBar';
+
+export default defineMessages({
+  header: {
+    id: `${scope}.header`,
+    defaultMessage: 'This is the NavigationBar component!',
+  },
+  selectedProductDefault: {
+    id: `${scope}.selectedProductDefault`,
+    defaultMessage: 'Campaigns',
+  },
+});

package/v2Components/NavigationBar/tests/index.test.js

@@ -0,0 +1,11 @@
+// import React from 'react';
+// import { mount } from 'enzyme';
+// import { enzymeFind } from 'styled-components/test-utils';
+
+// import NavigationBar from '../index';
+
+describe('<NavigationBar />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true); // this component will be replaced so just this test case
+  });
+});

package/v2Components/TopBar/index.js

@@ -1,113 +1,70 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-// import styled from 'styled-components';
-
-import { Menu, Image, Dropdown, Popup } from 'semantic-ui-react';
-import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
-
-import { loadItem } from 'services/localStorageApi';
+import PropTypes from 'prop-types';
+import { CapTopBar, CapHeading } from '@capillarytech/cap-ui-library';
+import { CAP_SPACE_24 } from '@capillarytech/cap-ui-library/styled/variables';
+import { intlShape, injectIntl } from 'react-intl';
 import messages from './messages';
-import './_topbar.scss';
-
-const logo = require('./assets/images/capillary_logo.png');
-
-class TopBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: '',
-      orgList: [],
-      selectedOrg: loadItem('orgID'),
-    };
-    this.handleItemClick = this.handleItemClick.bind(this);
-    this.logout = this.logout.bind(this);
-    this.handleOrgChange = this.handleOrgChange.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.orgID !== this.props.orgID) {
-      this.props.navigateToDashboard();
-    }
-  }
-
-  handleOrgChange(data) {
-    const orgId = data.value;
-    if (this.state.selectedOrg !== orgId) {
-      this.props.changeOrg(orgId);
-      this.setState({ selectedOrg: orgId });
-    }
-  }
+const drawerPlacement = 'left';
 
-  handleItemClick(e) {
-    this.setState({ activeItem: e.target.id });
-  }
-
-  logout(e) {
-    e.preventDefault();
-    this.props.logout();
-  }
-
-  render() {
-    const proxyOrgList = this.props.proxyOrgList;
-    const defaultOrgName = this.props.orgName;
-    const selectedOrg = loadItem('orgID');
-    return (
-      <Menu className="navbar" key="navbar">
-
-        <Menu.Item key="logo" as={Link} to="/" name="logo" className="logo-container" onClick={this.handleItemClick}>
-          <Image className="logo" src={logo} alt="Capillary Technologies" />
-        </Menu.Item>
-
-        { proxyOrgList.length > 1 ?
-          <Menu.Item className="dropdownItem" key="orgSelection">
-            <FormattedMessage {...messages.dropdownMessage}>
-              {(message) => <Dropdown
-                placeholder={message}
-                className="org-list-drp-dwn"
-                defaultValue={selectedOrg}
-                search
-                options={proxyOrgList}
-                selection
-                onChange={(event, data) => this.handleOrgChange(data)}
-              />}
-            </FormattedMessage>
-          </Menu.Item> :
-          <Menu.Item key="default-org">
-            {defaultOrgName}
-          </Menu.Item>
-        }
-
-        <Menu.Menu position="right">
-          <Menu.Item key="first-name">
-            <FormattedMessage {...messages.hi} />&nbsp;{this.props.userName}!
-          </Menu.Item>
-          <Menu.Item key="user-details">
-            <Popup
-              trigger={<i className="material-icons">person</i>}
-              content={< div className="ui secondary vertical menu">
-                <a href="" className="item hide"><FormattedMessage {...messages.profile} /><i className="user icon" /></a>
-                <a href="" className="item hide"><FormattedMessage {...messages.settings} /> <i className="settings icon" /></a>
-                <a href="" className="item" onClick={this.logout}><FormattedMessage {...messages.logout} />
-                  <i className="sign out icon" /></a> </div >}
-              on="click" position="bottom right" offset={7}
-            />
-          </Menu.Item>
-        </Menu.Menu>
-      </Menu>
-
-    );
-  }
-}
+const TopBar = (props) => {
+  const {
+    productsList,
+    selectedProduct,
+    handleProductChange,
+    proxyOrgList,
+    selectedOrg,
+    handleOrgChange,
+    topbarMenuData,
+    handleTopbarMenuChange,
+    dropdownMenuProps,
+    topbarIcons,
+    intl,
+    } = props;
+  return (
+    <CapTopBar
+      drawerListProps={{
+        productsList,
+        selectedProduct,
+        handleProductChange,
+        title: (
+          <CapHeading type="h5" style={{ margin: `${CAP_SPACE_24} 0` }}>
+            {intl.formatMessage(messages.selectProduct)}
+          </CapHeading>
+      ),
+        closable: false,
+        placement: drawerPlacement,
+        width: 320,
+      }}
+      selectProps={{
+        items: proxyOrgList,
+        selectedItem: selectedOrg,
+        handleItemChange: handleOrgChange,
+        selectPlaceholder: intl.formatMessage(messages.selectOrganization),
+        showSearch: true,
+        showHeader: true,
+      }}
+      menuProps={{
+        items: topbarMenuData,
+        defaultSelectedKeys: ['creatives'],
+        onMenuItemClick: handleTopbarMenuChange,
+      }}
+      dropdownMenuProps={dropdownMenuProps}
+      topbarIcons={topbarIcons}
+  />
+  );
+};
 
 TopBar.propTypes = {
-  userName: PropTypes.string,
+  productsList: PropTypes.array,
+  selectedProduct: PropTypes.string,
+  handleProductChange: PropTypes.func,
   proxyOrgList: PropTypes.array,
-  orgName: PropTypes.string,
-  orgID: PropTypes.number,
-  navigateToDashboard: PropTypes.func,
-  changeOrg: PropTypes.func,
-  logout: PropTypes.func,
+  selectedOrg: PropTypes.number,
+  handleOrgChange: PropTypes.func,
+  topbarMenuData: PropTypes.array,
+  handleTopbarMenuChange: PropTypes.func,
+  topbarIcons: PropTypes.array,
+  dropdownMenuProps: PropTypes.array,
+  intl: intlShape.isRequired,
 };
-
-export default TopBar;
+export default injectIntl(TopBar);

package/v2Components/TopBar/messages.js

@@ -26,4 +26,12 @@ export default defineMessages({
     id: 'app.components.TopBar.brand.dropdown',
     defaultMessage: 'Hi',
   },
+  selectOrganization: {
+    id: 'app.components.TopBar.brand.selectOrganization',
+    defaultMessage: 'Select Organization',
+  },
+  selectProduct: {
+    id: 'app.components.TopBar.brand.selectProduct',
+    defaultMessage: 'Select Product',
+  },
 });

package/v2Containers/Cap/actions.js

@@ -62,3 +62,15 @@ export function setInjectedTags(injectedTags) {
   };
 }
 
+export function getTopbarMenuData() {
+  return {
+    type: types.GET_TOPBAR_MENU_DATA_REQUEST,
+  };
+}
+
+export function clearTopbarMenuData() {
+  return {
+    type: types.CLEAR_TOPBAR_MENU_DATA,
+  };
+}
+

package/v2Containers/Cap/constants.js

@@ -22,3 +22,13 @@ export const CLEAR_META_ENTITIES = 'cap/CLEAR_META_ENTITIES';
 export const HIDE_TAGS = 'cap/HIDE_TAGS';
 
 export const SET_INJECTED_TAGS = 'cap/SET_INJECTED_TAGS';
+
+export const GET_TOPBAR_MENU_DATA_REQUEST = 'creatives/cap/GET_TOPBAR_MENU_DATA_REQUEST';
+export const GET_TOPBAR_MENU_DATA_SUCCESS = 'creatives/cap/GET_TOPBAR_MENU_DATA_SUCCESS';
+export const GET_TOPBAR_MENU_DATA_FAILURE = 'creatives/cap/GET_TOPBAR_MENU_DATA_FAILURE';
+export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
+
+export const CAMPAIGN_SETTINGS_URL = '/campaign/settings/message?from="/creatives/ui/v2/"';
+export const BRAND_SETTINGS_URL = '/org/index';
+export const PROFILE_SETTINGS_URL = '/org/users/NewProfile';
+export const HELP_URL = 'https://support.capillarytech.com';