@capillarytech/creatives-library 0.1.28 → 0.1.30

package/components/NewTopBar/index.js

@@ -0,0 +1,195 @@
+import React, { PropTypes } 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 messages from './messages';
+import './_newtopbar.scss';
+import { CapPopover, CapTreeSelect } from '@capillarytech/cap-react-ui-library';
+
+const logo = require('./assets/images/capillary_logo_2.png');
+
+class NewTopBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: '',
+      orgList: [],
+      subOrgList: [],
+      selectedOrg: loadItem('orgID'),
+      selectedSubOrg: loadItem('subOrgID'),
+    };
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.logout = this.logout.bind(this);
+    this.handleOrgChange = this.handleOrgChange.bind(this);
+    this.handleSubOrgChange = this.handleSubOrgChange.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 });
+    }
+  } 
+ 
+  handleSubOrgChange(data) {
+    const subOrgId = data.value;
+    if (this.state.selectedSubOrg !== subOrgId) {
+      this.props.changeSubOrg(subOrgId);
+      this.setState({ selectedSubOrg: subOrgId });
+    }
+  }
+
+  handleItemClick(e) {
+    this.setState({ activeItem: e.target.id });
+  }
+
+  logout(e) {
+    e.preventDefault();
+    this.props.logout();
+  }
+
+  render() {
+    console.log("topbarprops", this.props);
+    const proxyOrgList = this.props.proxyOrgList;
+    const proxySubOrgList = this.props.proxySubOrgList;
+    const defaultOrgName = this.props.orgName;
+    const defaultSubOrgName = this.props.subOrgName;
+    const currentOrgName = this.props.currentOrgName;
+    const selectedOrg = loadItem('orgID');
+    const selectedSubOrg = loadItem('subOrgID');
+    const productOptions = [];
+    if (this.props.productMenuData.length > 1) {
+      _.forEach(this.props.productMenuData, (product) => {
+        productOptions.push(
+          <li className="productOption" key={product.text} value={product.text}>{product.text}</li>
+        );
+      });
+    }
+
+    const content = (
+      <div>
+      { proxyOrgList.length > 1 ?
+        <Menu.Item className="dropdownItem" key="orgSelection">
+          <div className="popoverTitle">Organization</div>
+          <FormattedMessage {...messages.dropdownMessage}>
+            {(message) => <CapTreeSelect
+              showSearch="true"
+              placeholder={message}
+              className="org-list-drp-dwn"
+              defaultValue={selectedOrg}
+              treeData={proxyOrgList}
+              onChange={(data) => this.handleOrgChange(data)}  
+            />}
+          </FormattedMessage>
+        </Menu.Item> :
+        <Menu.Item key="default-org">
+          {defaultOrgName}
+        </Menu.Item>
+      }
+      { proxySubOrgList.length > 1 ?
+        <Menu.Item className="dropdownItem" key="subOrgSelection">
+          <FormattedMessage {...messages.dropdownMessage}>
+            {(message) => <Dropdown
+              placeholder={message}
+              className="org-list-drp-dwn"
+              defaultValue={selectedSubOrg}
+              search
+              options={proxySubOrgList}
+              selection
+              onChange={(event, data) => this.handleSubOrgChange(data)}
+            />}
+          </FormattedMessage>
+        </Menu.Item> :
+        <Menu.Item key="default-subOrg">
+          {defaultSubOrgName}
+        </Menu.Item>
+      }      
+      { this.props.productMenuData.length > 1 ?
+        <div>
+          <div className="popoverTitle">Products</div>
+          <ul defaultValue={'CAMPAIGNS'}  >
+            {productOptions}
+          </ul>
+        </div>
+        :
+        <div className="module-menu-header">{this.props.productMenuData[0].text}</div>
+      }
+      
+      </div>
+    );
+    
+    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>
+        
+        <CapPopover overlayClassName="navbarPopover" placement="topLeft" content={content} trigger="click">
+          <div className="displayOrg">
+            <div className="orgDetails">
+              <div className="orgName">{currentOrgName}</div>
+              <div className="subOrgName">/ {this.props.subOrgName}</div>
+            </div>
+            <div className="moduleName">Campaigns
+            </div>
+          </div>
+        </CapPopover>
+        
+        <Menu.Menu position="right">
+          <Menu.Item className="navbarMenuOptions" key="name">
+            {this.props.firstName}&nbsp;{this.props.lastName}
+          </Menu.Item>
+          <Menu.Item className="navbarMenuOptions" key="notifications">
+            <i className="material-icons navbarIcon">notifications</i>
+          </Menu.Item>
+          <Menu.Item className="navbarMenuOptions" key="user-details">
+            <Popup
+              trigger={<i className="material-icons navbarIcon">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.Item className="navbarMenuOptions" key="help">
+            <i className="material-icons navbarIcon">help</i>
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+
+    );
+  }
+}
+
+NewTopBar.propTypes = {
+  userName: PropTypes.string,
+  firstName: PropTypes.string,
+  lastName: PropTypes.string,
+  proxyOrgList: PropTypes.array,
+  proxySubOrgList: PropTypes.array,
+  orgName: PropTypes.string,
+  currentOrgName: PropTypes.string,
+  subOrgName: PropTypes.string,
+  orgID: PropTypes.number,
+  subOrgID: PropTypes.number,
+  navigateToDashboard: PropTypes.func,
+  changeOrg: PropTypes.func,
+  changeSubOrg: PropTypes.func,
+  logout: PropTypes.func,
+  productMenuData: PropTypes.array.isRequired,
+};
+
+export default NewTopBar;

package/components/NewTopBar/messages.js

@@ -0,0 +1,29 @@
+/*
+ * TopBar Messages
+ *
+ * This contains all the text for the TopBar component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  profile: {
+    id: 'reon.components.TopBar.profile',
+    defaultMessage: 'Profile',
+  },
+  settings: {
+    id: 'reon.components.TopBar.settings',
+    defaultMessage: 'Settings',
+  },
+  logout: {
+    id: 'reon.components.TopBar.logout',
+    defaultMessage: 'Logout',
+  },
+  dropdownMessage: {
+    id: 'reon.components.TopBar.brand.dropdown',
+    defaultMessage: 'Select Brand',
+  },
+  hi: {
+    id: 'app.components.TopBar.brand.dropdown',
+    defaultMessage: 'Hi',
+  },
+});

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

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

package/components/PreviewSideBar/index.js

@@ -73,7 +73,7 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
       if (isMsgReady) {
         content = {
           bodyText: this.props.templateData.versions.base.content.messages[0].text ? this.props.templateData.versions.base.content.messages[0].text : '',
-          bodyImage: this.props.templateData.versions.base.content.messages[0].originalContentUrl ? this.props.templateData.versions.base.content.messages[0].originalContentUrl : '',
+          bodyImage: this.props.templateData.versions.base.content.messages[0].previewImageUrl ? this.props.templateData.versions.base.content.messages[0].previewImageUrl : '',
         };
       }
     } else {
@@ -110,6 +110,7 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
                 channel={this.props.channel}
                 location={this.props.location}
                 charCounterEnabled={this.props.channel.toLowerCase() === 'sms'}
+                unicodeEnabled={this.props.channel.toLowerCase() === 'sms'}
               >
               </TemplatePreview>
             }

package/components/TemplatePreview/_templatePreview.scss

@@ -8,6 +8,9 @@
 
   .preview-image {
       width: 51%;
+      &.sms {
+        width: 45%;
+      }
   }
 
   .msgContainer {
@@ -16,7 +19,6 @@
     left: 28.8%;
     width: 42%;
     height: 336px;
-    overflow: auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -27,26 +29,65 @@
       width: 25px;
       position: absolute;
     }
+    &.sms{
+      height: 290px;
+      width: 40%;
+      .sms-icon{
+        width: 20px;
+        left: 14px;
+      }
+    }
 
     .message-pop{
-      padding: 4px;
-      background: #3F51B5;
-      position: absolute;
-      // width: initial;
-      overflow: auto;
-      top: 0;
-      left: 17%;
-      white-space: pre-wrap;
-      word-break: break-word;
-      border-radius: 4px;
-      max-height: 100%;
-      color: #FFFFFF;
-      width: 70%;
-      min-height: 26px;
-      line-height: 14px;
-      padding: 8px;
-      font-size: 10px;
-      font-family: 'open-sans';
+      .unicode-disabled{
+        font-size: 16px;
+      }
+      &.sms {
+        max-height: 100%;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 17%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 14px;
+        padding: 0 8px 8px 8px;
+        font-size: 10px;
+        width: 80%;
+        font-family: 'open-sans';
+        .message-pop-item{
+          padding: 4px;
+          background: #3F51B5;
+          color: #FFFFFF;
+          margin-top: 8px;
+          border-radius: 4px;
+          min-height: 26px;
+          &:first-child{
+            margin-top: 0;
+          }
+        }
+      }
+      &:not(.sms){
+        padding: 4px;
+        background: #3F51B5;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 17%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        border-radius: 4px;
+        max-height: 100%;
+        color: #FFFFFF;
+        width: 70%;
+        min-height: 26px;
+        line-height: 14px;
+        padding: 8px;
+        font-size: 10px;
+        font-family: 'open-sans';
+      }
     }
   }
   .android-push-message-Container, .iphone-push-message-Container{
@@ -222,41 +263,81 @@
     padding: 0 10px;
     width: initial;
 
+    .preview-image {
+      &.sms{
+        width: 45%;
+      }
+    }
 
 
     .msgContainer {
       position: absolute;
       top: 14%;
-      left: 28.8%;
+      left: 29%;
       width: 42%;
-      height: 255px;
-      overflow: auto;
+      height: 275px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
 
       .sms-icon{
-        top: 15%;
-        left: 7%;
-        width: 8%;
+        top: 6%;
+        left: 2%;
+        width: 12%;
         position: absolute;
       }
 
+      &.sms{
+        height: 290px;
+        width: 40%;
+        top: 16%;
+        .sms-icon{
+          left: 7%;
+        }
+      }
       .message-pop{
-        padding: 8px 8px;
-        background: #3F51B5;
-        position: absolute;
-        width: 65%;
-        top: 15%;
-        left: 19%;
-        word-break: break-all;
-        border-radius: 6px;
-        max-height: 100%;
-        overflow: auto;
-        color: #FFFFFF;
-        line-height: 14px;
-        font-family: "open-sans";
-        font-size: 10px;
+        &.sms {
+          max-height: 100%;
+          position: absolute;
+          // width: initial;
+          overflow: auto;
+          top: 6%;
+          left: 17%;
+          width: 80%;
+          white-space: pre-wrap;
+          word-break: break-word;
+          line-height: 14px;
+          padding: 0 8px 8px 8px;
+          font-size: 10px;
+          font-family: 'open-sans';
+          .message-pop-item{
+            padding: 8px;
+            background: #3F51B5;
+            color: #FFFFFF;
+            margin-top: 8px;
+            border-radius: 4px;
+            min-height: 26px;
+            &:first-child{
+              margin-top: 0;
+            }
+          }
+        }
+        &:not(.sms){
+          padding: 8px 8px;
+          background: #3F51B5;
+          position: absolute;
+          width: 65%;
+          top: 15%;
+          left: 19%;
+          word-break: break-all;
+          border-radius: 6px;
+          max-height: 100%;
+          overflow: auto;
+          color: #FFFFFF;
+          line-height: 14px;
+          font-family: "open-sans";
+          font-size: 10px;
+        }
       }
     }
   }

package/components/TemplatePreview/index.js

@@ -8,9 +8,10 @@ import React, {PropTypes} from 'react';
 import _ from 'lodash';
 import { injectIntl, intlShape} from 'react-intl';
 // import styled from 'styled-components';
-
+import {CapColumn} from '@capillarytech/cap-react-ui-library'
 import './_templatePreview.scss';
 import * as charCount from '../../utils/smsCharCount';
+import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
 const wechatBody = require('./assets/images/WECHAT_5x.png');
@@ -21,14 +22,18 @@ const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     console.log('preview props', this.props);
-    const content = this.props.content;
+    let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const channel = this.props.channel;
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
-      smsDetails = charCount.updateCharCount(this.props.content);
+      smsDetails = updateCharCount(this.props.content, this.props.unicodeEnabled);
+      content = [];
+      for (let i = 0, limit = 0; i < smsDetails.parts; i += 1, limit += smsDetails.chars_sms) {
+        content.push(smsDetails.char_list.slice(limit, smsDetails.chars_sms * (i + 1)));
+      }
       if (document.getElementById("msg_count")) {
-        document.getElementById("msg_count").val = smsDetails.msgCount;
+        document.getElementById("msg_count").val = smsDetails.parts;
       }
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
       //console.log('message text', smsText);
@@ -47,7 +52,22 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     }
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-        { channel && (channel.toLowerCase() === 'sms' || channel.toLowerCase() === 'wechat') ?
+        { channel && channel.toLowerCase() === 'sms'&&
+          <div className="shell align-center" id="sms-preview">
+            <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+            <div className="msgContainer sms">
+              <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+              <div className={"message-pop sms"}>
+                {content && content.length && content.map((msg) =>
+                  <CapColumn className="message-pop-item align-left" style={{ background:  '#3F51B5', color:  '#ffffff'}}>
+                    {msg}
+                  </CapColumn>)
+                }
+              </div>
+            </div>
+          </div>
+        }
+        {channel && channel.toLowerCase() === 'wechat' ?
           ( <div className="shell align-center" id="sms-preview">
             <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>
             <div className="msgContainer">
@@ -123,7 +143,16 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         }
         {
           this.props.charCounterEnabled && !_.isEmpty(smsDetails) ?
-            <p style={{margin: '16px 0'}} className="preview-info">{`${smsDetails.msgCount} ${this.props.intl.formatMessage(messages.sms)}(${smsDetails.totalLength} ${this.props.intl.formatMessage(messages.characters)})`}</p> : ''
+            <div>
+              <p className="preview-info">
+                {smsDetails.unicode &&
+                <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.smsFormatType)}`}</div>
+                }
+                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${this.props.intl.formatMessage(messages.sms)}: ${smsDetails.parts}`}</div>
+                <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.charactersPerSms)}: ${smsDetails.chars_used}`}</div>
+              </p>
+            </div>
+            : ''
         }
       </div>
     );
@@ -139,6 +168,7 @@ TemplatePreview.propTypes = {
   location: PropTypes.object,
   intl: intlShape.isRequired,
   device: PropTypes.string,
+  unicodeEnabled: PropTypes.bool,
 };
 
 export default (injectIntl(TemplatePreview));

package/components/TemplatePreview/messages.js

@@ -14,8 +14,16 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.sms',
     defaultMessage: "SMS",
   },
-  characters: {
-    id: 'app.components.TemplatePreview.characters',
-    defaultMessage: "Characters",
+  charactersPerSms: {
+    id: 'app.components.TemplatePreview.charactersPerSms',
+    defaultMessage: "SMS Chars",
+  },
+  charactersTotal: {
+    id: 'app.components.TemplatePreview.charactersTotal',
+    defaultMessage: "SMS Char total",
+  },
+  smsFormatType: {
+    id: 'app.components.TemplatePreview.smsFormatType',
+    defaultMessage: 'Message has unicode characters',
   },
 });

package/containers/Cap/constants.js

@@ -19,3 +19,4 @@ 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';
 export const CLEAR_META_ENTITIES = 'cap/CLEAR_META_ENTITIES';
+export const HIDE_TAGS = 'cap/HIDE_TAGS';

package/containers/Cap/index.js

@@ -13,6 +13,7 @@ import { injectIntl, intlShape } from 'react-intl';
 import TopBar from '../../components/TopBar';
 // import 'moment/locale/en-us';
 import Sidebar from '../../components/Sidebar';
+import isEqual from 'lodash/isEqual';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
@@ -20,6 +21,7 @@ import * as appActions from '../App/actions';
 import config from '../../config/app';
 import Toastr from '../../components/Toastr';
 import messages from './messsages';
+const gtm = window.dataLayer || [];
 
 const CapWrapper = styled.div`
   margin: 0 auto;
@@ -29,7 +31,6 @@ const CapWrapper = styled.div`
   flex-direction: column;
 `;
 
-// const gtm = window.dataLayer || [];
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {
@@ -46,9 +47,13 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   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.user) {
+      const userGtmData = this.getUserGtmData(this.props);
+      gtm.push(userGtmData);
+    }
+    if (this.props.Global.orgID !== undefined) {
+      gtm.push({orgId: this.props.Global.orgID});
+    }
     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});
@@ -88,6 +93,18 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     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);
+      gtm.push(userGtmData);
+    }
+
+    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);
+        gtm.push(userGtmData);
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -129,6 +146,22 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   //   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',

package/containers/Cap/reducer.js

@@ -95,6 +95,11 @@ function capReducer(state = fromJS(initialState), action) {
         layouts: [],
         tags: [],
       });
+    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);
     default:
       return state;
   }

package/containers/Cap/selectors.js

@@ -1,5 +1,6 @@
 // makeSelectLocationState expects a plain JS object for the routing state
 import { createSelector } from 'reselect';
+import Immutable from 'immutable';
 const selectCapDomain = (state) => state.get('cap');
 
 const makeSelectAuthenticated = () => createSelector(